ワイヤーフレーム

ワイヤーフレーム（Wireframe）は、画面に必要な情報、操作、配置の優先順位を、簡単な図として表す設計資料です。
色や装飾を細かく決める前に、何を表示し、利用者が何を判断して、どの操作を行うかを検討します。
紙に描く場合も、デザインツールを使う場合もあります。

見た目を粗くすること自体が目的ではありません。
まだ検討している構造と、すでに決めた条件を区別し、変更しやすい形で案を比較するために使います。

実際の情報で構造を考える

仮に、修理を申し込む画面を設計するとします。
製品の識別情報、症状、連絡先、費用や日程の説明などを並べ、利用者が必要な情報を用意できるかを検討します。

「見出し」「本文」「画像」という仮の箱だけでは、情報の不足や長さを判断しにくくなります。
代表的な製品名や症状、実際に近い説明文を入れると、項目の関係や読み取りの負担が見えてきます。
未確定の内容は、そのまま確定した文言と誤解されないように示します。

画面ごとの役割も明確にします。
情報を入力する画面、内容を確認する画面、完了を知らせる画面では、利用者が判断すべきことが異なります。

一枚の画面だけでは、操作の結果が分かりません。
ボタンを押した後、前へ戻った場合、入力が足りない場合などをつなげて検討します。
Nielsen Norman Groupのいうワイヤーフローは、ワイヤーフレームと流れの図を組み合わせ、こうした関係を示す方法です。

修理の例なら、製品を特定できない場合や、申し込み対象外と分かった場合の案内も必要です。
成功する一つの経路だけを描くと、実装時に条件の抜けが見つかりやすくなります。
通信中やエラー、空の状態など、重要な状態も扱います。

関係者との検討では、見た目の好みより、情報の順序、項目の意味、操作後の結果を確認します。
利用者に試してもらう場合は、操作のつながりが必要な範囲をプロトタイプにできます。

ただし、図からは文字の読みやすさ、細かな操作感、実際の応答時間などを十分に確かめられません。
後の段階で、画面の表現やアクセシビリティ、実装された動作を検証する必要があります。

スケッチは案を広く探索する表現として使え、ワイヤーフレームは画面構造の検討に焦点を当てます。
成果物の名前よりも、何を判断する図で、どの部分が未確認なのかを共有することが大切です。