ワイヤーフレームの作り方｜情報整理からスマホ版・レビューまで

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

ワイヤーフレームは、Webページに何を載せ、どの順番で読んでもらい、次にどんな行動を取れるようにするかを整理する設計図です。最初から美しい配色や写真をそろえる必要はありません。四角と文字で必要な情報を置き、PCとスマートフォンで内容を追えるかを確かめることから始められます。

ただし、四角い箱を並べただけでは、何を決めたのか分からない資料になります。見出し、重要な説明、ボタンを押した後の行き先、入力エラーや完了時の状態まで示すと、デザインや実装へ進む前に相談しやすくなります。この記事では、目的の整理から情報の棚卸し、画面案、レビュー、引き継ぎまでを一つの流れで説明します。

練習題材は「架空のコワーキングスペースの見学予約ページ」です。料金、運営条件、利用者像、入力項目などは説明用の仮定で、実在する施設や調査結果を表していません。図版も説明用の生成イメージです。Figmaなどの特定ツールだけに依存しない考え方を中心にし、2026年10月3日に確認した公式資料を必要な箇所で紹介します。

ワイヤーフレームを作る前に｜目的・範囲・決めることをそろえる

完成デザインではなく、情報と動きの合意に使う

ワイヤーフレームで先に確かめたいのは、ページの役割、情報の優先順位、操作の入口です。写真の色味や角丸の細かさを決める前に、「利用者はここで何を理解し、どこへ進める必要があるか」を見ます。見た目を磨いてから情報不足に気づくと、文章、配置、画像をまとめてやり直すことになりやすいためです。

デザインカンプは、配色や書体など完成形に近い見た目を具体化する資料として使われます。プロトタイプは、画面の遷移や操作を試すために使われます。実際の現場では呼び方や範囲が重なることもあるので、名前だけで認識がそろったと思わないでください。「今回は情報の順序と予約までの流れを決め、写真と色は次に検討する」と、今回の確認対象を明文化します。

Figmaのワイヤーフレームの解説でも、画面構成や操作要素を整理し、初期段階で方向を合わせる役割が紹介されています。白黒で作るのは絶対のルールというより、いま決めたいことへ注意を向けるための方法です。すでに決まったデザイン部品がある案件では、それを使う方が話が早い場合もあります。

誰が、何を知り、何をするページかを一文にする

練習題材では、「近隣で作業場所を探している人が、設備・利用条件・見学方法を確認し、見学希望を送れるページ」と定義します。これなら、必要な情報を考える基準ができます。「おしゃれな施設サイトを作る」という目標だけでは、どの情報を先に置くかを判断しにくくなります。利用者の属性より、訪問時に抱えている疑問と次の行動へ注目しましょう。

目的が複数ある場合は、今回の主な行動を一つ決めます。見学予約、問い合わせ、会員申込、資料請求を同じ強さで並べると、初めての人が何を選ぶべきか迷うことがあります。主目的を一つにしても、他の選択肢を消す必要はありません。まだ見学日を決められない人の問い合わせなど、補助的な行動として役割を分けます。

誰が使うかは、根拠のある情報と仮説を区別します。実際の問い合わせや調査があれば参照し、ない場合は「在宅勤務場所を比較している人を仮定」と書きます。架空の人物に細かな性格や収入を与えただけで、利用者理解ができたとは言えません。仮説が設計へどう影響するかを示し、後で確かめる対象にしてください。

※表は横にスクロールできます。

一ページの中と、ページの外を分けて考える

一ページを作る場合も、その前後の流れが必要です。検索結果から来た人、別ページの見学ボタンから来た人、紹介リンクから来た人では、すでに知っていることが違います。入口によって必要な説明量が変わるため、どこから来る想定かをメモします。入口を限定できないなら、初めて見る人でもページの内容が分かる見出しを用意します。

出口は、フォーム送信後に何が起きるかまで考えます。練習例では、見学希望を送っただけで日時が確定するのか、担当者からの返答を待つのかを決める必要があります。この違いは、ボタンの文言と完了画面の説明に直結します。仕組みが未確定なら、見た目だけで予約成立を表現せず、「運営確認待ち」と記録しておきましょう。

Figmaのユーザーフローの解説は、入口、目的までの手順、分岐、終点を整理する参考になります。ワイヤーフレームは一画面の中身、フローは前後のつながりを見るために使うと役割が分かりやすくなります。すべてのクリックを描く必要はありませんが、利用者が判断を迫られる箇所と、行き止まりになりそうな箇所は残してください。

道具より、変更・共有・記録がしやすい方法を選ぶ

