ClaudeをWebflowに接続する方法は?

簡潔な回答:Claudeは、Webflow公式のMCP(Model Context Protocol)サーバーを通じてWebflowに接続し、CMS、Designer API、サイトデータに直接アクセスできます。Claude DesktopまたはClaude Code上で、やりたいことを普通の言葉で伝えるだけで、コンテンツの更新、CMSコレクションの管理、ページの公開が行えます。エディターでの手作業は不要です。

B2B SaaSのチームは、料金コピーの更新、新しいブログ記事の投稿、数十ページにわたるCMSデータの更新といった、Webflowでの繰り返し作業に何時間も費やしています。Claude Webflow MCP連携なら、この繰り返しを大幅に短縮できます。

このチュートリアルでは、MCPサーバーを使ってClaudeをWebflowに接続する具体的な手順、設定後に実際にできること、そして実際のコンテンツ運用で連携が役立つ場面を順に説明します。読み終える頃には、この連携が自社のスタックに合うかどうかがわかり、今日から使い始められます。

Claude Webflow MCP連携とは?

Webflow MCPサーバーは、Model Context Protocolを通じてClaudeにWebflowワークスペースへの直接アクセスを与える、公式の純正コネクターです。MCPは、AIモデルが外部のツールやデータソースに、構造化され、権限管理された形で接続するためのオープン標準です。

接続後は、Claudeがサイト構造の読み取り、CMSコレクションの照会、新規コンテンツの作成、既存アイテムの更新、公開の実行まで、対話画面から行えます。変更内容を伝えれば、ClaudeがWebflow APIを通じて実行します。

これはサードパーティによる回避策ではありません。MCPサーバーはWebflow自身が提供・保守しているため、Webflow APIと同期が保たれ、プラットフォームと同水準の信頼性が期待できます。

始める前に必要なもの

コマンドを実行する前に、次のものを用意してください。

Webflowアカウント(公開中のサイトが1つ以上あるもの)
Webflow APIトークン(CMSとDesignerの権限付き。Webflowワークスペースの「Account Settings > API Access」で生成します)
Claude Desktop(MacまたはWindows)またはClaude Codeがインストールされ、起動していること
お使いのマシンにNode.js 18以上がインストールされていること(MCPサーバーの実行に必要です)
Claudeに管理させたいサイトのWebflowサイトID

Claude DesktopではなくClaude Codeを使う場合も、セットアップ手順はほぼ同じです。設定ファイルの場所が少し異なります。詳しくは後述します。

MCPサーバーでClaudeをWebflowに接続する方法

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

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

npx @webflow/mcp-server

これにより、公式のWebflow MCPサーバーパッケージがnpmから取得されます。リポジトリをクローンしたり、別のプロセスを手動で管理したりする必要はありません。 npx コマンドが、Claudeが呼び出すたびに実行を処理します。

ステップ2:Claude Desktopを設定する

Claude Desktopは、JSONファイルからMCPサーバーの設定を読み込みます。まず、そのファイルを開きます。

Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

次の設定ブロックを追加します。追加先は次の箇所です。 mcpServers オブジェクト:

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

置き換え your-webflow-api-token-here を、ステップ1で生成したAPIトークンに置き換えます。ファイルを保存してください。

ステップ3:Claude Codeを設定する(Claude Codeを使う場合)

Claude Codeを使う場合は、CLIでMCPサーバーを追加します。

claude mcp add webflow \
  -e WEBFLOW_TOKEN=your-webflow-api-token-here \
  -- npx -y @webflow/mcp-server

これにより、Claude Codeのすべてのセッションで共通して使えるように、Webflowサーバーが登録されます。

ステップ4:Claudeを再起動して接続を確認する

Claude Desktopを完全に終了してから開き直します。新しい会話で、次のように入力します。

List all the sites in my Webflow workspace

接続できていれば、Claudeがサイト名とIDを返します。エラーが返る場合は、APIトークンを確認し、次のコマンドを実行してNode.jsが正しくインストールされているかを確かめてください。 node --version をターミナルで実行します。

