#523
UI設計パターン
#523もっくあっぷ
モックアップ
別名・表記:Mockupモック静的デザインカンプデザインカンプ
UIXHERO Definition
UIXHEROでは、モックアップを「配色・タイポグラフィ・画像まで作り込まれた、操作しない静止画としてのUI」と定義する。
概要
設計の中間成果物は、忠実度（fidelity）と操作性の2軸で整理すると混乱しにくい。
| 見た目の忠実度 | 操作できるか | |
|---|---|---|
| ワイヤーフレーム | 低い | しない |
| モックアップ | 高い | しない |
| プロトタイプ | 低〜高 | する |
モックアップは「見た目は完成、動きはなし」の位置にある。プロトタイプは忠実度が低くても操作できるものを指すため、モックアップの上位互換ではない。
UXでの活用
- 視覚仕様の合意: 色、余白、階層の意図を、実装前に文字ではなく画で共有できる。
- アクセシビリティの事前確認: コントラスト比や文字サイズは、モックアップの段階で機械的に検査できる。
- 実データでの検証: ダミーテキストではなく実際に起こりうる長さ・件数を入れると、レイアウトの破綻を早期に見つけられる。
誤用・混乱
- モックアップ＝プロトタイプではない: 用語が混用されることは多いが、操作の有無で区別しておくと、レビュー時に何を検証できるかが明確になる。
- ユーザーテストの素材として限界がある: 静止画では、押した後に何が起きるかを検証できない。タスク完遂の検証には操作可能なものが必要。
- 理想データで作らない: 短い商品名、欠けのないデータで作られたモックアップは、実装後に崩れる。空状態・最長ケースも用意する。
💡 使いどころ
レイアウトと情報構造が固まった後、見た目の完成イメージを合意したい時。ブランド表現やコントラストの確認、実装前の視覚仕様の共有に使う。
⚠️ 注意点・誤用
モックアップは静止画であり、遷移・入力・エラー・待ち時間といった時間軸の体験は表現できない。「モックアップで問題なかった」ことは、使いやすさの検証にはならない。
具体例
- 決定した配色とフォントを適用した、実データに近い商品一覧画面
- 実装前にコントラスト比を確認するための高精細な画面画像
- ステークホルダー向けの完成イメージ提示
出典・参考文献:
- Sketching User Experiences (Bill Buxton)
- Prototyping に関する Nielsen Norman Group の解説記事