モックアップとは｜新規事業での作り方とプロトタイプとの違い

企画会議で「こんな画面になります」と口頭で説明したとき、聞き手の頭に浮かぶ完成像はばらばらです。営業は顧客への見せ方を、開発は機能を、決裁者は商品としての説得力を思い描いています。会話は成立しているのに、見ているものが揃っていません。モックアップとは、このずれを完成前に表へ出すための視覚的な試作物です。

主眼は動作の検証ではありません。外観、画面構成、情報の優先順位、利用場面。関係者が同じものを見ながら、この4点の認識を合わせることにあります。手描きのパッケージ案も、端末画面を並べた資料も、設置イメージも、外観や配置を判断する目的で作るなら立派なモックアップです。

ただし、見た目が具体的になるほど「もう使える」と誤解されやすくなります。この記事では、モックアップの定義と作り方、レビューの進め方、操作を確かめるプロトタイプとの違い、次工程への渡し方までを解説します。

モックアップとは｜見た目と情報配置を判断する試作物

モックアップとは、製品・サービスの外観や画面、情報の並びを完成前に可視化し、関係者の判断を揃えるための試作物です。動くことは必須条件ではありません。

デジタルサービスなら、文字・画像・ボタン・入力欄を配置した画面イメージが典型です。物理的な商品なら、容器やラベル、設置時の見え方を示した立体物や合成画像が該当します。受付画面、案内メール、利用後のレポートといった、形のないサービスの顧客接点も可視化の対象になります。

完成度の高さは定義に含まれません。粗い手描きの案でも、実文言や写真まで入れた案でも、見た目や配置を判断するために作るならモックアップです。

一方で、呼称の範囲は組織や制作領域によって揺れます。だからこそ作り始める前に、「月次レポート画面の情報順を確認する。データ連携と操作性は対象外」のように、作る範囲・判定すること・判定しないことを一文で合わせておきます。この一文があるだけで、意思決定の収束が早くなります。

ワイヤーフレーム・プロトタイプ・MVPとの違い

ワイヤーフレームは情報構造、モックアップは外観と情報の見え方、プロトタイプは操作と反応、MVPは価値提案に対する顧客行動を主に確かめるものと区分します。違いは仕上がりの細かさではなく、答えたい問いにあります。

一つの成果物が複数の役割を兼ねることもあります。外観と操作を同じ試作物で扱うなら、レビュー項目を分けてください。注意したいのは、モックアップを見せて「欲しい」と言われても、価値や需要を確認したことにはならない点です。

モックアップで確認できること・確認できないこと

モックアップで確認できるのは、情報の伝わり方と見え方です。操作の成功、技術的な成立、運用負荷、市場需要まで「確認済み」にしてはいけません。

モックアップは、抽象的な言葉を目に見える選択肢に変えます。企画段階では主役となる情報を、社内審査では顧客に提示する情報と顧客から取得する情報を、外部発注前では制作範囲と未確定箇所を共有できます。顧客候補に見せる場合は、「好きですか」と聞くのではなく、最初に何のサービスだと捉えたか、どの情報を先に見たかを記録します。

逆に、静止画を眺めるだけでは分からないことがあります。入力中の迷い、エラーからの復帰、データ連携、運用の負荷。見た目への好意や利用意向も、契約や支払いの事実とは別物です。

そのため、記録は「説明が伝わった」「この情報が足りなかった」のように観察した範囲にとどめ、操作性・技術実現性・需要・価格受容性は未検証として残します。提供価値そのものがどう受け止められるかは、コンセプトテストの役割です。

モックアップの作り方｜判断したい問いから逆算する

モックアップは作図から始めません。誰が、どの場面で、何を判断するために見るのかを一文にし、その判断に必要な画面・状態だけを作ります。

1．レビュー後に決めることを書く

「このモックアップを見た後、何を決められれば終わりか」をまず書きます。情報の順序、外観の方向、顧客へ示す文言。論点ごとに決定者も添えます。決めることが複数あるなら、レビュー自体を分けてください。

2．対象者と利用場面を一つに絞る

誰が何を終えたい場面なのかを短く書きます。たとえば「初めてログインした部門責任者が、未処理の申請を確認する場面」です。物理的な商品でも、店頭・開封・保管をすべて一枚に詰め込まず、判断したい接点を選びます。

3．情報の優先順位を決める

情報を三つに分けます。最初に知ること、比較するときに見ること、行動前に確認すること。実際に近い文言を入れ、未確定の数値や実績には「サンプル値」「表示条件未確定」と明示します。

4．粗い案で構造を確認する

まずは区画・順序・大きさ・主な文言を置きます。複数案を作るなら、色だけでなく情報量や主役、行動の入口など、判断したい軸を一つだけ変え、案の違いを一文で説明できるようにします。

5．実際に近い内容と状態を入れる

方向性が決まったら、実文言、長い名称、空欄、エラー、権限差を入れます。役割によって表示内容が変わるBtoBサービスなら、今回の対象者が誰なのかをファイル名と画面内に残しておきます。