最初の案は紙やホワイトボードでも作れます。情報の順序を素早く試す段階なら、付箋を入れ替えるだけでも十分です。共同で確認するなら、デジタルのデザインツールやホワイトボードツールが便利な場合があります。特定のツールを使ったこと自体を成果にせず、判断と修正を残せるかを基準に選びましょう。

テンプレートは、ボタンや画像枠を一から描く手間を減らせます。ただし、テンプレートにあるからという理由で、実際には存在しない口コミや受賞歴、数字の実績を載せないでください。見た目を埋めるための仮情報が、そのまま事実として扱われる危険があります。仮の枠は「実績素材は未確認」のように注記し、提供されるまで確定しない状態にします。

ファイル名やページ名には、対象と版が分かる情報を入れます。「見学ページ_構成案_v1」のような名前なら、完成デザインや古い案との区別がしやすくなります。レビュー前には、どの案を見てほしいかを一つに絞り、比較用の案は明確に分けます。案が増えるほど、最新版の場所と決定事項を示す工夫が必要です。

情報を棚卸しする｜利用者の疑問から内容と順序を決める

載せたい情報ではなく、知りたいことを書き出す

運営側が載せたい内容だけを集めると、沿革や思いの説明が長くなり、利用者が判断したい条件が後回しになることがあります。まず利用者の疑問を短い問いで書きます。練習例なら「どこにあるか」「静かに作業できるか」「通話できる場所はあるか」「見学には何が必要か」などです。その問いへ答える内容を対応させます。

一つの問いに対して、必要な情報が複数あることもあります。「自分に合う作業場所か」を判断するには、設備、利用時間、席の種類、通話ルールなどが関係します。一枚の雰囲気写真だけで答えたつもりにならないようにしましょう。逆に、同じ答えを複数の見出しで繰り返しているなら、まとめた方が読みやすい場合があります。

問いは仮説として作ってよいものの、重要な条件は運営側へ確認します。「見学は無料」「当日申込できる」「全席で通話可能」などを、便利そうだからと創作しないでください。ワイヤーフレームの段階でも、事実と仮定の区別は必要です。未確認のままにする箇所には、確認する相手と期限を記録すると、後工程へ曖昧さを持ち込みにくくなります。

内容ごとに、出典・担当・確定状態を付ける

情報の棚卸しには、内容、用途、情報源、担当者、確定状態を並べた表が役立ちます。たとえばアクセス情報は施設担当、写真は広報担当、予約条件は運営担当というように、確認先を分けます。誰かが用意するはずと思っている素材ほど、締め切り直前まで不足しやすいので、担当を明確にしておきましょう。

文章は、完成原稿、仮原稿、ダミー文字を区別します。見出しや重要な条件は、できるだけ意味のある仮原稿を入れて検討します。一方、長文の細かな言い回しは後で整えてもよい場合があります。すべてを「後で入れる」にすると、必要な面積や読み順を判断できません。何をこの段階で確かめるかに応じて、原稿の精度を選びます。

画像についても、単なる四角ではなく用途を書きます。「施設写真」より「入口から受付が分かる写真」「通話席と静かな席の違いが分かる写真」の方が、撮影や素材選定へつながります。装飾のための写真と、利用者の判断材料になる写真を分ければ、素材がない場合に何で補うべきかを考えやすくなります。

※表は横にスクロールできます。

情報の順序を二案作り、判断基準で比べる

一つ目の案は、概要、設備、利用条件、アクセス、見学の流れ、フォームという順にしてみます。二つ目は、概要のすぐ後へ見学方法と主要条件を置く案にします。どちらも架空の練習案で、万能の正解ではありません。初めて施設を知る人と、条件を比較済みで見学したい人のどちらを主に想定するかで、適切な順序が変わります。

比較するときは「こちらの方が好き」だけで決めず、利用者の問いにどこで答えているかを見ます。見学前に費用や所要時間を知りたいのに、フォームの後にしか説明がないなら順序を見直す理由になります。重要な条件を早く示す一方で、詳しい説明をすべて冒頭に詰め込む必要はありません。要点と詳細を分け、必要な人がたどれるようにします。

二案を作る目的は、作業量を増やすことではなく、順序の理由を明確にすることです。配色や写真まで変えると、情報順序の違いを比較しにくくなります。内容と部品をそろえ、並び方だけを変えると判断しやすくなります。採用しなかった案についても、どの条件に合わなかったかを短く残せば、後から同じ議論を繰り返さずに済みます。

見出しとボタンは、意味のある言葉を入れる

