モックアップとは
モックアップとは、製品の見た目を、実物に近い形で再現した試作品です。Webサイトやアプリでは、色、文字、画像、配置まで作り込んだ画面のデザイン見本を指すことが多いです。もともとは、建築や工業製品の実物大模型を意味する言葉です。
ワイヤーフレームが骨組みを描く図なのに対し、モックアップは実際の見た目に近づけたものです。ただし、通常は実際には動作しません。画像として見るだけのものもあれば、画面の遷移だけを試せるものもあります。
仕組み・ポイント
似た言葉との違いを整理します。
| 種類 | 特徴 | 主な目的 |
|---|---|---|
| ワイヤーフレーム | 線と箱で構成を示す | 配置と情報の優先順位の確認 |
| モックアップ | 色や文字を含む見た目の見本 | 外観やブランドの印象の確認 |
| プロトタイプ | 一部が実際に動く試作 | 操作の流れや使い勝手の確認 |
モックアップを作る際は、確認したいことを先に決めます。見た目の印象を確かめたいのか、利用者が操作を理解できるかを確かめたいのかで、必要な作り込みの度合いが違います。見た目が完成に近いほど、人は動くと思い込みやすいため、「どこまで実際に動くのか」を示しておくことが重要です。
作成の手順としては、ワイヤーフレームで確認した構成をもとに、配色、文字、写真、アイコンなどを加えます。ブランドの印象を左右するため、デザインの方針やルールを先に決めておくと、画面ごとのばらつきを防げます。
実務での使い方・具体例
架空の例として、新サービスの画面デザインを関係者に確認してもらう場面を考えます。モックアップを見せると、色やロゴの印象、文字の大きさについて具体的な意見が得られます。経営層は完成形をイメージしやすくなり、承認が進みやすくなります。
一方で、見た目が整っているために「もうほぼ完成している」と受け取られることがあります。そこで、「これは画像であり、検索や登録はまだ動かない」と明記し、実際に動く範囲は別に説明します。利用者の反応を確かめたい場合は、動作を試せるプロトタイプへ進める判断もあります。
承認を得る場面では、見せる相手が何を判断するのかを先に伝えます。印象や配色を見てほしいのか、情報の並びを確認してほしいのかを示せば、意見が散らばらず、決定が早くなります。
作ったモックアップは、後の開発の担当者へ渡す資料としても使えます。色の指定や文字の大きさなどを注記しておくと、実装時の解釈の違いを減らせます。
判断のチェックポイント
- 確認したいことが、見た目の印象か操作の流れかを決めたか
- 動作しない部分を、見る人へ明確に伝えたか
- 実際の利用者の感想を、少人数でも聞く機会があるか
- 画面の状態（エラー、空の状態など）も用意したか
- 作り込む範囲を、目的に見合う程度に抑えたか
- 承認を得る相手と、確認する観点を決めているか
よくある誤解と注意点
- 完成が近いわけではない：見た目と実装は別の作業です。
- 見た目の好みで判断を固定しない：目的に沿っているかを基準にします。
- 動作の範囲を明示する：期待のずれを防ぎます。
- 作り込みすぎない：確認したいことに応じた粒度にします。
- 利用者の確認を省かない：社内の評価だけでは、使い勝手の問題を見落とします。
関連用語
- ワイヤーフレーム：見た目の前に構成を確認する手法
- プロトタイプ：動作を試せる試作
- UI・UX（ユーザーインターフェース・ユーザー体験）：画面設計の背景にある考え方
- MVP（実用最小限の製品）：最小の製品で検証する考え方
Otsumuに相談できること
見た目の試作は、検証の目的が決まっていると、必要最小限の作り込みで済みます。Otsumuでは、何を確かめるために何を作るのかを整理し、費用を抑えた試作の進め方をご一緒に検討できます。
MVP開発のご支援内容もご覧いただけます。進め方に迷う段階であれば、30分の無料相談でお話しください。
執筆：Otsumu株式会社 ／ 編集日 2026.10.04