Figma Makeとは？使い方・料金・効果的な活用法をプロが解説

デザインツール「Figma（フィグマ）」に、AIと会話するだけでデザインを生成できる「Figma Make」という機能が実装されました。これにより、制作会社への外注が不要になるのではないか、と考えている方もいるかもしれません。

たしかに、Figma Makeは企業担当者を助ける強力なツールといえます。一方、何にでも使える万能ツールではないため、Figma Makeがあるからといって、制作会社にまったく頼らずWebサイトを制作するのは現実的ではありません。

そこで本記事では、Web制作会社の目線から、Figma Makeの基本情報はもちろん、企業担当者におすすめの活用方法や「ここはプロに任せるべき」という判断基準まで紹介します。Figma Makeを最大限に有効活用したい方は、ぜひ参考にしてみてください。

Figma Makeとは

「Figma Make」は、プロンプト（テキスト指示）を入力するだけで、AIがデザインアイデアを具現化する機能です。

デザインを形にするといっても、ただ「デザインを再現した画像」が生成されるわけではありません。ボタンクリックやテキスト入力、さらには画面遷移といったインタラクションが機能する、「動くUIプロトタイプ」が出力されることが特徴です。

さらに、UIを動かすための「フロントエンドのコード（React/TypeScript）」も同時生成できます。生成したコードはダウンロードしてそのまま開発に活用できるほか、GitHubへのプッシュにも対応しているため、エンジニアへの引き継ぎもスムーズに進められます。

ただし、詳しくは後述しますが、Figma Makeがあれば、知識がない方でも完璧なWebサイトを制作できるわけではない点には留意してください。

従来のFigma（Figma Design）との違い

Figma Makeを理解するうえで、従来のFigma（Figma Design）との違いを押さえておくことが重要です。

Figma Designは、Webサイトやアプリの見た目・画面構成を設計するためのデザインツールです。デザインしたWebページ間の遷移を、プロトタイプとして可視化する機能もありますが、それはあくまで「画面遷移のシミュレーション」にすぎません。Figma Designのプロトタイプ機能だけで、実際にテキストを入力したりボタンが反応したりする「動くUI」を作成する難易度は高くなります。

Figma Designのプロトタイプ操作のイメージは、下記の公式YouTube動画も参考にしてみてください。

関連記事：Figmaを使ったWebデザインとは？依頼前に知っておきたい基本とメリット

一方、Figma Makeは単なるデザインツールではなく、AIとの会話を通じて実際に操作・入力できるUIをコードレベルで生成するツールです。見た目を設計するツールから「動くものを作るツール」へと一段階進んだ存在といえます。

なお、両者は独立したツールではなく、以下のような相互連携も可能です。

• Figma Designで作成したデザインファイルをFigma Makeに読み込み、「動くプロトタイプ」へ発展させる
• Figma Makeで生成したUIをFigma Designに書き出し、細かなレイアウトやスタイルを調整する

Figma Sitesとの違い

Figma Makeと混同しやすいツールとしては、「Figma Sites」が挙げられます。どちらもWebサイト制作に関わるツールですが、役割が異なるため整理しておきましょう。

Figma Makeはここまで紹介したとおり、AIとの会話でUIやコードを生成する「生成・開発ツール」です。

一方、Figma Sitesは、Figmaで作成したデザインをそのままWebサイトとして公開できる「ノーコードWebサイトビルダー」にあたります。コードを書かずにレスポンシブなWebサイトを構築・公開できる点が特徴です。

関連記事：Figma Sitesとは？企業のホームページは作成できる？プロが本音で解説

なお、各ツールは競合するものではなく、Figma MakeでUIのプロトタイプを生成し、Figma Designで細部を調整したうえで、Figma Sitesから公開するといった連携も可能です。

Figma Makeの使い方

Figma Makeでデザインを生成し、公開するまでの流れは、おおむね次のとおりです。

1. Figma Makeの起動
2. プロンプトを入力してUI生成
3. プレビューを確認・修正
4. 完成したデザインを外部共有 or Figma Sitesで公開

各ステップを詳しく解説します。

1.Figma Makeの起動

Figma Makeは、ブラウザ版・デスクトップ版どちらのFigmaからも起動できます。ただし、使用目的によっておすすめの起動方法が異なる点に留意してください。

パターンA｜ゼロからデザインを作りたい場合（0→1）

ホーム画面の「Make」から新規ファイルを作成し、プロンプトを入力すれば、ゼロからUIを生成する画面が表示されます。

パターンB｜既存デザインを活かしたい場合（1→n）

Figma Designで作成済みのフレームをコピーし、Figma Makeに貼り付けることで、AIへの指示でインタラクティブなプロトタイプへ発展させられます。
チャット左下の「＋」ボタンから「デザインを添付」に進み、フレームを貼り付けてください。

すでにFigmaのデザインデータがある場合、このパターンが効率的です。

2.プロンプトを入力してUI生成

