Figma Sitesとは？最新機能・公開方法・SEO・注意点を解説【2026年版】

Figma Sitesは、Figma上でWebサイトのデザイン、プロトタイピング、レスポンシブ対応、公開までを進められるWeb制作ツールです。2025年5月7日の「Config 2025」で発表され、2026年8月14日時点ではオープンベータとして提供されています。

ノーコードを基本にしながら、既存のFigma Designのデザインを活用でき、必要に応じてインタラクションやReactベースのコードレイヤーも追加できます。一方、公開サイト全体のHTML・CSSを自由に書き出して別のサーバーへ移す機能は、現時点では提供されていません。

本記事では、Figmaの公式情報をもとに、Figma Sitesの機能、公開環境、更新・ロールバック、CMS、SEO、導入前に確認すべき制約を解説します。

最終確認日：2026年8月14日。Figma Sitesはベータ版のため、機能、料金、上限、提供条件は変更される可能性があります。導入時には、記事末尾の公式情報もあわせて確認してください。

Figma Sitesの概要

Figma Sitesを端的にいえば、Figmaのデザイン体験を生かした、ホスティング一体型のWebサイト制作・公開プラットフォームです。

Figmaは公式に、Figma Sitesを「デザイン、プロトタイプ、公開を1か所で行う」ための製品と説明しています。Figma Sites内でゼロから制作するほか、Figma Designで作成したフレームをコピー＆ペーストしてWebサイト制作の土台にできます。ただし、既存のFigma Designファイルが何の調整もなく自動的に本番サイトへ変換されるわけではありません。Figma Sitesファイルへ移したうえで、ブレークポイント、レイアウト、リンク、インタラクション、アクセシビリティ、公開設定などを確認する必要があります。

参考：Figma Sites公式製品ページ、Figma Sitesを理解する、Figma DesignからFigma Sitesへデザインを移す

主要仕様の早見表

出典：Figma Sites学習コレクション、サイトを公開・更新・非公開にする、サブドメインを変更する

Figma Sitesの主な特徴

1. デザインから公開までをFigma内で進められる

Figma Sitesでは、Webページのレイアウト作成、プレビュー、インタラクション設定、公開を同じ制作環境で進められます。Figma Designのフレーム、コンポーネント、スタイル、ライブラリを活用できるため、デザインから実装へ情報を受け渡す工程を短縮しやすい点が特徴です。

テンプレートや、ナビゲーション、ヒーロー、フッターなどの既成ブロックも用意されています。既存のデザインシステムを利用する場合は、ライブラリをFigma Sitesへ接続してコンポーネントやスタイルを使用できます。

参考：Figma Sites発表記事

2. ブレークポイントとオートレイアウトでレスポンシブ対応できる

Figma Sitesでは、デスクトップ、タブレット、モバイル、任意幅のブレークポイントを設定できます。プライマリーブレークポイントの変更はセカンダリーブレークポイントへ引き継がれ、セカンダリー側で個別調整することも可能です。

オートレイアウト、Fill container、最小・最大幅などを組み合わせることで、画面幅に応じて要素が伸縮・折り返しするWebレイアウトを作成できます。デスクトップ起点だけでなく、モバイルをプライマリーにする設計も可能です。

参考：レスポンシブWebページ制作のヒント、ブレークポイントの追加・削除

3. プリセットとコードレイヤーでインタラクションを追加できる

マーキー、ホバー、カスタムカーソル、スクロールパララックスなどのインタラクションを、Figma Sites上で設定できます。さらにコードレイヤーを使うと、既存デザインをインタラクティブな要素へ変換したり、Reactコードを自分で記述したり、AIへの指示から生成・修正したりできます。

コードレイヤーは、カルーセル、ドロップダウン、アニメーション、マップ、フォームなど、ページ内の特定の機能を拡張する仕組みです。再利用可能なコードコンポーネントにすることもできます。

ただし、コードレイヤーのコードを編集できることと、公開サイト全体の生成済みHTML・CSSを自由に編集・書き出せることは同じではありません。Figma公式ヘルプでは、Figma Sitesのサイトコードを外部公開用にエクスポートする機能は「現在利用できない」と案内されています。

参考：コードレイヤーをサイトに追加する、コードレイヤー発表記事、サイトを公開・更新・非公開にする

4. リアルタイム共同編集を制作フローに生かせる

