こんにちは、Webflow専門家のマサトです。
今回はWebflow業界で注目が高まっている新技術 Webflow MCP について解説します。
先に結論です。Webflow MCP（Model Context Protocol）は、AIとWebflowをつなぐ接続規格です。2026年時点で実務に使えるのは、SEOタグ・CMSの一括更新が中心。完全自動化ツールではなく、人の確認を挟みながら使う段階の技術です。導入はNode.js環境があれば3ステップ・10分程度で終わります。
僕は日々WebflowとAIを組み合わせた制作実験を行っています。その中で一番これから変わるなと感じたのがMCP（Model Context Protocol）です。ただ、すべてがスムーズに動くわけではありません。まだ技術的な制約も多く、設定や検証の手間もあります。それでもAIがWebflowの内部構造を理解し始めているという流れは感じます。
この記事の要点
- Webflow MCPとは
- Webflow MCPとは、AI（Claude・Cursorなど）がWebflowのCMSやページ構成を理解して操作するための接続規格（Model Context Protocol）です。導入は公式コネクタかサーバーURLの登録とOAuth認可で行います（2026年11月時点）。
目次
MCPとは？AIとWebflowをつなぐ「通訳レイヤー」
MCP（Model Context Protocol）とは、AIと外部ツールを安全かつ構造的に接続するための共通規格です。Webflow MCPはそのWebflow版で、AIがCMSやページ構成などWebflowサイトの文脈を理解したうえで操作できるようになります。
従来のAPI連携との違いは「文脈」です。これまでのAI連携は単発の命令しか送れませんでした。MCPでは、AIがサイトの構造を読み取ってから操作します。たとえばCMS内の記事タイトルやタグ構成をAIが読み取り、適切に編集を行う、という使い方です。
参考：Webflow公式開発者ドキュメント
developers.webflow.com
（出典: Webflow Developer Docs – MCP Overview）
Webflow MCPでできること
実際に触ってみて「現場で役立ちそう」と感じた機能は次の3つです（初出2025年10月・2026年8月更新）。
SEOタグ・CMSの一括更新
メタ情報やタグ付けのような単純作業をAIに指示して一括変更できます。まだ完全自動ではないものの、人の確認を挟みながら作業を加速できるのは大きな強みです。特に画像のAltタグ自動生成は圧倒的に楽になります。
デザイン補助（現時点では限定的）
Designer API対応により、AIが要素を追加・修正できるようになりました。ただし現段階では単純なスタイル変更や要素追加に限定されるため、複雑なレイアウト操作はまだ人の判断が必要です。
実際、Webflow AIで作成したセクションの方が現時点では使い勝手が良いと感じます。まだAI機能を触っていない方は、新プロジェクトで一度お試しください。
2026年11月追記: 今の公式の一覧では、レイアウト・コンポーネント・GSAPのインタラクションも操作の対象です。僕の実測ではなく、公式の説明です。
コンテンツ移行の下準備
Webflow公式フォーラムでは、MCPを活用してWordPressから記事構造を移行した実験報告がありました。実運用レベルではまだ少ないものの、移行前のデータ整理・マッピングには活用できます。
なぜ今MCPが注目されるのか
これまでのAIツールは「生成」が中心でした。MCPの登場によって、AIがWebサイトを理解して操作する段階に入りつつあります。とはいえ、今の段階では自動で完結するものではありません。AIは「人の判断を補うアシスタント」として活用するのが現実的です。
僕自身、AIがWebflow内で要素を修正しているのを見たとき、これは制作スタイルが変わる前触れだと感じました。同時に、まだチューニングが必要だなとも思いました。Web春では、この中間的な立ち位置を「AIパートナー制作」と呼んでいます。
Webflow MCPの導入手順（3ステップ）
Webflow MCPの導入は意外とシンプルです。
- Node.js環境を準備（22.3.0以上）
- GitHubからMCPサーバーを取得
- AIクライアント（Cursor / Claudeなど）と接続
設定自体は10分程度で終わります。ただしOAuth認証まわりの設定はやや複雑なので、公式ドキュメントを見ながら進めることをおすすめします。
Cursorはワンクリック導入に対応済みです。
developers.webflow.com/data/docs/ai-tools
2026年11月追記: Claudeは公式コネクタでも繋げます。手順にNode.jsの準備は出てきません（公式ヘルプ・2026年8月11日更新）。
2026年11月追記: 「+」からConnectors、Add connectorを開き、Webflowを検索してConnect。サイトを選んでAuthorize App。
2026年11月追記: 1回の認可で使えるWorkspaceは1つです。別のWorkspaceを使うときは、コネクタを外して入れ直してください。
2026年11月追記: 8月24日からCodexとChatGPTでも操作できます。ChatGPT版は発表時点でAIクレジットを消費しません。将来は変わる可能性があるとのこと。
2026年11月追記: Geminiの接続は米国在住・英語・個人のGoogleアカウント限定で、日本は対象外です（公式ヘルプ・2026年11月3日更新）。
【実測】Web春でMCP×サイト更新を試した結果
僕が最初に試したのは、記事タイトルとメタ情報の最適化をAIに任せることでした。MCPを使えばWebflowのCMSに直接アクセスできるため、タイトルの書き換え・説明文更新・タグ整理をAIに提案・実行させる、という流れ自体は組めます。
結論から書くと、僕は実際に何度かこの方法でサイト更新（サイト全体のメタタグ設定など）を試しましたが、実用できるものではありませんでした。WebflowをMCPで連携するだけで大量の情報をすべて読み込む必要があり、それだけでほとんどのコンテキストを消費してしまうからです。「AI提案→自動更新→公開時に人がチェック」という三段階の型で回せないかを試している段階で、実案件に本格導入して成果を計測できたところまでは進んでいません。完全自動で進めると意図と異なるキーワード選定が起きるため、人のチェックは外せないというのが現時点の手応えです。この経験もあって、当社は現在「Webflowの中をAIで操作する」方向ではなく、サイト全体をAIで作る方向へ移行しました。パフォーマンスも柔軟性も、そちらの方が高いためです。
2026年11月追記: 上記の「実用できるものではありませんでした」は、2026年7月のMCP 2.0より前に試した当時の話です。2.0以降の版は、この実測に入っていません。
なお、当社はAI×Web制作が主戦場で、MCPサーバーの構築やAPI連携の開発も請け負っています。開発サービスの詳細はAPI・MCP開発の解説記事にまとめています。
【2026年7月】Webflow MCP 2.0で何が変わったか
この記事の初出後、2026年7月21日にWebflow MCP 2.0がリリースされました。主な変更点は次のとおりです（全Webflowユーザーに追加費用なしで提供されます）。
- ブリッジアプリが原則不要に（ブラウザタブを開き続ける必要がなくなった）
- サイトのデザインシステム（タイポグラフィ・カラー・スペーシング・コンポーネント）を構造化データとしてAIが参照できるように
- ページブランチでの作業・ロール別権限・全操作のアクティビティログというガバナンス機能
- フォーム送信の読み取りと更新、アセット管理・画像圧縮、ページ/サイト単位のhead・footerコードの読み書き
- トラフィックについて自然言語で質問できるアナリティクス連携
出典: Webflow公式ブログ（MCP 2.0）・Developer Changelog（2026-07-21）
僕が実測でつまずいたトークン消費の問題も、2.0では状況が変わっている可能性があります（2026年11月に実案件で修正から本番公開まで通しました。トークン消費は測り直していません）。もうひとつ大きな変化として、基本的なSEO対策・構造化データ・altタグの生成はWebflowの純正機能として組み込まれてきています。わざわざ外部からAIをつないで行う必要のある作業は、以前より確実に減りました。
2026年11月追記: 9月21日のv2.1で、GSAP版のインタラクションとWebflow Cloudも扱えるようになりました。CMSの絞り込みと並べ替えも増えています。
2026年11月追記: ただしClassic InteractionsはAIから見えません。Classicのサイトでは一覧が空になるので、Designerで手で直してください。
2026年11月追記: 10月15日のv2.2で、AnalyzeとOptimizeとAEOのデータをAIが読めるようになりました。各機能を使えるサイトが対象です。
2026年11月追記: 10月21日から、MCPで接続したAIの作業位置がキャンバスに見えます（agent presence）。全ユーザーで追加費用はありません。
導入時の注意点
- ステージングで必ず検証（誤操作防止）
- APIレート制限に注意（短時間の大量リクエストで失敗の可能性）
- 権限設定を慎重に（AIの操作範囲をCMS単位で限定）
MCPは便利な反面、扱いを誤るとリスクも大きいツールです。安全に運用できる体制を整えることが最初のステップです。
現実的な期待とこれから
Webflow MCPはまだ「完全自動化ツール」ではありません。それでも、CMS運用の単純作業をAIに渡せるだけでも試す価値はあります。現時点ではAIが手伝うレベル。数年後にはAIが共に作るレベルに進む可能性があります。過剰に持ち上げる必要はありません。
WebflowとAIを組み合わせた制作や、MCP・APIを使った開発の相談はお問い合わせから受け付けています。
制作実績
JTB Americas
北米拠点サイトを全面刷新。運用チームが自ら更新できる体制まで構築
日本テレビ主催
FigmaデザインをWebflowへ高精度コンバート。表示速度とレスポンシブを最適化
株式会社PonTech Lab
AI（Claude Code）でNext.js×Cloudflare構築。制作過程の記録も公開
よくある質問
Webflow MCPとは何ですか？
AIとWebflowを安全かつ構造的に接続するための仕組み（Model Context Protocol）です。AIがCMSやページ構成などWebflowサイトの文脈を理解したうえで操作できるようになります。
Webflow MCPはどうやって導入しますか？
AIクライアントに公式のコネクタやプラグインを追加するか、サーバーのURL（https://mcp.webflow.com/mcp）を登録して、OAuthでサイトを認可します（2026年11月5日に確認）。
Webflow MCPで何ができますか？
SEOタグやCMSの一括更新、単純なスタイル変更や要素追加などのデザイン補助、コンテンツ移行前のデータ整理・マッピングに活用できます。特に画像のAltタグ自動生成は圧倒的に楽になります。
Webflow MCPで完全自動のサイト運用はできますか？
2026年時点ではできません。完全自動で進めると意図と異なるキーワード選定などが起こるため、人の確認を挟む前提の技術です。当社でも「AI提案→自動更新→公開時チェック」の三段階運用を検証中の段階です。
Webflow MCPの導入時の注意点はありますか？
ステージングで必ず検証すること、短時間の大量リクエストによるAPIレート制限に注意すること、AIの操作範囲をCMS単位で限定するなど権限設定を慎重に行うことの3点です。
MCPでのWebflowサイト更新は実用的ですか？
当社がMCP 1.0で試した範囲では、連携するだけで大量の情報を読み込みコンテキストの大半を消費してしまい、実用には届きませんでした。2026年11月には実案件で修正から本番公開まで通しました（コンテキストの消費は測り直していません）。一方で、基本的なSEO・構造化データ・altタグ生成はWebflowの純正機能でも揃ってきており、外部AIで行う必然性は下がっています。
