VISTACOMPARISON
ワイヤーフレーム・モックアップ・プロトタイプの違い
結論
ワイヤーフレームは画面構成を確認する設計図、モックアップは見た目を確認する完成見本、プロトタイプは操作や画面遷移まで確認できる動く試作品です。提案や社内承認で「使い心地」まで伝えたい場合は、プロトタイプ型の触れるモックが向いています。
AT A GLANCE
4つを並べて比較。
設計図
ワイヤーフレーム
画面の構成・情報の配置を確認するための骨組み。色やデザインは含みません。
- 主目的
- 構成の確認
- 動くか
- 基本は動かない
- 作る時期
- 初期設計
- 向く場面
- 情報設計の議論
完成見本
モックアップ
配色・書体・画像まで作り込んだ、見た目の完成見本。デザインの合意に使います。
- 主目的
- 見た目の確認
- 動くか
- 基本は動かない
- 作る時期
- デザイン工程
- 向く場面
- デザイン合意
動く試作品
プロトタイプ
操作・画面遷移まで確認できる試作品。使い心地の検証や合意形成に使います。
- 主目的
- 操作の確認
- 動くか
- 動く
- 作る時期
- 検証・提案
- 向く場面
- 提案・検証・承認
VISTA
提案用の触れるモック
見た目の完成度と操作を両立した、提案のための動くWebモック。ブラウザで開くだけ。
- 主目的
- 提案・意思決定
- 動くか
- 動く
- 作る時期
- 受注前・承認前
- 向く場面
- コンペ・受注前合意・社内承認
WHICH ONE
提案で使うなら、どれ？
見せる相手と、伝えたい深さで選びます。
ワイヤーフレーム／モックアップで足りるケース
- チーム内で情報設計を議論する段階
- デザインの方向性だけ合意できればよい
- 操作の説明が不要な、1枚もののビジュアル確認
プロトタイプ型（触れるモック）が向くケース
- コンペ・提案で相手に「完成後の体験」を伝えたい
- 受注前に操作感まで含めて合意したい
- 役員会・稟議で、企画書だけでは伝わらない
- 開発前にユーザーや現場の反応を見たい
VISTAが制作するのは、この表の右端──見た目の完成度と操作を両立した、提案用の触れるモックです。静止画やワイヤーフレームを素材に、最短3日で操作できる形へ仕上げます。サービス詳細はこちら。
FAQ
よくあるご質問。
Qモックアップとプロトタイプは何が違う？
モックアップは見た目を確認する完成見本で、基本的には動きません。プロトタイプは操作や画面遷移まで確認できる動く試作品です。
Qデザインカンプとモックアップの違いは？
ほぼ同じ意味で使われます。Web制作の現場では、完成イメージを静止画で示したものを「カンプ」と呼ぶことが多く、これも動きません。
Qワイヤーフレームから直接プロトタイプにできますか？
できます。VISTAでは、ワイヤーフレームやラフを素材に、見た目の仕上げと操作の作り込みを同時に進めます。