Figmaのファイル共有と共同編集を利用し、デザイナー、マーケター、ディレクター、開発者が同じファイル上で制作やレビューを進められます。デザインと公開用ページが分断されにくいため、修正内容をチームで確認しやすい点はFigma Sitesの大きな利点です。

ただし、公開サイトの閲覧権限とFigmaファイル自体の共有権限は別の設定です。OrganizationおよびEnterpriseプランでは、一般公開のほか、Figma組織にログインしたメンバーだけが閲覧できる内部公開も選択できます。

参考：組織のWeb公開を管理する

5. Figma Sites CMSでブログや事例を管理できる

当初「今後追加予定」とされていたCMSは、現在はパブリックベータとして提供されています。CMSは次の3要素で構成されます。

• CMSコレクション：記事、事例、商品などの項目を表形式で管理するデータ群
• CMSリスト：コレクション内の複数項目を一覧表示する繰り返しブロック
• CMSページ：1つのテンプレートへ各項目の内容を差し込み、項目ごとのURLを生成する動的ページ

CSVからのインポートにも対応します。2026年8月14日時点の公式ヘルプでは、1コレクションにつき最大200項目、最大100フィールドと案内されており、CMSリストのフィルタリングと並べ替えは未対応です。大規模なメディア、複雑なカテゴリ構造、詳細検索を必要とするサイトでは、この上限と機能範囲を事前に検証する必要があります。

参考：Figma Sites CMSガイド、CMSコレクションをCSVから読み込む、CMSリストを作成する

公開されるサーバー環境

Figma公式ヘルプによると、Figma Sitesで公開したサイトは米国のAmazon Web Services（AWS）でホストされ、ドメインとルーティングにはCloudflareが使用されます。

公開時には、まずfigma.siteのサブドメインが割り当てられます。公開後は、利用可能な任意のfigma.siteサブドメインへ変更できます。有料プランでは、所有する独自ドメインも接続可能です。独自ドメインの接続には、ドメイン管理サービス側でTXT、CNAMEなど、Figmaが指定するDNSレコードを設定します。SSL証明書はFigmaが自動的に発行します。

独自ドメインには、現時点で次の制約があります。

• 1つのサイトに接続できる独自ドメインは1つ
• ワイルドカードドメインは非対応
• example.com/aboutのように、ドメイン配下の特定パスだけをFigma Sitesへ向ける設定は非対応
• Cloudflareをドメイン管理に使う場合、検証時はプロキシを「DNS only」にする必要がある

データ所在地、セキュリティ基準、法令対応、障害時の運用などに厳格な要件がある組織は、米国ホスティングで要件を満たせるかを法務・セキュリティ担当者と確認してください。Figmaは、公開コンテンツや訪問者から収集するデータに適用される法令への対応は公開者の責任であると案内しています。

出典：サイトを公開・更新・非公開にする、独自ドメインを管理する

公開後の更新フロー

Figma Sitesのキャンバスを編集しただけでは、公開中のサイトは更新されません。文章や画像の修正、ページの追加・削除は、変更内容を改めて公開した時点で反映されます。

たとえば、キャンバスからページを削除しても、更新を公開するまではそのページが公開サイトに残ります。公開前には、リンク切れ、表示崩れ、SEO設定、アクセシビリティ、計測タグも含めてプレビューで確認する運用が必要です。

また、Figmaはキャンバス上のすべてのWebページを公開対象に含めると案内しています。CMSページから生成される動的サブページも対象です。準備中のページを同じファイル内へ置く場合は特に注意し、ベータ期間中は未公開ページを別ファイルへ移すという公式の推奨も検討してください。

出典：サイトを公開・更新・非公開にする

CMS更新の反映について

公式CMSガイドでは、CMSの変更はキャンバス上へ即時に表示され、サイト公開時には接続済みの最新CMSデータが含まれると説明されています。一方、公開済みサイトへCMSの編集だけで自動反映されるのか、毎回の再公開が必要なのかについては、2026年8月14日時点の公式ヘルプ上で十分に明確な説明を確認できませんでした。

本番運用では「変更後に公開操作を行い、公開URLで確認する」手順を採用し、実際のアカウント環境で反映挙動をテストするのが安全です。

参考：Figma Sites CMSガイド

バージョン管理とロールバック

Figma Sitesでは、サイトを公開するたびに公開履歴が残ります。問題が発生した場合は、過去に公開したバージョンを選んで再公開できます。

