この記事の対象: Web制作初心者の発注者
読了時間: 約5分
Web制作を依頼すると、デザインの前に「ワイヤーフレーム」というものが提示されることがあります。色もなく、画像もない白黒のレイアウト図を見て、「これで何を判断すればいいの？」と戸惑う方も少なくありません。
この記事では、ワイヤーフレームの役割と見方を発注者の視点でわかりやすく解説します。
ワイヤーフレームとは
ワイヤーフレームは、Webサイトの「間取り図」です。家を建てる前に間取り図で部屋の配置を確認するように、サイトを作る前にどの情報をどこに配置するかを決める設計図です。
ワイヤーフレームには色やフォント、画像などのデザイン要素は含まれません。「構造だけを確認する」ための資料です。
ワイヤーフレームの役割
コンテンツの配置を決める
各ページに載せる情報（テキスト、画像、ボタン等）を、どの位置にどの大きさで配置するかを決めます。
例えば、トップページの場合:
– ファーストビューに何を見せるか
– サービス紹介はどの順番で並べるか
– 問い合わせボタンをどこに置くか
情報の優先順位を整理する
ページの上部に配置する情報ほど、ユーザーの目に入りやすくなります。「最も伝えたい情報は何か」を考えて優先順位を決める工程がワイヤーフレームの作成です。
制作会社と認識を合わせる
「こういうイメージで」という口頭の説明だけでは、発注者と制作者の認識にズレが生じがちです。ワイヤーフレームを使うことで、「この情報がここに入る」という認識を視覚的に共有できます。
ワイヤーフレームの見方（発注者向け）
ワイヤーフレームを確認する際のポイントは3つです。
どの情報がどこに配置されているか
各エリアにどんな情報が入るか確認します。「会社の強みが目立つ位置にあるか」「お知らせのエリアは適切か」など、ビジネス上の優先順位と配置が合っているかをチェックしましょう。
ユーザーの視線の流れ
ユーザーは通常、画面の左上から右下に向かって視線を動かします。重要な情報がこの流れに沿って配置されているか確認します。
CTAの位置
「問い合わせ」「資料請求」などのCTA（行動を促すボタン）が、適切な位置に配置されているか確認します。ファーストビューとページ末尾には必ずCTAが必要です。
最も大切なこと: ワイヤーフレームの段階では「色が好きじゃない」「フォントが違う」といったデザインの指摘は不要です。構造（何をどこに置くか）に集中してください。
ワイヤーフレームの確認でよくある失敗
「色がついていないからわからない」
ワイヤーフレームはデザインではなく構造の確認が目的です。色やビジュアルはデザイン段階で決まるので、この段階では「情報の配置と優先順位」だけを見ましょう。
この段階で情報の過不足を指摘しないと後で大変
デザインが完成してから「このページに○○も入れたい」と追加すると、レイアウト変更が発生し、費用と時間の両方に影響します。ワイヤーフレームの段階が、情報の追加・削除の最後のチャンスです。
簡単なワイヤーフレームの作り方
発注者が自分でワイヤーフレームを作成する必要はありませんが、たたき台として簡単なワイヤーフレームを用意すると、制作会社との認識合わせがスムーズになります。
手書き
紙とペンで十分です。四角と線で「ここにロゴ」「ここにメイン画像」「ここにサービス説明」と配置を描くだけでOK。もっとも手軽で、伝わりやすい方法です。
PowerPoint / Googleスライド
四角形やテキストボックスを並べて作成します。すでに使い慣れているツールなので、操作の学習コストがゼロです。
Figma（無料プラン）
Web制作のプロが使うデザインツールですが、無料プランで基本機能が使えます。テンプレートも豊富なので、本格的に作りたい方におすすめです。
まとめ
ワイヤーフレームのポイントをまとめます。
- ワイヤーフレームはサイトの間取り図（構造の確認用）
- デザインではなく「情報の配置と優先順位」を見る
- CTAの位置とユーザーの視線の流れを確認する
- 情報の追加・削除はこの段階で行う（後から変更すると高くつく）
- 発注者がたたき台を用意すると、認識合わせがスムーズ
制作全体の流れは「ホームページ制作の発注の流れ」で解説しています。要件定義の詳細は「Webサイト制作の要件定義の進め方」をご覧ください。
