ワイヤーフレーム
Wireframeわいやーふれーむ
ワイヤーフレームとは、配色・写真・書体を決める前の段階で、ページに何を置き、どの順で見せ、どこから次に進ませるかだけを線と枠で示した設計図のこと。建築の間取り図に相当します。見た目の要素をあえて省くことで、「かっこいいかどうか」ではなく「伝わるかどうか」に議論を集中させるための道具です。
手戻りの大半は、決める順番を間違えたことで起きる
サイト制作でよくある光景があります。デザイン案が仕上がった段階で、社内から「トップに会社の強みを追加したい」「事例をもっと目立たせたい」という要望が出る。担当者は板挟みになり、制作側は組み直しになり、公開が数週間ずれる。原因は要望そのものではありません。要素を決める会議と、見た目を決める会議が一緒になっていたことです。人は完成イメージを見せられると、まず色や写真に反応します。構成の議論は後回しになり、気づいたときには直すコストが上がっています。
ワイヤーフレームは、この順番を強制的に分けるための工程です。白黒の枠だけを見せられれば、話題は必然的に「この位置に何が要るか」「この順番で読めるか」に向かいます。しかも紙やツール上の線なので、直すのは数分で済みます。同じ変更を実装後に行えば、デザインの再調整とコーディングのやり直しが発生します。変更のコストは工程が進むほど上がる——この単純な事実に対して、安く直せる区間で意思決定を終わらせるのが狙いです。
中小企業では、この工程の価値がさらに大きくなります。専任のWeb担当がいないため、決裁者が最後の最後に登場するケースが多いからです。社長が完成間近のデザインを初めて見て、根本的な指摘をする。これは制作会社の力不足ではなく、見るべきタイミングで見てもらえなかっただけです。ワイヤーフレームの段階で決裁者に一度目を通してもらう習慣をつけるだけで、後半の混乱がかなり減ります。逆に、ここを飛ばして「とりあえずデザインを見せてください」と進めると、費用と期間の見積もりはほぼ外れます。
人は完成イメージを見せられると、構成ではなく色から話しはじめる。
顧客心理の視点でまず押さえたいのは、ワイヤーフレームが向き合う相手が二種類いることです。ひとつはサイトの利用者、もうひとつは社内の決裁者です。利用者に対しては、上から順に読んだときに「自分向けか」「何をしてくれるのか」「次に何をすればいいか」の三つが自然に解けるかを確かめます。人は説明を読み込んでくれません。画面を上から数秒なぞって、自分に関係があるかを判断します。だから配置の順番そのものが、不安を解く順番になっていなければなりません。「実績を上に置くか、サービス説明を上に置くか」は好みの問題ではなく、来訪者が最初に何を疑うかで決まります。初めて社名を聞いた人が多いなら、疑いは「信用できるか」なので実績が先。すでに探して来た人が多いなら「対応範囲」が先です。
仕組み化の視点では、ワイヤーフレームを「デザインの下書き」ではなく合意を取るための書類として運用します。型は四つです。①各ページの役割を1行で書く（このページで来訪者にしてほしい行動はひとつ）②載せる要素を並べ、優先順位を番号で振る ③この段階で決裁者に見せて承認を取る ④承認後は要素の追加を原則受けない、という線を引く。④が抜けていると工程を分けた意味が消えます。また、一度つくったワイヤーフレームは次の案件で流用できます。「問い合わせを取るページ」「サービス紹介ページ」「事例ページ」の型を社内に3つ持っておけば、以後の制作は毎回ゼロからにならない。一度型を持てば、判断の速さが上がり、外注先が変わっても伝えるべきことがぶれません。
AI活用の視点では、要素の洗い出しと文章の下書きを任せられます。既存サイトの問い合わせ内容や営業の想定質問を渡して「このページに載せるべき情報の候補」を挙げさせる、競合数社のページ構成を要約して抜けている要素を洗い出す、見出しの案を複数出させて比較する。ARGASのような追跡の仕組みで既存サイトの読まれ方が分かっていれば、「実際に読まれている順」を根拠に配置を決められます。ただし、AIが出した構成をそのまま採用するのは避けたほうがよいでしょう。出てくるのは一般的な最適解であり、自社の強みが最も伝わる順番とは別物です。候補はAI、順番の決定は人。この分担が実務に合います。
図解：安く直せるのは、この区間だけ
下の図は、制作の工程が進むにつれて変更コストがどう上がるかを示したものです。ワイヤーフレームは③にあたり、ここまでは線を引き直すだけで済みます。④以降は、同じ一言の変更が作り直しに変わります。
事例で見る：国内・海外
Balsamiq ── あえて「手描き風」にして、色の議論を封じる
海外のワイヤーフレーム専用ツールとして知られるBalsamiqは、出力される図があえてラフな手描き風の見た目になる設計で広く知られています。精緻な画面を描けるツールが揃っているなかで、意図的に粗く見せるという選択をしている点が重要です。理由は単純で、きれいに描かれた画面を出すと、レビューの場が「この青は合っているか」「フォントが硬い」といった見た目の話に流れてしまうからです。線が手描きに見えれば、参加者は自然と「まだ途中の資料だ」と受け取り、配置と順番の議論に集中します。資料の完成度を落とすことで、議論の質を上げるという発想です。中小企業の現場でも同じことができます。専用ツールがなくても、紙に手で描いたものを写真で撮って共有すればよく、むしろそのほうが「色の話は後で」と伝わりやすい。逆に、体裁を整えたパワーポイントで見せると、決裁者は見た目に反応します。なお、ツールの利用実績や効果を示す数値は公開情報の範囲を超えるため、ここでは扱いません。
中小企業のサイト刷新 ── 決裁者の確認をワイヤーフレームの位置に移す
たとえば、従業員数十名の企業が数年ぶりにサイトを刷新する場合を考えます。よくある進み方は、担当者が制作会社とやり取りし、デザイン案が固まった段階で初めて社長に見せる形です。ここで「トップに代表挨拶を」「取引先の一覧も」と要望が出れば、構成から組み直しになります。これを避けるために、進行を一点だけ変えます。ワイヤーフレームができた時点で、30分の確認の場を設ける。白黒の枠を印刷して並べ、「このページは問い合わせをもらうためのページで、上から実績・対応範囲・料金の考え方・問い合わせの順です」と説明する。この場では色や写真の話が出ないため、議題が構成に絞られます。そして承認をもらったら、「ここから要素の追加は追加費用と期間が発生します」を明文化して共有する。実務上のコツは、この確認をメールではなく対面か画面共有で行うことです。資料だけ送ると、決裁者は完成イメージが浮かばず判断を保留し、結局デザイン段階まで意見が出ません。これは特定企業の実績ではなく、中小企業の制作進行で手戻りを減らしやすい代表的な進め方です。
現場での使い方：5ステップ
- ページの役割を1行で書く「このページで来訪者にしてほしい行動」をひとつだけ決める。二つ以上あるページは、たいてい両方とも達成しない。
- 載せる要素を全部並べ、優先順位を番号で振る実績・対応範囲・料金の考え方・よくある質問・問い合わせ。初めて来た人が何を先に疑うかで順番を決める。
- 白黒の枠だけで配置する色・写真・書体は入れない。紙に手描きでも十分。粗いほうが構成の議論に集中できる。
- この段階で決裁者の承認を取る対面か画面共有で説明する。承認後は要素の追加に費用と期間がかかることを明文化して共有する。
- 型として保存し、次の案件で使い回す「問い合わせ用」「サービス紹介用」「事例用」の3種を社内に持つ。外注先が変わっても伝えるべきことがぶれない。
関連用語
まとめ：見た目を決める前に、順番を決めきる
ワイヤーフレームは、デザインの下書きではなく、変更が安いうちに合意を確定させるための書類です。人は完成イメージを見ると色から話しはじめるため、白黒の枠だけを見せて「上から読んで、自分向けだと分かるか」「次に何をすればいいか分かるか」に議論を絞る。決裁者の確認をこの位置に置き、承認後の追加には線を引く。型を3種持てば、次の制作は毎回ゼロからになりません。要素の洗い出しはAIに任せ、順番の決定は人が持つ。配置が正しければ、押し込む文章がなくても来訪者は自分で次へ進みます。