過去のバージョンを再公開すると、次のように処理されます。

• その時点で生成されたHTML、CSS、その他のファイルが復元され、以前の状態がすぐに公開される
• Figma Sitesのキャンバスやデザインデータは変更されない
• 公開履歴に「以前のバージョンを再公開した」記録が追加される

つまり、ロールバックは公開サイトを戻す機能であり、編集用キャンバスを同じ状態へ戻す機能ではありません。公開サイトを戻した後も制作を継続する場合は、必要に応じてキャンバス側も手動で修正する必要があります。

出典：サイトを公開・更新・非公開にする

Figma SitesのSEO機能

Figma Sitesには、基本的なSEOと共有設定が用意されています。

• サイト全体およびページごとのタイトル
• サイト全体およびページごとのメタディスクリプション
• サイト全体およびページごとの言語コード
• サイト全体およびページごとのソーシャル共有画像
• サイト全体またはページ単位の検索エンジン除外設定（noindex）
• ファビコン
• Google Analytics ID
• headまたはbodyへ追加するサイト共通のカスタムコード
• 有料プラン向けのCookie同意バナー
• レイヤーへのHTMLタグ、画像の代替テキスト、ラベルなどのアクセシビリティ設定

検索順位は、これらの項目を設定するだけでは保証されません。検索意図に合った本文、固有で説明的なページタイトル、適切な見出し構造、内部リンク、画像最適化、表示速度、モバイル表示、被リンク、コンテンツの信頼性なども重要です。

参考：Webサイト設定を編集する、サイトのアクセシビリティを改善する

公開前のSEOチェックリスト

1. 各ページに内容を正確に表す固有のタイトルを設定する
2. 各ページの要点が伝わるメタディスクリプションを設定する
3. 日本語サイトでは言語コードをjaにする
4. 1ページの主要テーマを1つに絞り、見出しを論理的な順序にする
5. 画像へ内容に合った代替テキストを付け、装飾画像は装飾として設定する
6. 見出し、ナビゲーション、ボタンなどに適切なHTMLタグを指定する
7. デスクトップとモバイルの両方で表示と操作を確認する
8. 公開対象ページに誤ってnoindexが設定されていないか確認する
9. 独自ドメインのwwwあり・なしを片方へリダイレクトし、URLを統一する
10. Google Analyticsなどの計測を使う場合は、プライバシーポリシーとCookie同意の要否を確認する

AIO（AI検索最適化）で意識したいこと

AIOに単一の公式な順位決定ルールがあるわけではありません。AI検索や生成AIの回答で参照されやすい情報にするには、従来のSEOに加えて、内容を明確に構造化し、根拠を示すことが重要です。

• ページ冒頭で「誰に、何を説明するページか」を簡潔に回答する
• 見出しごとに1つの質問へ答える
• 製品名、会社名、日付、機能名を曖昧にせず記載する
• 一次情報へのリンクと最終更新日を掲載する
• 比較表、手順、FAQを用い、情報を抽出しやすくする
• 独自の検証結果や導入事例を追加する場合は、検証条件と日付を明記する
• 著者情報、運営者情報、問い合わせ先、編集方針をサイト内に用意する
• 古い情報を放置せず、ベータ版の変更に合わせて定期更新する

構造化データについては、Figma Sitesがサイト共通のカスタムコード挿入に対応していることは公式情報で確認できます。ただし、ページごとのJSON-LD管理、canonical URL、XMLサイトマップの詳細な制御については、2026年8月14日時点で公式ヘルプから明確な仕様を確認できませんでした。必要な場合は、実際の公開ページのソースと検索エンジンの管理ツールで検証してください。

Figma Sitesを導入する前の注意点

オープンベータである

Figma SitesとCMSはベータ段階です。仕様、上限、料金、公開条件が変わる可能性があります。重要なサイトへ導入する場合は、公開前の検証、更新手順、障害時の連絡体制、代替手段を決めておく必要があります。

サイト全体のコードを書き出せない

現時点では、公開サイトのコードをエクスポートして任意のホスティング環境へ移行できません。将来の移行、Gitでの一元管理、自社インフラでの運用が必須の場合は、大きな判断材料になります。

高度なサイト構造やCMS運用には制約がある

CMSの項目数・フィールド数には上限があり、CMSリストのフィルタリングと並べ替えにも未対応です。また、すべてのキャンバス上のWebページとCMSの動的サブページが公開対象になるため、下書き管理には慎重な運用が必要です。

