FigmaのAIでWebサイトを作成する方法｜Figma Sites・Figma Makeの使い方と注意点
「Figmaで作ったデザインを、そのままWebサイトにできないの？」「FigmaのAIでサイトが作れると聞いたけど、どの機能を使えばいい？」。この記事は、そんな疑問を持つデザイナーやWeb担当者の方に向けて書いています。
結論から言うと、Figmaでサイトを作るときに使う機能は主に3つあります。デザインをそのままWebサイトとして公開できる「Figma Sites」、プロンプトや既存のデザインから動くサイトやアプリを生成する「Figma Make」、そしてデザイン作業を補助する「Figma AI」です。Figma Sitesは無料プランでもFigmaのドメインで公開できますが、独自ドメインを使うには有料プランが必要です。
この記事では、3つの機能の違いと使い分け、Figma Sitesで公開するまでの手順、無料でできること、注意点までを、ホームページ制作会社の視点で解説します。
目次
FigmaのAIでWebサイトを作るとは？3つの機能
Figmaは、ブラウザで使えるデザインツールです。Webサイトやアプリの画面デザインで広く使われており、近年はAI機能や、デザインをそのまま公開する機能が追加されています。サイト作成に関わる機能は次の3つです。
Figma Sites：デザインをそのままWebサイトとして公開
Figma Sitesは、2025年5月のFigmaの年次イベント「Config 2025」で発表された機能です。Figmaの中でWebサイトをデザインし、そのまま公開できます。これまでは「デザイナーがFigmaで作ったデザインを、エンジニアがコーディングする」という手順が必要でしたが、Figma Sitesではその工程を大きく短縮できます。
PC・タブレット・スマートフォンの画面幅ごとの表示（レスポンシブデザイン）や、スクロールに合わせた動き（アニメーション）にも対応しています。
Figma Make：プロンプトからサイトやアプリを生成
Figma Makeは、プロンプト（文章での指示）や既存のデザインから、実際に動くサイトやアプリのプロトタイプを生成する機能です。「この画面デザインをもとに、クリックすると詳細が開くページを作って」のように指示すると、AIがコードを書いて動く形にしてくれます。ベータ版として、無料のStarterプランを含む各プランに順次提供されています。
Figma AI：デザイン作業の補助
Figma AIは、デザイン作業を効率化するための機能群です。レイヤー名の自動整理、画像の生成や背景の削除、文章の書き換えや翻訳など、細かな作業をAIが手伝ってくれます。AIの利用にはクレジット（利用量の枠）があり、プランによって上限が異なります。
Figma SitesでWebサイトを公開する手順
ここでは、Figma Sitesを使ったサイト公開の一般的な流れを紹介します。
ステップ1：Sitesファイルを作成する
Figmaのファイル作成画面で「Sites」を選びます。テンプレートから始めることも、白紙から作ることもできます。Figma Designで作った既存のデザインをコピーして使うこともできます。
ステップ2：レイアウトを作る
ヘッダー、メインビジュアル、サービス紹介、お客様の声、問い合わせなどのセクションを配置していきます。Figmaのオートレイアウト（要素の並びや余白を自動で整える機能）を使うと、画面幅が変わっても崩れにくいデザインになります。
ステップ3：レスポンシブ表示を確認する
PC、タブレット、スマートフォンのそれぞれの表示を確認し、文字の大きさや並び方を調整します。お客様の多くはスマートフォンでサイトを見るため、スマホ表示の確認は特に丁寧に行いましょう。
ステップ4：リンクや動きを設定する
ボタンやメニューにリンクを設定します。スクロールに合わせたアニメーションなども付けられますが、動きをつけすぎると読みにくくなるため、控えめにするのがおすすめです。
ステップ5：SEOの基本設定をする
ページタイトル、説明文（meta description）、SNSで共有されたときの画像（OGP）などを設定します。検索から見つけてもらうためには欠かせない設定です。
ステップ6：公開する
公開ボタンから、Figmaのドメイン（〇〇.figma.site）か、独自ドメインを選んで公開します。
Figmaのサイト作成の無料プランと有料プランの違い
| 項目 | 無料プラン（Starter） | 有料プラン（Professional以上） |
|---|---|---|
| 公開先 | ランダムなfigma.siteのサブドメイン | 独自ドメインを接続できる（Professionalは最大10個） |
| Figma Make | ベータ版を利用可能（AIクレジットに上限） | より多くのAIクレジット |
| AI機能のクレジット | 少なめ（1日・1か月の上限あり） | プランに応じて多く使える |
| 向いている用途 | 試作、ポートフォリオの試し公開 | 事業のサイト、LP |
料金はドル建てで案内されており、プランや支払い方法によって変わります。機能も更新が続いているため、利用前にFigmaの公式料金ページで最新情報を確認しましょう。
Figma MakeでAIにサイトを作ってもらうコツ
Figma Makeでは、プロンプトの出し方で仕上がりが変わります。次のポイントを意識しましょう。
- 既存のデザインを渡す：白紙から作らせるより、Figmaで作ったデザインを渡した方が、意図に近いものができる
- 動きを具体的に伝える：「ボタンを押すとモーダル（小さな画面）が開き、問い合わせフォームが表示される」のように具体的に
- 1回で全部を頼まない：画面ごと、機能ごとに分けて依頼する
- できあがったものは必ず操作して確かめる：リンクやボタンが意図どおり動くかを確認する
| 作りたいもの | プロンプトの例 |
|---|---|
| LP | このデザインをもとに、スクロールでセクションがふわっと表示されるLPにしてください。問い合わせボタンは画面下に固定してください |
| 料金シミュレーター | 部屋数と面積を選ぶと、目安の料金が表示される簡単なシミュレーターを作ってください。金額はこの表を使ってください |
| 診断コンテンツ | 3つの質問に答えると、おすすめのプランが表示される診断ページを作ってください |
Figmaでサイトを作るのが向いている人・いない人
Figmaのサイト作成は、すべての人に向いているわけではありません。
普段からFigmaでデザインしている方にとっては、デザインと公開がひとつのツールで完結するのは大きなメリットです。一方、デザインツールに慣れていない方や、ブログやお知らせを頻繁に更新したい場合は、WixやWordPressなど更新に強いツールの方が運用しやすいでしょう。ツール選びはAIホームページ作成ツール比較16選で比較しています。
制作会社から見たFigma×AIの価値
ホームページ制作の現場から見ると、FigmaのAI機能やFigma Sitesの一番の価値は「デザインと実装の間の手戻りが減ること」です。これまでは、デザイナーが作ったデザインをエンジニアがコーディングする過程で、細かなずれや確認のやりとりが発生していました。デザインがそのまま動く形になることで、確認のスピードが上がり、お客様とのイメージ共有もしやすくなります。
ただし、見た目が完成しても、「誰に何を伝えて、どう行動してもらうか」という設計が弱ければ成果にはつながりません。ツールが進化しても、市場調査や導線設計に時間をかける大切さは変わりません。
Figma Sitesで作ったサイトを集客につなげるポイント
デザインの自由度が高いFigma Sitesですが、見た目に凝るあまり、集客の基本が抜けてしまうことがあります。公開前に次の点を確認しましょう。
| チェック項目 | ポイント |
|---|---|
| 文字はテキストになっているか | 見出しや本文を画像にしてしまうと、検索エンジンに内容が伝わりにくい |
| ページタイトル・説明文 | ページごとに内容を表すタイトルと説明文を設定する |
| 表示速度 | 大きな画像や動画を使いすぎない。画像は適切なサイズに圧縮する |
| アニメーション | 動きが多すぎると読みにくく、表示も重くなる |
| 問い合わせ導線 | ボタンの位置・文言・リンク先を確認し、フォームはテスト送信する |
| 計測 | アクセス解析を設定し、公開後に数字で改善できるようにする |
デザインがきれいなサイトほど「見た目は良いのに問い合わせが来ない」状態になりがちです。誰に何を伝え、どこで行動してもらうかを先に決めてからデザインに入ると、成果につながりやすくなります。
よくある質問
Q. Figma Sitesは無料で使えますか？
無料プランでも、Figmaのランダムなサブドメイン（〇〇.figma.site）でサイトを公開できます。独自ドメインを使う場合は有料プランが必要です。料金や提供条件は変わる可能性があるため、公式サイトで確認してください。
Q. Figma Sitesで作ったサイトに問い合わせフォームは付けられますか？
フォームの機能は更新が続いている部分です。現時点で対応していない場合や、より高度なフォームが必要な場合は、外部のフォームサービスを埋め込む方法があります。
Q. Figma MakeとFigma Sitesはどう使い分ければいいですか？
デザインをそのままサイトとして公開したいならFigma Sites、動きや機能を持つプロトタイプやアプリを作りたいならFigma Makeが向いています。
Q. デザインの経験がなくてもFigmaでサイトを作れますか？
テンプレートを使えば作れますが、Figmaの基本操作を覚える必要があります。デザインツールを使ったことがない方は、WixやJimdoなどのAIビルダーの方が始めやすいでしょう。
まとめ：Figmaは「デザインからそのまま公開」がしやすくなった
- Figmaでサイトを作る機能は「Figma Sites」「Figma Make」「Figma AI」の3つ
- Figma Sitesは無料でもfigma.siteで公開できるが、独自ドメインは有料プランが必要
- デザインにこだわるなら有力な選択肢。更新頻度が高いサイトは別のツールも検討する
とはいえ、デザインが完成しても「問い合わせが増えるサイト」になるかどうかは、設計と公開後の改善しだいです。スゴヨクでは、UI/UXデザインから、市場調査にもとづく「売れる」サイト制作、公開後の改善まで伴走しています。
まずは無料相談から、お気軽にご相談ください。
