ClaudeをWebflow MCPに接続する方法

結論:Claudeは、公式のMCP(Model Context Protocol)サーバーを通じてWebflowに接続します。これにより、Claude DesktopやClaude Codeから、サイトのCMS、ページ、Designer APIに直接アクセスできます。やりたいことを日常の言葉で伝えるだけで、コンテンツの更新、CMSアイテムの作成、コレクションの管理が行え、UIでの手作業は不要です。

Webflowサイトを運用していて、いまだにコンテンツを手作業でCMSにコピーしているなら、このガイドで仕事の進め方が変わるはずです。Webflow MCPサーバーを使うと、ClaudeがWebflowのWorkspaceに直接読み書きできるようになります。そのため、Designerを開かなくても、会話だけでブログ記事の更新、新しいコレクションアイテムの追加、ページコンテンツの編集ができます。

本ガイドは、公開ワークフローを速くし、ツールの切り替えを減らしたいB2B SaaSチーム向けの実践的な解説です。読み終える頃には、連携が動作する状態になり、ClaudeがWebflow内でできることとできないことも正確に把握できます。コンテンツ基盤や公開運用まわりも含め、より幅広い成長支援を検討している場合は、SaaS Hackersが厳選したベストB2B SaaSコンテンツマーケティングエージェンシーもご覧ください。

Webflow MCPサーバーとは?

Webflow MCPサーバーは、WebflowがModel Context Protocolの標準に沿って開発した公式の連携機能です。MCPは、ClaudeなどのAIツールが、構造化された権限管理のもとで外部サービスに接続できるようにするオープンプロトコルです。

簡単に言うと、Claudeがサイトの構造を推測するのではなく、MCPサーバーを通じて実際のWorkspaceデータにリアルタイムでアクセスできるということです。Claudeは、開発者が使うのと同じAPIを通じて、CMSコレクションの照会、既存アイテムの読み取り、新規エントリの作成、更新の実行ができます。

WebflowのMCPサーバーはWebflowが直接ホストして保守しているため、サードパーティの回避策ではなく、公式のData APIとDesigner APIを利用します。

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

セットアップを始める前に、できることの範囲を確認しておきましょう。Webflow MCPを使ったClaudeにできるのは次のとおりです。

CMSコレクションの読み取りと、既存アイテムのフィールドデータを含む一覧表示
テキスト、リッチテキスト、画像、参照フィールドを含む新規CMSコレクションアイテムの作成
ステージング中のコンテンツや公開済みコンテンツを含む既存コレクションアイテムの更新
ライブサイトへのアイテムの公開
ページ、コレクション、フィールドスキーマを含むサイト構造の照会
Designer APIを通じた構造面やシステムレベルの更新

Claudeは、人間がWebflow Designerのキャンバス上で行うようなビジュアルデザインはできません。強力なCMS運用担当、コンテンツ公開担当と考えてください。ビジュアルデザインのツールではありません。ビジュアル面の支援も必要なチームは、B2B SaaS向けWebデザインエージェンシーや、専門のB2B SaaS向けWebデザインとUXの専門家も比較してみるとよいでしょう。

始める前に必要なもの

CMSにアクセスできるプランで、サイトが1つ以上あるWebflowアカウント
Claude Desktopがインストールされていること、またはClaude Codeを利用できること
適切なスコープが設定されたWebflow APIトークン
ローカルにインストールされたNode.js(バージョン18以上)

ClaudeをWebflow MCPに接続する手順

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

Webflowのダッシュボードにログインします
Account Settings、各種連携の順に進みます
API Accessまでスクロールし、新しいトークンを生成します
必要なスコープを選択します。コンテンツのワークフローでは、CMSの読み取り/書き込み、Sitesの読み取り、Pagesの読み取り/書き込みが基本になります
トークンをコピーし、安全な場所に保管します

ステップ2:Claude DesktopでMCPサーバーを設定する

