【破壊力】Figma Make / Sites が Web 制作を再編｜デザイナー72%が生成AI日常化する時代の制作会社スタンス

公開日
2026.08.26

Figma は2025年の Config 2025 で発表した AI 機能「Figma Make」と「Figma Sites」で、デザインツールからWeb 開発プラットフォームへの進化を本格化させている。プロンプトから React/Tailwind コードを生成する Make、Figma ファイルから直接 Web サイトを公開できる Sites。Webflow / Framer / Wix と真正面から競合する動きで、Web 制作の分業構造そのものが揺らいでいる。State of the Designer 2026 では72%のデザイナーが日常的に生成AIを使用している時代の Web 制作会社としてどう向き合うか整理する。

Figma Make と Figma Sites とは？

Figma Make：自然言語プロンプトからレイアウト・コンテンツ・スタイルを生成する AI 機能。出力は React + Tailwind コード。デザイナーとエンジニアの橋渡し役として設計。

Figma Sites：Figma ファイルから直接 Web サイトを公開できる機能。Webflow・Framer・Wix 等の外部ツールを介さず、Figma 内で設計 → プロトタイプ → 公開まで完結。

主要機能早見表

Web 制作業界への影響

Figma Make / Sites の登場で、Web 制作業界は3つの層で変化が起きている。

1. 個人・小規模事業者の内製化加速：Figma だけで公開までいけるため、5-30 万円の小規模案件が”自作”される
2. デザイナー職の拡大：デザイナーが実装まで担当できる → エンジニア不足の中で「デザイン + 実装」の兼務スキルが評価
3. 制作会社の高付加価値シフト：単純な LP 制作から、戦略・SEO/GEO・複雑実装への軸足移動が必然に

制作会社レンズ｜どう向き合うべきか

スタンス1: Figma Sites 化しやすい案件は「クライアント内製支援」に転換

単純な LP・コーポレートサイトは Figma Sites で作れる時代。「うちで作ります」より「クライアント側で作れるようにコーチング」する方が付加価値高い場合が増える。cielo のような制作会社は研修・ワークフロー設計・レビューの役割にシフト可能。

スタンス2: Figma Make の出力を実装スタート地点にする

クライアントとの合意ワイヤー確定 → Figma Make で初期実装コード生成 → エンジニアがブラッシュアップ、というフローで実装工数を30-50%短縮できる。既存案件のフローに組み込む。

スタンス3: 「Figma Sites では作れない部分」を明確化して営業

複雑な CMS 連携・EC・独自 API・高度な SEO/GEO 対応は Figma Sites で作れない。「Figma Sites では対応できない範囲」を営業提案の切り口にする。

制作現場での活用パターン

パターン1: 初期プロトタイピング

クライアントとの初回打ち合わせで Figma Make を実演 → その場でプロトタイプ生成。クライアントの意思決定速度が2-3倍に。

パターン2: 提案書のワイヤー資料作成

提案書の参考ワイヤーを Figma Make で高速生成。テキストプロンプトで方向性を素早く探索し、複数案を並列提示できる。

パターン3: 社内デザイナー教育

デザイナーが Figma Make の出力コードを読む習慣を作る → デザインとコードの距離を縮める。将来の実装リテラシー向上に。

State of the Designer 2026 の重要データ

Figma の年次レポートによると：

• デザイナーの72%が生成AIを日常的に使用
• 91%が「AIが成果物の品質を向上させた」と回答
• デザインツールと開発ツールの境界が急速に融解中

この数字は「AI ネイティブでないデザイナーは既に少数派」という業界実態を示す。

FAQ

Q. Figma Sites で作った案件のSEO 対応は？

基本的な OGP・meta description・sitemap 生成は Figma Sites 側で対応。ただし高度な構造化データ・カスタム JSON-LD は Figma Sites の制約内で対応が難しい場合あり。

Q. 既存の CMS 連携案件は？

WordPress・Contentful・microCMS 等の CMS 連携が必要な案件は Figma Sites の範囲外。制作会社の主戦場はここに移行する。

Q. Figma Make のコードはそのまま本番投入できる？

デモ・プロトタイプは可能。本番投入にはエンジニアによるレビュー・パフォーマンス最適化・セキュリティ確認が必須。

Q. Webflow / Framer との棲み分けは？

デザインから始めるなら Figma Sites、Web構築特化なら Webflow、アニメーション重視なら Framer。ワークフローの起点で選ぶのが自然。

参考メディア・出典一覧

• Figma 公式｜Free AI Web Design Generator
• Figma 公式｜Free AI Website Generator
• Figma｜Top Web Design Trends for 2026
• syncAD｜Web制作のUI/UXに人気の生成AIツール完全ガイド【2026年最新版】
• KAWAI｜【2026年版】AI Webデザイン最新活用 完全解説

まとめ

Figma Make / Sites は、Web 制作の分業構造を再編する破壊力を持つ。制作会社としては、①クライアント内製支援へのシフト ②Figma Make 出力を実装スタート地点化 ③Figma Sites の限界を営業切り口にの3スタンスで、この波を追い風にできる。単純制作の時代の終わりと、戦略・高度実装への高付加価値シフトが2026年のテーマ。

この記事を書いた人

WEBディレクター

佐藤 広樹 Sato

仕事を通じて出会った方から「人から学ぶ」ことを大切に、AIやWEBから得られない知見を吸収するよう意識しています。

スタッフ紹介はこちら →