こんにちは、HCM事業部の中西です。POSITIVEというHRソリューションのUXデザイナーをしています。
この記事では、Figma Makeの機能について検証した結果をお届けします。
この記事は、電通総研Advent Calendar 202512月3日の投稿です 🎄
昨日は @エンタープライズ第一本部の宮澤響 さんの「Amazon ECS操作時に「おや？」となった3つの事象」
でした！ぜひご覧ください🥳
Figma Makeとは
Figma Make は、Figma社が提供するAIデザイン生成ツールです。
テキストで指示（プロンプト）を入力すると、UIデザインや画面構成、コンポーネントなどを自動生成してくれます。
他のデザイン生成ツールと比較したときに特に優れていると感じた点は以下のとおり。
- デザインシステムの公開ライブラリをデザインに反映できる
- 生成したデザインデータをFigmaのフレームに還元できる
この機能により、製品のエンハンスプロジェクトのデザインガイドラインに沿った形でAIがデザイン案を生成してくれて、デザインを変更したいところはデザイナーが手を加えて修正できるようになります。
背景・課題
私たちのプロジェクトでは、現在下図のような流れでPM、エンジニア、デザイナーが協力してプロダクトを作り上げていきます。
要件整理と情報アーキテクチャのフェーズは担当範囲がグラデーションになっており、案件によって各メンバーが共創することもあれば、デザイナーがワイヤーから形にすることもあり、効率的なコラボレーションが課題となっていました。
また、要件整理や情報アーキテクチャ段階では、画がないために具体的なイメージを共有しづらく、認識のズレが生じることもありました。
Figma Makeではアイディアを即時に画面に起こしてくれるため、この機能を活用して要件整理からワイヤーフレームまでの検証ができたら、専門性の違うメンバー間でのディスカッションの場にも役立つと思いました。
目指したゴールは2点
- 検討段階のアイディアを可視化し、UIの認識合わせをスピーディに行う（認識違いや制約・構造上できないを早めに把握）
- プロンプトだけで業務アプリの高精度なワイヤーを作り、ワイヤー制作における工数を削減する
検証内容
まず、プロンプトの質によって精度はどう変わるのかを実際に試してみました。
Figma公式では、使用にあたり8つのTipsを提案しています。
要約：8つの重要な使い方
プロンプトでどのくらい精度が変わるのか検証
まずはプロンプトの詳細度によってどの程度精度に変化があるのか検証してみました。
はじめに、簡易的なプロンプトで試してみます。Figma Makeにはデザインシステムのライブラリを読み込ませる機能もありますが、今回はUIコンポーネントの「shadcn/ui」を読み込ませました。
簡易的なプロンプト
生成画面
一見すると良さそうなUIが表示されましたが、よく見るとナビゲーションなどはなく、各カードコンポーネントに「開く」ボタンが配置され、実際のアプリケーションとしてはまだ不完全な状態です。一度生成されたUIに関してひとつひとつ指摘し修正を重ねるより、最初のプロンプトでできるだけ詳細な要件を伝えておく方が、効率的に理想のUIを実現できることが分かります。
より詳細な情報を詰め込んだプロンプト
公式に記載されている情報や、Figma Makeのブログなどを参考に詳細なプロンプトは以下の情報をまとめました。
-従業員がさまざまな人事・労務手続きをするためのWebアプリのUIデザインを作成します。
# プラットフォーム仕様
- Web（PC画面）
# 目的と使用例
- 申請・通知・評価・組織情報・個人情報・誓約書・雇用契約が一画面でアクセス
- 従業員の“1点起点”としてのポータル設計
- 他社サービスとのシームレスな連携
- 入力の正確さに対する直感的な視覚フィードバック
# 主要な機能の一覧
- 画面左側にサイドナビゲーション
- 見出し「ダッシュボード」
- サイドナビゲーション内のカテゴリは2種類。「よく使うメニュー」と「すべてのメニュー」
- 画面中央上部によく使うアプリケーションをアイコン＋カード型で表示
- 画面中央下部に会社からの通知を表示
# ヘッダー内の要素
- ロゴ（左上、24pxマージン）
- ログインユーザーの会社名選択セレクトボックス
- FAQページへの「？」アイコンを表示
## サイドナビゲーションメニュー項目一覧
# 1.「よく使うメニュー」項目一覧
-勤怠管理
-申請
-給与明細
-経費精算
# 2.「すべてのメニュー」項目一覧
-勤怠管理
-通知
-申請
-年末調整
-給与明細
-経費精算
# トークン
- カラー: theme.primary, theme.error
- フォント: body-md, heading-lg
# 技術仕様・制約
- レイアウトは垂直方向に中央寄せ
- コンテナ幅720px
- デザインはデザインシステム「Shadcn UI」を使用
# 期待する動作
- 「サイドナビゲーション」メニューをクリックするとアコーディオンが開き、サブメニューが表示される
生成画面
ナビゲーションメニューが追加され、会社からの通知欄では、通知内容からテキストリンクで詳細ページに遷移できる仕様になりました。ワイヤーとしては十分ですが、さらにデザインカンプの品質に近づけるため、プロンプトを追加してみます。
カーソルを変更したい箇所に合わせて、プロンプトを入力するだけで変更ができる仕様になっています。
ですが、カラーの変更にはHEXやバリアントの命名を渡す必要があり、「これはFigmaのデザインファイルでやったほうが早い」というのが率直な感想です。
また、小さなことですがカーソルの入力フィールドは確定の意味で一度「Enter」を押すとプロンプトが送信されてしまい、もう一度最初からやり直しということが何度かありました。
コードの検証
これまでデザインカンプを「CSS Variables」などのFigmaプラグインで生成したことがありましたが、一部の変数だけが :root { --... } に出力されず、値が欠落・空になる、またはVariablesの変数の参照先を取得できず、異なる値を返すため出力された色が異なる、という事象がありました。今回は生成されたグローバルcssが正しく出力できているかも確認しました。
Figma Makeではすべてのグローバルcssが正しく出力されていました。
考察
今回Figma Makeを実際に触ってみて、その可能性と実務での使いどころが見えてきました。
要件整理 / 情報アーキテクチャフェーズでの使いどころ
まだ固まっていないアイディアを可視化させ、必要な機能の抽出に活用できると感じました。
実際にPMやエンジニアと、ユーザー行動のシナリオについてMakeを囲みながら議論を深めることで、プロダクトの方向性や優先順位を明確にすることができました。
※余談ですが、こういうとき誰かが「やりましょう！」と声をかけると、みんな面白そうに集まってくれるのが、弊社のいいところだなと思います。
ワイヤーフレームフェーズでの使いどころ
最初にしっかり情報を渡すことで、初期段階での画面構成の検討や、複数のレイアウトパターンを素早く比較したい場合に威力を発揮してくれます。
詳細プロンプトを毎回入力するのは大変なので、 トークンや技術仕様・制約などはテンプレート機能を活用するとさらに他メンバーも触りやすいと感じました！
なにより、デザインデータに引き継げるのはデザイナーの作業にとって非常に時短になり助かります。
良いところと今後の課題
Pros
- アイディア出しに活用できる
- ワイヤーを爆速で作れる
- 非デザイナーでも使える
Cons
おわりに
Figma Make は「デザイン業務を効率化するツール」という印象が強かったのですが、実際に使ってみると、
他職種のメンバーとのコミュニケーションをスムーズにし、アイディア出しを活発にするための“共通の思考ツール”としても活用できると感じました。
今回は生成されたコードが開発環境でどの程度使えるか、という検証までには至りませんでしたが、デザイナーだけでなく、エンジニアも実際の開発フローに組み込めるのかといった点については、今後さらに以下の内容を検証していこうと思います。
電通総研Advent Calendar 2025はまだまだ続きます！
明日のアドベントカレンダーは、 @Kinyo Kou さんの「新しいAWSリージョンを使い始める初期のSecurity Hub CSPM検出結果に対応したい」です！お楽しみに😆✨
最後までお読みいただきありがとうございました！
電通総研では仲間を募集しています✨興味を持っていただけた方は、ぜひ採用サイトをご覧ください！
執筆：@nakanishi.yoko
レビュー：@yamashita.tsuyoshi
（Shodoで執筆されました）