Claude Desktopは、接続するMCPサーバーを設定ファイルで判断します。次の場所にある設定ファイルを開いてください。

macOS: ~/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-api-token-here"
      }
    }
  }
}

置き換え your-api-token-here をステップ1で生成したトークンに置き換えます。

ステップ3:Claude Desktopを再起動する

設定ファイルを保存し、Claude Desktopを完全に終了してから再度開きます。起動時にClaudeがMCPサーバーを読み込みます。MCPツールが使える状態になると、チャット画面に小さなハンマーのアイコンが表示されます。

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

Claudeに次のように入力します。

"List the Webflow sites connected to my account."

接続が正常に動作していれば、Claudeがサイト名とIDを返します。エラーが出る場合は、トークンのスコープと、Node.jsが正しくインストールされているかを再確認してください。

代わりにClaude Codeを使う場合

ターミナル環境で作業している場合や、Claude Desktopよりもclaude Codeを使いたい場合は、セットアップが少し異なります。

次のコマンドを実行して、MCPサーバーを手動で起動します。

WEBFLOW_TOKEN=your-api-token npx -y @webflow/mcp-server

次に、Claude Code環境を、その起動中のサーバーに向けて設定します。MCPサーバーのWebflow GitHubリポジトリ(webflow/mcp-server)に、環境変数と高度な設定オプションの詳細なリファレンスがあります。

実践的なワークフロー:具体的な活用方法

CMSに新しいブログ記事を公開する

接続が完了すれば、1つのプロンプトで新しいCMSアイテムを作成できます。たとえば次のようにします。

"Create a new item in my Blog Posts collection. Title: 'How SaaS Teams Use AI for Faster Onboarding'. Slug: how-saas-teams-use-ai-faster-onboarding. Set the status to Draft."

ClaudeはCMS APIを呼び出し、フィールドを正しく対応付けてアイテムを作成し、アイテムIDを返します。その後、すでに書き上げた内容を本文フィールドに入力するよう依頼することも、Claudeにその場で下書きを作成させることもできます。AIを活用した公開作業が自社のワークフローで重みを増している場合は、SaaS Hackersが取り上げている関連テーマ、AGIがマーケティング、ビジネス、ソフトウェア開発に与える影響もご覧ください。

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

"Find the blog post titled 'Product Update: Q1 2025' and update the excerpt field to: 'A summary of everything we shipped in Q1, including the new onboarding flow and API rate limit increases.'"

Claudeはコレクションを照会して該当するアイテムを見つけ、フィールドを部分更新します。事前にアイテムIDを知っておく必要はありません。

ステージング中のアイテムを公開する

"Publish the blog post with slug 'how-saas-teams-use-ai-faster-onboarding' to the live site."

これでAPIを通じて公開アクションが実行されます。Designerを開かなくても、アイテムはステージングからライブに移ります。

CMSの入力漏れフィールドを監査する

"Check all items in my Case Studies collection and list any that are missing the 'Client Logo' or 'Industry' fields."

これはコンテンツのQAに非常に役立つワークフローです。Claudeがコレクション内のすべてのアイテムを読み取り、不足している項目の一覧を返します。WebflowのUIで同じことをするには、かなりの手作業が必要です。

権限と注意点

本番環境で実行する前に、知っておきたい点がいくつかあります。

トークンのスコープは重要です。書き込み権限のあるトークンは、コンテンツの作成や上書きができます。試しに使う段階では、まず読み取り専用のトークンを生成し、リスクなくサイト構造を確認するのがおすすめです。

公開は即時に反映されます。Claudeがアイテムを公開すると、すぐにライブになります。APIには、ステージングでの確認ステップがありません。公開コマンドを出す前に、ステージング中のコンテンツを確認する習慣をつけましょう。

