VISTAARTICLE
モックアップとは？
プロトタイプ・ワイヤーフレームとの違い
結論
モックアップは見た目を確認する完成見本、ワイヤーフレームは構成を確認する設計図、プロトタイプは操作まで確認できる動く試作品です。提案や社内承認で「使い心地」まで伝えたいなら、プロトタイプ型の触れるモックが向いています。
この記事でわかること
- モックアップの基本的な意味
- ワイヤーフレーム・デザインカンプとの違い
- プロトタイプとの決定的な差
- 提案で使うならどれを選ぶべきか
モックアップとは
モックアップ（mockup）とは、配色・書体・画像まで作り込んだ、見た目の完成見本です。実物に近い外観で「完成するとどう見えるか」を確認し、デザインの合意を取るために使います。
Web制作の現場では「デザインカンプ」とほぼ同じ意味で使われます。いずれも基本的には静止画で、クリックしても動きません。
ワイヤーフレーム・デザインカンプとの違い
混同されやすい3つの言葉を、目的と作る時期で並べると違いがはっきりします。
| 種類 | 主目的 | 動くか | 作る時期 |
|---|---|---|---|
| ワイヤーフレーム | 構成の確認 | 基本は動かない | 初期設計 |
| モックアップ | 見た目の確認 | 基本は動かない | デザイン工程 |
| デザインカンプ | 完成イメージの提示 | 動かない | デザイン工程 |
| プロトタイプ | 操作の確認 | 動く | 検証・提案 |
プロトタイプとの決定的な違いは「動くかどうか」
モックアップとプロトタイプの最大の違いは、操作できるかどうかです。モックアップは見た目の確認まで、プロトタイプは画面遷移・入力・タブなどの操作まで確認できます。
提案の場で「押したらどうなるか」まで見せたいなら、動くプロトタイプが必要になります。用語の使い分けは
提案で使うなら、どれを選ぶ？
見せる相手と、伝えたい深さで選びます。
- 社内で情報設計を議論する段階 → ワイヤーフレーム
- デザインの方向性を合意したい → モックアップ／デザインカンプ
- 提案・コンペ・社内承認で体験まで伝えたい → プロトタイプ型の触れるモック
VISTAでできること
VISTAが制作するのは、見た目の完成度と操作を両立した「提案用の触れるモック」です。ワイヤーフレームや静止画を素材に、最短3日で操作できる形へ仕上げます。呼び方が決まっていなくても、用途を伝えていただければ最適な形で制作します。
よくあるご質問
Qモックアップとデザインカンプは違いますか？
ほぼ同じ意味で使われます。完成イメージを静止画で示したもので、どちらも基本的には動きません。
Qモックアップは自分でも作れますか？
作図ツールや生成AIで作れます。ただし提案で見せる品質やブランド反映、操作の作り込みまで必要な場合は、人が仕上げる方が向いています。
Q提案用に動くモックを作ってもらえますか？
はい。VISTAは提案・社内承認で使える、操作できるWebモックを制作します。最短3日・10万円〜（税別）です。