ワイヤーフレームとは？ホームページの画面設計と作り方

サイト制作の準備を表したAI生成イメージです。実際の社内や顧客の写真ではありません。

ワイヤーフレームは、ホームページの各画面に何を載せ、どこへ置き、ボタンを押したらどう動くかを共有するための設計図です。最初は紙に枠と短い言葉を描くところから始められます。この記事では、制作を依頼する中小企業の担当者向けに、1ページを組み立てる手順と、PC・スマホの配置、制作担当へ渡す注釈を架空の会議室ページで説明します。

ワイヤーフレームは、ページの情報と配置を共有する図

ワイヤーフレームでは、見出し、説明文、写真、メニュー、ボタンなどを、枠や文字で仮に並べます。「サービスを詳しく見せたい」という言葉だけの相談を、「冒頭に対象を示し、その下に写真と条件を置く」という画面の相談へ変えるための資料です。きれいな完成画像を作ることが最初の目的ではありません。

Figmaの公式解説では、ワイヤーフレームを、画面のレイアウトやナビゲーション、操作する要素などを示し、チームで要件をそろえるための基本的な設計図として説明しています。初期の大まかな図から、内容や注釈を加えた図まで、検討する段階によって詳しさは変わります。

出典：What is Wireframing? The Complete Guide [Free Checklist]| Figma

これらを必ず別々のファイルにして、同じ順番で作るとは限りません。既存の画面や共通デザインを使う改修なら、その画面に変更箇所を書き込む方が伝わる場合もあります。最初に「今回、配置を相談するのか、見た目を確認するのか、操作を試すのか」を決め、必要な資料を制作担当と選びましょう。

ワイヤーフレームがあると、必要な情報の不足や認識の違いを、実装前に話し合えます。ただし、図ができただけで制作費が必ず下がる、検索順位や問い合わせが上がるというものではありません。事実に合う原稿や写真をそろえ、実際の画面と動作を確認する工程も必要です。

描く前に、対象ページと載せる内容を決める

最初に描く画面を一つ選びます。すべてのページを同時に細かく作るより、サービス詳細や問い合わせなど、今回決めたいことが多い画面から始めると検討しやすくなります。同じ型で複数の商品や部屋を紹介する場合は代表の1ページを選び、説明が長いものや写真が少ないものなど、違いの大きい例も後で確かめます。

この記事では、架空の「会議室A」の詳細ページを題材にします。読者は法人研修の担当者、ページの役割は「部屋が用途に合うかを確認し、利用条件を読んで空き状況を問い合わせること」です。実在する施設の紹介や制作実績ではありません。数値や条件は、実際の施設で確認して記入してください。

載せる情報は、ページを見た人の疑問から集めます。会議室なら「何に使えるか」「どのような室内か」「必要な設備はあるか」「利用条件は何か」「問い合わせには何を伝えるか」です。各疑問に答える説明文や写真があるかを確認し、ないものには素材待ち・事実確認待ちなどの状態を付けます。

この時点で正式原稿が完成していなくても進められます。ただし、空の長方形に「テキスト」とだけ書くと、内容も長さも分かりません。「用途の説明を短い段落で置く」「設備名と利用条件を一覧にする」のように、枠へ入る情報を具体化します。仮の文章には仮原稿、未確認の条件には確認待ちと明記し、そのまま公開してよい文章と区別します。

ページ全体の役割が決まらない場合は、先にサイト全体の構成を整理します。会場の一覧と部屋の詳細、共通の利用案内が重なっているなら、どこで何を説明するかを決めてから描きます。関連記事の「サイトマップの作り方」では、このページ分けを扱っています。ここから先は、選んだ1ページの中を具体化する作業です。

枠・見出し・写真の中身を入れて、1ページを組み立てる

紙や普段使う作図・スライドの道具で、縦長の外枠を描きます。上部にはサイト名とメニュー、その下にページの内容、最後に補足のリンクを置くなど、大きな区画から考えます。枠の大きさは初期案では目安で構いません。余白や色の細部より、読む人が内容を理解し、次の行動を選べるかを先に確認します。

会議室Aの例では、冒頭に部屋名と用途、次に写真と基本情報、設備、利用条件への案内、問い合わせ入口を置く案にします。紙なら、それぞれの枠を上から並べ、左にA〜Fの記号を添えます。A〜Fはこの教材内の注釈用IDであり、実際のページに表示する必要はありません。

たとえばBの仮文は「法人研修や打ち合わせを想定した会議室です。利用目的に合う設備と条件をご確認ください」と置けます。これは説明用の仮原稿であり、実際の施設へ使うときは対象用途を運営担当が確認します。「広々とした最高の空間」などの抽象的な表現だけで、部屋の判断材料を置き換えないようにします。

写真枠にも「画像」とだけ書かず、何を見せる写真かを記入します。この例なら「入口側から室内全体が分かる写真」「設備の位置が分かる写真」などです。掲載できる素材があるか、写真では伝わらない条件を文字で補う必要があるかが分かります。横長・縦長の希望がある場合も、撮影済み素材で対応できるかを確かめます。

見出しは「特徴1」「詳細」のような仮の番号だけより、内容を予想できる言葉にします。W3Cの見出し・ラベルの解説は、対象の話題や目的を表すことを求めています。この例で「設備と利用条件」と書くのは、その枠で何を確認できるかを伝えるための編集案です。見出しを変えるだけでアクセシビリティ全体を満たすわけではありません。

