ClaudeとWebflowを連携する方法 — CMS・デザイン・分析のツールを使い分ける

Webflowコネクタは、Webflowのサイトを自然文でClaudeに操作させるためのConnectorです。開発元はWebflow自身で、ConnectorsディレクトリではAnthropic verifiedの表示が付き、追加時期は2026年1月、サインインが必須です。接続先は https://mcp.webflow.com/mcp です。

CMSの記事を一括で直す、ページの要素やスタイルを編集する、Webflow Analyzeでトラフィックを読む。この3つが主な用途です。ツールは名前が似たものが多く並ぶため、どの仕事にどの系統を使うかを先に押さえると迷いません。

Webflowコネクタでできること

Webflow MCPサーバーは、WebflowのAPIをClaudeなどのAIエージェントが呼べるツールとして公開したものです。Webflowのドキュメントは、できることを次の4領域に分けています。

• 設計と構築: レスポンシブなレイアウト、要素、クラスなどのスタイル、コンポーネント、変数、GSAPベースのインタラクション、カスタムコード、カスタムフォント
• 管理: CMSのコレクション・フィールド・アイテム(一括更新と公開・非公開を含む)、ページ設定、アセット、フォーム、サイトマップ、SEOのメタ情報、コメント、コンテンツ監査。GitHubリポジトリ由来のWebflow Cloudアプリと、Early Access限定のキャンペーン用ランディングページ生成もここに入る
• 分析: Webflow Analyzeのトラフィック、ページ別の順位、国・ブラウザ・流入元などの内訳、エンゲージメントイベント、ページ滞在時間
• 自動化: 複数の手順をつないだ繰り返しの作業。FigmaやClaude Designのデザイン情報をサイトへ反映する使い方も挙がっている

エージェントが作ったものはWebflowのビジュアルエディターで開き、公開前に人が確認して直せます。生成物が書き出されたコードではなく、Webflow上の実サイトである点が他のコード生成系との違いです。

接続する手順

接続手順は使う面で変わります。どちらも認可の画面で、Claudeに触らせるサイトまたはワークスペースを選びます。

Claude Desktopのコネクタから接続する

ディレクトリに出ない環境では、カスタムコネクタとして https://mcp.webflow.com/mcp を手で登録できます。開発中の機能を試すベータ版のサーバーは https://mcp.webflow.com/beta/mcp です。

Claude Codeから接続する

Claude Codeでは、次のコマンドでMCPサーバーを追加します。

claude mcp add --transport http webflow \
  https://mcp.webflow.com/mcp

追加後にClaude Codeを起動し、/mcp からWebflowのサーバーを選ぶと、未認証ならブラウザーでOAuthの画面が開きます。ここで対象サイトを許可します。認可の際にはMCP Bridge Appも自動でインストールされます。

このアプリはWebflowのアプリマーケットプレイスには並ばず、認可のときにだけ入ります。Designerを使う一部の機能にだけ必要で、起動の手順は「つまずいたときの切り分け」に書きました。

動作確認には、Webflowのドキュメントが挙げる次の3つの依頼が手軽です。1つ目はコレクション構造の確認、2つ目は監査、3つ目はヒーローセクションの作成です。

List all my collections and show me their field structures

Audit my site for broken links, missing alt text, and incomplete meta descriptions

Create a responsive hero section with a headline, description, and CTA button

触らせるサイトを分ける

認可の単位はクライアントで持ち方が違います。どちらも1回の認可で触れるのは1つのワークスペースです。

プロジェクトスコープの登録は、フォルダーの中で次のように行います。サーバー名はフォルダーごとに変えます。

# フォルダーごとにサーバー名を変えて登録する
claude mcp add --transport http webflow-site-a \
  https://mcp.webflow.com/mcp -s project

登録だけでは反映されません。ターミナルならClaude Codeを終了して開き直し、IDEならウィンドウを再読み込みします。VS Codeではコマンドパレットの Developer: Reload Window が該当します。

そのあと /mcp でサーバー一覧を開き、認証するのはプロジェクトに登録したサーバーです。claude.ai ドメインの既定のサーバーが並んでいても、そちらではありません。認証後は、アクセスできるサイトやCMSコレクションを尋ねて、意図したスコープだけになっているかを確かめます。

ツール群の使い分け

Connectorsのページに並ぶツールは、ask_webflow_ai や data_cms_tool、designer_tool など、data_ で始まる名前が中心です。ページの表示は24件で、その下に「Show all 34 tools」とあり、全体は34件です。

表の対応は、ツール名と各領域の説明から読み取った目安です。Connectorsのページにはツール名だけが並び、名前ごとの説明は載っていません。

使い方の説明は、Webflow Guideというツールが持っています。MCPのリソースとしても公開されているので、@ で参照できるクライアント(ClaudeやCursor)なら、依頼文に @ で添えて作業の前に文脈へ読み込ませられます。

仕事別の頼み方

CMSの整備は、コレクションのスキーマとアイテムを読んでから更新する流れです。ドキュメントの例では、次のような依頼を出しています。

Ensure all items in my collection have featured images,
complete descriptions, and SEO metadata. Add placeholder
content where fields are empty.

