プロトタイプ は、製品や画面を完成させる前に、アイデア、画面遷移、操作感、利用者の反応を確認するために作る試作品です。英語では prototype と書きます。
Webサイトやアプリでは、Figmaでクリックできる画面案を作ったり、HTML/CSS/JavaScriptで簡単なデモを作ったり、仮データで管理画面の流れを試したりするものがプロトタイプにあたります。
まず押さえたいポイント
- 完成品ではなく、確認や検証のための試作品
- 見た目だけでなく、クリック、入力、画面遷移、状態を試すために使う
- ワイヤーフレームより操作感の確認に寄る
- 本番実装と違い、認証、権限、性能、セキュリティを省略することがある
- 何を確かめたいのかを決めてから作ることが大切
どんな場面で使うか
プロトタイプは、新しい画面の操作感を確認したいとき、ユーザーテストで迷う場所を見つけたいとき、開発前に画面遷移や状態の抜けを見つけたいときに使われます。
問い合わせフォーム、予約画面、申請フロー、管理画面、オンボーディング画面のように、利用者が順番に操作する画面では特に役立ちます。
また、社内説明や営業資料で「完成するとこう使える」というイメージを共有するためにも使われます。ただし、見た目が動いていても本番品質とは限らないため、仮置き部分は明確にしておく必要があります。
近い用語との違い
ワイヤーフレームは、画面構成や情報の優先順位を確認するための資料です。プロトタイプは、そこから一歩進んで、画面を触ったときの流れや操作感を確認します。
モックアップは見た目の完成イメージ、本番実装は実際に提供するコードやシステムです。
MVP は、顧客から学ぶために必要最小限で提供する製品やサービスです。プロトタイプはMVPの前段で使われることもありますが、実際の利用や支払いまで検証するならMVPとして考える方が近くなります。
注意点
プロトタイプでよくある失敗は、見た目が完成品に近くなりすぎて、関係者が「もうほとんどできている」と誤解することです。
実際には、データ保存、認証、権限、エラー処理、性能、セキュリティ、運用、テストは別に必要です。
そのため、プロトタイプを作るときは、何を検証したいのか、どこまでが仮置きなのか、検証後に捨てるのか本番実装へ引き継ぐのかを決めておくと安全です。詳しくは、プロトタイプとは？ワイヤーフレームや本番実装との違い で整理しています。