【Figma Make】最初のプロンプトで詳細を詰め込む（生成AI,プロンプト設計,UIデザイン）
Figma Make 最初のプロンプトで詳細を詰め込む
Figma Makeとは？
Figma Makeは、Figmaが提供するAI搭載の新しいデザイン支援サービスです。
従来のFigmaの操作性を活かしつつ、AIチャットを通じてプロンプト（指示文）を入力するだけで、UIデザインやプロトタイピングを自動生成できるのが最大の特徴です。
主な特徴は以下の通りです。
- チャット形式でAIに要望や修正指示を伝えると、即座にデザイン案やレイアウトを自動生成・反映
- テキストによる細かな修正や追加指示も柔軟に対応
- ノーコード・ローコードで直感的にUIデザインを作成できる
- 生成したデザインはそのままWebで公開・共有可能
Figma Makeを活用することで、デザインの知識が少ない方でも、AIの力を借りて素早く高品質なUIを作成できるようになります。
この記事では、最初のプロンプトに詳細を詰め込むことで、より効果的にFigma Makeを活用する方法について考察します。
やったこと
- 公式ブログからFigma Makeの使い方に関する8つのヒントを確認
- 「最初のプロンプトで詳細を詰め込む」とはどのように行うのか確認
- 過去の検証例のプロンプトを改良
- 改良したプロンプトで3回生成してみる
- 最初のプロンプトに詳細を詰める方法の考察
公式ブログからFigma Makeの使い方に関する8つのヒントを確認
FigmaのDesigner AdvocateのTaniさんから、Figma Makeの公式ブログの「8 essential tips for using Figma Make」を紹介されていました。
この記事の中では、Figma Makeを効率的に使うための8つのヒントが紹介されていました。
Google Translateで翻訳した内容を以下にまとめます。
- 最初のプロンプトで詳細を詰め込む
- Figma Makeに取り込む前にデザインファイルを整理する
- 複雑なプロジェクトを管理しやすいステップに分割する
- 独自のコンポーネントを活用して視覚的な一貫性を確保する
- ポイントと編集ツールを使用して視覚的な調整を行う
- コードタブにアクセスして簡単に編集できます。開発スキルは必要ありません。
- 現実的なデータをメイクに統合する
- Figma Makeをハンドオフアシスタントにする
この8つのヒントのうち、「最初のプロンプトで詳細を詰め込む」に着目しました。
「最初のプロンプトで詳細を詰め込む」とはどのように行うのか確認
「最初のプロンプトで詳細を詰め込む（Front-load your first prompt with details）」では、以下のように述べられています。
“It's better to get the initial generation as close to your vision as possible with only minor tweaks needed—fixing the output with multiple follow-up prompts takes much more time,”
最初のプロンプトでできるだけ詳細を詰め込むことで、AIが出力するデザインが自分のイメージに近づき、後からの修正が少なくて済むということです。
最初の指示で以下のような情報が含まれているといいとされていました。
Task: What Figma Make should do
Context: Where this flow or screen fits
Key design elements: Important features Figma Make should incorporate
Expected behaviors: What happens to those elements upon interaction
Constraints: Things like device, layout, or visual styling
つまり、最初のプロンプトには以下の情報を含めることが推奨されています。
- タスク（何を作るか）
- コンテキスト（どこで使うか、どんな流れか）
- 重要なデザイン要素（必須のUIや機能）
- 期待する動作（ユーザー操作時に要素がどのように振る舞うか）
- 制約（デバイス、レイアウト、ビジュアルスタイルなど）
さまざまなアプローチのもと実際に1回の入力でもっともうまくいったプロンプトには以下の情報が含まれていたようです。
- プロジェクト概要
- プラットフォーム仕様
- 目的と使用例
- 主要な機能の一覧
- デザインスタイルガイダンス
- 技術仕様
また、最初のステップでどこまで作成するかを明確にすることも重要なようです。
具体的には以下のように記載されていました。
First step: Build the base grid overlay component with adjustable dimensions and placeholder hover states.
「最初のステップ：調整可能な寸法とプレースホルダーホバー状態を備えたベースグリッドオーバーレイコンポーネントを構築します。」という意味のようです。
つまり、最初のプロンプトでは「何を作るか」「どこまで作るか」を明確にすることが重要ということがわかりました。
過去の検証例のプロンプトを改良
このヒントが実際のFigma Make利用時にどのように活かせるか検証するために、まず自分の検証例で使用したプロンプトを改良しました。
過去に使用したプロンプト
以下の記事は私がFigma Makeを使って晩御飯の献立を決めるアプリのデザインを作成した実例です。
この検証で使用したプロンプトは以下のような内容でした。
# プロンプト
ユーザーがクリックで操作する、晩御飯の献立をランダムに決定するルーレットアプリをデザインしてください。ミニマルなデザインテイストで、親しみやすく読みやすいフォントを使用してください。
# デザイン要件
目的: ユーザーに晩御飯の献立を簡単に提案する。
デザインスタイル: ミニマリスト。余計な装飾を排し、シンプルで洗練されたデザイン。
カラースキーム: 背景はクリーンな白または非常に明るいグレー。アクセントカラーとして、食欲をそそるような、しかし派手すぎない**落ち着いた暖色系（例：くすみオレンジ、ベージュがかったピンクなど）**を1色使用してください。
タイポグラフィ: 親しみやすく、読みやすいサンセリフフォント（例：Noto Sans JP、HiraKakuProN、Interなど）を使用してください。フォントサイズは、主要な情報が明確に読めるように調整してください。
主要な要素:
ルーレット表示エリア: 画面中央に、献立項目が表示される大きなルーレット（または円形の表示エリア）を配置。回転しているように見える、または回転後の最終結果が表示されるシンプルな表現。
決定ボタン: ルーレットの開始・停止を制御する、目立つ「決定」または「回す」ボタンをルーレットの下に配置。
献立表示: ルーレットが停止した際に、決定された献立名が大きく、明確に表示されるようにしてください。
シンプルなナビゲーション（任意）: 将来的な機能拡張を見据え、もし必要であれば、献立候補の追加・編集ができるようなアイコンやボタン（非常に小さく、目立たない形で）を画面上部または下部に配置する余地を残してください。
# インタラクション
「決定」ボタンをクリックすると、ルーレットが回転するアニメーションが表示され、数秒後にランダムな献立名が表示されて停止する。
ルーレットが停止した後、もう一度ボタンを押すと再度ルーレットが回る。
注意点:
イラストや複雑なグラフィックは不要です。テキストとシンプルな形状のみで構成してください。
ユーザーが迷うことなく直感的に操作できるUIにしてください。
このプロンプトは要件が比較的詳細にまとまっていますが、「何を作るか」「どこまで作るか」を明確にすることで、さらに改善できそうです。
公式の推奨では「プロジェクト概要」「プラットフォーム仕様」「目的と使用例」「主要な機能の一覧」「デザインスタイルガイダンス」「技術仕様」「期待する動作」など、粒度を明確に分けて「何を作るか」を記載することが推奨されていました。
また、「まずは○○を作成してください」など最初の段階で「どこまで作るか」を指示することでAIの出力精度が向上しそうです。
改良したプロンプト
そこで、以下のようにプロンプトを改良しました。
改良の際に、前回の検証で繰り返しやりとりが発生した内容についても詳細に記載しました。
# プロジェクト概要
晩御飯の献立をランダムに決定するルーレットアプリのUIデザインを作成してください。
# プラットフォーム仕様
- Web（PC・スマホ両対応）
# 目的と使用例
- ユーザーが直感的な操作で楽しく献立を決められる体験を提供する
- 家庭や一人暮らしのユーザーが日々の献立を簡単に決めたいときに利用
# 主要な機能の一覧
- 画面中央に大きなルーレット表示エリア
- 「決定」ボタンでルーレットが回転し、数秒後にランダムな献立名を表示
- ルーレット停止後、再度ボタンで再抽選
- 献立候補の追加・編集（将来的な拡張を見据え、UI上に小さなアイコンやボタンの余地を残す）
# デザインスタイルガイダンス
- ミニマリスト。余計な装飾を排し、シンプルで洗練されたデザイン
- 背景はクリーンな白または非常に明るいグレー
- アクセントカラーは落ち着いた暖色系（例：#F5A623、#FAD7A0 など）を1色
- 親しみやすく読みやすいサンセリフフォント（例：Noto Sans JP、HiraKakuProN、Inter）
- 主要情報は大きく明確に表示
# 技術仕様・制約
- レイアウトは中央寄せ
- イラストや複雑なグラフィックは不要。テキストとシンプルな形状のみ
- 色やフォント、アニメーションの秒数などは具体的な値を指定
# 期待する動作
- 「決定」ボタンをクリックするとルーレットが回転し、イースアウトで2秒かけて減速して停止
- 停止時に花吹雪アニメーションを2秒間表示
- ルーレットが停止した後、もう一度ボタンを押すと再度ルーレットが回る
- テキストとシンプルな形状のみで構成。イラストはフォークやナイフなど親しみやすいものを、操作エリアに重ならないように配置
# 最初のステップ
まずはルーレット表示エリアと「決定」ボタンのみを実装し、基本動作ができる状態にしてください。その後、細かな演出やUI調整を追加します。
「何を作るか」「どこまで作るか」を明確にすることができたと思います。
改良したプロンプトで3回生成してみる
では、実際にこの改良したプロンプトの入力1回でどのようなデザインが作成されるか確認してみます。
晩御飯ルーレットアプリ_プロンプト改良_1
晩御飯ルーレットアプリ_プロンプト改良_2
晩御飯ルーレットアプリ_プロンプト改良_3
最初のプロンプトに詳細を詰める方法の考察
過去の検証とは情報量が多いプロンプトなので単純な比較はできないのですが、複数回にわたって確認と指示を繰り返す必要はなく一度のプロンプト入力で反映できていることがわかります🤔
少なくとも過去の検証で複数回にわたって指示していたものは一度のプロンプト入力で反映できていることがわかります。
Figma MakeのチャットUIの中でアイデアを追加していくことも可能ですが、最初のプロンプトで詳細を詰め込むこともできるということです。
そのため、私はアイデアをすぐにFigma Makeで実現しようと焦る必要はないと感じました💡
むしろ、プロダクトに求められる姿をじっくりドキュメント化し、詳細なプロンプトを作成できる段階になってからでも遅くないと思います。
生成されるデザインはプロンプト次第で多く変わることは既知でありますが、どのタイミングで生成するのか、プロンプトにどんな情報が必要かを明確にすることで、Figma Makeをより効果的に活用できることがわかりました。
Figma Makeでアイデアを形にする際、ご自身のプロンプトも見直してみてください！
この記事を参考に、試してみてはいかがでしょうか。ぜひご参考くださいませ💡
もし参考になったところや、疑問に感じたところがあればコメントください🌻
参考
参考になりました🙇♂️
Discussion