MCPでClaudeとWebflowを接続するには?

簡単に言うと:Claudeは、公式のWebflow MCPサーバーを通じてWebflowに接続します。これにより、Claude DesktopまたはClaude Codeの中から、サイトのCMS、Designer API、データレイヤーに直接アクセスできます。Webflowのインターフェースを開かずに、コンテンツの更新、CMSコレクションの管理、ページ構造の編集が可能です。

Claudeが文章を書けることは、すでにご存じでしょう。多くのB2B SaaSチームがまだ気づいていないのは、Claudeが公開までできるということです。Webflow MCPサーバーを接続すれば、ツール間でコンテンツをコピー&ペーストする必要はなくなり、AIワークフローから公開中のWebflowサイトへ直接更新を反映できます。

このチュートリアルでは、セットアップの手順、できること、そして大規模にコンテンツを運用するSaaSチームにとって実際にどこで効率が上がるのかを、順を追って説明します。

Webflow MCPサーバーとは?

Webflow MCPサーバーは、Anthropicが策定したModel Context Protocol(MCP)をベースにした、Webflow公式の連携機能です。MCPは、AIモデルを外部のツールやデータソースに接続するためのオープンスタンダードです。WebflowのMCP実装により、Claudeはサイトのcmsコレクション、Designer API、コンテンツレイヤーに直接アクセスできます。

わかりやすく言えば、Claudeは「文章をコピーして使う執筆アシスタント」から、Webflowサイトの構造を読み取り、CMSアイテムを作成・更新し、会話を離れずに変更を反映できるエージェントへと変わります。

この連携はWebflowが保守しており、Claude Desktop、Claude Code、Cursor、Windsurfで利用できます。

ClaudeとWebflow MCPでできること

セットアップを始める前に、この連携が実際に何をサポートしているかを把握しておくと役立ちます。Webflow MCPサーバーは、Claudeがワークスペース内で実行できるアクションを、次のとおり定めています。

CMS操作:

新しいCMSコレクションアイテムの作成
既存アイテムのフィールド(テキスト、リッチテキスト、画像、参照)の更新
アイテムの公開と非公開
コレクションのスキーマを照会してフィールド構造を把握

サイトとページの管理:

ページ構造とメタデータの読み取り
ページへの構造的な更新の適用
サイト設定とスタイルをシステムレベルで管理

現時点では対応していないこと:

ビジュアルなドラッグ&ドロップのデザイン(Webflow Designerで行います)
複雑なマルチ環境構成におけるWebflowの公開キューの代替
手動の入力なしでのカスタムコードコンポーネントの処理

B2B SaaSチームにとって最も価値の高い用途は、CMSコンテンツの反映、ランディングページのコピー更新、コレクションアイテム全体での一括フィールド編集です。こうした繰り返しの公開作業を大規模に担っているチームでは、より広いB2B SaaSのマーケティングオペレーションの業務と重なることも少なくありません。

ClaudeをMCP経由でWebflowに接続する方法

ステップ1:Webflow APIトークンを生成する

Webflowアカウントにログインし、接続したいサイトを開きます
Site Settings > Integrations > API Accessに移動します
CMSの読み取り/書き込み権限を持つ新しいAPIトークンを生成します
トークンをコピーして、安全な場所に保管してください。この画面を閉じると、再度表示することはできません。

複数のWebflowサイトを扱う場合は、サイトごとに別々のトークンを生成してください。ワークスペースをまたいでトークンを混用すると権限エラーが発生し、原因の特定が面倒になります。

ステップ2:Webflow MCPサーバーをインストールする

Webflow MCPサーバーは、お使いのマシン上でNode.jsのプロセスとして動作します。この手順の前に、Node.jsをインストールしておく必要があります。

ターミナルを開き、次のコマンドを実行します。

npx @webflow/mcp-server

あるいは、グローバルにインストールすることもできます。

npm install -g @webflow/mcp-server

このサーバーはオープンソースで、Webflow公式のGitHubリポジトリで保守されています。リポジトリは次のとおりです。 webflow/mcp-server.

ステップ3:MCPサーバーを使うようClaude Desktopを設定する

Claude Desktopの設定ファイルを開きます。macOSでは、次の場所にあります。

~/Library/Application Support/Claude/claude_desktop_config.json

