ITで幅広く活用されているプロトタイプの代表格といえば、UIプロトタイプ
デジタルサービス開発におけるプロトタイピングの代表格といえば、UIプロトタイプです。企画検討、設計検討、ユーザーテストや導線評価、さまざまな検討シーンで幅広く活用されています。
特に、プロジェクトの起案初期の段階でUIプロトタイプを作成し評価することで「実際につくってみたらイメージと違った」といったギャップを早期に発見し、意思決定の質を高めることを期待したプロトタイピング手法は、GV（旧Google Ventures）のJake Knapp氏のデザインスプリント（書籍『SPRINT』）と共に、広く国内IT業界に知られているのではないでしょうか。
最近では、企画書と一緒にプロトタイプを会議や打ち合わせに持ち込む事例も聞きますが、企画検討においても、具体的なプロトタイプがあるかないかで、議論の内容や得られる学びの質・量は大きく変化します。
こうしたさまざまな活用シーンへの需要もあり、Figmaなどに代表されるデジタルUIプロトタイピングツールは、より速く、より簡単に、誰もが迅速にプロトタイプを作れる世界を目指し、進化を続けてきた側面があります。
生成AIによるライブUIプロトタイピング
連載初回のプレスリリースプロトタイピングに続き、UIプロトタイピングの分野においても、生成AIの高速なコーディング性能を活かすことで、これまでにない手軽さと、もはやリアルタイムに近い速さで、UIのプロトタイプをつくれるようになりつつあります。
ここでは、既存のWebサービスを対象としたUI変更のプロトタイピングを例に挙げ、生成AIチャットを活用したシンプルな手法を解説します。
以下の3ステップで構成されます。
- 既存UIを再現させる
- 改善を指示する
- 完成UIを用いてディスカッション・指示追加
ステップ1：既存UIを再現させる
ChatGPT、Gemini、Claudeなど、汎用の生成AIチャットを用い、既存WebサービスのUIを再現します。各社の生成AIモデルは、画像からデザインを認識することができます。
既存のページ画面をスクリーンショットで撮影して添付し、「HTML・CSS・SVGを用いて再現して」と指示することで、AIにデザインをHTMLページとして再現させます。
※スクリーンショットからのデザイン再現では、Anthropic Claudeがもっとも高いと評価しています（2025年7月時点）。
指示テンプレート
添付したスクリーンショットのUIを、HTML・CSS・SVGを用い正確に再現してください。再現できない画像はグレー背景と「×」で表現します。
対象サイトのスクリーンショットを添付
※ Claudeチャットに、スクリーンショットを添付してUI再現を依頼。
ステップ2：UI変更や改善を指示する
ページデザインの再現ができたら、改善内容の指示や壁打ちを行います。
a. 試したいアイデアがある場合
試したいアイデアをAIに指示する。
例：
選択済み条件を、チップ表示に変更してみて
b. アイデアについて壁打ちしたい場合
AIに良いアイデアがないか質問する。
例：
条件選択のUIを変更するとしたらどんな案がある？
ステップ3：完成UIを用いてディスカッション・改良指示の追加
AIチャットが生成したプロトタイプを、打ち合わせの参加者に画面共有しながら、それぞれの視点で認識とのギャップの意見を出ししたり、よりよいアイデアはないかディスカッションしたりして、意見を整理していきます。ディスカッション中にAIチャットに追加指示をすることで、その場でUIを調整することもできます。
もちろん、生成したデザインをHTMLやPDF、画像にすることで資料として活用することもできます。
以下は、不動産情報サイト「HOME'S」の不動産検索UIを再現して、検索条件をタグ表示でON／OFFできるUIプロトタイプをAIに作らせた参考例です。
この参考例では、Anthropic Claudeチャット（Opus 4とSonnet 4）を用い、UIパーツの部分改変を指示した例ですが、例えば「今住む家の困りごとをベースに、次の不動産探しができる検索ページを作って」といった、ユーザー体験を中心としたアイデアベースの指示も可能です。
また、実際のHTMLとしてブラウザで触ることができるだけでなく、各種UIのオンオフ動作などの実装もAIに行わせることで、インタラクティブなプロトタイプを作成することもできます。
