ワイヤーフレームとは？作る目的と作成時に押さえるべきポイント

Webサイト制作で「ワイヤーフレームの確認をお願いします」と言われても、線と四角だけの資料を前に、何を見ればよいか分からないという声は少なくありません。結果として「見た目はデザインが上がってから判断します」となり、デザイン完成後に構成の作り直しが発生します。

ワイヤーフレームの目的は、デザインに入る前に「何を、どの順番で伝えるか」を確定させることです。ここで合意できていれば、以降の修正は表現の調整で済みます。逆にここを流すと、色や写真の議論をしながら構成を直すことになり、費用も期間も膨らみます。

この記事では、ワイヤーフレームの役割と作る目的を整理したうえで、発注者が確認すべき項目、作成の手順、そしてよくある失敗までを解説します。

結論：ワイヤーフレームは「合意の記録」

ワイヤーフレームは設計図であると同時に、発注者と制作者の合意を残す文書です。ここで決めるものと決めないものを分けておくと、レビューの論点がぶれません。

レビュー時に「この青は好みではない」といった指摘が出るのは、ワイヤーフレームの役割が共有されていないためです。冒頭で「この段階では並び順と情報の過不足を見てください」と明示するだけで、確認の質が変わります。

工程上の位置づけ

順序を飛ばすと必ず戻ります。情報設計が決まらないままワイヤーフレームに入ると、「このページはそもそも必要か」という議論が途中で起きます。サイト全体の構造については情報設計（IA）とは？わかりやすいサイト構成の作り方で解説しています。

発注者がレビューで見る7項目

デザインの好みではなく、次の観点で確認してください。

3番目は、発注者にしか判断できない項目です。制作会社は、あなたの会社に寄せられる質問を知りません。直近の問い合わせで繰り返し聞かれた内容を一覧にして渡すと、ワイヤーフレームの精度が上がります。

スマートフォン版を必ず確認する

PC版で横並びに配置された要素は、スマートフォンでは縦に積み上がります。PC版では1画面に収まっていた「見出し＋画像＋CTA」が、スマートフォンでは画像だけで画面が埋まり、CTAが画面外に出ることがあります。

流入の多くがスマートフォンである以上、スマートフォン版のワイヤーフレームがない状態で承認しないことを原則にしてください。ファーストビューの設計についてはファーストビュー設計の重要性｜離脱を防ぐ最初の3秒の作り方で解説しています。

自社で作る場合の手順

専用ツールがなくても、紙やスプレッドシートで作れます。重要なのはツールではなく順序です。

1. 目的とCV地点を1行で書く：「このページは誰に何をしてもらうページか」
2. 載せたい情報を全部書き出す：この時点では順番を考えない
3. 訪問者の判断順に並べ替える：条件 → 内容 → 根拠 → 料金 → 不安解消 → 申込
4. 各ブロックに目的を1行添える：目的が書けないブロックは削る候補
5. スマートフォンの縦1列で並べ直す：1画面ごとに何が見えるかを確認する
6. CTAの位置を決める：主CTAを1つ決め、ページ内の複数箇所に同じものを置く

4番目が効きます。「実績紹介」というブロックに対して「取引の規模感を示し、自社と近い事例があることを伝える」と書けるなら残す。「なんとなく載せている」なら削る。目的が書けないブロックは、訪問者にとっても意味がありません。

用意しておく材料

• サービス内容の説明（箇条書きで可）
• 料金または費用の目安と、その条件
• 実績・事例（数字が出せるもの）
• よく聞かれる質問と、その回答
• 使用できる写真（現場、スタッフ、商品）
• 対応エリア、営業時間、連絡先

これらが揃っていないと、ワイヤーフレームは「ここに実績が入ります」という空箱の並びになります。空箱で承認すると、中身が入った段階で構成の問題が発覚します。仮の文章でよいので、実際の分量に近いテキストを入れて確認してください。

よくある失敗

失敗1：デザインの話をしてしまう

色や書体の議論が始まると、構成の確認が疎かになります。レビュー冒頭で「今回は並び順と情報の過不足を見る回」と明示してください。

失敗2：ダミーテキストのまま承認する

「テキストが入ります」で埋まったワイヤーフレームは、実際の文章量が反映されていません。想定より長い原稿が入ると、画面の見え方が変わります。分量の近い仮テキストを入れてください。

失敗3：スマートフォン版を確認しない

PC版だけ承認すると、実装後に「スマホだとCTAが下すぎる」という指摘が出ます。この修正はデザイン・実装の両方に波及します。

失敗4：社内の承認者がレビューに参加していない

担当者だけで進め、デザイン完成後に決裁者が構成を覆すケースは頻繁に起こります。最終承認者はワイヤーフレームの段階で1度は確認に入れてください。この1回が、後工程の数週間を節約します。

失敗5：全ページ分を作ろうとする

下層ページまで全て作ると、期間も費用も膨らみます。トップページ、主要なサービスページ、問い合わせページなど、成果に直結するページに絞り、他はパターン化した共通レイアウトで進めるほうが効率的です。

よくある質問

Q. ワイヤーフレームは必ず必要ですか？

1〜2ページの小規模な制作で、掲載内容が確定している場合は省略できることもあります。ただし、複数人で承認する場合や、掲載内容が未確定な場合は、作ったほうが結果的に早くなります。省略の判断は、ページ数ではなく「関係者の人数と内容の確定度」で行ってください。

Q. 誰が作るのですか？

通常は制作会社のディレクターが作成します。ただし、載せる情報とその優先順位は発注者にしか判断できません。材料（サービス内容、料金、よくある質問、実績）を渡し、並び順の意図を確認する形が現実的です。

Q. どのくらいの期間がかかりますか？

ページ数と確認回数によりますが、主要ページ数点で1〜2週間が目安です。材料が揃っていれば短縮できます。逆に、材料集めから始めると、この工程が最も時間のかかる部分になります。

Q. デザインカンプとは何が違いますか？

ワイヤーフレームは情報と並び順を決める工程、デザインカンプは色・書体・写真・余白を含む完成イメージです。ワイヤーフレームで構成を確定させてからデザインに進むことで、デザイン段階の修正が表現の調整だけで済みます。

まとめ

ワイヤーフレームの目的は、デザインに入る前に「何を、どの順番で伝えるか」を確定させ、それを合意の記録として残すことです。この段階で見るのは色や書体ではなく、情報の過不足と並び順です。

レビューでは、誰向けか3秒で伝わるか、情報の順序が判断の順序と合っているか、問い合わせで聞かれる内容が入っているか、CTAが1つに絞られているか、そしてスマートフォン版が用意されているかを確認してください。

作成時は、各ブロックに目的を1行添えてください。目的が書けないブロックは削る候補です。そして、ダミーテキストのまま承認せず、分量の近い仮テキストで確認してください。

「デザインが上がってから構成の修正が発生した」「スマホで見たら想定と違った」「決裁者が後から構成を覆した」といった経験がある場合は、ワイヤーフレームの確認体制を見直す価値があります。

当社ではホームページ制作において、要件定義から情報設計、ワイヤーフレーム、公開後の改善までを一貫して支援しています。資料では構成設計の進め方をまとめていますので、自社の課題を整理したい方はぜひダウンロードしてご活用ください。