設定にWebflow MCPサーバーを追加します。

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["@webflow/mcp-server"],
      "env": {
        "WEBFLOW_API_TOKEN": "your-token-here"
      }
    }
  }
}

置き換え your-token-here ステップ1で生成したAPIトークンに置き換えてください。

ファイルを保存し、Claude Desktopを再起動します。Claudeのインターフェースにハンマーのアイコンが表示されれば、MCPツールが有効になっています。

ステップ4:接続を確認する

Claudeで新しい会話を開始し、次のように尋ねます。

「私のWebflowサイトで利用できるCMSコレクションを一覧表示してください。」

ClaudeがWebflow MCPサーバーを呼び出し、コレクション名とその構造を返します。エラーが返された場合は、APIトークンの権限が正しいか、設定ファイルのJSONが有効かを確認してください(カンマが1つ抜けているだけで、ファイル全体が動作しなくなります)。

Claudeでcmsコンテンツの更新を反映する方法

接続が完了すると、コンテンツ操作は単純な流れになります。やりたいことを伝え、Claudeにスキーマを照会させ、書き込みアクションを承認します。

既存のCMSアイテムを更新する

まず、Claudeにアイテムの現在の状態を読み取らせます。

「Blog Postsコレクションから、'How to reduce churn in SaaS'というタイトルのブログ記事を探して、現在のメタディスクリプションと本文を表示してください。」

Claudeがアイテムを取得し、各フィールドを表示します。続いて、更新の指示を出します。

「メタディスクリプションを次の内容に更新してください:'Learn the five retention tactics used by SaaS teams with under 5% annual churn. Practical, no fluff.' その後、変更を公開してください。」

Claudeが更新内容をWebflowに書き込み、アイテムのステータスを確認します。

新しいCMSアイテムを作成する

ここからは、ワークフローが一気に速くなります。Claudeでコンテンツのブリーフを書き、同じ会話の中でコンテンツを生成し、そのまま直接反映します。

「Blog Postsコレクションに新しいアイテムを作成してください。タイトル:'SaaS Pricing Page Teardown: What High-Converting Pages Have in Common'。スラッグ:saas-pricing-page-teardown。ステータスはDraftに設定してください。本文フィールドには次の内容を使用してください:[コンテンツを貼り付け]」

Claudeが入力内容を適切なコレクションのフィールドに割り当て、アイテムを作成します。その後、Webflowを開いて確認・公開することも、ワークフローが許す場合はClaudeに直接公開させることもできます。

コレクション全体でのフィールド一括更新

多くのチームが可能だと気づいていない使い方です。複数のCMSアイテムにまたがるフィールドを更新したい場合、たとえばSEOの見直しの一環としてタイトルタグを改善したり、繰り返し発生しているタクソノミーの誤りを修正したりする場合も、1回の会話で完了します。

「Case Studiesコレクションで、'Industry'フィールドが空のアイテムをすべて探し、'B2B SaaS'に設定してください。」

Claudeがコレクションを照会し、該当するアイテムを特定して、更新を適用します。Webflowで手作業でクリックすれば20分かかる作業が、この方法なら2分もかかりません。

実践的なワークフロー:ランディングページの更新を公開する

以下は、B2B SaaSのマーケティングチームが、Webflow MCPを接続したClaudeで実際に行うワークフローの例です。

シナリオ:ホームページのヒーローコピーを更新したので、Designerを開かずにその変更をWebflowに反映したい。

現在の状態を照会する:「ホームページのCMSアイテムにある、現在のヒーロー見出しとサブ見出しを表示してください。」
確認して承認する:Claudeが現在のコピーを返します。更新が必要なことを確認します。
更新内容を書き込む:「ヒーロー見出しを'Stop guessing. Start converting.'に更新してください。サブ見出しを'SaaS Hackers helps B2B SaaS teams build the systems that turn signups into revenue.'に更新してください。変更を公開してください。」
完了を確認する:Claudeが、フィールドが更新され、アイテムが公開されたことを確認します。

所要時間は合計で3分未満です。Designerの操作も、コピー&ペーストも、タブの切り替えも不要です。

B2B SaaSチームの活用シーン

すべてのコンテンツ更新をClaudeとMCPで行う必要はありません。SaaSチームにとって、このセットアップの効果が特にはっきり表れる場面は次のとおりです。

