Cloudflareの「WebMCP」発表を見て考えたこと。Claude CodeでのWebアプリ制作はどう変わる？
たまごっちのお世話を忘れておやじっちになっちゃった Sato Labのsatoです。Cloudflareが既存のWebサイトをコード変更なしでAIエージェント対応にできる『WebMCP』のデベロッパープレビューを発表したというニュースを見て、WebとAIの関わり方が新しい段階に入りつつあると感じました。これまではAIがWebページを読むといえばスクレイピングが中心でしたが、サイト側がブラウザ上でAI用ツールを提供する時代が来ようとしています。
そもそもCloudflareのWebMCPとは何なのか
今回の発表は、Cloudflareの管理画面でスイッチを入れるだけで、自社のWebサイトをWebMCP（Web Model Context Protocol）対応にできるというデベロッパープレビュー機能です。WebMCP自体はChrome 146で実験的に導入されている新しいブラウザ標準で、ページ上に document.modelContext というオブジェクトを介してAIエージェント向けツール（MCP）を登録できる仕組みです。CloudflareはEdge側のHTMLRewriterを使ってHTMLレスポンスに1行のブリッジスクリプトを自動注入するため、元のWebサイトのソースコードを書き換えることなく、ブラウザ上で動作するMCPツール群を読み込ませることができます。
スクレイピングではなく「ツール提供」というアプローチの面白さ
僕がこの発表で特に面白いと感じたのは、AIエージェントにHTMLを解析させてボタンを探させるのではなく、サイト側からAI専用の「操作用ツール」を直接渡す点です。これまでのAIによるWeb巡回は、人間用の画面を無理やり読み取るスクレイピングが主流で、意図しない負荷や誤解が課題になっていました。今回の仕組みでは、C2PA画像メタデータの読み取りなどのツールパックや既存MCPサーバーへの接続をブラウザ内で完結して実行できます。人間向けの見た目（UI）とAI向けの機能定義（MCP）が並行して提供されるWebのあり方は、今後のWebツール開発の考え方にも影響を与えそうです。
Claude CodeでWebアプリを作る立場からの見解
普段Claude Codeを使ってWebアプリを作っている僕の立場から見ると、これはClaude Codeなどの開発環境を置き換えるものではなく、AIエージェントが連携する外部基盤（Web側）の進化だと捉えています。Claude Codeは、Gitでのコード管理やReact/Next.jsなどのフレームワーク修正、データベース構築やデプロイといった継続的な開発作業を行うための環境です。一方でWebMCPは、完成して公開されたWebサイトにAIエージェントが安全かつスムーズにアクセスするための窓口です。両者は競合するものではなく、AI開発者が作ったアプリを「AIフレンドリー」にするための補完的な役割を果たすと見込んでいます。
僕ならこの動向をどう捉えて使い分けるか
僕なら、今Claude Codeで進めているWebアプリの開発手順をすぐに変更することはありません。ログイン機能やデータベース設計、複数ファイルの管理が必要なプロジェクトでは、引き続きローカルのプロジェクト構造を把握できるClaude Codeを使います。一方で、今後自分が作ったWebサイトやサービスを「外部のAIエージェントに使ってもらいたい」と考えた時には、Cloudflareの管理画面からWebMCPを有効化するアプローチを試してみたいと考えています。開発者が自前で複雑なAPIを用意しなくても、既存サイトの前にEdgeを挟むだけでAI連携の準備が整うのは非常に魅力的です。
まとめ
WebMCPの登場によって、Webサイトは人間が閲覧するだけでなく、AIエージェントと対話して操作される存在へと変化し始めています。僕自身は引き続きClaude CodeでWebアプリのコードを書いていきますが、作成したサービスをいかにAI時代に適合させるかという視点も持って開発を続けていきたいところです。もしAIを使った開発に興味はあるものの、ターミナルでの操作やコマンド管理にハードルを感じているなら、まずは扱いやすいツールから触れてみるのがおすすめです。Sato Labでは、Claude DesktopやClaude Codeの使い方、AIを使ったブログ運営、Web制作、業務効率化について、初心者向けに発信していきます。まずはClaude Desktopで、AIに慣れるところから始めてみてください。
Claude DesktopやClaude Codeは便利ですが、最初の導入や使い方でつまずく方も多いです。
「どこから始めればいいかわからない」
「黒い画面が怖い」
「自分のパソコン環境で合っているか不安」
「AIにどう指示すればいいかわからない」
そんな方向けに、画面共有で一緒に進めるサポートも準備しています。
まずは無料記事で試してみて、難しそうであれば個別サポートも活用してください。
