ワイヤーフレームは、ホームページの各画面に何を置き、どの順番で見せるかを整理する設計図です。色、写真、装飾を作り込む前に、見出し、文章、画像、ボタン、フォームなどの位置と優先順位を決めます。
初心者は専用のデザインツールから始める必要はありません。紙、表計算ソフト、スライド、簡単な図形作成ツールでも、情報の順序と導線が分かればワイヤーフレームの目的を満たせます。この記事では、トップページと下層ページの例、作成手順、デザインへ進む前の確認点を説明します。
ワイヤーフレームはデザイン前に作る設計図
ワイヤーフレームで決めるのは、完成デザインではなく情報の骨組みです。読者が最初に知りたいこと、比較に必要な情報、次に見てほしいページ、問い合わせなどの行動を画面の順序へ落とし込みます。
色や写真を選ぶ前に、目的・読者・必要情報・導線を確定すると、見た目を作った後の大きな手戻りを減らせます。目的や必要機能が決まっていない場合は、先にホームページ作成の目的・要件定義・掲載内容を整理してください。
サイトマップ・ワイヤーフレーム・デザインカンプ・プロトタイプの違い
似た制作資料でも、確認する範囲が異なります。ワイヤーフレームへ色や装飾を作り込みすぎると、情報の順序と見た目の議論が混ざります。各資料で決めることを分けてください。
| 制作資料 | 確認する範囲 | この段階で決めないこと |
|---|---|---|
| サイトマップ | 必要ページ、階層、ページ同士の関係 | 画面内の細かな配置、色、文字、写真 |
| ワイヤーフレーム | 各ページの情報、順序、画像、ボタン、導線 | 完成時の装飾、細かな余白・書体 |
| デザインカンプ | 色、書体、画像、余白、部品など完成時の見た目 | 実際の画面遷移や入力後の動作 |
| プロトタイプ | 画面遷移、クリック、入力など操作の流れ | 本番データ、最終的な実装品質 |
ページ構成そのものが決まっていない場合は、先にホームページのサイト構成とページ数を整理します。ワイヤーフレーム承認後は、ホームページデザインの基本に沿って見た目を具体化します。
ワイヤーフレームで決めること
最初から細部まで描く必要はありません。読者が迷わず情報を理解し、必要な行動へ進めるように、ページごとに次の要素を配置します。
- ページの目的：その画面で読者に理解・判断・行動してほしいこと
- 見出し：読者の疑問に答える情報のまとまりと順序
- 本文：各見出しに必要な説明量と、用意済み・未作成の区分
- 画像・図：文章だけでは伝わりにくい内容と、必要な素材
- 導線：メニュー、関連ページ、前後のページへのリンク
- ボタン：問い合わせ、予約、購入、資料確認などの行動
- フォーム：入力項目、送信後の流れ、受付担当者
- 余白：要素を詰め込みすぎず、情報の区切りを伝える間隔
配置を決めるときは、事業者が伝えたい順番だけでなく、読者が判断する順番を基準にします。たとえば、サービス名の直後に詳しい会社沿革を置くより、対象者、内容、料金、利用の流れ、信頼情報を先に示す方が判断しやすい場合があります。
トップページのワイヤーフレーム例
トップページは、サイト全体の案内役です。すべてを詳しく説明するのではなく、主な情報を短く示し、詳しい下層ページへ移動できる構成にします。小規模な事業サイトなら、次の順序が一例です。
- ファーストビュー：誰のための何のサイトか、主な行動ボタン
- 悩み・対象者：どのような人や状況に対応するか
- サービス概要：主なサービスを短く示し、詳細ページへ案内
- 選ばれる理由：確認できる特徴、体制、資格、対応範囲
- 事例・実績：公開許可と根拠がある内容だけを掲載
- 利用の流れ：問い合わせから利用開始までの主な段階
- よくある質問：行動前に残りやすい疑問
- 問い合わせ：受付方法、対応時間、フォームや電話への導線
この順序は固定ではありません。緊急性が高いサービスなら連絡方法を早く置き、比較が必要なサービスなら料金や事例を先に見せる場合があります。目的と読者の行動に合わせて入れ替えてください。
トップページに説明を詰め込みすぎると、重要な情報が見つかりにくくなります。詳しい条件、長い事例、会社情報は下層ページへ分け、要点とリンクだけをトップページに置きます。
下層ページのワイヤーフレーム例
下層ページは、一つの疑問や判断に詳しく答えるページです。すべてのページを同じ形にせず、役割に合わせて情報を並べます。
サービスページ
対象者、解決できること、サービス内容、対応範囲、料金、利用の流れ、よくある質問、問い合わせの順に検討します。効果を断定せず、提供できる内容と利用条件を具体的に示します。
料金ページ
プラン名、含まれる内容、含まれない内容、追加費用、支払い時期、解約・変更条件、問い合わせ方法を配置します。金額だけでなく、比較する単位と適用条件が分かる構成にします。
事例ページ
対象となった課題、対応内容、進め方、結果、利用者の声、関連サービスへのリンクを検討します。公開許可、数値の根拠、画像の利用範囲を確認し、個人情報や機密情報を載せません。
会社概要ページ
会社名、所在地、代表者、事業内容、連絡先、アクセス、必要な許認可などを配置します。サービスの詳しい説明を重複させず、信頼確認に必要な正式情報を中心にします。
必要なページ数と各ページの役割は、ホームページのサイト構成・内容・ページ数の決め方でも確認できます。
PC版とスマホ版で変わる配置・順序
レスポンシブ対応では、PC版を同じ比率で小さくするのではなく、狭い画面で一列になったときの順番を決めます。PCで左右に並べた要素は、スマホで上から読む順序が内容の優先順位になります。
| 画面要素 | PC版で確認すること | スマホ版で確認すること |
|---|---|---|
| 横並びの情報 | 比較しやすい列数と幅 | 一列になったときの順番、見出しとの対応 |
| メニュー | 主要ページを常時見つけられるか | 開閉、戻る操作、項目数、固定表示の占有 |
| 表 | 列見出しと比較単位が分かるか | 横スクロール、固定列、表外の要点説明 |
| 画像・動画 | 本文との対応、サイズ、比率 | 切り抜き、文字の可読性、読み込み負担 |
| ボタン | 選択肢の違いと移動先 | 押しやすさ、連続配置、画面下固定の重なり |
| フォーム | 項目のまとまりと補足 | 一列表示、入力キーボード、エラー位置 |
スマホ版で要素を非表示にする場合は、重要な本文、料金、条件、リンク、画像の代替情報まで消えないか確認します。詳しい実装・確認点はスマホ・レスポンシブ対応の基本で整理しています。
作成ツールを使い分ける
ワイヤーフレームは専用ツールでなければ作れないものではありません。関係者数、修正回数、コメント、版管理、デザイン・実装担当への引き継ぎで選びます。
| 作成方法 | 向く場面 | 注意点 |
|---|---|---|
| 紙 | 一人または少人数で素早く考える | 共有時は撮影・保存し、最新版を明示する |
| スプレッドシート | ページ、見出し、素材、担当を一覧で管理する | 画面上の配置は別シートや簡単な図で補う |
| スライド | 図形で画面を作り、社内で説明・承認する | ページ増加時の部品・版管理を決める |
| Figma | 複数画面、共通部品、コメント、デザイン引き継ぎ | 編集権限、版、部品名、完成デザインとの区分を決める |
| Miro | 付箋や導線を使った共同整理、ワークショップ | 最終承認用の画面と検討用メモを分ける |
最初から細かな装飾を作るより、実際の見出しと想定文字量、画像の役割、ボタンの移動先が共有できる方法を選びます。複数ツールを使う場合は、どれが最新版の承認資料かを一つに決めてください。
初心者向けの作成手順
1．サイトの目的と必要ページを確認する
誰に何を伝え、どの行動につなげるサイトかを一文にします。その目的に必要なページを一覧にし、トップページと下層ページの関係を決めます。目的が複数ある場合は優先順位を付けてください。
2．各ページに必要な情報を洗い出す
ページごとに、見出し、本文、画像、表、ボタン、フォームの候補を書き出します。まだ用意できていない情報には「未作成」「確認中」と印を付け、仮の内容を完成情報として扱いません。
3．紙や簡単な図形で配置する
長方形と短いラベルを使い、画面の上から順に要素を置きます。最初は白黒で十分です。文章を全文入れず、見出し名、画像の役割、ボタンの行き先が分かる程度にします。
4．読者の順番で確認する
初めて訪れた人になったつもりで、誰向けのページか、何を提供しているか、比較に必要な条件は何か、次にどこへ進むかを確認します。情報が突然現れる箇所や、前提説明が足りない箇所を修正します。
5．スマートフォン用の並びを作る
パソコン用の横並びを縮小するだけでなく、狭い画面で一列になったときの順序を決めます。長い表、複数のボタン、大きな画像、固定メニューが操作を妨げないか確認します。詳しい確認点はスマホ対応・レスポンシブ対応の基本で整理しています。
6．関係者と合意してからデザインへ進む
ページごとの目的、見出し、必要素材、リンク先、ボタン、フォームを確認し、変更点を記録します。情報の追加や削除を確定してから色、文字、写真、装飾を決めると、デザイン後のやり直しを減らせます。
ワイヤーフレームで失敗しやすい点
ワイヤーフレームは完成デザインではありませんが、箱だけを並べればよいわけでもありません。実際の文章量と読者の行動を想定しないと、デザイン段階で情報が収まらなくなります。
- 文章量を考えない：仮の一行だけで配置し、完成原稿が入ると画面が崩れる
- 事業者の都合だけで並べる：会社説明が先に続き、読者がサービス内容を見つけにくい
- リンク先を決めない：ボタンはあるが、移動先や受付担当者が不明
- すべてをトップへ載せる：下層ページとの役割が重複し、重要情報が埋もれる
- スマートフォンを後回しにする：横並びの順序、表、画像、ボタンが狭い画面で使いにくい
- 装飾を作り込みすぎる：色や写真の議論が先になり、情報構成の確認が遅れる
- 未確定情報を放置する：仮文章や仮ボタンが完成デザインへ残る
失敗を避けるには、各要素へ「目的」「必要な素材」「リンク先」「確認担当者」を付けます。完成原稿がない場合も、想定文字量と未確定であることを明示してください。
デザインへ進む前の確認
ワイヤーフレームができたら、見た目ではなく情報と操作を確認します。次の項目に問題がなければ、ホームページデザインの基本とコツを参考に、色、文字、画像、余白の設計へ進みます。
- 各ページの目的と対象読者が一文で説明できる
- 必要なページと、ページごとの役割が重複していない
- 見出しの順序だけでも内容の流れを理解できる
- 文章、写真、図、表、ロゴの用意状況が分かる
- メニュー、本文リンク、ボタンの移動先が決まっている
- 問い合わせ・予約・購入などのフォーム項目と受付先が決まっている
- パソコンとスマートフォンでの並び順を確認している
- 未確定情報、仮文章、確認担当者が明示されている
- 関係者が同じ版を確認し、変更履歴を共有できる
デザイン開始後に目的や必要ページが変わることもあります。その場合は、見た目だけを部分修正せず、ワイヤーフレームへ戻って情報の順序とリンク先を更新してください。
よくある質問
- ワイヤーフレームは必ず作る必要がありますか
-
一枚だけの小規模ページで、作成者と確認者が同じなら簡略化できます。ただし、ページ数、掲載情報、関係者、必要機能が多いほど、先にワイヤーフレームを作る価値が高くなります。少なくとも見出し、主要情報、ボタン、リンク先を紙に並べ、公開前の合意に使える状態にしてください。
- ワイヤーフレームには何を書きますか
-
ページの目的、見出し、本文の要点、画像・図・表、メニュー、ボタン、フォーム、リンク先を書きます。完成文章や色を細かく入れる必要はありませんが、情報の優先順位と画面上の順序、用意が必要な素材、未確定箇所が分かるようにします。
- デザインツールを使わずに作れますか
-
はい、紙、表計算ソフト、スライド、簡単な図形作成ソフトでも作れます。大切なのは装飾ではなく、情報の順序、必要素材、リンク先、パソコンとスマートフォンでの並びを共有できることです。複数人で修正する場合は、版の管理とコメントの残しやすさも選択基準にします。
まとめ
ワイヤーフレームは、ホームページの見た目を作る前に、何をどの順番で見せるかを決める設計図です。目的と必要ページを確認し、各ページの見出し、文章、画像、ボタン、フォーム、リンク先を簡単な箱で配置します。トップページと下層ページの役割を分け、読者の順番、スマートフォンでの並び、未確定情報を確認してください。関係者が情報構成へ合意してからデザインへ進むと、後工程の手戻りを減らせます。
