デザイン制作で最も時間を奪われるのは、
実は「手を動かす時間」ではありません。
- どんな構成にするか悩む
- コピーが決まらず止まる
- 配色がしっくり来ない
この “考える前工程” に、全体の7〜8割の時間が使われています。
そこで有効なのが、
AIを使った配色・コピー・構成の自動化 → Figmaで形にするワークフローです。
この記事では、
AI × Figmaを組み合わせて「迷わず進める」ための詳細な実践手順を解説します。
■ このワークフローで目指すゴール
最初にゴールを明確にします。
このワークフローの目的は、
- AIに完成デザインを作らせる
- 作業を完全自動化する
ことではありません。
「白紙で悩む時間をなくし、人間は判断と調整に集中する」
これが本質です。
■ 全体像：AI × Figma 自動化ワークフロー
まず全体像です。
① 要件整理（人間）
② 構成案生成（AI）
③ コピー生成（AI）
④ 配色案生成（AI）
⑤ FigmaでUI化
⑥ 人間による編集・判断重要なのは、AI→Figma→人間 の順番を崩さないことです。
■ Step① 要件整理（ここだけは人間がやる）
AIに投げる前に、
最低限これだけは整理します。
必須要件
- 誰向けか（ターゲット）
- 何をしてほしいか（目的）
- 媒体（LP／Webサイト／アプリ）
例
ターゲット：30代の個人事業主
目的：問い合わせ獲得
媒体：サービスLPこの3点が曖昧だと、AIの出力もブレます。
■ Step② AIで「構成」を自動生成する（最重要）
Figmaを開く前に、必ずAIで構成を作ります。
プロンプト例（そのまま使えます）
30代個人事業主向けの
サービスLP構成を考えてください。
目的は問い合わせ獲得です。AIが出す内容（例）
- ファーストビュー
- 課題提示
- 解決策
- 実績・信頼
- CTA
この時点では質より“骨組み”
完成度は求めません。
■ Step③ AIでコピーを自動生成する
構成が決まったら、
各セクションごとにコピーを作ります。
ポイント
- 必ず複数案出させる
- トーンを指定する
プロンプト例
上記構成のファーストビュー用に、
信頼感・安心感が伝わる
キャッチコピーを3案出してください。なぜ複数案が重要か？
- 比較できる
- 選ぶ視点が生まれる
- 人間の判断力が鍛えられる
AIは「量」、人間は「選択」。
■ Step④ AIで配色案を自動生成する
配色はセンス勝負に見えますが、
実務では 目的ありき です。
プロンプト例
信頼感・安心感のある
Webサイト向け配色を3パターン提案してください。AIが出す内容
- メインカラー
- サブカラー
- アクセントカラー
ここで 「完璧」を求めない。
判断材料として使います。
■ Step⑤ Figmaで一気にUI化する（考えない）
ここからFigmaです。
手順
- PC/SP Frameを作成
- 構成どおりにセクションを配置
- AIコピーをそのまま流し込む
- 配色をColor Styleに登録
コツ
- デザインしようとしない
- まず“並べる”だけ
考えない工程＝自動化する工程です。
■ Step⑥ 人間が「編集・判断」をする（最重要）
最後に、人間の仕事です。
チェックポイント
- 情報が多すぎないか
- ターゲットに合っているか
- 実務として成立するか
ここで初めて、
- コピーを削る
- 配色を調整する
- 優先順位を変える
といった 編集作業 を行います。
AIが出したものを疑う視点が成長につながります。
■ このワークフローが強い理由
① 迷わない
白紙スタートがなくなる。
② 再現性が高い
案件ごとに同じ流れを使える。
③ 学習効率が高い
「なぜ選んだか」を考える回数が増える。
■ よくある失敗パターン
❌ AI案をそのまま採用
❌ 判断せず並べるだけ
❌ なぜそうしたか説明できない
これでは、
自動化ではなく“丸投げ”です。
■ 実務向け：案件で使うときの注意点
- AI生成物は必ず編集する
- コピーは必ず人間が確認
- クライアントには「思考」を説明する
AIは裏側で使う道具です。
■ 初心者はここから始めればOK
最初は、この最小構成で十分です。
- AIで構成を出す
- コピーを3案出す
- 配色を2案出す
- Figmaで並べる
これだけで、「何から始めるか分からない状態」から脱出できます。
まとめ｜AIで自動化するのは“迷う工程”
AI × Figmaの本質は、
- 作業を減らすこと
ではなく - 判断に集中すること
です。
配色・コピー・構成という
迷いやすい工程をAIに任せることで、
人間は価値判断と編集に集中できる。
これが、AI時代の正しいデザインワークフローです。