コンテンツにスキップ
AI Learning Playground
LinkedInX
日本語
日本語

WebMCP入門：AIとWebページが同じ画面で協働する仕組み

更新
Shiori
パステルのリング惑星と軌道を背景に「WebMCP入門：AIとWebページが同じ画面で協働する仕組み」を配置した記事カバー パステルのリング惑星と軌道を背景に「WebMCP入門：AIとWebページが同じ画面で協働する仕組み」を配置した記事カバー

この記事で学べること

  • 従来のブラウザ操作でAIが推測していた、ボタンや入力欄の意味
  • WebMCPがサイトの機能、必要な入力、返す結果をAIへ伝える仕組み
  • JavaScriptで機能を登録する方法と、HTMLフォームで伝える方法の違い
  • MCP、OpenAPI、A2A、NLWeb、従来のブラウザ操作との役割の違い
  • WebMCPの導入前に権限・確認・評価・代替操作を決める理由

WebMCPの役割：Webページの機能をAIへ伝える仕組み

WebMCPは、Webサイトが「商品を探す」「フォームへ入力する」といった機能をAIへ直接説明するための提案です。利用者が見ているページの中でAIも同じ機能を使うため、画面の見た目からボタンや入力欄の意味を毎回推測する必要を減らせます。人は同じ画面で入力内容や結果を確認できます。

提案しているのは、W3C（Web技術の標準化を進める団体）のWeb Machine Learning Community Groupです。本記事が参照する2026年9月17日版は、Community Group（技術の提案や議論を行うグループ）の草案であり、W3C標準として確定したものではありません。[1]

似た名前のMCP（AIアプリを外部のデータや機能につなぐ共通の通信ルール）との違いも、混同しやすい点です。[6] 本記事では、WebMCPの仕組み、関連技術との使い分け、安全に試すための条件を説明します。最後まで読むと、自分のサイトのどの機能でWebMCPを試せそうか判断できます。MCP自体の基本構造はMCP入門を参照してください。

従来のブラウザ操作との違い：画面の推測と機能の指定

従来のブラウザ操作AIは、画面画像やページ内部の構造を読み、人のようにクリックと文字入力を繰り返します。判断に使うのは、DOM（ページ内の見出しや入力欄などの配置・親子関係を表す構造）や、アクセシビリティツリー（画面読み上げなどに、ボタンや入力欄の役割を伝える情報）です。

この方式では、AIが「このボタンは購入」「この入力欄は姓」と推測します。画面が変わったり、よく似たボタンが並んだりすると、解釈を誤る余地があります。手順が長いほど、小さな誤りが後の操作へ影響します。Chromeの解説では、このような画面上の操作をactuation（クリックや文字入力による操作の実行）と呼んでいます。[2]

WebMCPでは、サイト側が機能名、必要な入力、実行する処理をまとめてAIへ伝えます。旅行サイトなら、「旅行を検索する」という機能をツール（AIが呼び出して使える機能）として登録する形です。AIは、その機能の説明を読み、指定された項目に情報を渡して検索を実行します。

図書館にたとえると、従来の操作は棚の形や案内板から貸出手順を推測する方法です。WebMCPは、図書館側が「本を探すには題名か著者名を渡す」と受付方法を示す考え方に近いものです。

機能の目的、受け取る情報、返す結果を決めた共通ルールを、技術的には「契約」と呼びます。法律上の契約ではありません。図書館の例は受付方法を示すためのたとえであり、WebMCPの操作が必ず成功することを意味するものでもありません。

ツールの処理は開いているページの中で動き、検索結果や入力内容を同じ画面へ反映できます。そのため、人はAIが何を入力し、どの結果を得たかを確認できます。

人とAIがページ、ログイン状態、入力内容を共有できることは、画面の外にあるAPI（プログラムから別の機能を呼び出すための接続点）だけを使う方式との大きな違いです。

