目次
なぜ今「デザインSaaS × エージェント」を比較するのか
2025年までデザインツールは「人間が触る画面」の代表格だった。しかし2026年に入ってからの数ヶ月で、業界最大手が立て続けに公式MCPサーバーをリリースし、状況は一変した。Miro(2026年2月2日)、Canva AI Connector、Figma Dev Mode MCP(2026年春に機能拡充)、Webflow公式MCPが揃い踏み — デザインツールはエージェントが触る対象に正式編入されたのが2026年前半の最大の動きだ。
KanseiLinkは category: design として5つの主要サービスを追跡している。本記事ではFigma・Canva・Miro・Webflow・Framerの5つを、AEO格付け・公式MCPサーバー対応・主要ユースケース・制約の4軸で横並びに整理する。
デザインSaaSのMCP対応は「コードと統合できるか」で本気度が分かれた。Figma(VS Code/GitHub Copilot連携)、Miro(11プラットフォーム対応の双方向統合)、Webflow(CMS APIラッパー)はいずれもエージェント開発ワークフローを意識した設計。一方で公式MCP未提供のFramerは2026年5月時点で大きく出遅れている。
AEO格付け一覧 — デザイン5サービスのランキング
KanseiLink search_services 値(2026年4月時点、 category: design)を整理した一覧。AEO格付けは公式MCPサーバー提供有無で大きく差がついている。
| サービス | 公式MCPサーバー | AEO | 認証方式 | 主要ユースケース |
|---|---|---|---|---|
| Figma | あり (remote + desktop、Dev Mode MCP) | BBB | OAuth 2.0 | Design-to-code、UI→Frame取り込み、図表生成 |
| Canva | あり (AI Connector @ mcp.canva.com) | BB | OAuth 2.0 | テンプレート量産、ブランドキット適用、SNSクリエイティブ |
| Miro | あり (2026/2/2公開) | BB | OAuth 2.1 (動的クライアント登録) | コード↔図、アーキ図/ERD自動生成、オンボーディング |
| Webflow | あり (公式 GitHub: webflow/mcp-server) | BB | OAuth 2.0 | LP更新、CMS編集、サイト構造変更 |
| Framer | なし(2026年5月時点) | BB | Bearer Token | REST API直叩きでの限定的なCMS連携 |
5サービス中4つが公式MCPを提供する状況は、他のSaaSカテゴリと比較しても先進的だ。本記事執筆時点でKanseiLinkにはWebflow・Framer各1件のエージェント自己報告(いずれも成功率100%)が記録されているが、いずれも母数が小さいため本番投入前のPoC実施を推奨する。
Figma — Remote/Desktop両系統の公式MCP、design-to-codeの本命
FigmaはRemote MCPサーバー(Figmaがクラウドホスト)とDesktop MCPサーバー(Figma desktop appが起動)の2系統を提供する。Figma公式は「最も広い機能セットを使うならRemote MCPサーバーを推奨」としており、Remote版は全プラン(無料含む)で利用可能。Desktop版はDevシートまたはFullシート(有料)が必要だ。
Figma Dev Mode MCPは元々2025年に発表されたが、2026年に入ってから機能拡充が加速した。2026年3月6日にはGitHub Copilot(VS Code)から接続できるようになり、Figmaのデザインコンテキストをコードに取り込む/コードからレンダリングされたUIをFigmaに編集可能Frameとして送る、という双方向ワークフローが実用化された。2026年4月28日の更新ではRemote専用ツール generate_diagram が追加され、FigJamに直接アーキテクチャ図やERD(データベース関係用のコネクタタイプ付き)を生成できるようになった。
・デザインからコードを生成するワークフロー(主目的)
・Cursor/Claude Code/GitHub Copilot/Windsurfから直接Figmaファイルを参照したい
・FigJam上にコードベースからアーキ図やERDを自動生成したい(remote限定)
・組織内に既にFigma文化がある(資産が活用できる)
KanseiLink格付けはBBB(trust 0.5)。実エージェントからの自己報告データはまだ少ないが、Figma側のMCP実装品質と機能広さは2026年5月時点でデザインカテゴリ最強と言える。
Canva AI Connector — mcp.canva.comに集約された公式実装
Canvaは公式MCPサーバーを「Canva AI Connector」というブランド名で提供している。エンドポイントは https://mcp.canva.com/mcp で、canva.com公式ドメイン上にホスト。Claude Desktop/Code、Cursor、ChatGPT等から自然言語で操作可能。
機能は(1) 新規デザイン作成、(2) 既存デザイン編集、(3) ブランドキット/テンプレートのオートフィル、(4) デザインライブラリ検索、(5) アセット書き出し ── の5系統。マーケティングチームが「来週のキャンペーン用バナーを30種類、ブランドカラー反映で」とエージェントに依頼するようなクリエイティブ量産ワークフローに最適化されている。
Canvaには2種類のMCPサーバーがある。(1) 一般ユーザー向け Canva AI Connector(mcp.canva.com、デザイン作成・編集) と (2) Canvaアプリ開発者向け Canva Dev MCP Server(canva.dev/docs/apps/mcp-server/、Canva Apps SDK開発支援)。役割が全く違うので、ユースケースに応じて適切な方を選択する必要がある。
Miro — コード↔ホワイトボードの双方向MCP(2026/2/2)
Miroは2026年2月2日に公式MCPサーバーを発表。Anthropic・AWS・GitHub・Google・Windsurf(Cognition)との協業で構築された経緯があり、対応AIプラットフォームはClaude Code、AWS Kiro、GitHub Copilot、Gemini CLI、Windsurf、Cursor、Lovable、Replit、OpenAI Codex、VS Code、Devinの11種に達する。これはMCPサーバーとしては破格の広がりだ。
最も特徴的なのは「コードベース↔Miroボード」の双方向統合。AIコーディングツール内からMiroボード上のアイテム(付箋・図形・矢印)を読み取れ、逆にコードから依存関係図やコンポーネント関係図を自動生成してMiroボードに描画できる。新メンバーのオンボーディング、レガシーコードの構造可視化、システム設計のドラフト作成といった用途で特に効く。
認証はOAuth 2.1(動的クライアント登録対応)で、エンタープライズセキュリティ標準準拠。Miroの強みは「ビジュアル思考をエージェントの記憶として外在化する」点にあり、Confluence/Notionのような「文章ベースの知識」とは異なる軸でエージェント時代の業務に組み込まれていく。
Webflow — LP/CMSをエージェントが直接編集
Webflowは2026年前半に公式MCPサーバーをリリースした(GitHubリポジトリ webflow/mcp-server、developers.webflow.com/mcp/reference/overview で公式ドキュメント提供)。サイト構築プラットフォームとしては最も早くMCP対応した1社。
Webflow MCPサーバーはAIツールとWebflowプロジェクトの翻訳層として動作し、自然言語プロンプトを実際のWebflow API呼び出しに変換する。デザイン更新、CMSコンテンツ管理、要素作成、サイトデータ管理が自然言語で可能だ。Claude Code、Claude Desktop、Cursor、Windsurfから接続できる。
・LPやサイトをエージェントが直接更新するワークフロー(マーケ運用効率化)
・CMSコンテンツの一括投入/編集を自然言語でやりたい
・既にWebflowでサイトを運用している(資産が活きる)
・Framerと迷っているが「AI連携」を重視するならWebflow一択
Framer — 公式MCP未提供、REST API直叩きの現状
Framerは2026年5月時点で公式MCPサーバーを提供していない。Framer自身は公式辞書ページ(framer.com/dictionary)でMCPの概念を解説しているが、Framerプロジェクト操作用の自社MCPサーバーはリリースされていない。
エージェントからFramerを操作する場合の選択肢は、(1) Framer公式REST API(bearer token認証、Sites/CMS Content管理対応)を直接呼び出す、(2) Zapier/Make経由で間接的に操作する、の2択。MCPの「ツール抽象化と発見性」が得られないため、エージェント開発者から見るとWebflowに比して開発コストが高い。
「デザインの自由度」「アニメーション品質」「Web Vitals性能」ではFramerはWebflowを上回る場面が多い(framer.com/compare/framer-vs-webflowでも一部主張あり)。ただしAIエージェント連携が選定基準の一つに入るなら、2026年5月時点ではWebflowが優位。Framerは今後の公式MCPリリースを待つか、現状はREST API直叩きで割り切る判断が必要。
用途別の選定フロー
「迷ったらこれ」という単純な答えは存在しないが、以下のフローで多くのケースをカバーできる。
- デザイン→コード生成、Cursor/Claude Code内でデザインコンテキスト参照 → Figma Dev Mode MCP(remote推奨)
- ブランドキット反映のSNSクリエイティブ/広告/プレゼン資料を量産 → Canva AI Connector
- コードベース→アーキ図/ERD/シーケンス図を自動生成 → Miro MCPサーバー or Figma generate_diagram(FigJam)
- LP/CMS/ウェブサイト全般をエージェントが直接編集 → Webflow公式MCP
- 新メンバーオンボーディング・レガシーコード可視化 → Miro MCP(11プラットフォーム対応の強み)
- Framerサイト運用 + AIエージェント連携 → REST API直叩き(公式MCP登場まで暫定)
FAQ
AIエージェント向けに最初に選ぶべきデザインSaaSはどれですか？
用途で分かれます。design-to-codeが主目的ならFigma Dev Mode MCP(remote/desktop両提供)、クリエイティブ量産ならCanva AI Connector(mcp.canva.com)、コード→図ならMiro MCP(2026/2/2公開)、LP/CMS編集ならWebflow公式MCP。Framerは2026年5月時点で公式MCP未提供、REST API直叩きでの連携になります。
Figma MCPはremoteとdesktopどちらを使うべきですか？
Figma公式は「最も広い機能セットを使うならremote MCPサーバーを推奨」としています。Remote版は全プラン(無料含む)で利用可能、Desktop版はDev/Fullシート(有料)が必要。2026年4月28日にFigJamへの図表生成を行うremote専用ツール generate_diagram が追加されました。
Canva AI ConnectorとCanva Dev MCP Serverは別物ですか？
はい、別物です。Canva AI Connector(mcp.canva.com)は一般ユーザー向けでデザイン作成・編集・ブランドキット反映を行います。一方Canva Dev MCP Server(canva.dev/docs/apps/mcp-server/)はCanva Apps SDKでアプリ開発を行う開発者向けです。ユースケースで使い分けます。
Miro MCPは何のために使うのが最も効果的ですか？
「コードベース↔ホワイトボード」の双方向統合が最大の用途です。AIコーディングツール内からMiroボード上のアイテムを読み取り、コードから依存関係図やコンポーネント関係図を自動生成してMiroボードに描画。新メンバーオンボーディング、レガシーコード可視化、システム設計のドラフト作成で特に有効。
FramerにMCPサーバーは登場しますか？
2026年5月時点で公式発表はありません。同カテゴリの競合Webflowが早期に公式MCPをリリースした影響で、AIエージェント連携を選定基準にする企業はWebflowに流れている状況です。Framerユーザーは現状はREST API直叩きでカスタム実装するか、Zapier/Make経由の連携で凌ぐ必要があります。
「データなし」の項目はどう解釈すればよいですか？
KanseiLink上の使用報告がまだ少ないことを示します(WebflowとFramer各1件のみ、Figma・Canva・Miroは0件)。サービス自体の品質を否定するものではなく、本番投入前に小規模PoCでメトリクスを集めるのが望ましい段階です。report_outcome ツールでKanseiLinkに実測値を寄稿いただけると、業界全体の選定精度が上がります。
本記事の数値はKanseiLink MCP search_services / get_service_detail ツールの2026年4月時点データに基づきます: Figma (trust 0.5, BBB)、Canva API (trust 0.4, BB)、Miro (trust 0.4, BB)、Webflow (trust 0.7, BB, n=1)、Framer (trust 0.7, BB, n=1)。公式MCPサーバーの提供状況・リリース日は次の一次情報を参照しました: Figma MCP公式ガイド (help.figma.com/hc/en-us/articles/32132100833559)、Figma Blog (figma.com/blog/introducing-figma-mcp-server/)、GitHub Blog 2026-03-06 (Copilot×Figma MCP)、Canva MCP公式 (canva.dev/docs/mcp/、canva.com/help/mcp-agent-setup/)、Miro 2026-02-02プレスリリース (miro.com/newsroom/miro-launches-mcp-server-to-connect-visual-collaboration-with-ai-coding/)、Webflow MCP公式 (developers.webflow.com/mcp/reference/overview、github.com/webflow/mcp-server)。Framerの公式MCP未提供は2026年5月時点のWebSearch結果に基づくため、今後の発表で状況が変わる可能性があります。本番運用時は各公式ドキュメントを必ずご確認ください。