WebサイトをAIエージェントに正しく使ってもらうには？｜Cloudflare WebMCPを初心者向けに解説

まず結論：WebMCPは、AIに「このサイトではこう動いてください」と伝える入口

これまでAIがWebサイトを使うときは、人間向けの画面を見て、リンクやボタンやフォームの意味を推測するしかありませんでした。人なら「これは資料請求だな」と分かるボタンでも、AIには紛らわしい。取り違えは、だいたいここで起きます。

WebMCPは、その状況に対して、サイト側から「使ってよい道具」を整理して渡す考え方です。Cloudflareの発表では、WebMCPはChrome 146で実験的に提供される新しいブラウザ標準で、ページ上ではdocument.modelContextとして見えると説明されています。

MCPとWebMCPの違いを、コンセントで考える

MCPはModel Context Protocolの略で、AIと外部システムをつなぐための共通規格です。公式の説明が、うまい例えを使っています。AIにとってのUSB-Cのようなもの。ファイル、データベース、業務ツール、検索を、決まった差し込み口から使えるようにするためのものです。

ただ、普通のMCPサーバーは「AI側から接続しに行くサーバー」です。WebMCPは向きが違います。ページを訪れたAIに対して、その場で使える道具を差し出す。どちらも道具を渡す話ですが、入口の位置が逆になります。

Cloudflare版WebMCPのポイントは、originを触らずに橋を追加すること

Cloudflareは、WebMCPを有効にすると、元のサイトのコードを変えずに小さな橋渡しのスクリプトを差し込めると説明しています。仕組みとしては、配信の途中でHTMLへスクリプトの読み込みを足す形です。静的なサイトでも、画面が動的に切り替わるタイプでも同じように使える。ここが発表の目玉でした。

「元のサイトを触らない」は、運営する側にとって大きい話です。CMSや既存システムを改修しなくても、配信側でAI向けの入口を足せる可能性がある。ただし、何を見せて、どの操作まで許すか。そこはサイト側の判断です。ここだけは、代わりに決めてくれる人がいません。

人間向けのWebページ
  ↓
Cloudflareのエッジでbridge scriptを追加
  ↓
ページ上にAIエージェント向けの道具リストを登録
  ↓
対応ブラウザエージェントが、スクレイピングではなく公式の道具として使う

最初のtool packsは、画像の由来確認と既存MCPサーバー連携

発表の時点では、2つの道具の束が示されています。1つはContent Credentials pack。画像に埋め込まれた来歴の情報など、そのコンテンツがどこから来たのかを確かめるための道具です。もう1つはSite MCP Server pack。すでにMCPサーバーを持っているサイトで、その道具をページ側から見つけやすくします。

見落とせないのは、これらが訪問者のブラウザの中で動くと説明されている点です。毎回Cloudflareのサーバーへ処理を投げるのではなく、開いているページに紐づいた道具を、その場で使う。Site MCP Server packは、訪問者のログイン状態を前提に動く構成として説明されています。

何がうれしいのか。AIに勝手に読ませるのではなく、公式の使い方を渡せる

AI検索やAIブラウザが増えるほど、「AIにどう読まれるか」は避けて通れなくなります。これまでのやり方では、AIが本文をコピーし、リンクやボタンの意味を推測し、サイトへ人も信用も返さないまま答えを作ってしまう場面がありました。

WebMCPの発想は、その関係を変えるものです。サイト側が、使ってほしい公式の道具を差し出す。AIは人間用の画面を無理にたどらず、その道具を呼ぶ。結果として、「何を読ませるか」「何を実行させるか」「どこで人へ戻すか」を、こちら側で決められます。

注意点：developer previewであり、権限設計はこれからが本番

現時点では、開発者向けのプレビューという位置づけです。ブラウザ側も、Chrome 146での実験的な提供と説明されています。今日オンにすれば全員に効く完成機能、という読み方は避けてください。

もう1つは、権限の設計です。CloudflareのMCPサーバー向けドキュメントでも、認証なしで使える構成と、認証を入れて権限に応じて呼べる道具を絞る構成が分けて説明されています。WebMCPでも同じです。読ませる情報、実行させる操作、記録、同意、そして取り消し。ここまで含めて決めます。

中小企業サイトは、今から「AI向けの案内板」を作る準備をするとよい

技術そのものは新しくても、考え方は今日から使えます。AIに読まれる前提のサイトでは、見た目の良さと同じくらい、迷わせない情報の並びが効いてきます。商品名、料金、対応エリア、予約の条件、キャンセル規定、問い合わせ先、よくある質問。誤解されにくい形へ整えておく。ここが最初の一歩です。

よくある質問

まとめ：WebMCPは、AI時代のWebサイトに「公式の使い方」を持たせる発想

• check_circleCloudflare WebMCPは、WebサイトにAIエージェント向けの道具リストを追加する考え方です。
• check_circleMCPがAIと外部システムの差し込み口なら、WebMCPはWebページ上のAI向け受付カウンターです。
• check_circleCloudflare版は、originを触らずにbridge scriptをエッジで追加できる点が特徴です。
• check_circledeveloper previewのため、現時点では完成機能ではなく、AI時代のWeb設計を先取りする入口として見るのが安全です。
• check_circle中小企業サイトでは、AIに読ませる情報と実行させる操作を分ける準備が重要です。

i-Styleでは、WebMCPを新機能というより、Webサイトの役割が変わるサインとして見ています。冒頭のように、AIが自社の料金を読み違える場面は、これから増えます。人に見やすいページと、AIに誤解されにくい入口。両方を持っているかどうかが、集客にも業務にも効いてきます。

参考にした情報

関連記事