Figma Sitesは、あなたのFigmaデザインをライブで公開されたウェブサイトに変換します — 別のビルダーも、コードエクスポートも、開発者への引き渡しも必要ありません。Figmaでデザインし、ウェブに公開する。これはFigmaの「すべてを一つのツールで」という哲学の論理的な拡張です:Figmaでデザインできるなら、なぜFigmaから配信できないのでしょうか?
現実は約束よりも微妙です。Figma Sitesは特定の用途では優秀に機能し、他の用途では不十分です。構築前に境界を理解することで、フラストレーションを避け、特定のプロジェクトに適切なツールを選択できます。
重要なポイント
Figma Sitesはランディングページ、ポートフォリオ、マーケティングページに優れています — 翻訳ロスゼロでFigmaデザインと完全に一致する必要がある静的または半静的コンテンツです。ウェブアプリ、Eコマース、コンテンツ重視のブログ、またはCMS、ユーザー認証、複雑なインタラクションを必要とするものには対応していません。Webflowの代替ではなく、ピクセル完璧なデザイン→ウェブパイプラインと考えてください。
Figma Sitesが得意なこと
| 用途 | なぜ機能するのか | 従来と比べた時間短縮 |
|---|---|---|
| ランディングページ | デザインがウェブサイト — 翻訳ロスゼロ | 数日 → 数時間 |
| デザイナーポートフォリオ | 完全なピクセル制御、テーマの制約なし | 大幅(テンプレートとの格闘不要) |
| マーケティング/キャンペーンページ | 高速ローンチ、洗練された結果、チーム協力 | デザイン→開発→レビューサイクルを排除 |
| イベントページ | 迅速なセットアップ、簡単な更新、ビジュアル重視 | 更新:数時間 → 数分 |
| 製品発表ページ | ブランドに完全一致、高速反復 | デザインから同日公開 |
共通点:動的機能よりも視覚的忠実性が重要な静的または半静的コンテンツです。これらの用途では、Figma Sitesはデザインから開発までのパイプライン全体を排除します。デザイナーが公開者です。引き渡しなし、解釈なし、「モックアップと見た目が違う」という会話もありません。
Figma Sitesができないこと(現在)
| 必要な機能 | なぜSitesでは不十分か | 代わりに使用 |
|---|---|---|
| 動的コンテンツ(ブログ、カタログ) | CMSやデータベース統合なし | Webflow、WordPress、Next.js |
| Eコマース | カート、チェックアウト、決済統合なし | Shopify、Webflow + Stripe |
| ユーザー認証 | ログイン/サインアップ機能なし | 任意のウェブフレームワーク |
| 複雑なインタラクション | JavaScriptロジックなし、条件レンダリングなし | React、Next.js、Framer |
| SEO重視サイト | メタタグ制御限定、SSRなし、サイトマップなし | Next.js、WordPress |
| バックエンド付きフォーム | フォーム処理やデータ保存なし | Webflow、カスタムビルド |
本格的なウェブサイトには、専用ビルダー(Webflow、Framer、Next.js)を使うか、MCPサーバー経由でClaude Codeを使ってFigmaデザインから構築する方が良いでしょう。Figma Sitesは「簡単なページが必要」と「完全なウェブサイトが必要」の間のギャップを埋めます — その特定のギャップにおいては、デザインからコードへの翻訳を完全に排除するため、利用可能な最高のツールです。
Figma Sites vs Webflow vs Framer: どのウェブサイトビルダーを使うべきか?
| 機能 | Figma Sites | Webflow | Framer |
|---|---|---|---|
| デザインワークフロー | Figmaでデザイン → 公開 | Webflowで再デザイン | Figmaからインポート + 編集 |
| CMS | なし | あり(内蔵) | あり(内蔵) |
| カスタムコード | なし | あり | あり |
| アニメーション | 基本的 | 高度 | 高度 |
| SEO | 基本的 | 高度 | 良い |
| 最適な用途 | Figmaからのランディングページ | CMS付きマーケティングサイト | ポートフォリオ + マーケティングサイト |
| 価格 | Figmaに含まれる | 月額$14-39 | 月額$5-30 |
よくある質問
Figma SitesはFigmaサブスクリプションに含まれていますか?
基本的な公開機能は有料プランに含まれています。カスタムドメインや高度な公開機能には追加費用がかかる場合があります。Sites固有のプランについてはFigmaの現在の価格を確認してください — この機能の発展に伴い変化しています。
Figma Sitesで独自ドメインを使用できますか?
はい — Figma Sitesはカスタムドメイン接続をサポートしています。デフォルトのFigmaホスト型URLではなく、yourdomain.comで公開できるため、プロフェッショナルな用途に適しています。
Figma SitesのSEOは通常のウェブサイトと比べてどうですか?
限定的です。Figma Sitesは基本的なメタタグサポート付きのクライアントレンダリングページを生成します。SEOに依存するコンテンツサイト(ブログ、ドキュメント、製品ページ)では、サーバーサイドレンダリング付きのフレームワーク(Next.js、Astro)や専用ビルダー(Webflow)の方が検索パフォーマンスが優れています。SEOがそれほど重要でないランディングページ(有料トラフィックの着地点、イベントページ)では、Figma Sitesで十分です。
ポートフォリオにFigma Sitesを使うべきですか?
コーディング不要で完全な視覚制御が欲しいデザイナーなら:はい。あなたのFigmaデザインスキルが直接ウェブサイトの品質に変換されます — テンプレートの制約なし、妥協なし。主な制限はブログ/CMSがないことで、動的に更新される文章のケーススタディを簡単に追加できません。ポートフォリオが静的コンテンツでビジュアル重視なら、Figma Sitesは優秀です。
Figma SitesにCMSと動的コンテンツは追加されますか?
可能性は高いです — FigmaはSitesの機能拡張予定を示唆しています。しかしタイムラインは不明です。まだ存在しない機能に基づいてFigma Sitesを選ばないでください。現在できることで評価し、必要性が現在の機能を超えたときにツールを変更してください。
開示:この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。