エージェントはスキーマと全アイテムを取得し、画像・説明・メタ情報が欠けたアイテムを洗い出し、既存データに合う仮の内容を作って更新する、とされています。仮の内容を入れる指示なので、公開前の確認は欠かせません。

サイト全体の点検では、壊れたリンク、代替テキストの欠落、メタ説明の不足をまとめて拾えます。ドキュメントの点検例は「直せるものは自動で直す」まで頼む形で、リンクや画像の全件確認から修正、報告書の作成までを1回の依頼で進めます。直しまで任せるかどうかは、依頼文の書き方で決まります。

Webflowはこの用途向けに、SEOのメタ情報監査、リンク点検、変数への置き換え、ブレークポイントの整理、スライダーの組み立てなどのプロンプト集を公開しています。

分析は、期間を指定してセッション・ユーザー・ページビューを尋ねます。ページ別の順位や、国・ブラウザー・流入元別の内訳も同じ系統です。

つまずいたときの切り分け

症状から原因をたどれるように、Webflowのドキュメントが挙げる制限を並べ直しました。

Bridge Appを使う機能は、要素の見た目のスナップショット取得と、現在の選択・ページ・モード・ブランチの読み取りと変更、キャンバスの移動、ブレークポイントの読み取りです。使うときは、サイトをWebflow Designerで開き、AppsパネルからMCP Bridge Appを起動します。接続できるまで待ちます。

接続後はAppを最小化できますが、閉じると機能が止まります。Data APIで動くそれ以外の作業は、Designerを開かなくても進みます。要素・コンポーネント・スタイル・変数の編集と、CMS・ページ・アセット・フォントの管理が該当します。

任せる範囲を絞る仕組み

ClaudeにCMSを書き換えさせる以上、範囲の絞り方が運用の要になります。Webflow側には次の4つの仕組みがあります。

Agent Instructionsは、変数・スタイル・コンポーネント・CMSコレクション・ページ・ロケールなどを参照できます。参照はサーバー側で解決されるので、サイトの現在の状態が反映されます。「ボタンはこのクラスを使う」「見出しの階層はこう組む」といった規則を、Claudeのプロンプトに毎回書かずに済ませる置き場所です。Shared Librariesを使うと、ワークスペース全体にも配れます。

次節のスキルは利用者のクライアントに入ります。Agent Instructionsはサイト自体に載り、接続した任意のエージェントに渡る点が違います。

Claude Code側の運用メモ

Claude Codeなら、CLAUDE.mdに作業の型を書いておく方法も併用できます。次は公式の例ではなく、運用の一案です。

## Webflow作業のルール
- CMSアイテムの更新は、変更前後の差分を一覧で示し、
  承認を得てから実行する
- 公開(publish)は明示の指示があるときだけ行う
- 対象サイトは webflow-site-a プロジェクトのものに限る

CLAUDE.mdのルールとAgent Instructionsを両方置くと、Claude側とサイト側で二重に歯止めをかけられます。

スキルを足して手順を固定する

Webflowは、MCPツールを束ねた手順書としてのスキル集を公開しています。bulk-cms-update のようなスキルは、検証と差分プレビューを挟み、確認を取ってから更新を適用します。公開にも専用のスキルがあり、前回公開からの変更を示し、公開前の点検を走らせ、明示の確認を得てから反映する流れです。

インストールは、対話式のインストーラーを次のコマンドで開けます。

npx skills add webflow/webflow-skills

Claude Codeでは、プラグインのマーケットプレイスから入れる方法もあります。入れたあとはClaude Codeを再起動します。

claude plugin marketplace add webflow/webflow-skills
claude plugin install webflow-skills@webflow-skills

Claude Desktopでは、Settings > Capabilities で Code execution and file creation を有効にします。次にGitHubのリポジトリからスキルを取得し、Customize > Skills の + から SKILL.md を1つずつアップロードします。

スキルは、依頼の内容に合うときに自動で呼ばれます。掲載されているのはコンテンツ管理(一括CMS更新、コレクションの新規作成、CMSの設計相談)、サイトの点検と最適化、公開とコード、コードコンポーネント、Webflow CLIの各分野です。サイトのアクティビティログを自然文で問い合わせるスキルはEnterpriseプランが条件になります。スキルにはMCPサーバーの接続が前提です。

隣接する連携との使い分け

Webflow Analyzeはサイト内蔵の分析なので、読めるのはそのサイトのトラフィックとイベントです。プロダクト内のユーザー行動やファネルを見たいなら、ClaudeとMixpanelの連携が向きます。検索順位や被リンクを含むSEOの監査は、Ahrefsを使った月次のSEO監査の領分です。

デザインの出どころがFigmaなら、Figma MCPサーバーの使い方でコード側へ渡す流れを押さえ、そのデザイン情報をWebflowに反映する使い方はWebflow側のドキュメントが「自動化」の例に挙げています。Claude Designとの関係はClaude DesignとFigmaの違いに整理があります。

まとめ

Webflowコネクタは、読み取り中心の分析から始め、CMSの一括更新は差分確認つきで回し、公開だけは人が握る順に広げると事故が起きにくくなります。つまずきの多くは、Analyzeのアドオン、Bridge App、認可のワークスペース単位という3点のどれかに当たります。