プロトタイピング

概要と最新のツール事情

本実装（システム開発やコーディング）に入る前に、動作する試作品（プロトタイプ）を作って検証と改善のサイクルを回す手法・プロセスのこと。

クリック動作や画面遷移が可能なモックアップを作成し、ユーザーテスト・社内合意・開発業者への仕様伝達で活用する。

※【ツールの最新事情】：かつては InVision や Adobe XD が使われたが、現在は「Figma」を利用するのが業界のデファクトスタンダード（標準）であり、複雑な動きの検証には「ProtoPie」等が併用される。

現場の核心：手戻りコストを圧倒的に下げる「投資」

担当者にとって最も重要なのは、プロトタイピングを単なる作業ではなく「手戻りを削減するための極めて有効な投資」と捉えること。

静的なワイヤーフレーム(WF / ワイヤーフレーム)（画面構成図）やテキストベースの仕様書だけでは、実際の「動作・遷移・タイミング・使い勝手」は決して伝わらない。プロトタイプを実際に触って初めて見える欠陥がある。実装前に認識合わせをするコストは、実装後にコードを書き直す莫大な手戻りコストより圧倒的に安い。

実務におけるプロセスと合意形成の武器

実務においては「作って終わり」ではなく、「素早く作って、触ってもらい、フィードバックを得て修正する」という検証サイクルを回すことが目的となる。

経営層や他部署から合意（承認）を取る際にも、分厚い仕様書を読ませるより「実際に触れる形」を見せてデモを行う方がはるかに理解が早く、後からの「言った・言わない」の致命的なトラブルを未然に防ぐことができる。

やってはいけない「現場の落とし穴」と防衛策

作り込みの罠（手段の目的化）：プロトタイプの完成度を上げることに固執し、デザインの細部まで本実装と同じ時間を使って作り込んでしまう。※プロトタイプはあくまで「動きや体験を検証したら捨てるもの（使い捨て）」という割り切りが必須。「動きや導線が見える程度」が目的であり、見た目の完成度は本番の開発で詰めればよい。
身内だけのテストで満足する：せっかく作ったのに、社内の関係者や開発チームだけで触って「いいね」と満足してしまい、実際の顧客（ペルソナ）に触らせるユーザーテストを怠り、顧客視点のフィードバックを得ないまま本番開発に進んでしまう。

言葉をよく利用する人

デザイナー
ディレクター
Web 担当者(発注側)
プロデューサー

会話上での使用例

新規機能のワイヤーフレームから次の工程に進む場面

デザイナー
ワイヤーフレームが完成しました。次はどうしましょう。
Web担当者
ではプロトタイピングに進みましょう。Figmaで実際にクリックして動く形にして、ユーザーテストにかけたいんです。実装に入る前に問題を見つけておきたいので。
デザイナー
了解です。画面遷移にリンクをつけて、触れる状態にしますね。

経営層の合意を取りつける方法を相談する場面

プロデューサー
この案、経営層の合意を取りたいんですが、資料だけだと伝わりにくくて。
Web担当者
それならプロトタイピングで実際に触れる形を見せましょう。ワイヤーフレームを眺めてもらうより、動かして体験してもらったほうが圧倒的に理解されやすいですよ。