5月に開催された Config 2025 では、Figmaが新機能 「Figma Sites」 を正式に発表し、大きな話題となりました。
現在は Open Beta として公開されており、FigmaでデザインしたものをそのままWebサイトとして公開できる、これまでにないワークフローを実現しつつあります。
本記事では、2025/26年版アップデートとして、Figma Sitesの概要、現時点でできること・まだできないことを整理しながら、その可能性と課題をわかりやすく解説していきます。
Figma Sites とは？
Figma Sitesは、デザインからWebサイトの公開までを、Figma上だけで完結させることができる新機能です。
従来、Figmaで作ったデザインをWebサイトにするには、コーディングや別のビルダーツールが必要でした。
しかし Figma Sites の登場により、「デザイン → コーディング → 公開」までの一連の流れをFigma内で完結できるようになりました。
現在は Open Beta 版として提供されており、自由に試用可能です。ただし、独自ドメインを使った公開には有料プランへの加入が必要であり、全機能を使えるかどうかはプランによって異なります。
最新機能まとめ
現時点で利用できる主な機能は以下のとおりです。
レスポンシブデザイン & ブレークポイント
Figma Sites では、パソコン・タブレット・スマホなど、画面サイズが違うデバイス に対応したWebページを簡単に作れるようになっています。Auto Layout 2.0 を活用することで、フレーム内の要素が自動で並び、画面幅に合わせて位置や間隔を調整してくれるため、レイアウトが崩れにくくなります。
ブレークポイントという仕組みを使えば、パソコン用に作ったデザインをもとに、タブレットやスマホ用に自動で調整したり、必要に応じて個別に微調整したりすることも可能です。これにより、同じデザインを複数のデバイスで使うときの手間が大幅に減ります。
Figma Sites のレスポンシブ対応は、デザインを変更するとすぐに他の画面サイズにも反映されるため、効率的に美しいサイトを作れる点が大きな魅力です。専門知識がなくても、マルチデバイスに対応したWebサイトのイメージを簡単に確認できるのも便利なポイントです。
テンプレート & アセット
Figma Sites には、多数のテンプレートが用意されており、LPやポートフォリオ、サービス紹介ページなど、あらかじめデザインされたページを簡単に使うことができます。初心者でも、プロが作ったデザインをベースにサイトを作れるため、時間を大幅に節約できるのが魅力です。
使い方もシンプルです。Figma Sitesで新しいサイトを作成するときに、使用したいテンプレートを選択するだけでページ全体のデザインや構成が読み込まれます。
必要に応じて文字や画像を差し替えたり、レイアウトを微調整するだけで、すぐに公開可能な状態にできます。
さらに、Figma 内のテンプレートは セクション単位での利用 も可能です。例えば、ヒーローセクションだけ、特徴紹介ブロックだけを取り出して、自分のページに組み込むことができるので、オリジナルのページも簡単に作れます。
テンプレートを活用することで、Figma Sites の「デザイン → 公開」までの作業をよりスムーズに進めることができます。短時間でプロ仕様のWebページを作りたい人や、初心者が効率的に学びながらサイトを作る場合に特におすすめです。
アニメーション & インタラクション
Figma Sitesでは、コードを書かなくてもアニメーションやインタラクションを簡単に追加できるのが大きな特徴です。例えば、ボタンやリンクにマウスを合わせたときに動く『ホバーエフェクト』、スクロールに応じて背景や要素が動く『パララックス効果』、ニュースやお知らせを横に流す 『マルキー（横スクロール）』 など、さまざまな動きを直感的に設定できます。
これらのエフェクトは、Figma上で要素を選んでメニューから設定するだけで適用可能。複雑なプログラミングは一切不要です。そのため、デザイン初心者でもサイトに動きをつけて、より印象的でインタラクティブなページを作ることができます。
さらに、ページ遷移時のアニメーションや、ユーザーの操作に対して反応するマイクロインタラクションも同じように設定でき、ユーザー体験を高める工夫が簡単に実装できます。
Figma Sites のアニメーション機能を活用すれば、デザインの幅を広げながらも制作効率を落とさず、プロフェッショナルなWebサイトを作ることが可能です。
アクセシビリティ
最近のアップデートで、アクセシビリティ（使いやすさ） に関する機能がさらに強化されました。具体的には、HTMLのタグがより意味に沿った形で出力されるようになり、スクリーンリーダーなどを使うユーザーにも理解しやすい構造になっています。
また、キーボードだけで操作できるように配慮されており、タブキーでリンクやボタンに移動したり、Enterキーでアクションを実行したりできるため、マウスを使えない人でもサイトを利用しやすくなっています。
これにより、Figma Sites で作ったWebページは、見た目がきれいなだけでなく、誰でも使いやすいサイト に近づきます。Webアクセシビリティを意識したサイト制作が、コードを書かずに簡単に実現できる点も大きなメリットです。
独自ドメイン & ホスティング
作成したサイトをそのまま公開できるホスティング機能が提供されています。ユーザー側でサーバーを用意する必要はなく、Figma 側のインフラ上でサイトがホストされるため、簡単にWebページを公開できます。
サイトは Figma が自動で発行する 『.figma.site』 のサブドメインで公開することも可能です。また、有料プランでは自分の 独自ドメイン（カスタムドメイン） を接続することもできます。Professional プランでは最大 10 個までのカスタムドメインを設定可能で、Organization や Enterprise プランでは無制限のカスタムドメインを設定できます。
カスタムドメインの設定や解除は、Figma の設定画面から簡単に行えます。これにより、ブランド用のドメイン名でサイトを公開したり、SEO 対策やSNS連携を考慮した運用も可能です。
バージョン管理
Figma Sitesには、過去に公開したサイトの状態に戻して再び公開できる機能が追加されました。例えば、誤って更新してしまった内容を元に戻したいときや、以前の安定したデザインに戻したいときに便利です。
使い方は簡単です。サイトの「公開（Publish）」画面で、過去に公開したバージョンの一覧が確認できます。その中から戻したいバージョンを選び、「再公開（Republish）」 ボタンを押すだけで、選んだ状態のサイトを再び公開できます。
ポイントは、Figma のデザインファイル自体は変更されない ことです。あくまで「公開されているサイトの状態」を切り替えるだけなので、作業中のデザインには影響しません。また、再公開すると履歴に「以前のバージョンを再公開した」という記録が残るため、いつ・どのバージョンに戻したかも確認できます。
この機能により、万が一の更新ミスや急な変更にもすぐ対応できるため、チームでの運用や頻繁な更新が必要なサイトでも安心して利用できます。
制限事項まとめ
eコマース（EC）未対応
現時点で Figma Sites にはショッピングカートやチェックアウトのようなEC機能が組み込まれておらず、eコマースを目的としたサイト構築には制限があります。
API やプラグイン連携が未提供
Figma Sitesはまだベータ版であり、外部サービスと連携するための API やサードパーティ製プラグインのサポートが十分に整っていません。
多言語機能（ローカライズ）が限定的
現在、サイトを多言語化（ローカライズ）するためのネイティブ機能は提供されておらず、本格的な多言語運用には制限があります。
CMS の高度機能はまだベータ
CMS（コンテンツ管理）機能は存在しますが、フィルターや条件分岐など高度な動的機能はまだ開発中で、完全な CMS としての自由度には制限があります。
カスタムコードは “全体”（サイト共通）設定のみ
HTML や JavaScript、CSS などのカスタムコードを挿入できるものの、ページごとに異なるコードを入れることは現状対応していません。全ページに共通するカスタムコードのみの設定となります。
会員機能やログイン機能が非対応
ユーザー認証、ログイン、会員専用ページといったバックエンド機能と連携するような高度なWebサービス系のサイト構築には対応していません。
フォーム機能がネイティブで未対応
お問い合わせフォームや申し込みフォームなどの動的な機能は、現在ロールアウト中。Googleフォームや外部のフォームサービスなどを埋め込むことで対応が必要です。
料金プラン
Figma Sites は、デザインから公開までを Figma 上で完結できる便利なツールですが、サイト公開や独自ドメインの利用には 有料プランが必要 です。無料プラン（Starter）では、サイト作成は試せるものの、独自ドメインでの公開や高度な機能には制限があります。
Figma の主要プランは以下の通りです。
- Starter（無料）
基本的なデザイン機能は利用できますが、独自ドメイン利用や大規模なチーム運用には対応していません。
- Professional
月額 2400円（年払いの場合）。サイトの公開が可能で、独自ドメインも最大 10 個まで接続できます。個人や小規模チームに最適です。
- Organization
月額 8,300円（年払いの場合）。中〜大規模のチーム向けプランで、セキュリティ機能やチーム管理機能が充実しています。無制限の独自ドメインにも対応しており、チームメンバーの役割ごとにアクセス権を細かく設定可能です。
- Enterprise
月額 13,600円（年払いの場合）。大規模組織向けのプランで、Organization の機能に加え、シングルサインオン（SSO）や高度なセキュリティ・監査機能 が提供されます。複雑なチーム構成や大規模運用が必要な場合に適しています。
Figma Sites では、サイトのホスティングも Figma が提供しているため、別途サーバーを用意する必要はありません。プランを選ぶ際は、サイト公開の必要性や独自ドメインの利用状況、チームの人数や役割を総合的に考えることが大切です。
Figma Sites vs Webflow vs STUDIO｜シナリオ別の比較表（長所・短所まとめ）
Webサイト制作の選択肢は増えており、それぞれのツールには得意・不得意があります。
Figma上でデザインから公開まで完結できる Figma Sites、自由度が高くCMSやSEOにも強い Webflow、直感的操作で日本向け案件に便利な STUDIO。
以下では利用シーンごとに各ツールの特徴を整理し、長所・短所をわかりやすく比較します。
1. LP（小規模サイト）制作
Figma Sites
長所 : Figmaからそのまま即公開でき、制作スピードが最速。UIも分かりやすく、ノーコード初心者でも扱いやすい。
短所 : CMS機能は限定的で、テンプレート数も少なめ。
Webflow
長所 : 高品質なデザインやSEO対応が可能で、LPでもプロレベルの仕上がりを実現できる。
短所 : 初心者にはややハードルが高く、学習コストがかかる。
STUDIO
長所 : 操作が直感的で作りやすく、テンプレートを活用すれば見た目も整いやすい。
短所 : 拡張性や高度なカスタマイズには制限がある。
2. コーポレートサイト（中規模）
Figma Sites
長所 : デザインから公開までをFigma内で完結できるため、更新作業もスムーズ。ブランド資産をそのまま活用できる。
短所 : CMSやページ構造の設計は限定的で、大規模運用には向かない。
Webflow
長所 : CMSやSEO設定が非常に強力で、複雑な構造や多ページ運用にも対応可能。
短所 : 初期構築や学習に時間がかかる。
STUDIO
長所 : 国内向けテンプレートが豊富で、デザイン重視のコーポレートサイト構築に向く。
短所 : CMSや拡張性はWebflowほど強くない。
3. ブログ・メディア運用
Figma Sites
長所 : 小規模なブログやニュースサイトならCMS機能で簡単に運用可能。
短所 : 記事数が多くなる大規模メディアには不向き。
Webflow
長所 : 高度なCMS構造に対応しており、大規模メディアや運用型ブログに最適。
短所 : 学習コストが高く、初心者にはやや難しい。
STUDIO
長所 : 小規模ブログなら十分対応可能で、操作も簡単。
短所 : 複雑構造や多機能CMSには不向き。
4. 多言語サイト
Figma Sites
長所 : —
短所 : 多言語機能はまだ制限が多く、本格的な多言語サイトには向かない。
Webflow
長所 : 多言語機能が充実しており、複雑な構造や大規模運用にも対応可能。
短所 : 設定はやや複雑で、慣れるまで時間がかかる。
STUDIO
長所 : 多言語対応は可能で、小〜中規模サイトには十分。
短所 : 細かい制御や高度な構造化は制限あり。
5. モーション・ブランド表現
Figma Sites
長所 : ホバー、スクロール、パララックスなどの新しいエフェクトをコード不要で簡単に追加可能。
短所 : 複雑なカスタム動作や高度なアニメーションには制限がある。
Webflow
長所 : 新しいGSAPベースのインタラクションにより、複雑なアニメーションやトリガー制御が自在に可能。
短所 : 設計に時間がかかり、習得コストも高い。
STUDIO
長所 : 直感的にアニメーションを作成でき、ブランド表現に強い。
短所 : 高度な動きの自由度はWebflowほど高くない。
まとめ
Figma Sites：Figma中心の制作ワークフローで、デザインから公開までを最速で完結させたい小〜中規模案件に最適。
Webflow：CMS運用・SEO・多言語・高度なアニメーションなど、自由度と拡張性を重視するプロ向け。
STUDIO：直感的操作でサクッと美しいサイトを作りたい場合、国内向け案件に便利。
弊社の見解 : Figma SitesとWebflowの使い分け
Figma Sites は試作や簡易的なLP、スピード重視のプロトタイプ制作に最適です。デザインから公開までを一気通貫で行えるため、少人数でも短時間で形にできるのが大きな強みです。
一方で、本格的な商用サイトや中～大規模のコーポレートサイト、長期運用を前提としたWebサイトには、CMSやSEO、カスタム動作への対応力が高い Webflow の方が適しています。
案件の規模や目的に応じてツールを使い分けることで、効率的かつ質の高いWeb制作が実現できます。弊社スーパーサイトでは、このような使い分けを意識したノーコード制作のサポートを行っています。
FAQ：Figma Sites よくある質問
Q1. フォーム送信は可能ですか？
A: 現在フォーム機能は段階的に提供中です（ロールアウト中）。簡単な問い合わせフォームは利用可能ですが、複雑な連携や高度な設定はまだ制限があります。
Q2. コードをエクスポートできますか？
A: いいえ。Figma Sites はコードエクスポート機能を提供していません。サイトは Figma 上で作成・公開し、Figma がホスティングを行う形になります。
Q3. アクセス数の制限はありますか？
A: 現状の公開ページには目立った制限はありませんが、オープンベータの段階のため、大規模アクセスの運用には注意が必要です。正式リリース後に追加情報が提供される予定です。
Q4. 独自ドメインは使えますか？
A: はい、有料プランで独自ドメインの設定が可能です。Figma がホスティングを提供するため、サーバー管理は不要です。
Q5. 多言語サイトは作れますか？
A: 現状は制限があり、複数言語の運用は十分にサポートされていません。小規模な簡易多言語は可能ですが、本格的な多言語サイトには不向きです。
Q6. CMS機能は使えますか？
A: はい、CMS機能はベータ版として提供されています。ブログやニュースなどの動的コンテンツの管理は可能ですが、高度な構造や複雑な運用にはまだ制限があります。
まとめ
Figma Sites は、デザインから公開までを一気に完結できる便利なツールです。
試作や簡易LPにはぴったりですが、本格的な商用サイトや中規模以上の運用にはWebflowがやっぱり最適です。目的に合わせて使い分けるのがポイントです。
もし「Figma Sites で試作LPを作ったけど、本格運用はどうしよう？」と悩んでいる場合や、Webflow を使ったサイト構築を検討している場合は、ぜひ弊社スーパーサイトのWebflow 開発相談をご活用ください。
経験豊富なチームが、企画・デザイン・CMS構築・公開までトータルでサポートします。
あなたのWeb制作を、最速かつ最適な形で実現するお手伝いをいたします。
アップデート日 : 2025年11月
.svg)
