生成AIの応用的な活用方法として、アイデアや画像から
「UI（ユーザーインターフェース）の試作（プロトタイプ）を作成・修正する」方法をご紹介します。
本記事では、画像認識とコード生成が可能なチャット形式の生成AIを用いて手順を説明します。
こちらの用途別推奨モデル表を参照いただき、適切なモデルをご選択ください。
※ご利用可能なチャットパートナーの種類等については、貴社の管理者の方にお問い合わせください。
UIプロトタイプ作成機能とは？
スクリーンショットやデザイン案の画像などをAIが解析し、それを再現するHTML/CSSといったコードを自動で生成する機能です。さらに、生成されたUIに対して「ここの色を変えて」「ボタンを追加して」といった言葉（自然言語）で指示を出すことで、リアルタイムに修正を加えることができます。
これにより、コーディングの知識がなくても、アイデアを即座に動く形にでき、デザインの試行錯誤やチーム内でのイメージ共有が劇的に高速化します。
UIプロトタイプを作成する手順
- 元となるデザインや画像を用意する。
- AIに指示し、UIを生成させる。
- 対話によってUIを修正・改善する。
-
完成したプロトタイプを活用する。
1. 元となる画像を用意する
まず、プロトタイプの土台となるデザインを画像で用意します。既存のWebサイトのスクリーンショット、デザインツール（Figmaなど）で作成したデザイン案、手書きのワイヤーフレームなど、どのような画像でも構いません。
この際、綺麗なデザイン案がなくても始められる点が、この技術の大きな強みです。例えば、会議中にホワイトボードに書いたラフスケッチや、ノートに手書きしたアイデア図をスマートフォンで撮影するだけで十分です。まさに「思いついた瞬間にプロトタイピングを始める」ことができます。
今回は例として、エクサベース AIヘルプページのトップ画面（旧版）のスクリーンショットを使用します。このデザインを元に、画面のダークモードのプロトタイプを作成し、修正を加えていきます。
【スクリーンショット画像：エクサベース AIヘルプページのトップ画面（旧版）】
2. AIに指示し、UIを生成させる
ご利用の生成AIツールを開き、1.で用意した画像をアップロードします。そして、画像からUIを再現するように、簡単な指示（プロンプト）を入力します。
今回は、下記のようなプロンプトでご紹介します。
この画像を基に、HTMLとCSSでUIを再現してください。プロンプトを送信すると、AIが画像を解析し、再現に必要なコードと、そのコードで表示されるUIのプレビューを生成します。
【スクリーンショット画像：左側にHTML/CSSのコード、右側にスクリーンショットそっくりのUIプレビューが表示されているAIの実行結果画面】
3. 対話によってUIを修正・改善する
UIのプレビューが生成されたら、ここからが本番です。チャットでAIに話しかけるように、修正したい点を言葉で伝えていきます。今回は「全体をモダンなダークモードに変更し、メニュー項目を追加する」という改善を試してみましょう。
指示①：ダークモードへの変更
まずは、サイトの印象を大きく変えるために、背景と文字色を変更する指示を出します。
背景をダークグレー（#333）に、文字色を白に変更してください。【スクリーンショット画像：プレビュー画面のUIが瞬時にダークモードに切り替わっている。左側のCSSコードも背景色や文字色の指定が更新されている様子】
指示②：リンクの追加
次に、新しいリンクとして検索バーの下に「ユーザー会&セミナー情報」を追加してみます。
検索バーの下にあるリンクリストに、項目を一つ追加してください。
追加する場所: よくある質問 の右隣
追加するテキスト: ユーザー会&セミナー情報
他の項目（利用マニュアルなど）と同じスタイルを適用してください指示③：特定要素の強調
最後に、ユーザーに検索を促すため、検索ボックスを目立たせる指示を出します。
このデザインで、ユーザーにもっと検索機能を使ってほしいので、検索ボックスを目立たせる変更を加えたいです。
検索ボックスの枠線を、アクセントカラーの明るい紫（例：#C4B5FD）に変更してください。
枠の太さも少し太く（2px程度に）して、視線が自然に集まるようにしたいです。【スクリーンショット画像：初期の画像がダークモードに】
このように、チャットを続けるだけで、インタラクティブにUIデザインを試行錯誤できます。
質を高める専門的プロンプト
上記のような見た目の修正だけでなく、以下のような専門的な指示を与えることで、より質の高いプロンプトを作成できます。
-
インタラクティブな要素の追加：
- 「ページ中央の各カテゴリーをクリックすると、そのカテゴリーのページへリンクされるようにしてください。」
-
基本的な3Dオブジェクトの生成：
- 「中央でゆっくりと回転する赤い立方体の3Dプロトタイプを作成してください。背景は白でお願いします。」
-
アクセシビリティの確認：
- 「Webアクセシビリティの観点から、このダークモードの背景色と文字色のコントラスト比が十分か確認してください。」
4. 完成したプロトタイプを活用する
このようなプロセスを経て修正が完了したら、生成されたプロトタイプをチームに共有したり、さらなる開発の土台として活用したりできます。
多くのAIツールでは、生成されたHTML/CSSコードを丸ごとダウンロードする機能が備わっています。このコードを外部のコード共有ツール（CodePenなど）に貼り付けてURLを共有すれば、誰でもブラウザ上で動くプロトタイプを確認できます。
以上が、画像からUIプロトタイプを作成し、対話形式で改善していく基本的な事例のご紹介でした。
皆様も、改善したいWebサイトのスクリーンショットや、ご自身のアイデアスケッチなどを元に、ぜひ一度お試しください。この手法は、デザイナーとエンジニア、企画担当者の間のコミュニケーションを円滑にし、開発プロセス全体のスピードを向上させる強力な一手となります。