「ここにタイトル」「ボタン」といった文字だけでは、ページを読んだ人が何を理解するかを確認できません。見出しにはその区画で答える内容を入れ、ボタンには押した後の行動を表す言葉を使います。練習例なら「見学の流れを見る」「見学希望を送る」のように、ページ内移動と送信を区別します。

曖昧な文言は操作の予想を難しくします。「詳しくはこちら」が複数並ぶなら、何の詳細へ進むかを明示できないか考えましょう。また、「予約する」という言葉が即時確定を連想させるなら、実際の運用と合っているかを確認します。ボタンの短い一言は、見た目以上に仕組みの説明を担っています。

重要な説明を、後で小さな注記に押し込む前提で進めないことも大切です。予約の確定方法、キャンセル連絡、返信までの目安などは、必要な場面で読める位置を確保します。具体的な条件が未確認なら、事実を作らず注記の場所と確認事項を示します。原稿が入った後に初めてスペース不足へ気づくことを避けましょう。

PC版とスマホ版を作る｜箱・文字・行動の順序を設計する

最初は大きな領域だけを置く

情報の順番が決まったら、ヘッダー、概要、内容の区画、行動ボタン、フッターといった大きな領域を置きます。ここでは細かな装飾を作り込まず、各領域に見出しと役割を書きます。ページ全体を少し離れて見たとき、何のページで、何を順に説明するのかが分かるかを確認してください。

画像枠には用途、文章枠にはおおよその内容量を入れます。説明が三行程度なのか、条件を列挙する十行程度なのかで、ページの長さは変わります。すべてを同じ高さの箱にすると、実際の原稿が入ったときの見え方を想像しにくくなります。初期段階でも、重要な部分は現実に近い量で試しましょう。

練習では、概要に短い説明と見学への入口、設備に三つの要点、利用条件に一覧、アクセスに場所の説明、最後にフォームを置きます。ただし、ページを一枚にまとめること自体が目的ではありません。説明が多すぎる場合は、詳細ページへ分ける案も比較します。利用者が必要な情報を追えるかを基準に、画面の単位を決めます。

スマホはPC版を小さくするのではなく、順序を組み直す

PCで左右に並べた情報は、スマートフォンでは縦に並べることが多くなります。そのとき、左列を全部並べてから右列へ進めるのか、関連する内容を一組ずつ並べるのかで理解しやすさが変わります。単純な縮小や機械的な積み替えではなく、意味のつながりを保つ順序にします。

たとえば設備名と説明がPCで左右に分かれているなら、スマホでは設備名、説明、次の設備名、説明というまとまりが自然な場合があります。先に設備名をすべて並べ、後から説明をまとめると、どれに対応する文章か分かりにくくなります。関連する見出し、写真、説明を一つの単位として考えると、並べ替えの理由を持てます。

重要な条件を「スマホでは長いから消す」と判断する前に、短く要約する、詳細を開ける、別ページで読めるようにする方法を検討します。PCで必要な情報がスマホ利用者には不要とは限りません。端末の違いで内容を変える場合は、なぜ変えるかと、代わりにどう確認できるかを示してください。

※表は横にスクロールできます。

ナビゲーションと行動ボタンの役割を分ける

ナビゲーションは知りたい情報へ移動するための入口で、行動ボタンは問い合わせや申込などの作業へ進む入口です。両者を同じ見た目で大量に並べると、何を優先してよいか迷いやすくなります。ワイヤーフレーム段階でも、主要な行動と補助リンクの違いが分かるように、形や位置のルールを決めます。

長いページでは、内容を理解した後に行動できる位置へボタンを置きます。冒頭に一つだけ置いて、読んだ後に戻らなければならない構成がよいかを検討してください。ただし、各段落の後へ同じボタンを繰り返すと読みにくくなることもあります。利用者が判断できる区切りに置くという考え方で、必要な数と場所を選びましょう。

スマホで固定ボタンを使う案なら、本文、フォームの入力欄、画面内キーボードなどとの重なりを考える必要があります。ワイヤーに固定と書くだけで完成にせず、何を覆う可能性があるかを注記します。実装後には実端末で確認が必要です。便利そうなパターンを選ぶ前に、そのページの内容や操作と両立するかを確かめてください。

読む順序と操作順序を注記する

見た目上の配置と、実際に読む・操作する順序が一致するとは限りません。PCで左右を入れ替える案を作る場合でも、内容の論理的な順序を記録しておくと実装時の相談に役立ちます。見出しから説明、必要なら詳細、最後に行動へ進む流れが、スマホでも破綻していないかを見ます。