ClaudeはWebflowで実際に何ができる?

接続後は、Webflow MCPサーバーを通じて、決められた範囲の操作をClaudeが実行できます。B2B SaaSのコンテンツチームにとって、実際には次のような作業が対象です。

CMSコンテンツの管理

CMSコレクションの読み取り:コレクション内の全アイテムの一覧、特定フィールドの抽出、既存コンテンツの要約をClaudeに依頼できます
新規CMSアイテムの作成:新しいブログ記事、事例、プロダクトアップデートの内容を伝えると、指定したフィールドでClaudeがアイテムを作成します
既存アイテムの更新:1つまたは複数のアイテムにわたり、コピーの変更、メタデータの差し替え、スラッグの更新、リッチテキストフィールドの編集ができます
アイテムの削除:エディターを開かずに、古くなったコンテンツをコレクションから削除できます

ページとサイトの管理

サイト構造の照会:どのページがあるか、スラッグは何か、どのように構成されているかをClaudeに尋ねられます
ページメタデータの更新:SEOタイトル、ディスクリプション、Open Graphフィールドを、会話を通じて変更できます
Designer APIによる変更:Webflow Designer APIが対応している範囲で、構造やスタイルの更新ができます

公開

サイトの公開:変更後に、ステージングまたは本番環境へサイトを公開するようClaudeに指示できます
特定ページの公開:サイト全体ではなく、個別のページだけを指定して公開できます

B2B SaaSチームのための実際のワークフロー例

以下は、SaaSのマーケティングチームやコンテンツチームにとって、Claude Webflow MCP連携が最も時間の節約になる場面です。すでにB2B SaaSのコンテンツマーケティングエージェンシーや、より幅広いB2B SaaSのデジタルマーケティングエージェンシーで専門家を比較しているなら、このようなワークフローの効率化についても確認しておく価値があります。

ブリーフから新しいブログ記事を投稿する

CMSアイテムを手作業で作成し、すべてのフィールドを入力して、コンテンツを整える代わりに、次のようにします。

Create a new blog post in Webflow with the title "How SaaS Teams Use AI to Cut Support Costs", 
slug "saas-ai-support-costs", and the following body content: [paste content]. 
Set the author to "Sarah Chen", add tags "AI" and "Customer Support", 
and mark it as a draft.

Claudeがアイテムを作成し、すべてのフィールドを割り当てて、下書きが保存されたことを知らせます。内容を確認し、準備ができたら公開します。

複数アイテムにまたがる料金ページのコピーを更新する

料金プランが変わったとき、該当する記載をすべて手作業で更新するのは大変です。

In my Webflow CMS, find all collection items that mention "Starter plan $49/month" 
and update that text to "Starter plan $59/month"

Claudeがコレクションを照会し、対象のアイテムを特定して、すべてに一括で更新を反映します。

キャンペーン前にメタディスクリプションを更新する

有料キャンペーンの開始前に、すべてのランディングページのメタディスクリプションをキャンペーンの訴求に合わせたいとします。

Update the meta description on the page with slug "product/analytics" to: 
"See every user action in real time. SaaS analytics built for growth teams. 
Start free, no credit card required."

Claudeが変更を加え、依頼すればそのままページを公開することもできます。コンテンツ更新と集客を組み合わせているチームにとって、このワークフローはB2B SaaSのPPCエージェンシー、B2B SaaSのSEOエージェンシー、B2B SaaSのPerformance Marketingエージェンシーの支援と自然に組み合わせられます。

コンテンツ監査後に公開する

下書きとして待機させているCMSの更新をまとめて確認したあとは、次のようにします。

Publish the Webflow site ID [your-site-id] to production

1行で完了です。

Claude Webflow MCP連携にできないこと

限界を最初に知っておくと、時間を無駄にしません。MCPサーバーでは、次のことはできません。

