FigmaAIプロンプトは「Task/Context/要素/動作/制約」の5項目を含めると、クライアントの要望に合ったデザインを最短1分で生成できます。公式ドキュメントが推奨する構造化記述により、抽象的な出力を防げます。この記事では5つのプロンプト型と実務ハックを体系的に解説します。
この記事でわかること
この記事でわかること：FigmaAI 5項目プロンプトで初回完成度が大幅に向上する。First Draft・Figma Makeの使い分けで提案スピードと品質を両立できる。実務そのまま使える5つのプロンプトテンプレートを取得できる。
この記事の結論
FigmaAIプロンプトは構造化された5項目（何を作るか・どこに使うか・主要要素・期待動作・制約）を盛り込むことで、ラフドラフトの完成度を大幅に引き上げられます。プロンプトが曖昧なままだとAIの出力が汎用的になり、クライアントとの認識ズレが生じます。本記事の型に沿ってプロンプトを書けば、修正ラウンドを削減できます。
今日やるべき1つ
Figmaを開き、First Draftで「ログイン画面をシンプルなライトモードで作成。メールアドレス入力・パスワード入力・ログインボタンの3要素を含め、モバイル優先で設計」と入力してデザインを生成してください（所要時間：5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| プロンプトの基本構造を知りたい | FigmaAIプロンプトは5項目で精度が変わる | 5分 |
| First Draftの使い方を知りたい | First Draftは3ステップでラフドラフト生成 | 3分 |
| Figma Makeとの使い分けを知りたい | FigmaAIとFigma Makeは用途で選ぶ | 3分 |
| 実務プロンプト例を今すぐ使いたい | FigmaAIプロンプトは5つの型で実務対応 | 7分 |
| 生成後の修正・変更方法を知りたい | FigmaAIプロンプトは生成後も変更可能 | 5分 |
FigmaAIプロンプトは5項目で精度が変わる
プロンプトの書き方次第で、AIが生成するデザインの質は大きく変わります。「何か作って」という一言では、AIはあらゆる可能性の中から平均的な選択をします。構造化された指示を与えると、クライアントの要望に近いデザインが初回から得られます。
FigmaAIプロンプトの5項目構造
Figma公式AIページでは、プロンプトに含めるべき要素として5つの項目が紹介されています。第一に「Task（何を作るか）」、第二に「Context（どこに使うか）」、第三に「Key design elements（主要デザイン要素）」、第四に「Expected behaviors（期待する動作）」、第五に「Constraints（制約：デバイス・レイアウト・カラーモード等）」です。
この5項目を含めることで、AIは出力の選択肢を絞り込み、具体的なデザインを生成できます。プロンプトの長さよりも「5項目すべてが揃っているか」が精度の決め手です。実務では、このチェックを毎回プロンプト入力前に行うだけで、修正ラウンドを削減できます。
プロンプトの長さと精度の関係
5項目を網羅していれば50文字でも十分な精度が出ます。逆に、同じ情報を繰り返したり、関係のない説明を加えたりすると、AIが優先項目を判断できなくなります。
短く・構造的に書くことが鍵です。「ブログのトップページを作って」ではなく、「ブログトップページ（Task）、旅行ブログ向け（Context）、ヘッダー・記事カード・サイドバー（Key elements）、スクロールで記事一覧表示（Behavior）、デスクトップ横幅1440px・ライトモード（Constraints）」という形式が理想的です。この形式で入力すると、AIは誤った解釈なく期待に近いデザインを生成します。
曖昧プロンプトがクライアント認識ズレを起こす理由
「シンプルなサービスサイトを作って」という指示を受けたAIは、ファーストビュー・CTAボタン・料金表・問い合わせフォームをすべて生成するかもしれません。しかしクライアントがイメージしていたのは、ヒーローイメージとCTAだけのシングルページだったとします。この認識ズレはプロンプトに「Context」と「Constraints」が欠けていることが原因です。
5項目構造に「ランディングページ形式・スクロール1ページ完結（Constraints）」を加えるだけで、AIの出力がクライアントの意図に近づきます。曖昧プロンプトはAIの問題ではなく、指示側の構造不足が原因であり、構造を整えることで解決できます。Figmaでのデザイン提案はフリーランスのポートフォリオ作成とも密接に関わるため、プロンプトの精度を高める習慣は実務全体に波及します。
スタイル指定でブランドイメージを固定する
スタイル指定を加えると、ブランドイメージの一貫性を保ちながらデザインを生成できます。「シンプルでミニマル」「モダンでフラット」「ポップでカラフル」などの形容詞をConstraintsまたはContext欄に付与するのが効果的です。
ただし、スタイル形容詞だけに頼ると解釈がAI任せになります。「ミニマル」に「余白を多く取り、フォントはサンセリフ系、カラーは白・グレー・アクセントカラー1色」を付け加えると、再現性が高まります。ブランドカラーコードを直接プロンプトに入力すると、さらに精度が上がります。
CHECK
▶ 今すぐやること: 現在のプロンプトを見直し、5項目（Task/Context/Key elements/Behavior/Constraints）がすべて揃っているか確認する（3分）
Q: プロンプトは日本語で書いていいですか？
A： 日本語でも動作しますが、Figma AIは英語プロンプトの方が精度が高い傾向があります。特にConstraintsやKey elementsの指定は英語の方が誤解なく伝わる場合が多いため、重要な案件では英語使用を検討してください。
Q： 5項目を全部書くと長くなりすぎませんか？
A： 各項目を1〜2語で簡潔に書けば、5項目で100文字以内に収まります。「ログイン画面、SaaSアプリ向け、メール入力・PW入力・ボタン、バリデーション表示、モバイル375px」のようにスラッシュ区切りで記述するとコンパクトになります。
First Draftは3ステップでラフドラフト生成
First Draftは、FigmaAIの中でも実務に直結する機能です。フリーランスとして提案フェーズでラフドラフトを即日提出できれば、クライアントとの初回打ち合わせの質が変わります。
First Draftの起動と基本操作
First Draftは、Figmaの新規ファイルまたは既存ファイルのキャンバス上で、AIメニューから「First Draft」を選択して起動します。起動後にプロンプト入力フィールドが表示され、テキスト指示を入力してEnterキーで生成を開始します。
生成されたデザインはそのままFigmaキャンバスに配置されます。レイヤー構成も自動生成されるため、生成後すぐに個別コンポーネントの編集が可能です。ゼロからフレームを組む時間を省き、最初の構造検討に集中できます。
「Basic site」選択でデスクトップ幅を固定する
First Draftのプロンプト入力画面では「Basic site」「Mobile app」「Landing page」等のテンプレートタイプを選択できます。デスクトップ向けサービスサイトを作る場合は「Basic site」を選択し、Constraintsに「1440px幅」を記述するとデスクトップサイズで生成されます。
テンプレートタイプを指定せずにプロンプトだけを入力すると、AIがデバイスサイズを自動判断します。この自動判断は意図しないサイズでの生成につながるため、初回は必ずタイプを明示してください。テンプレートタイプの指定はプロンプト1行分の追加作業ですが、後からのリサイズ調整を防げます。
生成後の最初の確認ポイント3点
生成されたラフドラフトは、まず3点を確認してください。第一にフレーム構成（ヘッダー・ボディ・フッターの分割が適切か）、第二にレイヤー名（後から編集しやすいよう整理されているか）、第三にダミーコンテンツの自然さ（テキストがプレースホルダーのままか、意味のある文章になっているか）です。
レイヤー名が「Frame 1」「Rectangle 2」のような自動名称になっている場合は、FigmaAIのレイヤー名自動変更機能を使うと一括整理できます。この3点チェックを最初に行うことで、クライアントへの提出前の修正工数を削減できます。また、Figmaでポートフォリオをまとめる方法も参考にすることで、生成したデザインをそのまま実績として活用できます。
CHECK
▶ 今すぐやること: Figmaで新規ファイルを作成し、First Draftから「Basic site」を選択して自分のポートフォリオサイトのプロンプトを試す（5分）
Q: First Draftは有料プランのみ使えますか？
A： 2024年時点でベータ版として無料公開されていました（窓の杜ニュース）。正式リリース後の料金体系はFigma公式ページでご確認ください。
Q： 生成されたデザインはどこに保存されますか？
A： 生成されたデザインはFigmaキャンバス上に直接配置されます。ファイルを保存すれば自動的にFigmaクラウドに保管され、共有リンクでクライアントに共有できます。
FigmaAIとFigma Makeは用途で選ぶ
FigmaAIとFigma Makeは名前が似ているため混同しがちですが、用途が異なります。どちらを使うべきか判断できずに作業が止まる状況は実務では珍しくありません。
FigmaAIとFigma Makeの機能比較
| 機能 | FigmaAI（First Draft等） | Figma Make |
| 主な用途 | 静的デザイン・モックアップ生成 | インタラクティブUI・ノーコードアプリ生成 |
| 操作形式 | プロンプト一括入力 | チャット形式で対話的に要望を反映 |
| 出力形式 | Figmaキャンバス上のフレーム | Web公開・共有可能なインタラクティブUI |
| 向いているケース | 提案フェーズのラフドラフト | プロトタイプのWeb共有・クライアントデモ |
FigmaAIを選ぶ場面
FigmaAIは「静的なデザインを素早く生成したい」場面に向いています。クライアントへの初回提案用モックアップ、ワイヤーフレームの叩き台、画面構成の検討資料がその典型です。
プロンプトを一度入力すれば、複数の画面パターンをキャンバス上に並べて比較できます。この比較提案がクライアントとの合意形成を加速します。修正もFigmaキャンバス上で直接行えるため、デザインツールとしての使い勝手がそのまま活かせます。フリーランスとして初回提案の採用率を上げる方法を押さえておくと、FigmaAIで生成したモックアップをより効果的に活用できます。
Figma Makeを選ぶ場面
Figma Makeについての体験記（Zenn）によると、「最初のプロンプトで『何を作るか』『どこまで作るか』を明確にすると、AIの出力精度が向上する」とされています。Figma Makeはチャット形式で対話的に要望を追加・修正できるため、要件が徐々に固まっていくフェーズに適しています。
Web公開・共有が必要なプロトタイプや、クライアントが実際に操作して確認するデモを作る場合もFigma Makeが向いています。一方で、細かいビジュアル調整はFigmaAIのキャンバス編集の方が操作しやすいという面もあります。用途によって使い分けることが実務効率の向上につながります。
CHECK
▶ 今すぐやること: 現在進行中の案件で「静的提案ならFigmaAI、対話型デモならFigma Make」という基準で使い分けを決める（2分）
Q: Figma MakeはFigmaAIの一部ですか？
A： Figma MakeはFigmaAIとは独立した機能として提供されています。FigmaAIが既存のFigma操作にAI機能を組み込んだものであるのに対し、Figma Makeはチャット形式でUIを生成しWeb公開までを担う独立したサービスです。詳細はFigma公式ページでご確認ください。
Q： 両方を同じプロジェクトで使えますか？
A： 使えます。FigmaAIでモックアップを生成し、内容をクライアントと合意した後にFigma Makeでインタラクティブなプロトタイプを作成するという流れが実務では効果的です。
FigmaAIプロンプトは5つの型で実務対応
実務ではシーン別に適したプロンプトの型があります。型を持っておくと、案件ごとにゼロからプロンプトを考える必要がなくなります。フリーランスとして複数案件を並行させている場合、プロンプトのテンプレート化は作業時間の削減に直結します。作業効率を上げる方法と組み合わせることで、デザイン業務全体の生産性を高められます。
型1: ログイン・認証画面プロンプト
テンプレート:
Login screen for [サービス名] web app (SaaS, light mode).
Key elements: email input, password input, “Login” button, “Forgot password” link.
Behavior: show inline validation on error.
Constraints: desktop 1440px wide, minimal flat design, brand color #2563EB.
Constraintsにブランドカラーコードを直接記述することで、デザイン修正の往復を防ぎます。バリデーション表示をBehaviorで明示しているため、エラー状態のモックも同時に生成されます。
アレンジ例: SaaSをECサイトに変え、「email + password + “Continue as guest” link」に変更するとECのログイン画面に転用できます。
このテンプレートをコピーして使用してください。
型2: ランディングページプロンプト
テンプレート:
Landing page for [サービス名] (B2B SaaS, light mode).
Sections: hero with CTA, 3 feature cards, pricing table (3 tiers), contact form.
Behavior: CTA button scrolls to pricing section.
Constraints: desktop 1440px, minimal, white background, accent color #10B981.
セクション構成を列挙することで、生成されるページ構造が事前に把握でき、クライアントとの事前合意が取りやすくなります。
アレンジ例: B2BをB2Cに変え、pricing tableをtestimonial section（お客様の声）に変えるとコンシューマー向けLPに転用できます。
このテンプレートをコピーして使用してください。
型3: ダミーコンテンツ生成プロンプト
テンプレート:
Rewrite all placeholder text in this frame as realistic dummy content for a [業種] company website. Keep the same layout and font sizes.
「Rewrite」コマンドを使うと既存フレームのテキストを置き換えるため、レイアウトを崩さずにリアルなダミーコンテンツを生成できます。
アレンジ例: 「a [業種] company website」を「a travel blog post about [テーマ]」に変えると、ブログ記事のダミーテキストにも使えます。
このテンプレートをコピーして使用してください。
型4: 画像生成プロンプト
テンプレート:
Make an image: [被写体・シーン], [スタイル（例: flat illustration / photorealistic）], [カラーパレット（例: warm tones / brand colors #XXXXXX）], [構図（例: centered / wide angle）].
スタイルとカラーパレットを明示することで、既存デザインのトーンと一致した画像が生成されます。構図指定を加えると、ヒーロー画像やカードサムネイルなど使用箇所に合わせた縦横比で生成できます。
アレンジ例: スタイルを「flat illustration」から「photorealistic」に変えると、実写風のバナー画像の生成にも転用できます。
このテンプレートをコピーして使用してください。
型5: 後からセクション追加プロンプト
テンプレート:
Add an FAQ section below the pricing table. 5 questions with accordion-style toggle behavior. Same visual style as existing sections.
「Same visual style as existing sections」を付け加えることで、既存デザインのトーンを維持したまま新セクションが追加されます。追加箇所を「below the [既存セクション名]」で明示すると、配置ミスを防げます。
アレンジ例: FAQをtestimonial（お客様の声）セクションに変え、「3 cards with avatar, name, and quote」を加えるとレビューセクションに転用できます。
このテンプレートをコピーして使用してください。
CHECK
▶ 今すぐやること: 今日の案件に合う型（1〜5）を1つ選び、テンプレートを自分のプロジェクト情報に書き換えてFirst Draftに貼り付ける（5分）
Q: 日本語のダミーテキストを生成するには？
A： 型3のプロンプトに「in Japanese」を追加してください。「Rewrite all placeholder text in this frame as realistic dummy content for a [業種] company website in Japanese.」とすると日本語のダミーコンテンツが生成されます。
Q： 生成された画像はそのままクライアントに納品できますか？
A： FigmaAIで生成した画像を商用利用する場合は、Figma公式の利用規約を事前に確認してください。
FigmaAIプロンプトは生成後も変更可能
生成したデザインに後から変更を加えたいとき、プロンプトベースの修正と手動編集の使い分けを知っておくと作業効率が上がります。実務では「最初の生成が80点で、残りの20点は微調整」というパターンが多いです。
「変更適用」タブのプロンプト欄を使う
FigmaAIには「Style」タブと「Prompt」タブがあります。既存フレームに新しいセクションを追加したい場合や、デザインの雰囲気を一括変更したい場合は「Prompt」タブを使います。
Figma AI全部使ってみた（note）でも、後から変更を加える際のプロンプト操作が分かりにくいという指摘があります。
Promptタブでの代表的な指示例を挙げます。セクション追加の場合は「Add an EC section below the hero」、カラーテーマ変更は「Change color theme to dark mode」、コンポーネント変更は「Replace the table with a card grid layout」がそれぞれ有効です。生成後のデザインもプロンプト一行で構造ごと変更できるため、クライアントから追加要望が来た際の対応が迅速になります。
Styleタブで視覚的に調整する場面
Styleタブは、フォント・カラー・スペーシング等の視覚的要素を細かく調整する際に使います。プロンプトで「フォントをセリフ体に変更」と指示するより、Styleタブから直接変更する方が意図通りの結果になりやすいです。
Promptタブはレイアウト・構造・コンテンツの変更に強く、Styleタブはビジュアルの微調整に強いという使い分けが実務での基本です。両タブを行き来することでデザインの完成度を効率よく高められます。Canvaで提案書を作る方法と比較すると、Figmaが複雑なUI設計に向いていることがよくわかります。
変更プロンプトで避けるべき3つのパターン
変更時のプロンプトで避けるべきパターンが3つあります。第一は「もっと良くして」という抽象的な指示です。AIは「良い」の定義を持っていないため、意図と異なる方向に変更されます。第二は複数箇所への一括変更を1回のプロンプトで指示することです。「ヘッダーを変えて、カラーも変えて、フォントも変えて」は混乱の原因になります。1回のプロンプトで変更する箇所は1つに絞ってください。第三は「前の状態に戻して」というロールバック指示です。FigmaのCtrl+Z（Cmd+Z）の方が確実なため、プロンプトで履歴操作を試みる必要はありません。
CHECK
▶ 今すぐやること: 既存のFigmaファイルを開き、Promptタブから「Add a FAQ section with 5 items」と入力して後付けセクション追加を試す（5分）
Q: 変更プロンプトは元のデザインを上書きしますか？
A： はい、プロンプトで変更を適用すると元のデザインが変更されます。変更前にFigmaの「Duplicate frame」機能で複製を保存しておいてください。Ctrl+Z（Cmd+Z）での取り消しも可能ですが、複数ステップの変更後はバックアップがあると安全です。
Q： クライアントの修正依頼をそのままプロンプトに貼り付けて使えますか？
A： クライアントのフィードバックを5項目形式に変換してから使うと精度が上がります。「全体的に明るくして」という依頼であれば「Change background color to white, increase text contrast to #333333」のように具体化してからプロンプトに入力してください。
FigmaAIプロンプトは7項目で実務チェック
FigmaAIプロンプトを実務で使う前に、以下の7項目を確認することで生成精度を安定させられます。1項目でも欠けていると、修正ラウンドが増えます。
チェック項目1: プロンプト5項目の充足確認
プロンプトにTask・Context・Key elements・Behavior・Constraintsの5項目がすべて含まれているかを確認します。特にBehaviorとConstraintsは抜けやすいため、テンプレートからコピーして使ってください。
チェック項目2: デバイスサイズの明示
「desktop 1440px」「mobile 375px」のようにConstraintsにデバイスサイズを記述しているかを確認します。指定なしの場合、AIがサイズを自動判断するため意図しないレイアウトで生成されます。
チェック項目3: カラーモードの指定
「light mode」または「dark mode」を明示しているかを確認します。カラーモード未指定の場合、ライト・ダーク混在のデザインが生成されるケースがあります。
チェック項目4: スタイル形容詞と具体要素のセット
「minimal」「modern」等のスタイル形容詞を使う場合、「white background, sans-serif font, 1 accent color」のような具体要素を併記しているかを確認します。形容詞のみの指定はAIの解釈が広くなりすぎます。
チェック項目5: 生成範囲の限定
「まずログイン画面のみ」「ヘッダーセクションのみ」のように、1回のプロンプトで生成する範囲を1画面または1セクションに絞っているかを確認します。複数画面を一括生成すると各画面の完成度が下がります。
チェック項目6: ダミーコンテンツの言語指定
日本語のダミーテキストが必要な場合、「in Japanese」を付記しているかを確認します。指定なしの場合、英語テキストで生成されます。
チェック項目7: 変更プロンプトの範囲限定
変更時のプロンプトで変更箇所が1箇所に絞られているかを確認します。複数箇所への一括変更指示は意図しない変更を引き起こします。
CHECK
▶ 今すぐやること: この7項目リストをブックマークし、プロンプト入力前の確認ルーティンにする（1分）
Q: チェックリストを毎回確認するのは手間ではないですか？
A： 最初の5〜10回使ううちにチェックが習慣化します。型1〜5のテンプレートを使えば自然に5項目が揃うため、慣れてからはチェックリストなしでも安定した精度が出せるようになります。
Q： チェックしても精度が上がらない場合は？
A： 5項目が揃っていても精度が低い場合、ブランドカラーや具体的なコンポーネント名（例: 「card with image, title, body text, CTA button」）が不足している可能性があります。Key elementsをより細かく記述することで改善できます。
FigmaAIプロンプトは5項目で完成度が変わる：今日から使える型と次の一歩
FigmaAIプロンプトはTask・Context・Key elements・Behavior・Constraintsの5項目を揃えることで、ラフドラフトの初回完成度を高め修正ラウンドを削減できます。曖昧な一行プロンプトでは平均的な出力しか得られませんが、5項目構造を使えば最短1分でクライアント提案に使えるモックアップが生成できます。First Draftはラフドラフト生成に、Figma Makeは対話型プロトタイプ作成に使い分けることで、フリーランスとしての提案スピードと品質の両立が可能です。
5つのプロンプト型をそのままコピーして、今日の案件に当てはめてください。型を持つことで「プロンプトを考える」時間がなくなり、「デザインを磨く」時間に集中できます。生成したデザインを活かした提案書の作り方も合わせて確認することで、クライアントへの提案精度がさらに高まります。
| 状況 | 次の一歩 | 所要時間 |
| プロンプトを初めて書く | 型1（ログイン画面）をコピーしてFirst Draftに貼り付ける | 5分 |
| 既存デザインに変更を加えたい | Promptタブで変更箇所1点に絞った英語指示を入力する | 3分 |
| クライアントデモを作りたい | Figma MakeでチャットUI形式で要件を段階的に追加する | 10分 |
| ダミーコンテンツを日本語で生成したい | 型3に「in Japanese」を追加してRewriteコマンドを実行する | 3分 |
FigmaAIプロンプトに関するよくある質問
Q: FigmaAIは無料で使えますか？
A： 2024年時点でFirst Draftを含むFigmaAI機能はベータ版として無料公開されていました（窓の杜ニュース）。正式リリース後の料金体系はFigma公式ページで最新情報を確認してください。
Q： プロンプトは英語で書かないといけませんか？
A： 日本語でも動作しますが、英語の方が精度が高い傾向があります。特にConstraintsやKey elementsの技術的な記述は英語の方が誤解が少ないため、本記事で紹介した英語テンプレートの使用をおすすめします。
Q： 生成されたデザインはそのままクライアントに共有できますか？
A： Figmaの共有リンクからクライアントに直接共有できます。インタラクティブなデモが必要な場合はFigma Makeを使用し、Web公開URLを発行することで、クライアントがブラウザ上で操作できるプロトタイプを共有できます。
【出典・参照元】
Figma AI公式ページ – Figma AI機能の公式説明・推奨プロンプト構造
プロンプトからデザインを生成できる「Figma AI」を無料ベータ公開（窓の杜） – First Draft機能のベータ版公開情報
【Figma Make】最初のプロンプトで詳細を詰め込む（Zenn） – Figma Makeのプロンプト精度向上に関する体験記
Figma AI全部使ってみた（note） – 実務でのFigmaAI活用レポート