Figma Sites（ベータ版）で何ができて何ができないのか？徹底検証まとめ【2025年最新版】
どうやら来週あたりからFigma Sitesの新機能「コードレイヤー」が使用できるようになるそうです。
コードレイヤーを活用することで、独自のインタラクションや実装などを盛り込めるそう。
反映され次第試したいと思います。
https://www.figma.com/ja-jp/release-notes/?title=%2Fja-jpfigma-sites-code-layers
Figma Sites でできること（2025年5月ベータ版にて）
- Figmaでデザインしたものを、そのままウェブサイトとして一元管理・公開・保守できる
→ デザイン〜公開〜更新までをFigma内で完結。ノーコードで運用可能。 - デフォルトのテンプレートやブロック（セクション）を使って、素早くサイトを構築できる
→ ヒーローセクション、FAQ、CTAなどをドラッグ＆ドロップで組み合わせ。 - 複数ページを構成・管理できる
→ LPだけでなく、小規模なコーポレートサイトやプロダクト紹介サイトにも対応可能。 - レスポンシブデザインに対応している
→ オートレイアウトやバリアブルを活かして、デスクトップ・タブレット・モバイルを自然に切り替え。 - metaタグの設定やfaviconの登録も可能
→ SEOやOGPにも配慮できるため、最低限の実運用要件はカバー。サイト設定の一般から設定すれば、ページを追加しても個別に設定しなくても継承されます。（各ページは主にページタイトル、ページのメタ説明文だけを設定すれば良く、言語は継承される。）
→ サイト設定の一般にある「検索エンジンの結果からこのページを除外します」のチェックを入れれば「」が挿入されます。サイト公開時にはチェックを外します。 - ページ遷移・ホバーなどのインタラクションを設定できる
→ Framerのようなマイクロインタラクションも簡単に追加可能。 - リアルタイムに共同編集＆公開内容がすぐ反映される
→ 編集→反映までが早く、チームでの共同運用にも適している。 - 独自ドメインの設定ができる
→ 自社ドメインやブランドURLでの公開が可能。もちろん、基本ドメイン（xxx-xxx-xxx.figma.site）でもスグに公開・使用できます。 - オートレイアウトやバリアブル、スタイルもそのまま使える
→ 既存デザインシステムを活かしながら運用可能。保守・管理も効率的。 - 制限はあるものの、CSS Gridに準じたグリッドベースのレイアウトができる
→ セクションごとに列数や位置を調整でき、柔軟な構成が可能。 - 「問題確認」機能で、ARIAラベルの不足やフォントに関する改善提案が表示される
→ アクセシビリティを意識した設計を自然に促す設計になっている。 - Google Fonts に対応しており、ウェブフォントが利用できる
→ 現状ではGoogle Fontsに限られるが、ある程度のデザインの幅は確保されている。 - カスタムコード（HTML、CSS、JS）を利用でき、自由なカスタマイズが可能
→ 必要に応じて、サイト内で独自のコードを埋め込み、機能拡張やデザインの微調整ができる。Google Analyticsのコードも埋め込むことが可能。 - iframeを活用し、YouTubeやGoogle Mapsなどの外部コンテンツを埋め込める
→ 必要な外部サービスを簡単に埋め込み、動的コンテンツを表示可能。 - aタグで、telやmailtoリンクもサポートしている
→ 電話番号やメールアドレスへのリンクを簡単に作成できる。 - アクセシビリティの配慮として、HTMLタグの設定やalt属性を設定できる
→ アクセシビリティに配慮した設計が可能。画像にはalt属性を追加し、HTMLタグのセマンティックな使い方を推奨。
Figma Sites でできないこと（2025年5月ベータ版にて）
- 完全な自由なレイアウトができない
→ CSS Gridなどの一部機能には制限があり、複雑なレイアウトや細かい調整が必要な場合は難しい。特にGridは高さが固定となるので自由度が低いのと、フォントサイズやwidth,heightの%やrem指定などは使用できない。 - JavaScriptのフルカスタマイズには限界がある
→ JavaScriptの利用には制限があり、外部ライブラリやフレームワークの完全なサポートはされていない。 - サーバーサイドの処理はできない
→ データベースとの接続やサーバーサイドでの処理（ログイン認証など）は利用できない。クライアントサイドのみの運用に限られる。 - プラグインやウィジェットの導入には制限がある
→ サードパーティ製のプラグインやウィジェットを追加する自由度は低く、必要な機能をコードで実装する必要がある。 - フォーム機能がない
→ お問い合わせフォームの作成やデータ送信機能は無いので、Google Formsなどの外部サービスを埋め込むことで対応する必要がある。 - CMS（コンテンツ管理システム）機能がない
→ 動的コンテンツを管理するための本格的なCMS機能は備わっていない。コンテンツの管理には手動での更新が必要。ただし2025年度末には実装予定とのアナウンスあり。 - HTMLタグにclassやidを自由に追加することができない
→ カスタマイズ可能な部分に制限があり、HTMLタグに任意のclassやidを追加することができない。 - Figma Make（Figmaの自動化ツール）は使用できない
→ デザインの自動化やプロジェクト内でのワークフロー自動化ツール「Figma Make」は、Figma Sites内では利用できないが、今後利用可能となる予定。 - SEOやパフォーマンス面での微調整に制限がある
→ metaタグや構造的な最適化はできるが、詳細なSEO調整やパフォーマンスの最適化に関しては柔軟性に欠ける場合がある。 - 多国語対応（ローカライズ）の機能は不十分
→ 現在、各ページ単位で「言語」を指定できるが、その分のページを生成しないといけないため、核となるデザインを作った上で、コピペして多言語を作る必要がある。この方法では管理が煩雑になる可能性がある。 - EC（オンラインショップ）機能は利用できない
→ 現時点では、Figma Sites内で直接商品管理や決済機能を提供するE-commerce機能はサポートされていない。ただし、外部サービスを利用して、ショップ機能をiframeで埋め込むことで対応することは可能。 - ページやサイトのリダイレクト設定ができない
→ 現時点では、Figma Sitesではサイト内のページ間や、ドメイン間でのリダイレクト設定を直接行うことができません。.htaccessなどを使ったサーバーサイドのリダイレクト設定はサポートされていないため、リダイレクトを実現するには、外部のリダイレクトサービスを利用するか、DNS設定を使って対応する必要があります。
デザイン制作
ウェブサイトをデザインしたことがある人ならある程度スグに理解できるインターフェースだと思います。
下記の図では、デスクトップを軸としているのでプライマリーとしています。
モバイルを軸としたい場合は、そちらをプライマリーにすれば良いですね。
下記の図では、デスクトップでデザインを制作すると、タブレット、モバイルともに自動でデザインが反映されます。
つまり、一つ作ればぜ〜んぶ一括に適用されるので、レスポンシブデザインが素早く制作できるんです。
もちろん、各ブレイクポイントごとに微調整することも可能です。便利〜。
独自ドメインを使う方法
- Figma Sitesの公開設定を確認
→ Figma Sitesで作成したウェブサイトは、デフォルトではFigmaの提供するサブドメインで公開されます。しかし、独自ドメインを使いたい場合には、公開設定を変更する必要があります。 - ドメインの購入・取得
→ まず、独自ドメインを購入して取得する必要があります。ドメインは、お名前.comやXServerドメインなどで取得しましょう。取得後、ドメイン名を管理できるようになります。 - Figma Sitesで独自ドメインの設定を行う
→ ドメインのDNS設定を変更するため、Figma Sitesから必要な情報をコピペします。Figmaのダッシュボードにアクセスして、公開設定画面から「カスタムドメイン」オプションを選びます。
→ 独自ドメインの設定には、DNSのCNAMEレコードを追加する必要があります。CNAMEレコードは、例えば以下のようになります：www→www.2-g.jp（Figmaから提供されたURL）
→ これで、ドメインのwww.2-g.jpがFigma Sitesのページに紐づけられるようになります。 - DNS設定の更新
→ 取得したドメインのDNS管理ページにアクセスし、Figmaが提供するCNAMEレコード、TXTレコードを設定します。CNAMEレコードは、例えば以下のようになります：www→www.2-g.jp（Figmaから提供されたURL） - SSL証明書の設定
→ 独自ドメインを設定する際、Figma Sitesは自動的にSSL証明書を提供し、HTTPS対応が可能になります。これにより、ユーザーは安全にサイトにアクセスできます。 - サブドメイン設定とリダイレクトの重要な補足
→ サブドメインが必須
例えば、ドメイン「2-g.jp」を使用する場合、Figma Sitesでのアクセスは「[www.2-g.jp」のように、サブドメインを付加する…
セクショニングタグ、alt、ARIAについて
セクショニング用のタグを自分で指定できます＝アクセシビリティでいちいち全部設定しないと、ちゃんとした構造になりません。ちなみに指定しないとなぜか全部divタグとなってしまいます。
現状テキスト要素のみh1〜h6を指定できます。ですのでheaderなどのサイトIDとしてロゴ画像を使用したい場合は、工夫が必要ですよね。
※現状はdivタグの入れ子だらけのコードが生成されます。アクセシビリティ的にもどうなんでしょうね。改善を望みます。
カスタムコードについて
2025年5月ベータ版時点でのカスタムコードでは、各ページごとの設定はできません。
一般にて、全ページ共通のコードを挿入することは可能です。<head>開始、終わりの箇所ではCSSやJSなどを挿入することができます。
<body>の開始と終わりの箇所はHTMLタグやJS、CSSなどを挿入することができます。
ちなみにどちらもコード補完が使用できるので、記述しやすいのが特徴です。
私はAIで生成したThree.JSのコードを入れ込んでみましたが、問題なく動作しました。
インタラクション
マウスでのインタラクションや、スクロールでのインタラクションなど色々設定することができます。
マーキー設定すると、無限ループでテキストが流れるのあの表現も可能です。
色々活用できそうですね。
お問い合わせフォームはGoogle Formsなどを埋め込めば対応可能
現状フォーム機能は備わっていないため、標準では実現できません。
しかし、iframeは使用できるため、例えばGoogle Formsなどを指定のwidth,heightで埋め込めば使用できます。
工夫次第ですね。
Figma SitesでのGridについて
現状のGridでは高さが固定となっているので、ちょっと使いづらいです。
Gridにもコンテンツを内包が実装されるともっと自由度が上がる予感。
ここは製品版に期待したい箇所の一つです。
問題確認
何か問題が発生した場合、例えばフォントやARIAなどです。こちらは左下の問題確認から警告が来るのでチェックして改善が可能です。問題箇所にマウスを当てると該当レイヤーに飛ぶことができます。
Figma Sitesの日本語での読み方について
日本語での読み方ってどうなんでしょう。
フィグマサイトなのか、フィグマサイツなのか。
とりあえず私は、Figmaサイトとして呼ぶことしています。
デモサイト
デモサイトを作成しました。既存のテンプレートをベースに色々カスタマイズしています。
カスタムコードとしてThree.jsにて線が描画されるように改造しています。こんなこともできるなんて素敵ですね。
お問い合わせフォームやCMS、Eコマース、細かなカスタマイズの自由度といった点では制限があるものの、デザインと公開がここまで一体化している体験は革新的とも言えます。
現状は、制約の中で工夫して運用するクリエイター向けの領域にありますが、将来的には機能追加や統合が進み、「ノーコードでWebをデザインする標準ツール」になっていく可能性も充分に感じられます。
Figma Makeとの連携や、より柔軟なCMS機能、多言語対応のスマート化など、今後のアップデートに期待しつつ、今はその限界を理解して上手に付き合うことが大切です。
簡便なコーポレートサイトやLP、クリエイターのポートフォリオなんかには良いのでは？
Figma Sitesは、Figmaが新たに展開する「デザインからWeb公開までを一貫して行える」サイト制作機能です。
2024年のConfigで発表されて以来、密かに注目を集めてきましたが、2025年3月頃には限られたユーザー向けにアルファ版が提供され、そして先日（2025年5月）のConfig 2025でついにベータ版が一般公開されました。
今回は、実際に触ってみた感想をもとに、「Figma Sites（ベータ版）でできること・できないこと」を正直にまとめてみます。
Figmaにウェブサイト機能が来るらしいけど、今アルファ版なんだってね。他に何か詳しい情報持ってる人いる？
https://www.reddit.com/r/FigmaDesign/comments/1jrgaao/websites_coming_to_figma_currently_in_alpha/?tl=ja&rdt=34789
次のウェブサイトのデザイン、プロトタイプの作成、公開をFigma Sitesで
https://www.figma.com/ja-jp/sites/