「とりあえずワイヤーフレーム作っておいて」
新人の頃、上司からそう言われて、正直何から手をつけていいか分かりませんでした。要件定義もサイトマップも一通り経験していたのに、いざ1ページの中身を形にしようとすると、手が止まってしまったのです。
この記事では、ワイヤーフレームの作り方を単なる手順として説明するだけでなく、現場のディレクターが実際にどこで悩み、何を基準に判断しているかを中心に解説します。作り方の手順は多くの記事で紹介されていますが、実務で本当に差が出るのは「その先」の判断部分だからです。
なお、ワイヤーフレームと混同されやすい「サイトマップ」「要件定義」との関係については、当サイトの別記事で詳しく解説していますので、あわせてご覧ください。
ワイヤーフレームとは？サイトマップとの違い
ワイヤーフレームとは、Webページ1枚の中に、どの要素をどこに配置するかを線と枠だけで示した設計図です。文字の大きさや色などのデザイン要素は含めず、あくまで「情報の配置」を関係者間で合意するために作ります。
よく混同されるのが「サイトマップ」です。サイトマップ（構成図）はページ同士の階層関係を示すもので、ワイヤーフレームは1ページの中身を示すもの。扱う範囲がまったく違います。この違いについては、サイトマップとは？種類の違いとディレクターが実務で押さえるべきポイントで詳しく解説しているので、まだ整理できていない方はそちらを先にご覧ください。
ワイヤーフレームは要件定義のあとに作る
ワイヤーフレームは、要件定義で「何を・誰に向けて作るか」が固まったあとに着手します。要件（目的・ターゲット・必要機能）が決まっていない状態で先にワイヤーフレームを作ってしまうと、あとから要件が変わるたびに作り直しが発生します。
この順番については、要件定義の記事のFAQでも触れているとおりです。「要件定義とワイヤーフレーム、どちらを先にすべきか迷っている」という方は、まず要件定義が固まっているかを確認してみてください。
ワイヤーフレーム作成前に準備しておきたいこと
掲載する情報(コンテンツ)の洗い出し
ワイヤーフレームを作る前に、そのページに載せる情報を一通り洗い出しておきます。原稿や写真がまだ揃っていなくても構いませんが、「どんな情報が、どれくらいの分量で入る予定か」だけは把握しておく必要があります。ここが曖昧なままレイアウトを組み始めると、あとで情報を詰め込みきれず、作り直すことになりがちです。
参考サイト・トンマナの共有(ワイヤーフレームには反映しない情報)
クライアントから「こんな雰囲気にしたい」という参考サイトを共有されることがありますが、これはデザインの話であり、ワイヤーフレームの段階で扱う情報ではありません。トンマナの要望は記録として残しつつ、ワイヤーフレームでは「配置」に集中する、と意識的に線引きしておくことが大切です。
ワイヤーフレームの作り方【4ステップ】
①情報の優先順位を決める
洗い出した情報の中で、そのページで一番伝えたいことは何かを決めます。すべてを同じ重みで並べると、結局何も伝わらないページになってしまいます。
②情報量(ボリューム)を確認する
各情報がどれくらいの分量になるかを確認します。見出しだけなのか、本文が数百文字あるのか、画像が何点必要なのかによって、レイアウトの組み方が変わってきます。
③レイアウト(配置)を決める
優先順位と情報量をもとに、上から下へ、どの順番で・どんな大きさで配置するかを決めます。この段階では手描きやシンプルな四角と線で十分です。
④ツールで清書する
方向性が固まったら、Figmaなどのツールで清書します。いきなりツール上で作り始めると、細部の見た目が気になって全体設計に集中できないことがあるため、先に紙やホワイトボードでラフを作ってから清書する進め方をおすすめしています。
現場のディレクターが押さえるべき3つの判断軸
手順を知っているだけでは、実務では足りません。私が現場で特に意識している判断基準は、次の3つです。
①どこまで自分で詰め、どこからデザイナーに委ねるか
ディレクターが配置の細部まで決めすぎると、デザイナーの裁量を奪ってしまい、かえって良いデザインが生まれにくくなります。私の場合、「情報の優先順位と大まかな配置」までをワイヤーフレームで示し、余白の取り方や装飾的な表現はデザイナーに委ねる、という線引きをしています。
②「仮テキスト」で進めるリスクと、詰めるべき粒度
原稿が未確定のまま「ダミーテキストで仮置き」してワイヤーフレームを進めることはよくあります。ただし、実際の文字量とダミーテキストの分量が大きくずれていると、デザイン確定後に「思ったより文章が長くて崩れる」という事態が起きます。少なくとも「見出しは何文字程度」「本文は何行程度」という目安だけは、関係者とすり合わせておくべきポイントです。
③クライアントに見せる際、デザインの話にすり替えさせない伝え方
ワイヤーフレームを見せると、クライアントから「この色は変えられますか」「もっとおしゃれにできますか」といった、デザインに関するフィードバックが返ってくることがあります。これ自体は自然な反応ですが、ワイヤーフレームの段階で議論すべきは「情報の過不足」や「配置の分かりやすさ」です。見せる際に「本日はレイアウトと情報の配置についてご確認いただきたく、色味や装飾は次のデザイン確認の段階でご相談させてください」と一言添えるだけで、議論の的を絞りやすくなります。
私が経験した失敗談
以前、あるコーポレートサイトの実績紹介ページで、原稿が未確定のまま「後で調整すればいい」という判断で、仮テキストのままワイヤーフレームをデザイナーに引き継いだことがありました。
ところが実際の原稿が上がってくると、想定より文章量が2倍近くになっており、デザイン確定後に「この量だとレイアウトが崩れる」と判明。結局、デザインの一部を組み直すことになり、スケジュールに影響が出てしまいました。
この経験から、「原稿が未確定でも、最低限の文字数の目安だけは決めてから次工程に渡す」ということを徹底するようになりました。ワイヤーフレームは「見た目のラフ」ではなく、「後工程が迷わないための情報の設計図」だと捉えるようになったのは、この失敗があったからです。
ワイヤーフレーム作成に使えるツール
Figma
デザイン制作まで見据えるなら、Figmaが扱いやすいツールです。ワイヤーフレームからそのままデザイン制作に移行しやすく、複数人での同時編集にも対応しています。無料プランでも基本的な機能は利用できます。
Cacoo
図形やアイコンのテンプレートが豊富で、直感的に操作できるのが特徴です。ワイヤーフレーム専用のテンプレートも用意されており、デザインツールに不慣れな段階でも扱いやすいツールです。
なお、かつて定番とされていたAdobe XDは、現在は新規機能の開発が止まった状態（メンテナンスモード）にあり、これから新しく導入するツールとしてはおすすめしていません。
まとめ
ワイヤーフレームは、単に手順通りに作れば良いものではありません。「どこまで自分で決め、どこからデザイナーに委ねるか」「仮の情報でどこまで進めるか」「クライアントとどう合意を取るか」という判断の積み重ねが、後工程の手戻りを左右します。
まずは今回紹介した4ステップと3つの判断軸を意識しながら、次の案件でワイヤーフレーム作成に取り組んでみてください。
ディレ和尚のひとこと
仮の姿にも、魂を込めるべし。ワイヤーフレームの手抜きは、必ず後工程で還ってくるなり。