6．決定・保留・対象外を記録する

レビューの結果を「採用」「要修正」「保留」「今回の対象外」に分け、決定者と変更理由を残します。保留には、足りない情報と次の確認方法を添えてください。版が変わっても、判断の履歴を追える状態を保ちます。

レビューで見る項目｜好みの会議にしない進め方

レビューは「好きか嫌いか」を聞く場ではありません。誰に何がどう見え、次の判断に必要な情報が揃っているかを確認し、記録を「観察事実」「懸念」「変更案」「決定」に分けます。

冒頭で、目的・対象者・利用場面・今回決めること・対象外を共有します。途中参加者も同じ条件でコメントできる状態にするためです。

確認は、全体、情報、状態、引き渡しの順に進めます。

• 全体：最初に何の製品・サービスだと分かるか。主役が一つに見えるか。想定した利用場面と食い違わないか
• 情報：見出しと本文の順序は自然か。用語の意味を取り違えないか。判断前に必要な条件が欠けていないか
• 状態：空欄、長文、エラー、処理中、権限なしなど、通常時以外でも情報が破綻しないか
• 引き渡し：確定した要素と未確定の要素が区別されているか。次の制作・実装で判断し直す項目が明記されているか

コメントの書き方にもルールを置きます。「ボタンが小さい」で終えず、「初めて使う承認者が主操作を見つけにくい」のように、対象者と懸念をセットにします。顧客候補に見せるときは説明を足しすぎず、最初の理解、迷った箇所、足りない情報を順に確かめます。今回の論点に決定が出て、未決事項の担当者と確認方法が決まったら、レビューは終了です。

モックアップの形式の選び方｜紙・スライド・共同編集データ

モックアップの形式は、仕上がりの細かさではなく、レビュー参加者・修正履歴・次工程への渡し方で選びます。最初の一案は紙やスライドで足ります。

構造と情報量を見る段階なら、手描きやスライドなど誰でも直せる形式が向いています。共同でコメントし、画面部品を再利用し、後で操作可能な試作品へ進めるつもりなら、共同編集と部品管理に対応した形式を選びます。物理的な商品なら、原寸の印刷物や簡易立体も候補です。

形式を選ぶときの確認項目は次のとおりです。

• レビュー参加者が、新しいアカウントや操作説明なしで閲覧できるか
• コメントが画面上の該当箇所と結びつき、解決済みかどうかを追えるか
• 長文、複数端末、権限差など、今回見たい状態を表現できるか
• 次の制作担当が、寸法、文言、画像、部品の状態を読み取れるか
• 顧客情報や未公開情報を置く場合、社内の情報管理条件を満たすか
• 書き出した画像やPDFでも、版と未確定箇所が判別できるか

最後にひと手間かけます。ファイルには対象者・場面・版・レビュー日を、画面内には「確認対象」「対象外」「サンプルデータ」を記載しておくと、後から見た人が迷いません。

モックアップの次に何を作るか｜残った問いで選ぶ

次工程は完成度ではなく、モックアップで解けなかった問いから選びます。価値提案の理解や選択理由が残るならコンセプトテスト、操作と反応ならプロトタイプ、実際の利用・社内手続き・支払いならMVPです。

モックアップで扱う論点に結論が出ていれば、仕上がりが粗くても役目は終わりです。逆に、どれほど精密な画面でも、誰の何を確かめたのかが曖昧なら次工程へ渡せません。

進み先は残った問いで決まります。価値提案がどう理解され、何が選択を止めるのかを知りたいならコンセプトテスト、操作と反応が未検証ならプロトタイプ、実際の利用や社内手続き、支払いが残るならMVPへ進みます。どの経路を選んでも、モックアップへの好意的な反応を市場需要の証拠に置き換えないでください。

次工程への引き渡しメモには、四つだけ残します。

1. モックアップで確認できた事実
2. 外れた前提と修正内容
3. 今回は確認していない項目
4. 次に確かめる問いと、そのために作るもの

この四つをもとに、まだ分かっていないことから次工程を選びます。

まとめ｜きれいに作る前に、何を決めるかを固定する

モックアップとは、製品・サービスの見た目と情報配置を具体化し、関係者が同じ対象を見ながら判断するための視覚的な試作物です。完成品に近づける作業ではなく、認識のずれと未決事項を早く見つける作業として使います。

手順はシンプルです。対象者、利用場面、決めること、対象外を書き、粗い案で構造を比べます。レビューでは好みを集めず、観察事実、懸念、変更案、決定を分けて記録します。価値提案の理解や選択理由が残ればコンセプトテスト、操作ならプロトタイプ、実際の利用・社内手続き・支払いならMVPへ進みます。需要、技術、運用まで「検証済み」に広げないことが、モックアップを使いこなす最大のコツです。

モックアップレビューシートをダウンロード

対象者、利用場面、今回決めること、対象外、レビュー結果、次に確かめる問いを一枚で整理するシートです。モックアップ作成前の認識合わせと、プロトタイプやMVPへ渡す記録に使えます。

［モックアップレビューシートをダウンロード］