AI HANDBOOK — AI手帳 — No.40

Figma AI

デザインの全工程をAIが加速する、クリエイター最強の相棒

📡
Figma AI とは何か

⚡
主要機能 3つ

FEATURE_01
Make Designs（テキスト→UI生成）
プロンプトを入力するだけでFigmaキャンバス上にUIフレームを自動生成する機能。「旅行予約アプリのホーム画面」「SaaSのダッシュボード」など日本語・英語のどちらでも指示可能。生成結果はFigmaのコンポーネント・オートレイアウト・スタイルが適用された状態で出力されるため、そのまま編集・プロトタイプ化まで進められる。非デザイナーがたたき台を作る用途にも、デザイナーが構成案を素早く複数パターン出す用途にも効く。ワイヤーフレームから高精度モックアップまで一発生成できる点で、制作の初速が劇的に上がる。

FEATURE_02
AI テキスト処理（ライティング・翻訳・置換）
デザイン上のテキストをAIが一括編集できる機能群。「ダミーテキストをリアルなコピーに書き換える」「全画面を日本語から英語に翻訳する」「トーンをよりフォーマルに変える」といった操作が、Figmaを離れることなく完結する。LP制作の副業案件では、クライアントのコピーがまだ揃っていない段階でもビジュアルを先行して完成させられる。多言語展開が必要なECサイトや、コピーライティング込みでデザインを受注したい人にとって特に強力な武器だ。

FEATURE_03
Dev Mode AI（デザイン→コード変換・説明生成）
FigmaのDevモードにAIが統合され、デザインレイヤーを選択するだけでReact・CSS・SwiftUIなど複数形式のコードスニペットを自動生成する。さらに「このコンポーネントはどんな動作をするか」「どのデザイントークンが使われているか」をAIが自然言語で説明してくれる機能も搭載。デザイナーとエンジニアの間に立って「翻訳者」として動く。副業でWeb制作をしている人がFigmaデザインをそのままコーディングまで持っていく際に、作業時間を大幅短縮できる。

⚖️
似たAIとの違い

🎯
こんな使い方が強い

💻
効果的なプロンプト例

PROMPT_EXAMPLE

① LP生成（Make Designs）
「地方の整体院向けLPを作って。ファーストビュー・サービス特徴3点・料金表・よくある質問・予約CTAの5セクション構成で、清潔感のある白×緑ベース。スマホ対応レイアウト。」② コピー書き換え（AI テキスト）
「このLP上のすべてのダミーテキストを、30代〜50代の腰痛持ちビジネスパーソンに響くリアルなコピーに書き換えて。フォーマルすぎず、共感重視のトーンで。」

③ 多言語展開（翻訳）
「このフレームを自然な英語に翻訳して。ボタンラベルや注意書きも含め、ネイティブが読んで違和感のない表現にすること。」

🚀
副業・ビジネスへの活用法

▷ 実装アイデア4選

• ▶ 「LP制作＋AIコピーライティング込み」のパッケージ副業を作る。Figma AIでデザインもコピーも自動生成→クライアントに選んでもらうだけのフローで、月5件以上をこなせる生産性を実現。
• ▶ Dev Mode AIを活用し「デザイン＋コーディングセット」で受注単価を上げる。デザインのみ受注から、HTML/CSS・Reactコードまで含むプランに格上げすれば単価1.5〜2倍も狙える。
• ▶ FigJam AIでUX要件定義ワークショップをサービス化する。クライアントと一緒にオンラインFigJamで付箋を出し、AIが即座に分類・要約→議事録+ワイヤーフレームをその場で提出する高付加価値サービス。
• ▶ Figma AIの使い方を教える「デザイン副業スクール」コンテンツを販売する。ツール習熟度が高い人にとって、同じ悩みを持つ初心者向けのnote記事・動画講座・テンプレート販売は相性が抜群。

VERDICT — 副業先生の総評
8.5/10

すでにFigmaを使っているデザイナーにとっては「追加コストゼロに近い最強のアップグレード」。Make DesignsとDev Mode AIの組み合わせは、副業デザイナーの生産性を根本から変える破壊力がある。一方、AI生成の品質はまだムラがあり「出してそのまま納品」はNG。人間の目で磨く前提で使うことが大切だ。Professionalプランの$15/月は、副業1案件で余裕で回収できるコスト感。

AIを副業に本気で使いたい方へ
デザイン・プロトタイプ・コード生成まで一気通貫。
Figma を試す →

🔔 NEXT
次回：v0