📋 この用語の要点（MGK編集部）
ワイヤーフレームとは、色や画像といった装飾を省き、各ページに置く要素の配置と優先順位だけを示した設計図です。デザイン制作やコーディングに入る前に、掲載する情報とその順番を関係者で確かめられるため、後戻りによる費用と時間の損失を抑えやすくなります。サイトの目的と伝えたい順序を目に見える形にする工程であり、発注側と制作側をつなぐ合意形成の共通言語として機能します。表示端末も掲載情報も増えた今、着手前に構造を固める意義は以前より大きくなっているとされます。
📖 約5分で読めます。
「ワイヤーフレーム」とは
ワイヤーフレームは、ウェブサイトやアプリの各ページについて、どの位置にどの要素を置くかを線と四角形だけで示した図です。日本語では「画面設計図」「線画」などと呼ばれます。写真やロゴは四角と斜線で代用し、文字は仮の見出しや短い説明にとどめます。装飾をあえて省くのは、見た目の好みではなく情報の順番と量に議論を集中させるためです。
一般に、1枚のワイヤーフレームには次のような内容が書き込まれます。
- ヘッダー、フッター、ナビゲーションの位置
- 見出しと本文のかたまり、その上下関係
- 画像や動画を入れる領域の大きさとおおよその比率
- 問い合わせや資料請求などの行動を促す部分の置き場所
- 入力欄やボタンの数、並び順
- 要素の意図を補う注記や遷移先のメモ
忠実度による使い分け
ワイヤーフレームは細かさによって段階が分かれます。手書きに近い粗いものは、方向性を素早く比べる段階に向きます。中程度のものは、見出しの文言や項目数まで具体化し、社内の確認資料として使われます。実際の文章量や項目を入れ込んだ精密なものは、デザインや実装への申し送りに適します。序盤から精密に作り込むと修正の負担が増えるため、目的に応じて粗さを選ぶ考え方が実務では広く採られています。
なぜ重要なのか
中小企業のサイト制作では、限られた予算と担当者の時間の中で判断を重ねる必要があります。ワイヤーフレームは、その判断を早い段階に前倒しするための道具です。
手戻りの負担を前工程で抑えられる
デザインが仕上がった後に「この情報も載せたい」「順番を入れ替えたい」と要望が出ると、配色や余白の調整、実装のやり直しまで波及します。装飾のない段階なら、要素を動かす修正は比較的軽く済みます。前工程で構造を固めておくほど、後工程の変更が減る傾向があるとされます。特に、掲載する情報の追加は文章量や画像の点数にも関わるため、原稿と素材の準備を含めた日程全体に影響します。図の段階で気づけた抜けは、費用の増加を伴わずに直せる場合が多いといえます。
社内の関係者の認識をそろえられる
経営者、販促担当、営業担当では、載せたい情報の優先順位が異なることがあります。口頭や文章のやり取りだけでは、それぞれが違う完成像を思い描いたままになりがちです。1枚の図を囲んで話すと、抜けている情報や重複した説明が見つかりやすくなり、社内決裁の説明資料としても使えます。
実務での使い方・進め方
作成の基本的な流れ
作り方には流派がありますが、多くの現場では次の順序で進みます。
- サイト全体の目的と、優先したい行動を1つに絞る
- 必要なページを一覧にし、階層と遷移を整理する
- 重要なページから、要素を上から順に並べる
- スマートフォン表示での縦並びを想定して確認する
- 関係者のレビューを受け、指摘を反映して更新する
発注側が準備すべきこと・判断すべきこと
ワイヤーフレームの質は、発注側が渡す材料に左右されます。発注側では、あらかじめ次の点を整えておくと確認が進みやすくなります。
- 誰に何をしてほしいページなのか、目的を短い文で書く
- 掲載したい実績、料金の考え方、対応地域などの素材を洗い出す
- 写真や図の有無、撮影が必要かどうかを確認する
- 社内で最終判断をする人と、確認に要する日数を決めておく
そして判断すべきなのは、装飾の好みではなく情報の優先順位です。「最初に見せるのはどの強みか」「載せない情報はどれか」を決められるのは発注側だけです。すべてを同じ大きさで載せたいという要望は、結果として何も伝わらない構成につながる場合があります。
よくある誤解と注意点
「白黒でラフだから未完成に見える」
色や写真がないため簡素に見えますが、装飾を省くのは意図的な設計です。この段階で色や書体の議論を始めると、本来決めるべき情報の順番が置き去りになります。仕上がりの雰囲気を確かめたい場合は、参考サイトや配色案を別の資料として並行して用意する進め方が現実的です。
「一度承認したら変更できない」
ワイヤーフレームは修正しながら育てる前提の資料です。ただし、デザインや実装が進んだ後の大きな変更は、費用と日程に影響します。どの時点までなら構成の変更を受けられるのかを、制作会社と着手前に確認しておくと安心です。変更の締め切りを共有することが、双方の余計な負担を避ける近道になります。
よくある質問
Q. ワイヤーフレームは発注側が自分で作るべきですか？
A. 必ずしも必要ではありません。多くの場合は制作側が作成し、発注側が確認と判断を担います。ただし、載せたい情報を箇条書きで整理して渡すだけでも精度は上がります。手書きの粗いメモでも意図は十分に伝わる場合があります。
Q. デザインカンプやプロトタイプとどう違いますか？
A. ワイヤーフレームは配置と優先順位を決める図、デザインカンプは配色や書体まで含めた完成見本、プロトタイプは実際に触って画面遷移を試せるものと整理されます。目的が違うため、順に作っていく流れが一般的です。
Q. 全ページ分を作る必要がありますか？
A. 規模によります。トップページ、サービス紹介、問い合わせなど、役割の異なる代表的なページを作り、同じ構成が繰り返されるページは共通の型として扱う方法がよく採られます。範囲は見積の前提になるため、着手前に取り決めておくとよいでしょう。
