導入：UIの“最初の形”をAIに手伝ってもらう時代へ

UIデザインでは、いきなり完成UIを作ることはありません。最初に作るのは「可能性のあるパターン」。
この“たたき台づくり”は時間がかかりますが、ここを助けてくれるのがAIです。

AIに完成UIを任せるのではなく、
初期アイデアを素早く形にして、思考や比較の材料にする。
これが、初学者にも現場にも相性の良いAIの使い方です。

なぜプロトタイプにAIを使うのか？

AIは“答え”を出すのではなく、検討材料を高速で出す

制作フェーズの目的は「方向性の比較」です。AIはこの段階で威力を発揮し、短時間で複数案を生み出します。

• アイデアの幅が広がる
• 手が止まらない
• 初心者でも比較検討ができる状態が早く作れる

AIのアウトプットは “1つの案でしかない” という前提で使うことが重要です。

AIプロトタイピングは UI サイクルのどこで使う？

制作フェーズ（最初のレイアウト作り）と相性が良い

• 要件定義のあと
• 情報構造を決めたあと
• 最初のたたき台を作る段階

この“最も時間がかかる部分”をAIが加速します。

この記事で扱うAI活用の範囲

既にある程度決まっているUI要件をAIに形にしてもらう

対象となる要件：

• 画面の目的
• ユースケース
• 必要な情報
• 情報構造・優先度

AIに丸投げするのではなく、思考の材料として初期案を作ってもらうための活用法です。

身につけること

• AIアウトプットは答えではなく1つの案
• タスクを分割して依頼する
• 分割した内容を仕様書（プロンプト）化する
• 生成されたUIの改善点を判断する視点

実施ステップ

STEP1：サービス内容・ユースケース・情報構造をまとめる

画面のUIを作る前に、以下を仮でも良いのでまとめます：

• 画面の目的
• ユースケース
• ユーザー課題
• 必要な情報
• 情報の優先度
• 仮の情報構造

完璧でなくてOK。まとめること自体が、AIの精度と自分の理解を上げます。

STEP2：作ってほしいUIを“小さく分割”する

AIに「この画面全部作って」は禁物。精度が落ちるので、次のように分割します。

• 小さなUIブロック
• セクション単位
• コンポーネント単位
• 表示ロジック単位

初心者は分割が難しい場合、「細かく分けて」とAIに依頼してしまってOK。

STEP3：分割したステップを仕様書にして1つずつ生成する

分割したステップをプロンプトとしてAIに投げていきます。

おすすめツール：

• Figma Make（初心者向け）
• Cursor / Antigravity も可

ポイント：一気に作らせない。必ず小さく投げる。

STEP4：生成したパターンをチェックする

次の観点でUIを確認します：

• 要件に合っているか
• 情報構造の破綻はないか
• 役割が満たされているか
• 改善の方向性が見えるか

必要に応じて再指示して修正します。

STEP5：Figmaにコピーし“1パターン”としてストックする

生成した案はすべてFigmaに保存します。

• 良い案
• 失敗案
• 途中案

全てが比較材料になり、アイデアの幅と判断力が育つ資産になります。

この方法で得られる効果

• 初期UI案が高速で大量に出せる
• 比較検討の質が上がる
• パターンの引き出しが自然に増える
• UI改善の判断が早くなる
• UIデザインサイクル全体の回転が速くなる → 最終的なUIの質が上がる

まとめ

AIプロトタイピングとは、

完成UIを作らせるためではなく、考えるための材料を増やす使い方。

初学者でも安全で、現場でも有効。UIアイデアの広がりと、思考の深まりを圧倒的に早めてくれます。