WebMCPは、AIとの通信方法を一つに限定するものでもなく、MCPなどと併用できます。サイトが使える機能を示し、ブラウザがページの現在の状態や許可された操作範囲に応じて、AIとのやり取りを仲介します。[1]

曖昧な画面操作が契約レンズを通って明確な入力と結果へ変わり、AIと人が同じ画面で確認する場面

AIへ機能を伝える2つの方法：JavaScriptとHTMLフォーム

WebMCPで機能を伝える方法は2つあります。一つは、JavaScript（Webページの動作を記述するプログラミング言語）でアプリの処理を登録する方法です。もう一つは、HTMLフォーム（検索欄や問い合わせ欄など、Webページ上の入力・送信の仕組み）に説明を加える方法です。

伝え方何を使うか向く場面人向け画面との関係
JavaScriptで登録機能名、入力形式、実行処理を一組にする複数の画面状態を扱う検索、編集、既存アプリ処理実行結果を同じ画面へ返せる
HTMLフォームで宣言既存フォームと入力欄に説明を加える検索、問い合わせ、絞り込みなどの簡単な機能WebMCP非対応でも通常のフォームとして残る
この表は横方向にスクロールできます。キーボードでは、表にフォーカスして左右の矢印キーを使用してください。

JavaScriptを使う方法では、開発者がページ上の処理をツールとして登録します。AIはツールの名前と入力形式を読み、項目ごとに整理した情報を渡します。草案には、ツールの登録、一覧の取得、実行、登録解除、中止の仕組みが含まれています。[3]

HTMLフォームを使う方法では、検索欄や問い合わせ欄に「このフォームは何をするか」「各入力は何を意味するか」という説明を加えます。ブラウザがそれを読み、AIへ必要な入力を伝えます。最終送信を人へ任せる構成も選べます。[4]

最初は、既存の画面を保ったまま、AIに使わせる機能を一つ選ぶと考えやすくなります。小さな検索フォームならHTMLに説明を加える方法、画面の選択状態などと深く結び付く処理ならJavaScriptで登録する方法が候補です。API名を暗記しなくても、この違いを押さえれば検討を始められます。

WebMCP対応のために、AI専用の別画面を用意する必要はありません。人が理解できる検索欄や確認画面を土台に、同じ機能をAIにも明確に説明する設計が理想です。

AIが運ぶアプリ処理と人が導くフォームが、異なるランプから同じWeb画面へ合流する場面

MCP・OpenAPI・A2A・NLWebとの役割の違い

関連技術は、「どこにある機能を使うか」「ページを閉じても使うか」「誰と誰をつなぐか」で比べると選びやすくなります。WebMCPが開いているページの操作を扱うのに対し、MCPはAIと外部の機能、A2AはAI同士の連携を扱います。[5][6][8]

比較する技術の名称と役割は、次のとおりです。

  • OpenAPI（Web APIの使い方を記述する仕様）： 呼び出し先や必要な入力、返す結果をプログラムが読める形で示します。[7]
  • A2A（独立したAI同士の通信ルール）： 別のAIに仕事を依頼し、結果を受け渡すために使います。[8]
  • NLWeb（サイトの情報を自然な言葉で質問・検索できるようにする構想）： 商品やレシピなどを会話で探すために使います。[9]
技術主に接続する対象得意な用途WebMCPとの違い
WebMCP今開いているWebページと、そのページを操作するAI人とAIが同じ画面とログイン状態で進める操作ページを閉じると、公開していた機能は使えなくなる
MCPAIアプリと、画面の外にあるデータや機能複数アプリから使う処理、画面を閉じても続く処理開いているページの状態を前提としない
OpenAPIWeb APIを提供する側と利用する側APIの場所、入力、応答、認証を機械が読める形で説明するWebMCPの内側から呼ぶ既存APIにも使える
A2A独立したAI同士AI同士が仕事を見つけ、任せ、結果を返すページ機能ではなくAI同士の連携を扱う
NLWebWebサイトの掲載情報と自然言語の質問商品、レシピ、場所などを会話で探す開いている画面の操作より、サイト内容への質問が中心
従来のブラウザ操作人向け画面と自動操作プログラムWebMCP非対応サイトを含む幅広い操作対応範囲は広いが、画面の意味を推測する
この表は横方向にスクロールできます。キーボードでは、表にフォーカスして左右の矢印キーを使用してください。