ワイヤーフレームには、何がリンクで、何が単なる見出しや画像かを示します。見た目がボタンに似た四角が、実は操作できない飾りという状態はレビューで誤解を生みます。リンク先が未定なら「詳細ページへ移動予定・URL未確定」のように、決まっている部分と残る部分を分けて記載します。

キーボード操作や読み上げなどの確認は、静止画だけでは完了できません。ただし、入力欄の名前、見出しの階層、エラーの説明位置、操作順序といった設計上の検討はこの段階からできます。必要な注記を実装担当へ渡し、動く画面になった後の確認項目として引き継いでください。ワイヤーが整ったことを、アクセシビリティー検証済みと扱わないようにします。

フォーム・エラー・空状態まで設計｜通常画面以外も作る

入力項目は、必要性と使い道を確認してから置く

見学希望フォームなら、希望日時、連絡先、必要な補足などが候補になります。ただし、項目が多いほど詳しい情報を得られるという理由だけで追加しないでください。何のために使い、誰が確認し、必須である必要があるかを運営側と整理します。練習用の画面へ本物の個人情報を入れる必要もありません。

入力欄には、何を入れるか分かるラベルを付けます。W3Cのフォームのラベルに関する解説では、入力コントロールの目的を示し、適切に関連付けることが説明されています。ワイヤーではラベル、入力欄、補足の近さを確認し、実装時の関連付けは別途確認事項として残します。

入力例だけを薄い文字で置くと、入力後に何の項目だったか分かりにくくなる場合があります。項目名と入力例は役割を分け、必要な説明が入力中も確認できる案にします。必須・任意、許される形式、日付の選択条件なども、後からエラーで初めて知らせるのではなく、必要な場所へ説明を用意してください。

エラーは「何が違うか」と「どう直すか」を示す

エラー状態では、赤い枠を付けるだけで終わらせず、どの項目に問題があり、何を直す必要があるかを文章で示します。架空例なら、希望日時が未選択の場合に「見学を希望する日時を選択してください」と伝えます。「入力が不正です」だけでは、利用者が次に何をすればよいか分かりません。

W3Cのフォームの通知に関する解説では、エラーや成功を明確に伝えること、修正方法を示すことが扱われています。ワイヤーでは、フォーム全体のエラー案内と各入力欄の近くの説明をどう組み合わせるかを検討します。色だけに依存せず、文字や位置でも状態が分かる案にしましょう。

エラー後に入力済みの内容が消えるのか、残るのかも重要です。すべて消える構成では、利用者が同じ内容を何度も入力する負担が増えます。どの情報を保持できるかは実装やセキュリティー条件にも関係するため、画面だけで勝手に確定しません。利用者への説明と、開発担当への確認事項を分けて記録します。

※表は横にスクロールできます。

送信中と完了後を分け、成立したことを正確に伝える

送信ボタンを押した後には、処理中、成功、失敗といった状態があります。通常のフォームと完了画面だけを作ると、処理に時間がかかる場合や通信が失敗した場合の案内が抜けます。送信中に何を表示するか、再度押せるか、失敗時にどこからやり直せるかを検討してください。

練習例が「見学希望を受け付け、担当者が後で日時を確定する」運用なら、完了画面に「予約が確定しました」と書いてはいけません。「見学希望を受け付けました」とし、その後の連絡方法を説明する案が考えられます。返信までの具体的な時間は運営側で確認した条件を使い、早く見せたいからという理由で作らないようにします。

完了後に必要な情報も整理します。次に確認すべき連絡、変更や取り消しの窓口、元のページへ戻る入口などです。利用者が画面を閉じても困らないよう、どの情報を別の通知で残すかを運営と相談します。ワイヤーフレームは画面上の文章だけでなく、サービスの実際の対応と矛盾しないかを見つける機会でもあります。

空・満席・長文・画像なしを別の状態として確認する

見学可能な日時が一件もない場合は、空白のカレンダーだけでは理由が伝わりません。満席なのか、受付期間外なのか、読み込みに失敗したのかで、示す内容と次の行動が変わります。それぞれを別の状態として整理し、分からないものをすべて「データなし」にまとめないようにします。

文章が長い場合、施設名が想定より長い場合、画像がない場合も試します。通常のきれいな例だけでは、箱から文字がはみ出す、重要なボタンが下へ遠ざかる、意味のない余白が残るといった問題を発見しにくくなります。実際のデータがあるならそれを使い、なければ長い仮文や空の例を明示して検証します。

状態を全部描くと多くなる場合は、一覧で管理します。通常、入力エラー、送信中、送信成功、通信失敗、受付なしといった名称を付け、どの状態を画面で作り、どれを注記で説明するかを決めます。重要な分岐を省かず、確認の目的に必要な精度を選ぶと、制作量を増やしすぎずに不足を見つけられます。