つづいて、プロンプト（テキスト指示）を入力し、デザインを生成します。「○○なイメージのページを作って」など簡単なプロンプトでも、ある程度のクオリティのUIが生成されます。

しかし、生成結果の品質を高めるためには、プロンプトに以下の要素を盛り込むことが大切です。

タスク	Figma Makeに何を作ってほしいか、目的を明確にする。 「学習塾のLPを作成する」といった情報を伝える。
コンテキスト （背景）	誰のためのページか、どのような場面で使うかなど、デザインの背景を明確にする。 「小学生の保護者向け」「Google広告のLPとして使用」「体験授業への申し込みが目的」といった情報を伝える。
主なデザイン要素	必ず含めてほしいパーツ・機能を列挙する。 「強み・料金表・よくある質問・申し込みフォームは必ず含める」「CTAボタンは常時表示する」など、具体的な構成を指示する。
期待する動作	デザイン要素に期待するインタラクションも列挙する。 「常時表示のCTAをクリックしたら、フォームまでスクロールする」など、具体的なイメージを伝える。
制約	デバイス対応やビジュアルスタイルに関する制約（ルール）を伝える。 「スマートフォン対応必須」「青系の落ち着いた配色でまとめる」「レスポンシブデザインに対応させる」など、希望事項を列挙するのが効果的。

これらの要素を含めたプロンプトで、初回生成物のクオリティをできる限り高めることが、Figma Makeを使いこなすコツです。初回の出力がイメージから大きく外れると、修正のやり取りを何度も繰り返すことになり、収拾がつかなくなるケースもあるため注意してください。

3.プレビューを確認・修正

UIが生成されたら、プレビュー画面で実際の動作を確認します。修正が必要な場合、対処方法は以下の2パターンです。

チャットで追加指示をする
気になる点があれば、「ヘッダーの色を濃い青に変更してください」「お問い合わせボタンをもっと目立たせてください」とチャット形式で伝えれば、修正版が出力されます。デザインやコードの知識がなくても対処できる点はメリットですが、プロンプトが曖昧だと意図通りに修正されない場合もあります。

コードを直接編集する
プレビュータブからコードタブに切り替えると、生成されたUIのソースコードを直接確認・編集できます。「余白を広げたい」「フォントサイズを変えたい」といった細かな調整は、チャットで指示するよりコードを直接修正したほうが正確かつ素早く対応可能です。

4.完成したデザインを外部共有 or Figma Sitesで公開

完成したデザインは、目的に応じて以下のように活用します。

Web制作会社へのイメージ共有に使う
「こういうデザイン・動きにしたい」というイメージを言葉だけで伝えるのが難しい場合、Figma Makeで作ったプロトタイプを「動く仕様書」として制作会社へ共有してみてください。認識のズレが減り、Web制作会社がデザインをブラッシュアップする際の起点にもなるため、最終的な成果物の品質向上につながります。

コーダー・エンジニアへ共有する
生成されたコードは、そのままコーダーやエンジニアへ共有し、本番環境への実装に活用してもらうことも可能です。Figma MakeはGitHubとの連携にも対応しており、「Figma Makeでデザイン作成→コードをGitHubへプッシュ→エンジニアが本番環境へ実装」という流れをシームレスに実現できます。ただし、プッシュ先はFigma Makeが新規作成したリポジトリに限られ、既存リポジトリへの直接プッシュには対応していない点に注意が必要です。

Figma Sitesで公開する
Figma Makeで作成したデザインを、Figma Sitesの機能でそのままWebサイトとして公開する方法もあります。この場合、デザインから公開までをFigma内で完結できるため、スピード重視のプロジェクトに適した選択肢です。

Figma Makeの料金

Figma Makeは無料のスタータープランでも利用できますが、機能やAIクレジットに制限があります。本格的に活用するには、フルシートの有料プランの契約が必要です。

各プランの料金とAIクレジットは次のとおりです。（2026年5月時点）

プラン	スターター	プロフェッショナル	ビジネス	エンタープライズ
料金 （フルシート・年払い時の単価）	無料	2,400円/月	8,300円/月	13,600円/月
月間のAIクレジット	500 （別途150/日の制限）	3,000	3,500	4,250

Figma Makeの効果的な活用法

ここまで紹介した点をふまえると、デザインやコーディングの専門知識がない企業担当者におすすめのFigma Make活用法としては、次の3点が挙げられます。

• Web制作会社への依頼前に「動く仕様書」を作成する
• 社内確認用のプロトタイプを素早く作成する
• 小規模なLP・社内ツールを自作する

それぞれの活用法について、詳しく紹介します。

Web制作会社への依頼前に「動く仕様書」を作成する

Web制作会社へ依頼する際、デザインイメージを言葉だけで伝えるのは簡単ではありません。パワーポイントなどで資料を作る方法もありますが、「実際の画面の動き」や「操作感」まで正確に伝えるには限界があります。

こうした悩みを抱えている方にこそ、Figma Makeで「動く仕様書」を作成する方法が有効です。言葉では伝わりにくいインタラクションやレイアウトのイメージも、Figma Makeを使えば実際のWebサイトさながらに具現化できます。