Chromeの比較でも、MCPはサイトのサーバー（データの保存や処理を担うコンピューター）へ継続して接続する方法、WebMCPは開いているタブに結び付く一時的な機能として整理されています。[5] OpenAPIは、APIの呼び出し先や必要な入力、返ってくる結果、認証方法（利用者などの身元を確かめる方法）を記述します。[7]

A2Aの公式文書では、MCPのagent-to-tool（AIとツールの接続）と、A2Aのagent-to-agent（AI同士の接続）は補完関係にあると説明されています。[8] NLWebは、Schema.org（商品やレシピなどの情報を共通の項目で記述するための語彙）などを利用して、サイトの情報に自然な言葉で質問できるようにします。[9]

商品情報を会話で探すならNLWeb、開いている商品ページの絞り込みを操作するならWebMCP、サイトを閉じても注文履歴へ接続するならMCPや通常のAPIが候補です。どの機能を、どの場面で使いたいかに応じて組み合わせる考え方です。

開いたページを中心とする同心円の境界に、外部ツール、API、別のAI、サイト情報、画面操作が異なる方法で接続する断面

安全な導入に必要な権限・確認・評価・代替操作

機能名と入力が決まっていれば、AIの推測は減ります。しかし、安全性が自動的に保証されるわけではありません。ページは利用者のログイン状態を持つため、意図しない購入、設定変更、情報の取り出しにもつながり得ます。間接プロンプトインジェクション（外部の文章に命令を埋め込み、AIを意図しない動作へ誘導する攻撃）にも注意が必要です。AIがその命令を、利用者からの指示と誤認するおそれがあります。

Chromeの暫定的な指針では、ツールが読み取り専用（情報を取得するだけで、保存された内容を変更しない操作）か、信頼できない内容を返す可能性があるか、影響の大きい操作かをAIへ伝えられます。[10] ただし、こうした補足情報だけでは、本人確認や業務上の許可を代替できません。

最初の検証では、次の条件を満たすかを確認します。

確認する条件最初の検証で求める設計満たせない場合
変更の影響検索・表示・下書きなど、読み取り専用か取り消せる操作から始める購入、送信、削除は公開しない
本人確認と権限サーバー側で「誰が何をしてよいか」を確認するログイン済みだけを許可の根拠にしない
人の確認実行内容、対象、金額、送信先を確定前に見せる影響の大きい操作を自動確定しない
入力と出力項目と形式を狭くし、必要な結果だけを返す自由記述やページ全文を無条件で扱わない
評価ツールの選択、入力、実行順序、途中で失敗した場合の停止を確かめる一度の成功デモで本番判断しない
代替操作WebMCPがなくても人が同じ目的を達成できる画面を残す重要操作を一つの対応ブラウザだけに依存させない
この表は横方向にスクロールできます。キーボードでは、表にフォーカスして左右の矢印キーを使用してください。

テストでは、プログラムの処理とAIの判断を分けて確認します。処理そのものは、決まった入力に対して期待どおりの結果が出るかを検査します。AIについては、正しい機能を選ぶか、入力や実行順序が適切か、途中で失敗したときに安全に止まるかを評価します。

Chromeの評価ガイドも、通常のテストと、AIの判断が関わる部分の確率的な評価（結果が毎回同じとは限らないため、複数の実行結果から確かめる方法）を分けています。[11]

一つの操作を権限境界、人の確認、AIの評価記録が囲み、別の人向け経路も同じ安全な結果へ届く断面

2026年9月時点の仕様・ブラウザ対応・試作例

