生成AIでデザインを作成できるツールは増えてきましたが、
実務レベルの質の高いデザイン生成までは、なかなか辿りつかないという悩みを持つ方も多いのではないでしょうか。
実際、私もデザイン作成業務にて今まさに試行錯誤しながら、生成AIツールを使用しています。
そこで、本記事では私が最近メインで使用しているFigma AIのメイン機能である「Figma Make」において、公式ベストプラクティスを参考にしつつ、これまでで合計1000回以上のプロンプトを書いてきてわかった、精度の高いデザインを生成する５つのコツをまとめたいと思います！
Figma Make のベストプラクティス
まずは、公式で公表されているFigma Makeを使いこなすための8つのポイントを紹介します。
- 最初のプロンプトで詳細を詰め込む
- Figma Makeに取り込む前にデザインファイルを整理する
- 複雑なプロジェクトを管理しやすいステップに分割する
- 独自のコンポーネントを活用して視覚的な一貫性を確保する
- ポイントと編集ツールを使用して視覚的な調整を行う
- コードタブにアクセスして簡単に編集できます。開発スキルは必要ありません。
- 現実的なデータをメイクに統合する
- Figma Makeをハンドオフアシスタントにする
詳細はこちらをご覧ください！↓
参照：https://www.figma.com/blog/8-ways-to-build-with-figma-make/
これらのベストプラクティスにコツは概ね集約されていますが、やはりもう少し具体的なtipsが欲しいな、、、と思っていました。
Figma Makeの精度を上げる5つのコツ
ここからは、私が1000回以上のプロンプトを書いて出会った課題と、それを乗り越え生成の精度を上げるための具体的な５つのコツを共有します！
1. ファイル構造は最初に指定し、小さな単位で分割する
課題
最初何も考えずに進めた結果、かなり要素の多い画面だったため、一つのファイルに5000行という膨大なコードなファイルが誕生。その結果、タイムエラーや動作の遅延が発生し、作業が滞ってしまいました。私はフロントエンドの知識が乏しかったため、どこに原因があるのか、またどのようにcomponent分けしていけば良いのかわからないという状態に。
解決策
Reactの正しい構造かはさておき、ページや項目ごと、ダイアログごとなどでファイルを手動で分割し（これはGeminiに相談しました）、Figma Makeにファイルをアップロードし、Auto Fixを繰り返したところ、内容を維持したままファイル分割に成功しました。ただ、分割作業はものすごく時間がかかってしまったため、最初にファイル構造を指定しておくことで防げたと思います！そこまで内容量の多くない画面を作成する場合は基本的には大丈夫ですが、多くなりそうな場合は予め準備しておくと良いと思います！
大幅な修正でなければ、
〇〇ファイルのコードが多くなってきたため、内容は変えずにファイルを分割してください。
的な感じでプロンプトで書けば、自動で修正・分割してくれることも多々あります！
2. プロンプトは「大枠→ピンポイント」の2段階で書く
これはFigmaからも公開されているベストプラクティスと被る部分でもありますが、少し補足をしたいと思います。
一般的に言われる「具体的に書く」ことの積み重ねに尽きるとは思いますが、もし最初にある程度作りたいものが決まっているのであれば、以下の情報をプロンプトに入れることをお勧めします！
- 何の画面を作成するか
- 必要な画面名
- 画面の中に必要な機能
- どのような人が見るものか（若者？お年寄り？性別は？ITリテラシーは？など）
- デザインのテイスト（シンプル？ユニーク？モダン？和風？もし有名で参考にしたい既存サービスがあれば、具体的に伝えるとそのテイストにしてくれることもあります！）ちなみに、私はおしゃれで洗練された感じにしたい場合は、VOGUE（世界各国で出版されているファッション雑誌）みたいな感じで、と指定しています笑
- フォント（決まっていれば指定で、決まっていればどのようなスタイルのフォントか）
- アニメーションの有無（ある場合はスムーズ？ゆっくり？）
次に、修正したい箇所をピンポイントで修正します。その場合はファイル名やクラス名、Figma Makeが自動でつけるコメントアウトの言葉を用いて、詳細な追加修正を行うことで、かなり精度が上がると思います。似た機能や似た画面があると誤った場所が修正されることもあるので、最初はできるだけ詳細に指定することで、効率よく修正することができます！
またFIgma Makeには、divごとで修正できる機能もついているので、単純なテキストやカラー修正などには活用することも有効です！
なかなか上手くいかない方は、プロンプトが多少雑でも回数を重ねて調整することでモックの質は上がります！
3. レイアウト変更は「デザインファイル」と往復する
次は、レイアウトの大きな変更や、一般的ではないユニークなデザインを表現したい場合です。
Figma Makeのコピー機能を活用し、Figma Makeのデザインを通常のFigma Designファイルにペーストし、Figma Designで期待するデザインに修正し、再度Figma Makeに取り込ませることで、早く期待通りの精度が得られる場合がありました。
また、Figma Makeではデザインのレイヤーも認識することができるので、Designファイルで余計なフレームやグループで囲まれている部分は整理してからFigma Makeに再度取り込むことで、より質の高いコード生成にも繋げることができます！
4. 数値連動は「根気」と「場合分け」で乗り切る
Figma Makeを使用される方は、単なるデザインを作りたいだけではないと思います。最近、supabaseを用いてバックエンドの構築もできるようになり、複雑なシステムもFigma Makeで作れるようになってきました。私もどちらかというと、システム画面のプロトタイプをFigma Makeで作成することが多いため、複雑なロジックの再現という面では、かなり悩まされています。
数値の連動だけでなく、この場合にはこういった表示、この時は非表示など、あらゆるパターンが想定されますが、この点に関しては、「根気」が必要かなと思いました笑
ただ、「〜の場合」「〜を押すと」といった条件分岐を具体的にプロンプトに書き込むことで、複雑ないくつかの情報の処理も、最終的には期待通りの動作が実現したので、情報を整理しつつ、根気よくプロンプトを書いていくと良いと思います。
5. 「Guidelines.md」を活用してUIを統一
同じようなUI（表、ボタン、ダイアログなど）でも、ファイルや表示場所によって異なってしまい、一貫性が失われることがありました。
既存のUIがある場合、プロンプトで
「〇〇画面の△△表と同様のUIで」
といった指示を書くことで、解決できます！また、「Guidelines.md」というFigma Makeを作成する際に、デフォルトで作成されるファイルに、デザインシステムやコーディングルールを記述しておくことで、UIの一貫性を保つことができます。
Guidelines.mdについては、Figmaの公式サイトに載っていますので、ぜひチェックしてみてください！
https://help.figma.com/hc/en-us/articles/33665861260823-Add-guidelines-to-Figma-Make
おわりに
今回はFigma公式のベストプラクティスと、私が1000回以上試行してわかった5つのコツをご紹介しました！
Figma Makeはますます進化を遂げており、今も可能性がどんどん広がっています。
実務での使用は難しいように感じられる方もいるかもしれませんが、使いこなすことで業務の効率は上がり、より可能性も広がると思っています！
ぜひ皆さんも試してみてください！
また、Figma Makeでは、2025年11月18日にGemini 3 Proモデルも使用できるようになったことが発表されました。
通常のClaude 3.7 Sonnetを使用したモデルとの比較ブログも書いておりますので、気になる方はぜひご覧ください！
Figma MakeにGemini 3 Pro登場！さっそく使ってみた
簡単30秒