はじめに
この記事の目的
本記事はWebサイト制作で使うワイヤーフレームを、初心者でもわかるようにやさしく解説します。意味・必要性・制作フロー内での位置づけ・準備・具体的な作り方とおすすめツールまで、実務にすぐ役立つ内容を丁寧に説明します。
誰に向けているか
これからサイトを作る個人や担当になった方、デザイナーやコーダーに依頼する前に要件を整理したい方、学習中の学生などに向けています。専門用語は最小限にし、具体例で補います。
本章での読み方
まずはワイヤーフレームの基本概念をつかみ、続く章で手順や準備を順を追って学んでください。特に第5章（作成前の準備）と第6章（作り方ステップ）は実務で使えるチェックリストを紹介します。
全体の構成（全6章）
- はじめに（本章）
- ワイヤーフレームとは何か
- ワイヤーフレームを作る目的と必要性
- Webサイト制作の中でのワイヤーフレームの位置づけ
- ワイヤーフレーム作成前にやるべき準備
- ワイヤーフレームの基本的な作り方ステップ
次章から具体的に進めます。
ワイヤーフレームとは何か
定義
ワイヤーフレームは、Webサイトやページのレイアウトを示す設計図です。色や写真、細かい装飾は省き、情報や機能をどこに配置するかを線や箱で示します。骨組みとして全体の見通しを立てる役割があります。
特徴
- 構造を優先します（ヘッダー、メイン、サイドバー、フッターなど）。
- メニューやボタン、テキストや画像の領域を単純な形で表します。
- 詳細なデザインを決める前に、ページの流れや優先順位を確認できます。
表現の種類
手描きのスケッチ、画像編集ソフト、専門ツールのいずれでも作れます。手描きは素早く共有でき、ツールは修正や共有が楽です。
誰が作るか・いつ使うか
デザイナー、ディレクター、エンジニアが共同で作成します。要件整理や設計の初期段階で使い、関係者の合意を得るために有効です。
見るときのポイント
画面ごとの目的（例：購入、問い合わせ、情報閲覧）を確認し、ユーザーの動線が自然かを重視してください。要素の優先順位が明確だと、後のデザイン作業がスムーズになります。
ワイヤーフレームを作る目的と必要性
主な目的
-
関係者の認識を揃える
ページの構成や情報の配置を図で示すことで、クライアント、デザイナー、開発者が同じイメージを持てます。例えば「トップに重要なお知らせを置く」「購入導線を右上に置く」など、口頭だけで伝わりにくい点が明確になります。 -
情報の優先順位と導線を設計する
どの情報を先に見せるか、ユーザーがどう進むかを決めます。例として、商品詳細ページで価格や購入ボタンを目立たせるなど、行動につながる配置を試せます。 -
早い段階で構造の誤りや抜けを発見する
デザインやコーディング前に問題を見つけて修正できます。画像やテキストの不足、重複した要素も事前に洗い出せます。
作らないと起きやすい問題
- コンテンツの漏れや重複
必要な情報が抜けたり、同じ内容が複数箇所に生じます。 - レイアウトのばらつきと品質低下
ページごとに見た目や使い勝手が違い、統一感が出ません。 - 仕様変更の多発と工数増加
後工程での手戻りが増え、スケジュールとコストに悪影響が出ます。
実務で意識するポイント（チェックリスト）
- 最初に目的（何を達成したいか）を書き出す
- 主要なユーザー行動を想定して導線を描く
- 必要なコンテンツをリスト化して抜けがないか確認
- 関係者に早めに共有してフィードバックを得る
ワイヤーフレームは手間に見えて、後の手戻りを減らす投資です。目的を明確にして作ることで、作業がスムーズになります。
Webサイト制作の中でのワイヤーフレームの位置づけ
制作の典型的な流れ
- ゴール・ペルソナ・コンセプト決定
- 必要なコンテンツ・機能の整理
- サイトマップ作成
- ワイヤーフレーム作成
- デザインカンプ作成
- コーディング
- 検証・公開
この流れのなかでワイヤーフレームは情報設計とビジュアルデザインをつなぐ役割を果たします。
ワイヤーフレームが果たす主な役割
- 情報の配置と優先順位を可視化します。例えば、重要なCTAを上部に置くかどうかを検討できます。
- ユーザーの導線（ナビゲーションやフォームの流れ）を設計します。操作の順序や遷移を明確にします。
- コンテンツ量や要素の有無を確認できます。デザイン前に不要な要素を省けます。
- チーム間の共通理解を作ります。クライアントや開発者と仕様をすり合わせやすくなります。
- レスポンシブ対応の土台になります。画面幅ごとのレイアウト案を早めに検討できます。
実務での使い分け
手描きのスケッチから低〜中解像度のワイヤーまで段階を分けて作ると効率的です。初期段階で大きな方向性を決め、中盤で詳細な要素や文言を詰めます。開発やデザイン段階での手戻りを減らせるため、ワイヤーフレームは制作フローの中心的な設計図になります。
ワイヤーフレーム作成前にやるべき準備
概要
ワイヤーフレームを描く前に、サイトの目的や対象者をはっきりさせます。目的を明確にすると、優先すべき要素が自然に見えてきます。
1. サイトのコンセプトとゴールを定める
まず何を達成したいかを書き出します。売上を増やす、問い合わせを集める、情報を届けるなど具体的にします。例：問い合わせを月30件に増やす。
2. ビジネスゴールとユーザーゴールの整理
企業側の目標と、ユーザーがサイトに来る理由を分けて考えます。両方を満たすページ設計を意識します。例：商品説明で不安を解消し購入につなげる。
3. ペルソナ作成
代表的なユーザー像を1〜3つ作ります。年齢、職業、利用シーン、期待する情報を具体的にします。例：30代の忙しい親、スマホで完結したい。
4. ユーザージャーニーを想定する
ユーザーがどのようにページをたどるかを簡単に描きます。検索→ランディング→比較→問い合わせ、のように段階を想定します。
5. サイトマップ（ディレクトリマップ）作成
ページ構成と階層を図にします。トップ、カテゴリ、詳細、問い合わせなどの関係を整理します。後でワイヤーフレームの優先順位が決めやすくなります。
6. 優先ページを決める
最初に作るべきワイヤーフレームを決定します。例：ランディング、商品詳細、お問い合わせの順で作るなど。
7. 参考と素材の準備
参考サイトや写真、ロゴ、既存コンテンツを揃えます。これで作業効率が上がります。
チェックリスト
- 目的が明確か
- ペルソナが定まっているか
- サイトマップがあるか
- 優先ページが決まっているか
準備が整えば、ワイヤーフレーム作成をスムーズに始められます。
ワイヤーフレームの基本的な作り方ステップ
はじめに
ワイヤーフレーム作成は段階的に進めると効率的です。ここでは具体的な手順と実例を交えて説明します。
1. ページに必要な要素をリストアップ
目的を明確にし、必要な要素を書き出します。例：ロゴ、ナビ、ヒーロー、CTA、フォーム、関連記事、フッター。抜けが無いよう付箋やリストを使います。
2. 要素の優先順位を決める
ユーザーが最初に見る情報を上に置きます。重要度の高い要素に大きさや目立つ位置を割り当てます。例：申し込みが目的ならCTAを目立たせます。
3. 大まかなレイアウトを決める
ヘッダー、メイン、サイド、フッターの配置を決めます。グリッドを意識すると配置が整います。スマホとPCで優先順位を変えることも考えます。
4. 紙やホワイトボードでラフスケッチ
まずは手描きで複数案を描きます。細部にこだわらず、導線や視線の流れを確認します。良い案を選んでデジタル化します。
ツールと確認ポイント
紙→簡単なスケッチ→ワイヤーフレーム作成ツール（例：Figmaや単純な線画）という流れが安全です。要素の抜け、導線、ボタンの視認性を必ず確認します。
以上のステップを繰り返し改善すると、情報の過不足を防ぎ使いやすい設計になります。
