Figma AIの「Make」機能を実務で使ってみた
はじめに
こんにちは、DIVX デザイナーの山本です。
正直に言います。最初は「AIがデザインするなんて……」と半信半疑でした。でも実際に使ってみたら、想像以上に実用的で、しかも楽しいんです。
本記事では、2024年に正式リリースされたFigma AIの「Make」機能を実際の業務で使い倒した結果、見えてきた可能性と実践的なコツをシェアします。「デザインの初期段階で時間を取られすぎている」「もっとアイデアの試行錯誤に時間を使いたい」と感じている方に、ぜひ読んでいただきたい内容です。
本記事の対象読者：
Figmaを日常的に使っているデザイナー
デザイン業務の効率化に興味がある方
AIツールを試してみたいけど、どう使えばいいかわからない方
背景：デザイン業務のリアルな悩み
僕が携わっているデザイン業務では、複数のクライアント案件を同時進行することが日常茶飯事です。特に辛いのが、初期段階のワイヤーフレーム作成やモックアップ制作。
「とりあえず形にしてみないと話が進まない」けど、この"とりあえず"に意外と時間がかかるんですよね。
さらに厄介なのが、デザイン業務ではお互いのイメージの一致が超重要ということ。そのため、クライアントへの提案では複数パターンを用意する必要があって、これがまた工数を圧迫していました。
「もっと効率的に、でも質は落とさずにバリエーションを作れないかな……」
そんなときに出会ったのが、Figma AIの「Make」機能でした。
Figma Make機能って何？
簡単に言うと、テキストで指示するだけでデザインを作ってくれる魔法のような機能です（本当に魔法みたいでした、最初は。）。
2024年6月にベータ版が公開され、現在はFigmaの有料プラン（Professional以上）で使えます。
ここがすごい：
日本語でも英語でも、文章で指示できる
ちゃんとレイヤー構造を保ったまま生成してくれる
後から自由に編集できる（これ重要！）
一度に複数パターン作ってくれる
基本的な使い方（超シンプルです）
1. 起動方法
難しいことは一切なし。以下のどれかでOK：
一番楽： Cmd(Ctrl) + / を押して「Make」を選択
右クリック → 「AI」→「Make a design」
ツールバーのAIアイコンをポチッ
2. プロンプトを入力（ここがコツ）
最初は戸惑いましたが、具体的に指示すればするほど良い結果が返ってきます。
👍 こんな感じで書くと良い感じ：
Create a modern landing page hero section with:
- Large heading "Transform Your Business"
- Subtitle text
- Two CTA buttons (primary and secondary)
- Background with subtle gradient
- Using purple and white color scheme
👎 これだと微妙：
かっこいいセクションを作って
（気持ちはわかりますが、AIも困っちゃいます）
3. 生成されたら、いじり倒す
生成されたデザインは普通のFigmaレイヤーなので、あとは好きにいじれます。これが本当に便利で、「AIが作ったものをベースに人間が仕上げる」という理想的な分業ができるんです。
実務で見つけた「これは使える！」というTips
実際に案件で使いながら発見した、効率爆上がりのコツを紹介します。
Tip 1: デザインシステムを教え込む
既存のブランドカラーやルールを最初に教えておくと、統一感のあるデザインがサクッと出てきます。これは感動しました。
試しにまずは、某大手ECサイトのAmaz◯neのざっくりとしたデザインシステムを定義しておきましょう。
Using our design system colors (primary: #FF9900, secondary: #232F3E, accent: #146EB4), create a product card component with:
Product image placeholder (square aspect ratio)
Product title (max 2 lines, truncated)
Star rating (5-star display with customer review count)
Prime badge (if applicable)
Price display (current price in bold, list price with strikethrough if on sale)
"Add to Cart" button (orange background with our primary color)
"Buy Now" option
4px border radius (our standard)
Subtle shadow on hover
Compact spacing for high information density
これを定義付けた上でECサイトを出力させると、なんだか見覚えのあるトンマナのものが上がってきますねぇ。
ここで面白いのは、生成させる際にAmaz◯neの名前を出していないことです。
なので、このスタイルを維持しつつ様々なサイト/アプリを出力できるんです！
Tip 2: 一気に完璧を目指さない
これ、めちゃくちゃ大事です。段階的に指示を重ねていく方が、確実に良い結果になります。
まずは骨組みから：
Create a dashboard layout with sidebar, header, and main content area
おおまかなUIをここで作ってしまいます。
基本は抑えてて充分ステキな仕上がりですが、細かくいうとまだベタ感が強くて、あまり整っているとはいえないですね。
次に肉付け：
1.Modify the styling or layout of the metric cards
2.Change the data or metrics displayed
3.Add additional metric cards beyond the existing 4
カードの追加、レイアウトとスタイリングの変更カードのデータや指標の追加に関する命令を施しました。
どうでしょうか？カードのレイアウトも以前と比べて整い、馴染んだんじゃないでしょうか？
この「対話しながら作る感覚」が、思った以上に楽しいんです。
さらに「Tip 1: デザインシステムを教え込む」のプロセスを辿れば、決めておいたデザインシステムに準じたレイアウト、カラーリングで出力してくれるので、頼もしいですね！
Tip 3: 参考デザインを見せちゃう
既存のデザインをキャンバスに置いて「これっぽく作って」と言うだけで、雰囲気を継承してくれます。言葉で説明するより断然早い。
今回はブログをポストするページをYouTubeスタイルで作成しようと思います。
Create a similar card design but for a blog post, including:
- Featured image
- Category tag
- Title
- Author info
- Read time
この命令文に追加して、figmaのコミュニティから拾ってきたYouTubeのレイアウトを噛ませると...
こんな感じで出力してくれます！
ですが若干レイアウトが崩れているので、少しずつ会話しながら直して行き、以下のような形で落ち着きました！
※参考にしたYouTubeレイアウト↓
Tip 4: 日本語と英語のハイブリッドが意外といける
英語の方が精度が高いのは事実ですが、日本語も普通に使えます。僕は専門用語だけ英語、説明は日本語という書き方をよくします。
Pricing tableを3カラムで作成。各カラムには:
- プラン名
- 月額料金
- 機能リスト（5項目）
- CTAボタン
中央のカラムを「Popular」としてハイライト
実際どれくらい楽になった？
WordPressサイトの新規ページデザイン案件で導入してみた結果がこちら：
数字で見ると「ふーん」って感じかもしれませんが、実際の体感としては「案件が重なってもパニックにならなくなった」のが一番大きいです。
純粋に工数が減ったおかげで、精神的にも余裕が生まれました。これ、めちゃくちゃ大事。
正直に言う：完璧じゃないところもある
いいことばかり書いてきましたが、使い続けてわかった「ここは注意」というポイントも正直に共有します。
1. 盲信は禁物。必ずチェックしよう
AIが作ったデザインは、必ず人間の目でチェックが必要です：
アクセシビリティ大丈夫？（コントラスト比とか）
スマホでも見やすい？
ブランドルールに沿ってる？
これ、ちゃんと実装できる？
あと、ピクセル単位の細かい調整はできません。最後は人間の手が必要です。
AIを「便利な相棒」として使いつつ、「でも最終判断は自分」というスタンスがちょうどいい塩梅だと思います。
2. 派手なインタラクションは苦手
正直言うと、こういうのは今のところ難しいです：
ぬるぬる動くアニメーション
複雑なプロトタイプ
条件分岐のあるコンポーネント
最近のトレンドって「華やかで動きまくるサイト」じゃないですか。Make機能は、そっち方面よりも「シンプルで機能的なデザイン」の方が得意です。
3. パターン出しは慎重に（これ地味に重要）
Figmaの「Make」機能では成果物がコードで生成されます。
ここで注意なのが、「30パターン出して！」みたいな無茶振りをするとコードの生成上限に引っかかって止まっちゃうんです。最初はやらかしました。
おすすめの方法： 複数パターンを作りたい場合は、複数のMakeタブを開いて、それぞれ1つずつ生成させましょう。ちょっと手間ですが、これが確実です。
4. 作成するデザインの媒体はWEBデザインに限られる
ここ、意外と盲点なんですが、Figma Makeが作ってくれるのはWebサイトやアプリのUIだけです。
こういうのは期待しないでください:
ポスターのビジュアルデザイン
チラシのレイアウト
パンフレットの構成
紙媒体で大事な「視覚的なインパクト」とか「構成の妙」みたいなのは、今のところMakeの守備範囲外。グラフィックデザイン的なことをやりたいなら、従来通り自分の手でゼロから作る必要があります。
Makeはあくまで「画面のデザイン」専門ってことを頭に入れておいてください。
5. 著作権には要注意
商用利用する前に、必ずFigmaの利用規約をチェックしてください。
おすすめの使い方：AIとの上手な付き合い方
僕が実践している運用ルールを紹介します。これを守るとAIと良い関係が築けます（笑）
僕の鉄則：
✅ AI生成物は必ず自分でチェック＆調整
✅ クライアントには「AI使いました」と正直に伝える（透明性大事）
✅ うまくいったプロンプトはメモしておく（ナレッジの蓄積）
✅ 最終判断は絶対に人間がする
こうやって使うと、AIは**「デザイナーの能力を拡張してくれる良き相棒」**になります。決して「デザイナーを不要にする敵」ではないんです。
まとめ：AIと一緒にデザインする未来
Figma AIの「Make」機能は、デザイン業務を確実に楽にしてくれます。でも、それ以上に**「デザインがもっと楽しくなる」**んです。
成功の秘訣：
🎯 具体的に、明確に指示する
🎨 既存のデザインシステムと連携させる
👀 生成結果は必ず人間がチェック
💡 チーム内でコツを共有し合う
地味な作業から解放された分、本当にクリエイティブな部分に集中できる。これが一番の価値だと思います。
試してみて、「あ、これ便利じゃん」と思ったら、ぜひ周りにもシェアしてあげてください。きっと喜ばれますよ！
この記事を読んで、少しでも皆さんのFigmaライフが充実しますように 🎨✨
参考資料：