公式情報で明確に確認できない機能がある

2026年8月14日時点では、次の機能について、Figma Sitesの公式ヘルプで提供範囲や詳細な制御方法を明確に確認できませんでした。

• XMLサイトマップの生成・編集方法
• canonical URLの個別設定
• 任意のURLリダイレクト管理
• カスタム404ページ
• ページごとの構造化データ管理
• ホスティングリージョンの選択
• サーバー側設定やログへの直接アクセス

「未対応」と断定できる項目と、単に公式文書で確認できない項目を混同しないことが重要です。採用判断に必須の機能は、テストサイトまたはFigmaサポートで確認してください。

Figma Sitesが向いているサイト・慎重に検討したいサイト

向いている可能性が高いサイト

• ランディングページ
• ポートフォリオ
• キャンペーン・イベントサイト
• 小〜中規模の企業・サービス紹介サイト
• 構造が比較的単純なブログや導入事例サイト
• デザイナー主体で素早く公開・改善したいサイト

慎重な検討が必要なサイト

• 数千〜数万件のコンテンツを扱う大規模メディア
• 複雑な検索、絞り込み、会員機能、決済を必要とするサイト
• 厳格なデータレジデンシーや自社ホスティングが必要なサイト
• ソースコードの所有・外部書き出し・Git管理が必須の案件
• 大量のリダイレクトや複雑なURL階層を持つサイト移行
• 高度なサーバーサイド処理やバックエンド連携が中核となるWebサービス

コードレイヤーや外部サービス連携で実現できる場合もありますが、ベータ製品上での保守性、セキュリティ、障害対応まで含めて評価する必要があります。

Figma Sitesに関するよくある質問

Figma Sitesとは何ですか？

Figma上で、Webサイトのデザイン、プロトタイピング、レスポンシブ対応、公開を進められるホスティング一体型のWeb制作ツールです。2026年8月14日時点ではオープンベータです。

Figma Sitesは無料で使えますか？

Figma Sitesファイルの作成はすべてのプランで可能ですが、Webへの公開は原則として有料プランが必要です。Educationプランは1サイトを公開できますが、帯域制限の対象です。最新の条件は公式の料金ページと公開ヘルプで確認してください。

独自ドメインは使えますか？

有料プランでは、所有している独自ドメインを接続できます。標準のfigma.siteサブドメインも、公開後に利用可能な任意の文字列へ変更できます。

公開サイトはどこにホストされますか？

Figma公式ヘルプによると、米国のAWSでホストされ、ドメインとルーティングにはCloudflareが使用されます。

編集内容は自動で公開サイトに反映されますか？

キャンバス上の変更は、更新を公開するまで公開サイトへ反映されません。ページを削除した場合も、更新を公開するまでは公開サイトに残ります。

過去の公開バージョンへ戻せますか？

はい。公開履歴から以前のバージョンを再公開できます。ただし、戻るのは公開サイトであり、Figma Sitesのキャンバスは変更されません。

HTMLやCSSをエクスポートして別サーバーで公開できますか？

現時点ではできません。コードレイヤーの編集は可能ですが、Figma Sitesが生成したサイト全体のコードを書き出して外部公開する機能とは異なります。

Figma SitesはSEOに対応していますか？

ページタイトル、メタディスクリプション、言語コード、検索エンジン除外設定、ソーシャル画像、ファビコン、HTMLタグ、代替テキストなど、基本的なSEO設定に対応しています。ただし、検索順位やインデックス登録を保証するものではありません。

まとめ

Figma Sitesは、Figmaに慣れたチームがデザインから公開までを短いサイクルで進めるための有力な選択肢です。レスポンシブレイアウト、既成インタラクション、コードレイヤー、独自ドメイン、CMS、基本的なSEO設定を同じ制作環境で扱えます。

一方で、2026年8月14日時点ではオープンベータであり、サイト全体のコード書き出し、CMSの規模と機能、高度なURL・SEO制御、ホスティング環境の選択には制約または不明点があります。

小〜中規模のマーケティングサイトやポートフォリオでは、制作速度とデザイン自由度を生かしやすいでしょう。大規模CMS、EC、会員制サービス、厳格なインフラ要件がある案件では、必要機能を一覧化し、テストサイトで検証したうえで採用を判断することが重要です。