#546
UI設計パターン
#546わいやーふれーむ
ワイヤーフレーム
別名・表記:Wireframeワイヤー線画画面設計図
UIXHERO Definition
UIXHEROでは、ワイヤーフレームを「装飾を意図的に省き、要素の種類・配置・優先順位だけを示した画面の設計図」と定義する。
概要
ワイヤーフレーム、モックアップ、プロトタイプは、忠実度と操作性の観点で位置づけが異なる。
| 見た目の忠実度 | 操作できるか | 主な議論の対象 | |
|---|---|---|---|
| ワイヤーフレーム | 低い | しない | 要素と優先順位 |
| モックアップ | 高い | しない | 見た目と表現 |
| プロトタイプ | 低〜高 | する | 遷移と操作 |
ワイヤーフレームが答えるのは「この画面に何があり、何が最も重要か」であって、「どう見えるか」ではない。
UXでの活用
- 優先順位の合意: 装飾がないぶん、要素の大きさと位置がそのまま優先順位の主張になる。関係者の期待のずれが早く表面化する。
- 手戻りの削減: 構造で合意してから見た目に進むことで、後段での大きな作り直しを減らせる。
- 状態の網羅: 通常状態だけでなく、空状態、読み込み中、エラー、権限なしといった状態を、この段階で洗い出せる。
誤用・混乱
- ダミーテキストで判断しない: 「Lorem ipsum」や理想的に短い商品名で作ると、実データで崩れる。実際に起こりうる最長・最短のケースを入れる。
- ワイヤーフレームで使いやすさは検証できない: 静止した構造図であり、操作の流れは表現できない。タスク完遂の確認には操作可能なものが必要。
- 忠実度を上げすぎない: 見た目が完成に近づくほど、レビュアーは「もう決まったもの」として扱い、構造への指摘が出にくくなる。
- 仕様書の代わりにはならない: 挙動、バリデーション、権限といった条件は、図だけでは伝わらない。
💡 使いどころ
情報の構造と優先順位を決める段階。色や書体の議論に入る前に、何をどこに置くかで合意したい時。
⚠️ 注意点・誤用
装飾を省くのは手抜きではなく、議論の対象を絞るための選択である。ワイヤーフレームに色やロゴを入れ始めると、レビューの論点が配置から見た目に移ってしまう。
具体例
- グレースケールの矩形とテキストだけで構成した商品一覧画面
- 画面内の要素を優先順位順に並べ、余白で階層を示した設計図
- 空状態・エラー状態・最長テキストのケースを別途用意する
出典・参考文献:
- The Elements of User Experience (Jesse James Garrett)
- Sketching User Experiences (Bill Buxton)