1. AIとつくるUIプロトタイプ — 素早く作りアイデアを広げる方法
クエスト3: 3. AIでUIプロトタイピング
導入: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アイデアの広がりと、思考の深まりを圧倒的に早めてくれます。
