ClaudeとWebflowを連携する方法 — CMS・デザイン・分析のツールを使い分ける
WebflowコネクタでClaudeにCMS更新・要素編集・トラフィック分析を任せる手順です。Claude DesktopとClaude Codeの接続方法、ツール群の使い分け、権限と制限をまとめます。
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のメタ情報、コメント、コンテンツ監査
- 分析: Webflow Analyzeのトラフィック、ページ別の順位、国・ブラウザ・流入元などの内訳、エンゲージメントイベント、ページ滞在時間
- 自動化: 複数の手順をつないだ繰り返しの作業。FigmaやClaude Designのデザイン情報をサイトへ反映する使い方も挙がっている
エージェントが作ったものはWebflowのビジュアルエディターで開き、公開前に人が確認して直せます。生成物が書き出されたコードではなく、Webflow上の実サイトである点が他のコード生成系との違いです。
接続する手順
接続手順は使う面で変わります。どちらも認可の画面で、Claudeに触らせるサイトまたはワークスペースを選びます。
Claude Desktopのコネクタから接続する
- チャット欄の
+を押し、Add connectorsを開く - Webflowを検索する(
Featuredに出ないときはAllに切り替える) Connectを押し、Webflowアカウントにログインして許可する- 触らせるサイトまたはワークスペースを選び、
Authorize Appを押す
ディレクトリに出ない環境では、カスタムコネクタとして https://mcp.webflow.com/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のアプリマーケットプレイスには並ばず、認可のときにだけ入ります。
動作確認には、コレクションの構造を尋ねる依頼が手軽です。
List all my collections and show me their field structures日本語で「コレクションの一覧とフィールド構成を見せて」と頼んでも構いません。Webflowのドキュメントが例に挙げているのは上の英文です。
認可は1ワークスペース単位
1回の認可で触れるのは1つのワークスペースです。別のワークスペースを使うときは認証し直します。Claude Desktopのようなコネクタ型のクライアントでは、コネクタを外して入れ直す形になります。
複数のサイトを扱うClaude Codeでは、サイトごとにフォルダーを分けてプロジェクトスコープで登録すると、認証がサイト別に独立します。トークンの消費もサイト別に追いやすくなります。
# フォルダーごとにサーバー名を変えて登録する
claude mcp add --transport http webflow-site-a \
https://mcp.webflow.com/mcp -s projectツール群の使い分け
Connectorsのページに並ぶツールは、ask_webflow_ai や data_cms_tool、designer_tool など、data_ で始まる名前が中心です。ページの表示は24件で、その下に「Show all 34 tools」とあり、全体は34件です。
| ツール名(掲載分から抜粋) | 対応する作業 |
|---|---|
data_cms_tool | 対応する作業CMSコレクション・アイテムの作成、更新、公開 |
data_element_tool / data_element_builder | 対応する作業ページ上の要素の検索と編集、組み立て |
data_component_tool / data_component_builder | 対応する作業コンポーネントの管理と作成 |
data_style_tool / data_variable_tool | 対応する作業スタイルと変数(デザインシステム) |
data_analyze_tool | 対応する作業トラフィックとエンゲージメントの分析 |
data_pages_tool / data_sitemap_tool | 対応する作業ページ設定、サイトマップ |
data_forms_tool / data_comments_tool | 対応する作業フォーム、コメント |
data_agent_instructions_tool | 対応する作業サイトごとのAgent Instructions |
この対応は、ツール名と、Webflowのドキュメントが挙げる領域を突き合わせたものです。Connectorsのページにはツールの名前が並ぶだけで、名前ごとの説明はありません。個々の引数や挙動を確かめたいときは、接続後にClaudeへ「Webflowのツールで何ができるか」と尋ねるのが確実です。
仕事別の頼み方
CMSの整備は、コレクションのスキーマとアイテムを読んでから更新する流れです。ドキュメントの例では、次のような依頼を出しています。
Ensure all items in my collection have featured images,
complete descriptions, and SEO metadata. Add placeholder
content where fields are empty.エージェントはスキーマと全アイテムを取得し、画像・説明・メタ情報が欠けたアイテムを洗い出し、既存データに合う仮の内容を作って更新する、とされています。仮の内容を入れる指示なので、公開前の確認は欠かせません。
サイト全体の点検では、壊れたリンク、代替テキストの欠落、メタ説明の不足をまとめて拾えます。Webflowはこの用途向けに、SEOのメタ情報監査やリンク点検、変数への置き換えなどのプロンプト集を公開しています。
分析は、期間を指定してセッション・ユーザー・ページビューを尋ねます。ページ別の順位や、国・ブラウザー・流入元別の内訳も同じ系統です。
使う前に押さえる制限と前提
Webflowのドキュメントに書かれている制限のうち、日常の作業に効くものを挙げます。
| 項目 | 内容 |
|---|---|
| 分析 | 内容Webflow Analyzeが必要。有料Siteプランのオプションで、入っていないサイトでは使えない |
| ページブランチ | 内容作成からマージまでの操作はEnterpriseプランが条件 |
| インタラクション | 内容GSAPベースのみ。Classicインタラクションは扱えず、Classicのサイトでは空に見える |
| ローカライズ | 内容新しいローカライズ済みCMSアイテムの作成は不可。既存の読み取りと更新は可 |
| フォント | 内容アップロードしたカスタムフォントのみ。Google・Adobe Fontsはサイト設定で管理 |
| アクセス設定 | 内容ユーザーの追加やロールの割り当ては不可 |
| Webflow Cloud | 内容GitHubリポジトリに接続したアプリのみ。秘密の環境変数の値は受け渡しされない |
一部の機能は、Webflow Designerを開き、MCP Bridge Appを接続した状態が必要です。要素の見た目のスナップショット取得と、現在の選択・ページ・モード・ブランチ・キャンバス・ブレークポイントの読み書きがこれに当たります。それ以外の作業はDesignerを開かなくても動きます。
Designerのモードによっては使えないツールがあり、その場合は ModeForbidden というエラーが返ります。
任せる範囲を絞る仕組み
ClaudeにCMSを書き換えさせる以上、範囲の絞り方が運用の要になります。Webflow側には次の仕組みがあります。
- 権限: エージェントはユーザー本人のWebflowの権限とロールの範囲で動き、Designerで本人ができないことはできない
- Agent Instructions: サイトごとに置く、エージェント向けの規則とスキル。接続したエージェントへ自動で渡される
- アクティビティログ: エージェントが行った変更はサイトのログに残り、いつ何をしたかを後から確認できる
- ページブランチ: ページの非公開コピーで作業すれば、公開サイトには影響しない(Enterpriseプラン)
Agent Instructionsは、変数・スタイル・コンポーネント・CMSコレクションなどを参照できます。「ボタンはこのクラスを使う」「見出しの階層はこう組む」といったサイト固有の規則を、Claudeのプロンプトに毎回書かずに済ませる置き場所です。
Claude Code側の運用メモ
Claude Codeなら、CLAUDE.mdに作業の型を書いておく方法も併用できます。次は公式の例ではなく、運用の一案です。
## Webflow作業のルール
- CMSアイテムの更新は、変更前後の差分を一覧で示し、
承認を得てから実行する
- 公開(publish)は明示の指示があるときだけ行う
- 対象サイトは webflow-site-a プロジェクトのものに限る公開操作の前に差分を見せる型は、Webflowのスキル(次節)がすでに持つ考え方と同じです。CLAUDE.mdのルールとAgent Instructionsを両方置くと、Claude側とサイト側で二重に歯止めをかけられます。
スキルを足して手順を固定する
Webflowは、MCPツールを束ねた手順書としてのスキル集を公開しています。bulk-cms-update のようなスキルは、検証と差分プレビューを挟み、確認を取ってから更新を適用します。インストールは、対話式のインストーラーを次のコマンドで開けます。
npx skills add webflow/webflow-skillsClaude Codeでは、プラグインのマーケットプレイスから入れる方法もあります。
claude plugin marketplace add webflow/webflow-skills
claude plugin install webflow-skills@webflow-skills掲載されているスキルは、コンテンツ管理(一括CMS更新、コレクションの新規作成、CMSの設計相談)、サイトの点検と最適化、公開とコード、コードコンポーネント、Webflow CLIの各分野に分かれています。スキルにはMCPサーバーの接続が前提です。
隣接する連携との使い分け
Webflow Analyzeはサイト内蔵の分析なので、読めるのはそのサイトのトラフィックとイベントです。プロダクト内のユーザー行動やファネルを見たいなら、ClaudeとMixpanelの連携が向きます。検索順位や被リンクを含むSEOの監査は、Ahrefsを使った月次のSEO監査の領分です。
デザインの出どころがFigmaなら、Figma MCPサーバーの使い方でコード側へ渡す流れを押さえ、そのデザイン情報をWebflowに反映する使い方はWebflow側のドキュメントが「自動化」の例に挙げています。Claude Designとの関係はClaude DesignとFigmaの違いに整理があります。
まとめ
WebflowコネクタはCMS、デザイン、分析を1つのつなぎ口で扱えるぶん、範囲を絞る設計が要ります。読み取り中心の分析から始め、CMSの一括更新は差分確認つきで回し、公開だけは人が握る。この順に広げると、事故なく使い始められます。
Analyzeの利用にはWebflow側のアドオンが要ること、認可が1ワークスペース単位であることは、最初につまずきやすい点です。