Figma Sitesとは？
Figma Sites とは、Figma上でデザインしたページを、そのまま公開できる新しい機能です。
これまでFigmaは「UIデザインツール」として使われてきましたが、今回の発表により「デザイン → コーディング → 公開」までをFigma内で完結できるようになりました。
現時点で「Studio」や「Webflow」など、さまざまなノーコードツールがありますが、Figmaはすでに約90%のデザイナーに利用されているため、今回の新機能も多くの人が活用することになりそうです。
Figma Sitesでできること
現時点（ベータ版）で利用できる主な機能は以下のとおりです。
1. デザインから公開までFigma上で完結
Figmaでデザインしたページを、そのままWebページとして公開可能です。コード不要で誰でも簡単にサイト制作ができます。
2. テンプレートを活用したスピーディーな構築
Figma内に用意されたテンプレートを使えば、プロのようなデザインも短時間で実現可能です。
3. レスポンシブデザインの自動対応
Figmaのオートレイアウトを使えば、デスクトップ・タブレット・モバイルに自動対応したデザインが簡単に実現。要素の変更も連動して調整されます。
4. CMSサイトの作成（ベータ版）
CMS機能により、動的なコンテンツ（ブログやニュースなど）を管理・表示するサイトも構築可能です。数ヶ月以内の正式リリースが予定されています。
5. カスタムコードの挿入
HTMLタグやJavaScript、CSSなどのカスタムコードが埋め込み可能。細かな挙動の調整も行えます（※現時点ではページごとの設定は不可）。
6. 独自ドメインの設定に対応
発行されたFigmaのURLではなく、自分のドメイン名を使用してサイトを公開することも可能になっています。
7. 外部コンテンツの埋め込み（iframe対応）
YouTube動画、Google Maps、外部サービスのウィジェットなどをiframeを使って埋め込むことができます。
8. アクセシビリティへの配慮
HTMLタグのセマンティックな設定やalt属性の付与など、アクセシビリティ対応もサポートされています。
9. Google Fontsの利用
Google Fontsに対応しており、豊富なWebフォントを簡単に使うことができます。
10. meta情報の設定
SEOやSNSシェア時の表示に必要なmetaタグ（タイトル・ディスクリプション・OGPなど）を設定可能です。
11. アニメーションとインタラクション
ページ遷移やホバーアニメーションに加え、マイクロインタラクションも簡単に追加できます。
12. リアルタイム共同編集＆即時反映
複数人での同時編集が可能で、公開内容はリアルタイムに反映。チームでの運用や迅速な更新に最適です。
13. Figmaによるホスティング
Figmaが自動でURLを発行し、サーバー管理不要でページを公開できます。
Figma Sitesでできないこと
Figma Sitesは非常に多機能なサービスですが、現時点では以下のような制限や未対応の機能も存在します。用途によっては他のツールとの併用も検討する必要があります。
1. ページごとのカスタムコード設定ができない
サイト全体でのカスタムHTML/CSS/JSの挿入は可能ですが、ページ単位でのコード追加や制御は不可です。
2. フォーム機能の実装ができない
お問い合わせフォームや申し込みフォームなどの動的フォーム機能はないので、外部サービスとの連携やカスタム開発が必要です。
3. 多言語対応機能がない
言語切り替えや、翻訳に関するネイティブな多言語対応機能は現時点では未実装です。
4. 詳細なSEO最適化には制限がある
metaタグの設定は可能ですが、ページごとの詳細なSEO調整には制限があります。
5. 高度なCMS連携やフィルター機能は未対応
CMS機能は現在ベータ版であり、コンテンツフィルタリング、動的リスト表示、条件分岐といった高度な操作は未対応です。
6. ログイン／会員機能などの動的機能は非対応
ユーザー認証や会員専用ページなど、バックエンドと連携するようなサイト機能は利用できません。
7. eコマース機能がない
商品カート、決済、在庫管理などのオンラインストア機能は未対応。将来的な追加に期待されますが、現時点では外部サービスが必要です。
8. プラグインやAPI連携が制限されている
Figma本体とは異なり、Figma Sites自体には拡張機能やAPI連携の仕組みはまだ備わっていません。
まとめ
Figma Sitesは、デザインツールとして圧倒的な支持を集めているFigmaの中で、そのままWebサイトを公開できる新時代のノーコード機能です。
デザインから公開、ホスティング、カスタムコードの追加、さらにはCMS機能（ベータ）まで備えており、特にFigmaユーザーにとっては非常にスムーズなWeb制作が可能になります。
一方で、高度なCMS構築や会員機能、eコマース、多言語対応など、複雑なサイトにはまだ向かない部分もあります。そのため、プロジェクトの目的や要件によって、WebflowやSTUDIOなどの他ツールと使い分けるのが現実的です。
とはいえ、Figmaの中だけでWebサイトが作れてしまうという事実は非常に革命的で、今後のアップデートによってより強力なツールになることが期待されます。
まずはベータ版を触ってみて、どこまでできるかを体感してみるのがおすすめです。
WebflowやSTUDIOを学ぶなら
Figma Sitesは革新的な機能ですが、まだ発展途上の部分も多く、プロフェッショナルなWebサイト制作には、機能性の優れた他のノーコードツールの活用が欠かせません。
弊社が運営するスーパーサイトアカデミーでは、Figmaユーザーにも親和性の高い「Webflow」や「STUDIO」の使い方を基礎から体系的に学べるオンライン動画教材を提供しています。
- デザインから公開までの流れをしっかり理解したい
- サイトの内製化を進めたい
- クライアントワークにも対応できるスキルを身につけたい
という方に最適な内容となっています。
まずは無料の入門講座から体験してみてください！
.svg)
