ワイヤーフレーム
画面や誌面の構成・配置を、装飾を省いた線と枠で示す設計図。骨格レベルの検討に用いる。
意味
色や画像などの視覚表現を排し、要素の配置・優先順位・導線に焦点を当てて構造を示す。
デザインの詳細に入る前段階で、情報の並びや画面の役割を合意するための土台となる。
成り立ち
「針金の枠組み」を意味する語で、完成前の骨組みを表す比喩としてデザイン分野に定着した。
ウェブやアプリの設計工程で、モックアップやプロトタイプに先立つ設計物として一般化した。
ワイヤーフレームとゾーニングの違い
ゾーニングは、面をどの区画に分け、どこに何の役割を置くかという大づかみの割り付けを指す。ワイヤーフレームは、その区画の中に個々の要素を具体的に並べる段階になる。区画の話をしているのか、区画の中身の話をしているのかで粒度が違う。
議論が噛み合わなくなるのは、この二つを同じ場で扱ったときになる。区画の配分がまだ決まっていないのに要素の並びを詰めると、上位の判断が変わるたびに下位の作業をやり直すことになる。どちらを先に固めるかで、手戻りの量が大きく変わってくる。どちらを先に固めるかが、手戻りの量を決める。
ゾーニングの項へ →ワイヤーフレームとプロトタイピングの違い
プロトタイピングは、実際に触れて動きを確かめられる状態をつくる作業を指す。ワイヤーフレームは、静止した状態で構造を示すに留まる。動かして分かることと、並びを見て分かることは別であり、確かめられる問いの範囲が違う。静止した図の上で答えられることには限りがある。
順序としては構造の合意が先に来るが、動きが要になる場面では前後が入れ替わることもある。手順の複雑さや、画面をまたいだ移動のしやすさは、静止した図の上では判断がつかない。何を確かめたいかによって、どちらを先に用意するかが決まる。確かめたい問いのほうから、順序を決めることになる。
プロトタイピングの項へ →使いどころ
ブランドサイトの構成を検討する際、まずワイヤーフレームで情報の骨格を整理することがある。
細部の見た目を含まないため、装飾段階での印象とは評価の観点が異なる。
実務でのチェックポイント
- 図に置く文章を、実際に使う予定の分量で入れてみる。仮の文字のまま合意すると、中身が入った段階で並びが崩れる。見出しや説明文の想定文字数を先に決める。
- その画面に来た人が何を済ませて離れるのかを一文で書き出し、線と枠のなかで最も大きな面積と上の位置を得ている要素と突き合わせる。ずれるなら、優先順位が図に落ちていない。
- 検討の場で出た指摘を、要素の並びに関するものと配色や書体に関するものへ振り分けてみる。装飾側に意見が集まるようなら、ワイヤーフレームで何を決める場なのかが共有されていない。振り分けた記録は次回の進め方にも効く。
- 画面の幅が狭いときにどう並ぶかを、あわせて描いているかを確認する。広い画面だけで固めると、後の調整が構造にまで及ぶ。狭い幅で崩れる構造は、そもそも整理が足りない。
よくある誤解
装飾を省いた図であるがゆえに、見た目の議論が出ないと期待されがちだが、実際には余白の広さや文字の大きさをめぐる指摘が出やすい。図の上での見え方が、そのまま完成時の印象として受け取られるためになる。何を判断する場かを共有していないと、構造の合意より先に印象の話で時間が費やされる。何を判断する場なのかを、先に共有しておくことになる。
実際に入る文章量を無視したまま枠だけを描いてしまう例もよく起きる。短い仮の文字で組んだ図は整って見えるが、本来の分量を入れた途端に並びが崩れる。枠の大きさは中身の量に規定されるため、量の見当がつかないうちに配置だけを固めると、後から作り直しになる。量が決まらないうちに配置だけを固めると、作り直しになる。
よくある質問
ワイヤーフレームはどこまで作り込むべきですか？
何を決めたいかによって変わる。構造への合意が目的なら、要素の並びと優先順位が読み取れれば足りる。実際の分量や文言まで詰めるのは、内容が固まっている場合に限られ、決まっていない段階で細部を描き込むと、仮の情報が決定事項として扱われやすくなる。
色や画像がないと判断しにくいと言われた場合は？
その段階で判断してほしい問いを、具体的な形にして示すと進めやすい。この順序で読めるか、探している情報にたどり着けるかといった問いに絞れば、装飾がなくても答えられる。判断できないという反応は、多くの場合、問いが示されていないことから生じる。判断できないという反応は、問いが示されていないだけの場合が多い。
作らずに直接デザインへ進んではいけませんか？
規模が小さく、構造に迷いがなければ省いても支障は出にくい。分けて作る利点は、構造の議論と見た目の議論を別々に片付けられる点にある。関わる人が多く、後から構造への異論が出そうな場面ほど、先に骨格だけで合意しておく価値が大きくなる。関わる人が多いほど、分ける価値は大きくなる。