価値の高い用途:

キャンペーン開始前に、複数のランディングページのSEOメタデータを更新する
Claudeの中で下書きと編集を行ったブログコンテンツを公開する
SEO監査を実施し、同じセッション内で修正(メタディスクリプション、タイトルタグ)を適用する
市場ごとにローカライズしたCMSコンテンツのバージョンを作成する
リリース後に、製品機能の説明を一括更新する

価値が比較的低い用途(Webflowで直接作業するのがおすすめ):

単発のビジュアルデザイン変更
Designerが必要なレイアウトの再構成
公開前に関係者の承認が必要な変更

メタデータの更新、コンテンツの展開、キャンペーンの開始を頻繁に行うチームでは、このワークフローをB2B SaaSのコンテンツマーケティングエージェンシーや、SEOに特化したパートナーの支援と組み合わせるケースもあるでしょう。

よくあるエラーと対処法

Claude Desktopで「No tools available」と表示される
設定ファイルに構文エラーがあるか、MCPサーバーの起動に失敗しています。jsonlint.comでJSONを検証し、Node.jsが正しくインストールされているか確認してください。

ClaudeがWebflowに書き込もうとすると「Unauthorised」と表示される
APIトークンに書き込み権限がないか、別のサイト用に生成されたトークンです。CMSの全権限を付与して再生成し、設定ファイルを更新してください。

Claudeがコレクションは読み取れるのに、特定のアイテムが見つからない
Webflow APIでは、コレクションアイテム名は大文字と小文字が区別されます。まずClaudeにコレクション内の全アイテムを一覧表示させ、返ってきた名前をそのまま指定してください。

Webflowには変更が反映されているが、サイトには公開されていない
アイテムは更新されたものの、公開されていません。指示に「アイテムを公開してください」と加えるか、Webflowの公開キューを手動で確認してください。

よくある質問

Claude Webflow MCPとは何ですか?どのように動作しますか?
Claude Webflow MCPの連携は、Anthropicの Model Context Protocol を使って、ClaudeをWebflowサイトに接続する仕組みです。ClaudeはWebflow MCPサーバーを通じて、会話の中から直接、CMSコレクション、ページのメタデータ、サイト設定の読み取りと書き込みを行います。認証にはWebflow APIトークンを使用し、Claudeがユーザーに代わってWebflowのAPIを呼び出します。

Webflow MCPサーバーを使うには、コーディングの知識が必要ですか?
JSON設定ファイルの編集と、ターミナルでのコマンド1回の実行ができれば問題ありません。それ以降のやり取りはすべて会話形式です。コンテンツの更新にコードを書く必要はありません。やりたいことを普通の言葉で伝えれば、ClaudeがAPI呼び出しを行います。

Webflow MCPサーバーは、公開中の本番サイトで使っても安全ですか?
はい。ただし1点だけ注意してください。変更を書き込む前に、必ずClaudeに該当アイテムの現在の状態を表示してもらい、公開を依頼する前に更新内容を確認してください。MCPサーバーはライブのWebflowワークスペースに直接書き込むため、Webflow側でステージング環境を用意しない限り、緩衝材になるものはありません。データベースへの直接アクセスと同じように、慎重に扱い、内容を確認してから反映してください。

Webflow MCPでClaudeを使う場合と、Designerに組み込まれたWebflowのAI機能とでは、何が違いますか?
WebflowのネイティブなAI機能はDesignerの画面内で動作し、ビジュアルやレイアウトの支援が中心です。一方、Claude Webflow MCPの連携はDesignerの外で動作し、CMS操作、コンテンツの公開、大量データの管理が中心です。ワークフローの担当範囲が異なります。大量の構造化データを扱うコンテンツチームには、MCPのほうが向いています。

Webflow MCPサーバーは、Claude Desktopだけでなく、Claude CodeやCursorでも使えますか?
はい。Webflow MCPサーバーは、Claude Desktop、Claude Code、Cursor、Windsurfで使えます。設定方法はツールごとに少し異なりますが、APIトークンとサーバーのセットアップは共通です。具体的な設定形式については、各ツールのMCPドキュメントをご確認ください。

MCP経由でClaudeをWebflowに接続するには?