先に要点
画面案を見ているときは良さそうだったのに、実際に触ってみると「次にどこを押せばいいか分からない」「戻ると入力内容が消えそうで怖い」「スマホだと操作しにくい」と気づくことがあります。
こうした問題を、本番実装に入る前に見つけるための試作品がプロトタイプです。
プロトタイプは、完成品ではありません。
でも、ただの絵でもありません。クリックできる、画面を移動できる、入力やエラーの流れを試せるなど、使ったときの感覚を確認するために作ります。
この記事では、プロトタイプとは何かを、ワイヤーフレーム、モックアップ、本番実装、MVPとの違いも含めて整理します。
プロトタイプとは
プロトタイプとは、製品や画面を完成させる前に、アイデア、操作感、画面遷移、利用者の反応を確かめるために作る試作品です。
英語では prototype と書きます。
Figmaの解説でも、プロトタイプはアイデアをテストし、ユーザーのフィードバックを得るための初期モデルとして説明されています。Interaction Design Foundation でも、プロトタイピングはアイデアを具体化し、実装前にテストするための重要な活動として扱われています。
Webサイトやアプリでは、次のようなものがプロトタイプになります。
- Figmaで画面遷移をつないだクリック可能な画面案
- HTML/CSS/JavaScriptで作った簡易デモ
- 実データではなく仮データで動く管理画面
- 紙やホワイトボードで画面の流れを試す簡易プロトタイプ
- AIで作った初期画面案を触れる形にしたもの
大事なのは、プロトタイプの目的が「完成品を作ること」ではなく「確かめること」だという点です。
何を確認するのか
プロトタイプで確認することは、見た目の好みだけではありません。
| 確認すること | 例 |
|---|---|
| 画面遷移 | 次の画面へ自然に進めるか、戻れるか |
| 操作感 | 押す場所、入力する場所、完了までの流れが分かるか |
| 状態 | 読み込み中、エラー、空状態、完了状態が想像できるか |
| 情報量 | 1画面に詰め込みすぎていないか |
| スマホ表示 | 指で操作しやすいか、重要情報が埋もれないか |
| 業務フロー | 実際の担当者がその順番で作業できるか |
たとえば問い合わせフォームなら、入力画面だけでなく、確認画面、送信中、完了、入力エラー、戻る操作まで試すと、実装前に抜けが見つかります。
管理画面なら、一覧、詳細、編集、保存、キャンセル、権限不足、データがない状態まで見ると、実務で使うときの違和感を見つけやすくなります。
ワイヤーフレームとの違い
ワイヤーフレームとプロトタイプは近いですが、目的が違います。
| 種類 | 主な目的 | 確認すること |
|---|---|---|
| ワイヤーフレーム | 画面構成を整理する | 情報の配置、優先順位、導線 |
| プロトタイプ | 触ったときの流れを確認する | クリック、遷移、入力、状態 |
| デザインカンプ | 完成見た目を確認する | 色、余白、画像、タイポグラフィ |
| 本番実装 | 実際に提供する | データ、性能、セキュリティ、運用 |
ワイヤーフレームは、画面の骨格を確認するための資料です。
「この画面に何を置くか」「どの情報を先に見せるか」を話すのに向いています。
プロトタイプは、画面を触ったときの流れを確認するための資料です。
「このボタンを押したら次はどこへ行くか」「戻ったときにどう見えるか」「エラー時に迷わないか」を試すのに向いています。
ワイヤーフレームの基本は、ワイヤーフレームとは？デザイン前に画面構成を整理する理由 で整理しています。
本番実装との違い
プロトタイプが動くと、関係者から「もうほとんど完成しているのでは」と見られることがあります。
でも、プロトタイプと本番実装はかなり違います。
| 観点 | プロトタイプ | 本番実装 |
|---|---|---|
| 目的 | 検証する | 実際に提供する |
| データ | 仮データでよい | 実データを安全に扱う |
| 認証・権限 | 省略することがある | 必須で設計する |
| エラー処理 | 代表例だけでよいことがある | 網羅的に扱う |
| 性能 | ざっくり確認 | 負荷や速度を考える |
| 保守 | 使い捨ての場合もある | 長く直せる構成にする |
プロトタイプは、実装の代わりではありません。
本番にするなら、入力検証、認証、権限、ログ、アクセシビリティ、レスポンシブ、セキュリティ、テスト、運用まで別途考える必要があります。
特にAIやノーコードツールで作ったプロトタイプは、見た目が整っていても、内部品質が本番向けとは限りません。
「動いた」ことと「安全に運用できる」ことは分けて考えます。
モックアップやMVPとの違い
プロトタイプは、モックアップやMVPとも混同されやすいです。
| 用語 | ざっくりした意味 |
|---|---|
| モックアップ | 見た目や完成イメージを示す模型 |
| プロトタイプ | 操作や流れを試す試作品 |
| MVP | 学びを得るために必要最小限で提供する製品・サービス |
| PoC | 技術的に実現できるかを確かめる検証 |
モックアップは、静的な見た目確認に寄ることが多いです。
プロトタイプは、クリックや入力、画面遷移などの体験確認に寄ります。
MVP は、顧客から学ぶための最小限の製品です。
プロトタイプはMVPの前段で使われることもありますが、実際の顧客に価値を届けて継続利用や支払いを検証するなら、MVPとして考える方が近くなります。
新規サービス検証の全体像は、新しいサービスを生み出すコツとは？課題発見・MVP・検証の進め方 で整理しています。
どんな場面で作るか
プロトタイプは、次のような場面で役立ちます。
- 新しい画面の操作感を関係者で確認したい
- ユーザーテストで迷う場所を見つけたい
- 開発前に画面遷移や状態の抜けを確認したい
- 営業や社内説明で完成イメージを共有したい
- AIやデザインツールで出した案を、実際に触って検討したい
- 本番実装に入る前に、大きな手戻りを減らしたい
特に、業務システム、申請フロー、問い合わせフォーム、予約画面、管理画面、オンボーディング画面のように、手順がある画面ではプロトタイプが効きやすいです。
一方で、単純な静的ページや、構造がほぼ決まっているページでは、低精度のワイヤーフレームだけで十分なこともあります。
何でもプロトタイプ化すればよいわけではありません。
作る前に決めること
プロトタイプを作る前に、まず次を決めます。
- 何を確かめたいのか
- 誰に触ってもらうのか
- どこまで作れば判断できるのか
- どこは仮置きでよいのか
- 検証後に捨てるのか、本番実装へ引き継ぐのか
この5つを決めないまま作ると、必要以上に作り込みがちです。
色やアニメーションを詰めたのに、本当に見たかった入力フローやエラー状態が抜けている、ということも起きます。
実務では、プロトタイプに「これは確認用であり、本番品質ではない」と明記しておくと誤解を減らせます。
特に社内説明や営業資料に使う場合、どこが実装済みで、どこが仮の画面なのかを分けて伝えることが大切です。
よくある失敗
プロトタイプでよくある失敗は、完成品っぽく見えすぎることです。
- 見た目を作り込みすぎて、構造や流れの議論がしにくくなる
- クリックできる範囲が少なく、肝心の操作を試せない
- 正常系だけ作って、エラーや空状態がない
- 仮データなのに、実際の業務量に耐えるように見えてしまう
- 本番実装の工数見積もりにそのまま使われてしまう
- セキュリティや権限が未検討なのに「もう動いている」と誤解される
- 検証結果を記録せず、ただ作って終わる
特にAIでプロトタイプを作る場合は、短時間でそれらしい画面が出るぶん、完成度を高く見積もりやすいです。
でも、プロトタイプの価値は「きれいに見えること」ではなく「実装前に学べること」です。
Claude DesignのようなAIデザイン支援については、Claude Designとは？AIでプロトタイプやスライドを作る機能を整理 でも扱っています。
レビューで見るポイント
プロトタイプをレビューするときは、次を確認します。
- ユーザーが最初に何をすればよいか分かるか
- 次の画面へ自然に進めるか
- 戻る、キャンセル、やり直しが想像できるか
- 入力ミスやエラー時に迷わないか
- データがない状態や権限不足の状態を考えているか
- スマホや小さい画面でも操作できるか
- 本番実装へ引き継ぐ前提と仮置き部分が分かれているか
レビューでは、「この色が好きか」よりも、「この順番で作業できるか」「この文言で次の行動が分かるか」「この状態が起きたらどうなるか」を話す方が効果的です。
まとめ
プロトタイプは、完成前に画面遷移や操作感、利用者の反応を確認するための試作品です。
ワイヤーフレームが画面構成を整理する資料なら、プロトタイプは実際に触ったときの流れを確かめる資料です。
ただし、プロトタイプは本番実装ではありません。
動いて見えても、認証、権限、データ保存、性能、セキュリティ、運用、テストまで完成しているわけではありません。
実務では、何を確かめたいのかを決め、必要な範囲だけ作り、触って分かったことを記録することが大切です。
プロトタイプは、完成品の近道というより、本番実装に入る前の大きな勘違いを減らすための道具です。
参考リンク
- Figma: What is prototyping?
- Interaction Design Foundation: Prototyping
- Nielsen Norman Group: UX Prototypes: Low Fidelity vs. High Fidelity