ワイヤーフレーム、モックアップ、プロトタイプの領域をマトリックス図で整理

UX MILKさんの記事
ワイヤーフレーム、モックアップやプロトタイプ、それぞれの定義と役割
を参考に、マトリックス図で整理してみました。

まずはそれぞれの解説から。

ワイヤーフレーム

静的で忠実度の低いデザイン。
製品の骨組み。
レイアウトを決める設計図。

モックアップ

静的で忠実度の高いデザイン。
製品の「質感」を表す。
忠実度によっていくつものモックアップがある。

ローファイなモックアップ
ワイヤーフレームを完成品に似せたデザインに変えたもの。
ローファイな段階では、情報やビジュアルの配置を固定

ハイファイなモックアップ
実際に使うコンテンツやそれに近いものを適用。

プロトタイプ

インタラクティブなモックアップ。
インタラクションやアニメーション、別のページやビューへのリンクが含まれる。

ローファイなプロトタイプ
ユーザーフローを素早く検証するのに役立つ。

ハイファイなプロトタイプ
ビジュアルデザインやインタラクションデザインがまとまっているのを確認するのに役立つ。

マトリックス図で整理

・静的か？動的か？
・低忠実度か？高忠実度か？
でそれぞれ領域が違うことがわかりました。

そしてプロトタイプの中には、低忠実度のモックアップや高忠実度のモックアップがあります。