CMSのフィールドタイプには制約があります。参照フィールド、オプションフィールド、画像フィールドには、APIが求める特定の形式があります。作成や更新でClaudeがエラーを返した場合は、先にコレクションのスキーマを説明させると、フィールドが正しく対応付けられます。

レート制限があります。Webflow Data APIには、プランごとにレート制限があります。50件以上の更新などの一括処理では、Claudeがページネーションを処理する必要があり、下位プランでは制限に達する場合があります。

B2B SaaSチームがこれに注目すべき理由

多くのSaaSマーケティングチームにとって、コンテンツ制作のスピードは大きな制約です。一般的なブログ公開では、執筆、編集、CMSでの書式設定、メタデータの追加、公開という工程を踏みます。どの工程も手作業で、時間がかかります。

Claude WebflowのMCP環境があれば、ライターは完成した原稿を渡すだけで、CMSへの入力、フィールドへの入力、スラッグの作成、公開の実行をClaudeに任せられます。記事ごとに20〜30分の機械的な作業をなくせます。

多言語コンテンツ、製品アップデートのページ、大量のリソースライブラリを管理しているチームでは、時間の削減効果がすぐに積み上がります。本来なら午後いっぱいかかる更新作業も、Claudeなら1回のセッションでまとめて処理できます。こうしたワークフローを各集客チャネルに広げていく企業は、B2B SaaS向けSEOエージェンシー、B2B SaaS向けPPCエージェンシー、B2B SaaS向けPerformance Marketingエージェンシーの専門パートナーを比較検討するのも有効です。

SaaS Hackersでは、B2B SaaSの運用でClaudeを活用する連載の一環として、この種のワークフロー自動化を取り上げています。目的は常に同じで、機械的な作業をなくし、人間の判断が本当に必要な意思決定にチームが集中できるようにすることです。信頼できるパートナーや実務家をさらに探したい方は、トップエージェンシー、トップ専門家、リソースもあわせてご覧ください。

よくある質問

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

Webflow MCPサーバーは、Model Context Protocolを実装した公式の連携機能で、ClaudeをWebflowのWorkspaceに直接接続できます。Webflow APIを通じて、CMSコレクション、ページ、サイトデータに構造化された形でアクセスできるようになります。Claude DesktopまたはClaude Codeで一度設定すれば、あとは自然言語のプロンプトでWebflowのコンテンツを読み書きできます。

MCPを使って、ClaudeはWebflowでページをビジュアルにデザインできますか?

いいえ。Webflow MCPを使ったClaudeが動作するのはAPI層であり、ビジュアルなDesignerキャンバスではありません。CMSコンテンツの作成と更新、コレクションアイテムの管理、システムレベルの変更はできますが、デザイナーのように要素をドラッグ&ドロップしたり、見た目を配置したりはできません。コンテンツ運用に使い、ビジュアルデザインには使わないでください。

Webflow MCPサーバーは、本番サイトで安全に使えますか?

はい、適切な対策を講じれば問題ありません。ワークフローに必要な権限だけを付与したスコープ付きAPIトークンを使用してください。最初のテスト段階では、書き込みと公開のアクセス権を付与しないようにしましょう。APIを通じた公開は即座に反映されるため、公開コマンドはDesignerで手動公開するときと同じ慎重さで扱ってください。

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

基本的なセットアップやコンテンツワークフローの実行に、コーディングは必要ありません。JSON設定ファイルを編集し、Node.jsをインストールしておく必要はありますが、どちらも難しくありません。Webflow MCPサーバーは次のコマンドで実行されます: npx。そのため、構築や保守が必要なものはありません。

Webflow MCPを利用するには、どのWebflowプランが必要ですか?

Webflow MCPサーバーはData APIを使用します。Data APIは、CMSアクセスを含むプランで利用できます。現在のプランのAPIアクセスの詳細は、Webflowアカウントの設定で確認してください。Designer APIの機能は、実行したい操作によって、追加のプラン要件が設けられている場合があります。

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