レビューと引き継ぎ｜探せるか・進めるかを確かめて完成させる

レビュー依頼は、見てほしい観点を限定する

ワイヤーフレームを渡して「どうですか」と聞くだけでは、色や写真の好みの話になりやすくなります。今回確認したいのが情報の順序なら、「見学前に知りたい条件がそろっているか」「予約希望を送るまで迷う場所がないか」を依頼します。未確定の写真や装飾は、今回の判断対象ではないことも明示しておくと話が進めやすくなります。

確認する人によって観点を分ける方法もあります。運営担当には内容と実際の対応、制作担当には実現可能性、利用者に近い人には探しやすさを見てもらいます。一人の感想だけで全体を確定するのではなく、どの立場からの意見かを記録します。ただし、人数を増やすほど正解に近づくとは限らず、決定する人と基準を決めておく必要があります。

資料の冒頭には、ページの目的、想定する利用場面、今回の範囲、未確認事項を短く書きます。読む人が背景を知らなくても、なぜその情報を先に置いたかを理解できる状態にしましょう。作り手が横で毎回説明しなければ意味が伝わらない資料は、引き継ぎ時に誤解されやすくなります。

感想ではなく、具体的な課題を試してもらう

レビューでは、「初めて来たつもりで、見学に必要な条件を探してください」「希望を送った後に何が起きると思いますか」といった課題を渡します。先に答えの場所を教えないことが大切です。すぐ見つけられたか、別の場所を探したか、言葉の意味を取り違えたかを観察します。

相手が迷ったときは、すぐ説明して終わらせず、何を探していたか、どの表現からそう考えたかを聞きます。使い方を説明すれば進める状態でも、ページだけでは伝わっていない可能性があります。一方、紙のワイヤーでは操作できないために迷ったのか、情報構成そのものが分かりにくいのかは分けて判断してください。

短いレビューは問題を見つける手掛かりになりますが、少人数の反応から成果を保証することはできません。「これで申込が増える」と断言せず、見つかった問題、修正した内容、残る仮説を記録します。公開後に確認すべき点があれば、どの行動や問い合わせを見て判断するかを運営と相談しましょう。

※表は横にスクロールできます。

修正指示は、場所・問題・理由・確認方法で残す

「もっと分かりやすく」「上をすっきり」といった指示だけでは、直す人が判断に迷います。対象の領域、何が起きているか、なぜ問題か、どう確認するかを一組にします。架空例なら「見学方法の説明がフォームの後にあるため、送信前に所要時間を見つけにくい。説明をフォームより前へ移し、初見で探してもらう」と書けます。

修正案は、指摘された方法をそのまま実行するだけでなく、元の問題に合うかを考えます。「ボタンを大きくしてほしい」という意見の背後に、ボタンの意味が分からない問題があるかもしれません。大きさ、文言、位置のどこを変えればよいかを整理し、必要なら複数案を比べます。解決手段と困りごとを分けて記録すると、判断の質を保ちやすくなります。

対応した指摘は、修正済みと書くだけでなく、確認結果を残します。保留したものには理由と次の確認先を付けます。すべての意見を無条件に採用すると、目的がぶれたり、別の人の要望と矛盾したりすることがあります。最初に決めた利用者の目的へ戻り、何を優先したかを説明できる状態にしましょう。

完成版には、確定事項と未確定事項を添える

引き継ぐときは、最新版のワイヤーフレーム、必要な状態の一覧、原稿や素材の場所、決定した内容、未確認事項をまとめます。見た目だけの画像を一枚渡すより、どこまで確定しているかが分かる資料にすることが大切です。リンク先、フォームの処理、運営条件、写真の権利など、他の担当が判断する項目を埋もれさせないようにします。

Webデザインを学ぶ人は、完成図に加えて「どの情報を先にしたか」「スマホで何を並べ替えたか」「レビューで何を直したか」を説明する練習をしてみてください。設計への添削や学習支援を探す場合は、Webデザインスクールの料金と学習・副業サポートの比較ガイドを参考に、情報設計やレビューまで扱うかを確認しましょう。ツール操作だけで目的の設計力が身に付くとは限りません。

ワイヤーフレームは、白黒の箱をきれいに並べた時点で完成するものではありません。目的に必要な情報があり、PCとスマホで順序が理解でき、操作後の状態が説明され、次の担当が判断に迷わないことが目標です。まず一ページを小さく作り、具体的な課題で確かめ、理由を残して直す。この流れを繰り返せば、見た目を作り込む前に大切な問題を見つけやすくなります。