ビジュアルなレイアウト作業でWebflow Designerの代わりになること。複雑なコンポーネントの作成、新しいページテンプレート、アニメーションの変更には、引き続きエディターが必要です。
カスタムコードやWebflow Logicのフローを会話で扱うこと。
コンテンツ戦略を自動的に推測すること。Claudeは、指示された内容に基づいて動きます。編集上の判断は、チームが担います。
WebflowのAPIレート制限を回避すること。数百件のCMSアイテムにまたがる大規模な一括処理では、他のAPIクライアントと同じ制限にかかります。

コンテンツの更新、CMS管理、公開については、この連携でワークフロー全体をカバーできます。デザイン中心の作業には、引き続きエディターが適しています。

B2B SaaSチームにとって、Claude Webflow MCP連携は導入する価値がある?

Webflowで定期的にコンテンツを公開しているチームなら、明確なユースケースがあるため、答えはイエスです。

次のようなチームでは、この連携が役立ちます。

大量のCMS(ブログ記事、事例、変更履歴、ヘルプ記事)を管理している
キャンペーンやプロダクトの変更に合わせて、コピーを頻繁に更新している
技術に詳しくないメンバーにも、エディターへのアクセスなしでコンテンツを公開させたい
すでにClaudeでコンテンツを作成していて、出力をWebflowにコピーする手作業をなくしたい

セットアップにかかる時間は15分未満です。最初の一括コンテンツ更新で節約できる時間で、すぐに元が取れます。

SaaS Hackersでは、この連携を、AIエージェントが興味深い存在から実務で使える存在へと移る場面の実践例と捉えています。デモ用の機能ではなく、SaaSのコンテンツチームの既存の仕事の進め方にそのまま組み込める、再現性のあるワークフローです。この分野で実績のある担い手、ツール、パートナーをさらにお探しなら、より広いSaaS Hackersのリソースハブや、ブログの全記事もご覧ください。

よくある質問

Webflow MCPサーバーとは何で、Claudeとどのように連携しますか?

Webflow MCPサーバーは、Webflowが開発した公式コネクターで、Model Context Protocol標準を使って、ClaudeにWebflowワークスペースへの直接アクセスを与えます。設定後は、構造化され権限管理された接続を通じて、ClaudeがユーザーのかわりにWebflow APIを呼び出し、CMSデータの読み書き、ページメタデータの更新、コンテンツの公開を行えます。

Webflow MCPでClaudeを使うには、コーディングの知識が必要ですか?

いいえ。セットアップではターミナルコマンドを2つ実行し、JSON設定ファイルを編集する必要がありますが、設定が終われば、Claude上で普通の言葉だけでやり取りできます。技術に詳しくないコンテンツ担当者でも、コードを書かずにCMSの更新やページの公開ができます。

Webflow MCP連携は、公開中の本番サイトで安全に使えますか?

はい、ただし適切な注意が必要です。MCPサーバーはお客様のWebflow APIトークンを使用するため、そのトークンが持つ権限の範囲で動作します。本番サイトでは、フルアクセスのトークンではなく、ワークフローに必要な最小限の権限(たとえばCMSの読み取り/書き込み)に絞ったトークンを発行することをご検討ください。本番環境に公開する前には、必ず変更内容を確認してください。

Webflow MCPでClaude DesktopとClaude Codeを使う場合の違いは何ですか?

どちらも同じWebflow MCPサーバーで動作します。Claude Desktopは一般ユーザー向けのチャットアプリで、対話形式のインターフェースを求めるコンテンツチームやマーケティングチームに適しています。Claude Codeは開発者向けのCLIツールで、より大きなワークフローの一部としてWebflowの操作をスクリプト化・自動化したいエンジニアに適しています。設定方法は少し異なりますが、実行できる操作は同じです。

Claudeで数百件のWebflow CMSアイテムを一括更新できますか?

ClaudeはCMSコレクション全体にわたる一括処理に対応できますが、WebflowのAPIレート制限が適用されます。非常に大規模なコレクション(数百件のアイテム)では、更新を分割して実行し、レート制限のレスポンスを監視する必要がある場合があります。一般的なSaaS企業のコンテンツ量(数十件から百数十件程度)であれば、一括更新は問題なく行えます。

ClaudeをWebflowに接続するには?