2026年9月時点のWebMCPは、仕様案、対応ブラウザ、試作品、商用導入を分けて見る必要があります。一般利用者が設定なしで広く使える標準ではなく、参加登録や開発者向け設定を使う検証段階です。

  • 仕様： Community Group草案であり、APIや安全設計は変わる可能性があります。[1]
  • Chrome： Chrome 149から、origin trial（登録したサイトで新機能を期間限定で試す仕組み）が案内されています。開発者自身の端末で実験設定を使う方法もあります。[2]
  • 試作例： 旅行検索、商品構成、注文追跡、編集、ブラウザ内データ分析などが公開されています。[12][13]
  • 周辺サービス： Cloudflareは、既存サイトにWebMCPの仕組みを追加するdeveloper preview（開発者向けの試験提供）を発表しています。[14]

これらは「何ができそうか」を示しますが、同じ成功率や効果で本番運用できる証明ではありません。現時点で相性がよいのは、人がページを開いたまま結果を目で確認する検索、絞り込み、診断、下書きなどです。

検証では「機能が一度動いたか」だけでなく、人が結果を理解できたか、誤った入力を止められたか、非対応環境でも同じ目的を達成できたかを記録します。

実用化の判断には、機能の数だけでなく、異なるブラウザでも許可する操作の範囲や人による確認方法をそろえられるか、という視点が必要です。

現在の機能と実行条件の違いからは、WebMCPをMCPやAPIの代替とせず、役割を分けて組み合わせる構成が考えられます。こうした構成が今後どこまで普及するかは、現時点の仕様だけでは判断できません。WebMCPは開いている画面での操作と人による確認を扱い、MCPやAPIは保存されたデータへのアクセスや長時間の処理を担当できます。

最初の一歩は、情報を読むだけで、結果が画面に現れ、失敗しても影響が残らない機能を一つ選ぶことです。人が通常どおり操作できる画面を残したうえで、現在の草案でAIにどこまで機能を公開できるかを確認します。検証時には、AIに提示した機能と実行結果を記録します。サイトを閉じた後も続く処理が必要なら、WebMCPではなくMCPや通常のAPIから考えます。

AIの読み取り専用実験から人の証拠確認、安定した境界へ3段の学習テラスが上がる場面

まとめ：画面を共有するAI操作と、読み取り専用機能からの検証

WebMCPの特徴は、サイトがAIに使える機能を直接伝え、人が同じ画面で操作内容と結果を確認できることです。ページを閉じた後も使うデータや長時間の処理にはMCPやAPIを組み合わせることで、それぞれの役割を分けられます。

2026年9月時点では仕様や対応環境が変わり得るため、最初の検証には、結果が画面に現れ、失敗しても影響が残らない読み取り専用の機能が適しています。検証の判断材料は、AIが操作できたかに加え、人が結果を理解でき、権限や入力の誤りを検出でき、非対応環境でも通常の操作を続けられるかです。

本記事は一般的な情報整理であり、法的助言ではありません。実務判断は専門家に確認してください。

参考文献

  1. W3C Web Machine Learning Community Group, WebMCP, 2026年9月17日
  2. Chrome for Developers, WebMCP, 2026年8月7日更新
  3. Chrome for Developers, Imperative API, 2026年9月11日更新
  4. Chrome for Developers, Declarative API, 2026年5月18日
  5. Chrome for Developers, When to use WebMCP and MCP, 2026年5月19日更新
  6. Model Context Protocol, Specification (2026-07-28), 2026年7月28日
  7. OpenAPI Initiative, Introduction
  8. A2A Protocol, A2A Protocol
  9. NLWeb, What is NLWeb?
  10. Chrome for Developers, WebMCP tool security, 2026年9月1日更新
  11. Chrome for Developers, Test WebMCP with Evals, 2026年5月28日更新
  12. Chrome for Developers, 15 updates from Google I/O 2026, 2026年5月19日
  13. OpenAI, WebMCP Challenge
  14. Cloudflare, Give any website a WebMCP interface, 2026年8月6日

最新のリリースやアップデートの詳細は、公式サイト・公式ドキュメントを確認してください。

タグ: