今回は、こんな疑問にお答えします。
- Webflow AIで、今なにができる？
- Webflow MCPをClaudeにつなぐと、本番のサイトをどこまで直せる？
- AIに任せたとき、どこでつまずいて、何が人に残る？
こんにちは、2020年からWebflowの解説ブログを書いている、Webflow専門家のマサトです。
僕は2025年10月から、Webflow公式のMCP（AIとWebflowをつなぐ仕組み）を試しています。
ただ、MCP 1.0を実案件で使おうとしたときは、接続しただけで大量の情報が読み込まれて、AIのコンテキストの大半が埋まりました。正直、実用にはなりませんでした。
そのあと2026年11月に、運用を担当している本番のサイトへ、公式MCPをClaude（claude.ai）のコネクタでつないで、修正から本番公開まで通しました。
先に結論から書きます。
Webflow AIは、Webflowの中で動くAIと、外のAIをつなぐ公式MCPの2つに分けると分かりやすいです。
公式MCPは、ページ設定の更新や画像のalt、本番公開まで、Claudeとのやり取りで通りました。
ただし、見た目の確認と公開のタイミングは人に残ります。
それでは、順番に見ていきましょう。
この記事の要点
- Webflow AIとは
- Webflow AIとは、Webflowの中で動くサイト生成やSEOとAEOの監査、CMSアイテムの生成と、外のAIをつなぐ公式MCPまでを含む、WebflowのAI機能の呼び名です（2026年11月5日に確認）。
目次
Webflow AIで今できることは、中のAIと公式MCPで分かれます
Webflow AIの公式ページには、中で動く機能として以下が載っています（2026年11月5日に確認）。
- プロンプトからサイトを丸ごと作る
- サイト全体を監査して、SEOとAEO（AI検索向けの対策）の改善案を出す
- Reactコンポーネントを作って、画面で編集する
- 文章の下書きと別パターンを作る
- CMSのアイテムを作る
- 今のデザインシステムを使って、ページのセクションを作る（ベータ）
使える範囲は、ワークスペースとサイトプラン、アドオンの購入で変わるとのこと。AIクレジットはすべてのWorkspaceプランに付いていて、消費するのは一部の機能だけです。
顧客のデータを生成AIの学習に使わない、とも公式ページに書かれています。
僕が中のAIで試した1つが、アプリの生成です。日本語で1つ頼むと、保存も管理画面も動く形で出てきました。ただ、作ったものは、結局実案件では使いませんでした。
記録はWebflow App Genを試した記事に書きました。
画面のパーツを足すのも、最初から入っているAIの方が使いやすかったです。外から来たAIより、家の中のAIの方が、家の間取りを分かっているんですよね。
一方の公式MCPは、ClaudeやChatGPTのような外のAIをWebflowにつなぐ仕組みです。
要素やスタイル、CMS、アセット、カスタムコードを、AIが道具として扱えるようになります。
MCP 2.0は2026年7月21日に出て、追加費用なしで全ユーザーに提供されています（2026年11月5日に確認）。
ただし、Analyze・Optimize・AEOのデータを読むには、有料サイトプランのオプションが要ります。
なお、新しいサイトプロジェクトはMCPから作れません。ダッシュボードで先に作っておきます。
Webflow MCPをClaudeにつないで、本番公開まで通しました
使ったのはClaude（claude.ai）のコネクタで、Claude Codeではありません。
つないだあとにサイト一覧を取ると、返ってきたのは許可したサイトだけでした。OAuthの認可画面で、サイト単位に選ぶ仕様です。
本番公開までに通った操作は以下です。
- 全ページを検索して、直す文字の場所を探す
- 文字を書き換えて戻す（どちらも数秒）
- 読み取りだけで、サイト全体を監査する
- ページ設定を1ページずつ更新する
- 要素とCMS画像のaltを入れる
- 本番ドメインへ公開する
修正を頼むときの指示は、「見た目変わらないように修正して、見た目が変わる場所は相談して。」でした。ページが大きく変わる修正は相談に回り、相談のうえで見送っています。
Claudeの説明では、バイブコーディングとの違いは、できあがるものがHTMLではなくWebflowの要素とクラスなところ。納品後も人がDesignerで触れます。
Claudeのコネクタのページにも、画面でいつでも手を入れられると書かれています（2026年11月5日に確認）。
一方で、デザインを新しく組ませる作業は、見た目を変えない今回の修正では試していません。
これまで試してきた範囲だと、デザインを組ませるのは、ちょっとした見た目の変更や要素を足すくらいまで。込み入ったレイアウトは、結局人が見ないとダメでした。
逆に、いちばん効いたのは画像のalt（説明文）を一気につけるところです。派手なところより、地味な単純作業がいちばん楽になるんですよね。
MCP 1.0で詰まったコンテキストの問題が今どうなっているかも、測り直していません。
Webflow AIの公式MCPでうまくいかなかったのは、403と内部エラーと誤認です
一括のページ設定更新は403で弾かれました
権限エラーです。ところが、1ページずつの更新なら通りました。
要素の属性でaltを書き換える操作は内部エラーになりました
要素設定（altText）を経由する別のツールでは、成功しています。
CMS画像にaltを入れると、画像URLが変わることがあります
Webflow側で、画像が新しいアセットとして保存されることがあります。サイト内は問題ありません。ただ、外から旧URLを直接参照している場合は影響します。
クラス名だけを見て、Claudeが見出しを誤認しました
Claudeは、著作権を連想するクラス名から「フッターの著作権表記がh2になっている」と報告してきました。
ところが実際はキャッチコピーで、クラス名の意味はコピーライティングの方でした。
クラス名だけで判断した誤りで、中身を確認して訂正しています。h2のままが正解でした。
要素のスナップショット（画像での確認）はエラーで取れませんでした
最終的な見た目の確認は、人がDesignerのプレビューで行っています。
下書きの修正は、誰かが次に本番公開した時点で一斉に出ます
公開前には、未公開の変更も一緒に本番へ出ることをClaudeが指摘してきました。
クライアント側でも公開している案件なら、公開のタイミングを共有しておくのが大事です。
AIに任せても、人に残る仕事は3つあります
「公開まで全部AIに任せればいいのでは？」違います。見た目を確かめたのは人で、Claudeの報告には誤認も混ざっていました。
僕の作業で人に残ったのは、以下の3つです。
- 見た目が変わる場所は相談、と線を引いて指示する
- 見た目をDesignerのプレビューで確かめる
- 確認が終わってから、「本番ドメインに公開して」と頼む
AIに任せきれないところが、まだ僕の仕事です。
Webflow MCPの使い方は、文字の書き換えと読み取りの監査から始めます
僕がやった順番は以下の5つです。
- OAuthの認可画面でサイトを選んで、Claudeにつなぐ
- 文字を書き換えて、戻せるかを試す
- 読み取りだけで、サイト全体を監査してもらう
- 見た目が変わる場所は相談して、と線を引いて修正を頼む
- 見た目を確かめてから、本番公開を頼む
Claudeのコネクタの手順は公式のClaude向けの説明にあります。MCP 1.0を試した記録はWebflow MCPの記事に書きました。
公式のFAQによると、認可できるのはサイトのオーナーと管理者だけで、1回の認可で入れるワークスペースは1つです（2026年11月5日に確認）。
スナップショットを使うときは、Designerを開いてBridge Appをつないでおきます。公式のFAQには、ステージングのドメインへ公開して確かめるやり方も載っています。
制作の裏側や実測の続きはメルマガで書いています。
制作実績
JTB Americas
北米拠点サイトを全面刷新。運用チームが自ら更新できる体制まで構築
日本テレビ主催
FigmaデザインをWebflowへ高精度コンバート。表示速度とレスポンシブを最適化
株式会社PonTech Lab
AI（Claude Code）でNext.js×Cloudflare構築。制作過程の記録も公開
よくある質問
Webflow AIで今できることは何ですか？
公式ページには、プロンプトからのサイト生成、SEOとAEOの監査と改善案、Reactコンポーネントの生成、文章の下書き、CMSアイテムの生成、セクションの生成が載っています（2026年11月5日に確認）。使える範囲はワークスペースとサイトプラン、アドオンの購入で変わります。
Webflow AIとWebflow MCPの違いは何ですか？
Webflow AIの公式ページには、Webflowの中で動く機能と、外のAIをつなぐMCPの両方が載っています。中で動く機能はWebflowの画面から使い、Webflow MCPはClaudeやChatGPTのような外のAIからWebflowを動かします。MCPからは新しいサイトプロジェクトを作れないので、サイトはダッシュボードで先に作ります。
WebflowとClaudeはどうつなぎますか？
Claudeのコネクタを使い、OAuthの認可画面で触らせるサイトを選びます。僕が使ったのはClaude（claude.ai）のコネクタで、Claude Codeではありません。認可できるのはサイトのオーナーと管理者だけです（2026年11月5日に確認）。
Webflow MCPは本番のサイトに使えますか？
僕は運用を担当しているサイトで、修正から本番公開まで通しました。ただ、一括のページ設定更新は403で弾かれて、1ページずつなら通りました。スナップショットも取れず、見た目は人がDesignerのプレビューで確かめています。
Webflow MCPでaltを入れるときの落とし穴はありますか？
CMS画像にaltを入れると、Webflow側で画像が新しいアセットとして保存されて、画像URLが変わることがあります。サイト内は問題ありませんが、外から旧URLを直接参照している場合は影響します。
Webflow MCPやWebflow AIに追加の費用はかかりますか？
MCP 2.0は追加費用なしで全ユーザーに提供されています。ただし、Analyze・Optimize・AEOのデータを読むには、有料サイトプランのオプションが要ります。Webflow AIのAIクレジットはすべてのWorkspaceプランに付いていて、消費するのは一部の機能だけです（どれも2026年11月5日に確認）。