社内確認用のプロトタイプを素早く作成する

Web制作会社に外注する前に、社内の関係者や上司から承認を得なければならないケースも少なくありません。パワーポイントで案を作成したものの「イメージがつかない」と差し戻された経験がある方もいるのではないでしょうか。加えて、パワーポイントでデザイン案を作成する作業自体にも相応の時間がかかります。

一方、Figma Makeを使えば、パワーポイントで案を作るよりも少ない手間で、本物のWebサイトに近いプロトタイプを素早く生成可能です。実際に操作できる「動くUI」を見せることで、関係者の理解を得やすくなる点も大きなメリットといえます。

小規模なLP・社内ツールを自作する

制作会社への外注費用を抑えたい場合や、スピードを優先したい場合は、Figma Makeでデザインし、そのまま公開する方法も選択肢の一つです。

すべてのWebサイトをFigma Makeだけで完結させられるわけではありませんが、問い合わせフォーム付きのシンプルなLPや社内向けの簡易ツール程度であれば、自作も十分検討に値します。

Figma Makeの限界

Figma Makeは便利なツールですが、次のような限界があることも事実です。

• デザイン・UI以外の領域には対応できない
• コードの設計・保守性までは考慮されない
• BI・CIへの厳密な準拠は難しい
• デザイン品質がプロンプトに大きく左右される

これらに該当する場合、どのように対処すべきかとあわせて、詳しく見ていきましょう。

デザイン・UI以外の領域には対応できない

Figma Makeはあくまでフロントエンドのデザイン・UI生成を得意とするツールであり、それ以外の領域には対応できません。

たとえば検索エンジンで上位表示を狙うには、文字コンテンツの充実やクローラビリティを意識したコーディングなど、さまざまなSEO施策が求められます。しかし、こうした施策にFigma Makeで対応することは困難です。検索エンジン経由での集客を前提とするWebサイトは、SEOの知見を持つプロのWeb制作会社に依頼することを推奨します。

また、ECサイトを制作する場合、フロントのUI設計はFigma Makeで対応できますが、決済・会員管理・外部システム連携といったバックエンド機能の実装には、プロのエンジニアの力が不可欠です。

コードの設計・保守性までは考慮されない

Figma Makeでは実際に動くコードも生成されますが、そのコードが保守しやすい設計になっているかどうかまでは担保されません。Figma Makeで生成したままの状態でWebサイトを公開し、後からエンジニアが修正・改修する場合、コードの読み解きに想定以上の時間・コストがかかる可能性があります。

継続的な更新やコンテンツ追加を前提としたサイトは、最初からプロに設計ごと依頼するのが安全な判断です。

BI・CIへの厳密な準拠は難しい

Figma Makeは、デザインシステムのスタイルを参照してUIを生成する仕組みを備えています。

しかし、AIによる自動生成という性質上、BI（ブランド・アイデンティティ）やCI（コーポレート・アイデンティティ）への厳密な準拠には限界があります。ブランドとして統一したい細かなニュアンスまで、AIが完璧に反映できるとは限りません。

Figma Makeを活用する場合でも、最終的には人の目によるデザインチェックが不可欠です。

デザイン品質がプロンプトに大きく左右される

「会話形式で簡単にデザインできる」とされるFigma Makeですが、デザインの品質はプロンプトの内容に大きく左右されます。

曖昧な指示では思い通りのデザインにならないことも多く、修正を重ねるほど意図しない要素が生成され、収拾がつかなくなるリスクも高まります。CSSの知識があれば数秒で直せるレイアウトのズレを、AIに言葉で伝えて修正しようとした結果、想定以上の時間がかかってしまうケースも少なくありません。

また、デザインの専門知識がないと、どの要素を修正すればクオリティが上がるか判断が難しくなります。「何となく違う」と感じても、それをプロンプトで的確に伝えられなければ改善は困難です。

デザインやCSSの基礎知識がない場合や、細部の品質にまでこだわりたい場合は、クライアントの意図をくみ取ってデザインに落とし込めるプロのWeb制作会社への相談を検討してみてください。

まとめ

Figma Makeを活用すれば、プロンプトを入力するだけで「動くUIプロトタイプ」と「フロントエンドのコード」を同時に生成できます。デザインやコーディングの専門知識がない方でも、「動く仕様書」や「社内確認用のプロトタイプ」を素早く作成できる点は大きなメリットです。

一方で、Figma Makeはあくまで「UIを形にするツール」にすぎません。Figma Sitesなどを併用しても、SEO対策・バックエンド機能の実装・ブランドガイドラインへの厳密な準拠といった領域までカバーすることは難しく、本格的なWebサイトの制作にはプロの力が欠かせない場面も多くあります。

JPCではFigmaを活用したWeb制作体制を整えており、Figma Makeで作成したプロトタイプをもとにご要望をヒアリングしたうえで、最適な制作プランをご提案いたします。Webサイトの制作・リニューアルをご検討中の方は、お気軽にご相談ください。