出典：Understanding Success Criterion 2.4.6: Headings and Labels | WAI | W3C

PCとスマホで、並び方と情報の残し方を確認する

PC用の案を小さく縮めただけでは、スマホで読めるかは分かりません。同じA〜Fを使って狭い画面の案も描き、横並びの区画が縦に並ぶときの順番を決めます。端末ごとに情報を一から作り直すのではなく、同じ判断材料を、どの配置なら無理なく確認できるかを検討します。

ここでの左右や順番は、この教材の案です。たとえば利用条件を先に確かめたい読者が多いなら、Cの基本情報を写真より前にする案も検討できます。情報を動かした理由を注釈へ残し、PCとスマホで矛盾する説明や条件が生まれていないか確認します。

W3Cの「意味のある順序」は、提示する順番が意味に影響するときに、意味の通る読み順をプログラムから判別できることを扱っています。見た目の位置だけでなく、実装時の読み順も必要です。設備名を全部読んだ後に条件だけが続くと対応が分からなくなるような場合は、設備と条件を組にする意図を制作担当へ伝えます。

出典：Understanding Success Criterion 1.3.2: Meaningful Sequence | WAI | W3C

W3Cのリフローの解説は、狭い表示や拡大表示でも情報・機能を失わず、原則として縦横両方向のスクロールを要求しないことを扱っています。意味を保つために二次元の配置が必要な表や図などには例外があります。画面案では、文章が折り返せるか、ボタンや条件が隠れないかを検討し、適合の確認は実装後の画面でも行います。

出典：Understanding Success Criterion 1.4.10: Reflow | WAI | W3C

PCとスマホの2枚があれば確認終了という意味でもありません。中間の画面幅、文字が長い場合、文字を拡大した場合も実際の画面で確かめます。初期案では「設備名が長くなっても条件が対応する」「メニューを開いても本文へ戻れる」など、後のテストで確認する用事を書き残しておきましょう。

ボタンの動きと未確定事項を、注釈で伝える

枠と文字で表現できるのは、ある時点の画面です。メニューを開く、写真を切り替える、問い合わせ画面へ進むといった動きは、静止した図だけでは伝わりません。図の記号と対応する注釈を付け、押すもの、起きる動き、表示する内容を短く書きます。必要な場合は、開いた後や移動先の画面も用意します。

この例では、問い合わせは予約の確定ではないため、ボタンを「予約する」とはしていません。空き状況の自動表示や、部屋名をフォームへ引き継ぐ仕組みも、枠に書くだけで実装できたことにはなりません。必要な機能なら要望として示し、制作範囲・費用・確認方法を相談して決めます。

また、文章を変えられることと、区画を自由に追加できることは別の機能です。運営担当が設備名や条件だけを変更するのか、写真の枚数や配置まで変えたいのかを分けます。「更新できるように」の一言で済ませず、どの情報を誰が直す想定なのかを示すと、管理画面の検討に使えます。

未確定事項は図の外へ追い出して忘れるのではなく、対象の記号と結び付けます。仮決定、素材待ち、事実確認待ち、仕様相談などの状態をそろえ、誰がいつまでに確認するかを実際の担当者と決めます。未回答は了承という扱いにせず、進めてよい範囲と止める範囲を共有します。

関係者と確認して、デザイン・実装へ引き継ぐ

確認を依頼するときは「これでどうですか」だけでなく、今回見てほしい点を添えます。運営担当には用途や条件の正確さ、受付担当には問い合わせ前後の案内、制作担当には配置と動作の実現方法を確認してもらいます。色や装飾を決める前の資料なら、そのことも最初に伝えます。

会議室の例なら、「法人研修に使えるか調べ、必要な設備と条件を確認して、空き状況を問い合わせる」という用事を一度たどってもらいます。説明者が横から補足し続けなくても、Bで対象を把握し、C・Dで判断し、Eへ進めるかを確認します。読み飛ばされた条件や意味が曖昧なボタンがあれば、位置や言葉を見直す候補です。

• 画面の内容：必要な説明・写真・条件が入り、仮原稿や未確認箇所を識別できるか。
• 配置と動作：PC・スマホで情報の組が崩れず、押した先や開閉の意図を説明できるか。
• 制作の範囲：作る画面、必要な機能、素材を用意する役割、確認待ちが共有されているか。
• 引き継ぐ版：対象ページ名、更新日、版の番号、決めたことと残る課題が分かるか。

修正依頼は「分かりやすくして」より、「Cの写真だけでは利用条件を見落としそうなので、基本情報の位置を上げる案を比較したい」のように、場所・困ること・確認したい案を結び付けます。必ずこの配置が正解と決めつけず、読者の用事で比べられる形にしましょう。

渡すメモは「会議室Aの詳細／第2案／B〜Eに載せる情報の項目と順番を確認済み。Cの写真と定員は確認待ち。Eは予約確定ではなく問い合わせ。部屋名の引継ぎは未確定。次は担当者が素材と仕様を確認し、デザイン案で文字量と配置を確認する」のように書けます。これは架空の記入例なので、実際の案件では確認した日付・担当・内容へ置き換えます。

合意した図は保存し、後から要望が変わったときに差分を追えるようにします。ワイヤーフレームの合意は、写真や文章、機能のすべてが完成したという意味ではありません。デザインで見た目を整え、実装後に読みやすさ・操作・リンク・フォームなどを確認して、初めて公開できる状態かを判断します。

よくあるご質問