この記事は、YouTube動画「話題の『WebMCP』を解説！AIスキル共有で凄く便利だった！」の内容をもとに、WebMCPの概要とWebサイト運用への影響をまとめたものです。動画の字幕を長く転載するのではなく、実務で判断しやすいように要点を再構成しています。
出典：KEITO【AI&WEB ch】「話題の『WebMCP』を解説！AIスキル共有で凄く便利だった！」
1. WebMCPは、Webサイトに「AI向けの窓口」を用意する考え方
WebMCPは、Webページが持っている機能を、AIエージェントが理解しやすい「ツール」として公開するためのブラウザーAPIです。たとえば、検索、予約、商品比較、カートへの追加などを、自然言語の説明と入力項目つきで登録します。
人間向けの画面をなくすのではありません。通常のボタンやフォームを残したまま、同じ処理をAIエージェントにも見つけてもらえるようにする、いわばプログレッシブ・エンハンスメントです。WebMCPの仕様は現在もドラフト段階なので、導入時は対応ブラウザーと最新の公式情報を確認する必要があります。
2. 画面を推測して操作する方法との違い
従来のブラウザー操作型のAIは、画面を読み取り、ボタンや入力欄の位置を推測しながらクリックや入力を繰り返します。人間の操作を再現できる一方、ページの変更に弱く、処理が遅くなったり、途中で誤操作したりする可能性があります。
WebMCPでは、サイト側が「このページで使える機能」を構造化して示します。AIは画面上の位置を当てるより先に、目的に合うツールと必要な入力項目を選べます。動画で使われているレストランの例に置き換えると、店内を歩き回って注文方法を探すのではなく、最初にメニューを受け取って注文するイメージです。
- 画面の座標ではなく、機能の名前と説明を手がかりにできる
- 入力項目や形式をスキーマで示せるため、必要な情報を整理しやすい
- 既存のWeb処理を再利用し、AI専用の別フローを増やしすぎずに済む
3. ECサイトや予約サイトで想定される使い方
動画では、中古カメラレンズのデモサイトを使い、検索、商品詳細、比較、カート操作などをAIから呼び出す流れが紹介されています。WebMCPを導入する場合、次のような機能を小さなツールに分けて設計できます。
- 検索：商品名、価格帯、カテゴリなどの条件から候補を返す
- 比較：選択した商品の仕様や価格差をまとめる
- 予約：空き枠を確認し、ユーザーが選んだ候補を予約フォームへ反映する
- カート：商品を追加するところまで進め、購入確定は人間の承認を待つ
重要なのは、AIに何でも自由に操作させることではありません。最初は検索や比較など、失敗時に戻しやすい読み取り・準備系のツールから始め、決済や削除のような不可逆操作には明示的な確認を挟む設計が安全です。
4. 動画で紹介されたCloudflareの導入イメージ
動画では、Cloudflare上でドメインやサイトを管理し、管理画面からWebMCPを有効化する流れが紹介されています。既存サイトをAIエージェント対応にする入口を、コード実装だけでなくインフラの管理画面にも置く、という分かりやすいデモです。
ただし、β機能や管理画面の項目、対象アカウント、対応するエージェントは変わる可能性があります。実際に導入する際は、動画の手順をそのまま本番へ適用するのではなく、Cloudflareやブラウザー側の最新ドキュメントと、自分のアカウントに表示される条件を確認してください。
5. AIスキルをWeb経由で共有する発想
動画のもう一つのポイントは、AIエージェント用のスキルをWeb上に置き、MCP経由で複数の人へ提供する発想です。ローカルファイルを一人ずつ配布する代わりに、スキルの更新をWeb側へ集約できます。
たとえば、社内の見積もりルールや図解作成の手順をツール化し、利用者はコネクターURLから接続する。提供側が単価表や手順を更新すれば、次回の利用から新しいルールを反映できます。動画では、見積もり作成や図解生成のスキルをこの形で共有する例が紹介されています。
一方で、共有用のエンドポイントは無条件に公開しないことが大切です。認証、利用者ごとの権限、入力データの扱い、実行ログ、レート制限、スキルのバージョン管理を先に決めておくと、便利さと管理可能性を両立しやすくなります。
6. 導入前に確認したい安全設計
WebMCPは、AIがサイト上の機能を実行するための入口を増やします。ツールの説明が曖昧だったり、権限確認が不足したりすると、誤操作やプロンプトインジェクションの影響を受ける可能性があります。最低限、次の項目を確認します。
- ツール名、説明、パラメータの意味を具体的に書き、入力値をサーバー側でも検証する
- 購入、送信、削除、公開などの重要操作は、ユーザーの最終確認を必須にする
- ログイン状態、権限、個人情報、決済情報をツールの境界で分離する
- WebMCPが使えない場合にも、人間向けの通常UIとアクセシブルなフォームが動くようにする
- 登録ツールの追加・変更・削除を記録し、意図しないツール差し替えを検知する
「AIに使われるサイト」を作ることは、ボタンを増やすことではありません。AIが安全に理解できる契約を、サイトの機能ごとに設計することです。
7. 多言語サイトにも関係する理由
多言語サイトでは、AIエージェントが取得する商品情報、料金、営業時間、問い合わせ先、予約条件も、ユーザーの言語と地域に合っている必要があります。画面の翻訳だけでなく、ツールの説明、入力項目、エラーメッセージ、返却するデータの言語まで設計対象になります。
たとえば、英語ユーザーに日本語の料金表を返したり、Sydney向けの営業時間ではなく別地域の情報を返したりすると、AIが正しく処理できてもユーザー体験は壊れます。言語・地域別URL、構造化データ、サイト内の用語をそろえたうえで、AI向けのツールにも同じルールを適用することが重要です。
まとめ：WebMCPは「AIに見せるサイト」から「AIが正しく使えるサイト」へ進む一歩
動画が伝えているWebMCPの面白さは、AIに画面を見せるだけでなく、サイト側から「ここで何ができるか」を明示できる点にあります。EC、予約、問い合わせ、社内の見積もりやスキル共有など、目的と権限を絞れば、AIエージェントとの接点をより速く、正確に設計できます。
ただし、WebMCPは発展中の仕様です。まずは検索、比較、下書き作成のような可逆的な処理で検証し、認証・承認・監査ログを整えてから本番の操作へ広げるのが現実的です。人間向けの分かりやすさ、多言語での正確さ、AI向けの構造化を同じサイト設計の中で考えることが、これからのWeb運用の基本になっていきます。
参考リンク
- KEITO【AI&WEB ch】「話題の『WebMCP』を解説！AIスキル共有で凄く便利だった！」 — 本記事で扱った動画。
- WebMCP Draft Community Group Report — WebMCPの仕様ドラフト。
- Chrome for Developers「WebMCP」 — APIと導入状況の公式ガイド。
- Cloudflare Blog「Browser Run: give your agents a browser」 — CloudflareにおけるBrowser RunとWebMCPの説明。