目次

目次

WebMCPがもたらすWebサイトの変化 〜人間向けから人間向け+AI向けへ〜

アバター画像
岩田
アバター画像
岩田
最終更新日2026/03/24 投稿日2026/03/24

概要

Web操作を通じた情報収集をAIが行えるようになり、そのユースケースは急速に増えています。
一方で、従来のWebサイトは人間向けに作られているため、AIがUIやDOMを推測して操作すると失敗しやすく、不安定さが課題です。
そこで、WebとAIの連携をより安定させる技術である WebMCP をGoogleやMicrosoft、W3Cを中心に議論・開発していることを知り、調査しました。

WebMCPについて

WebMCPとは

Webサイトが、Web上の機能をAIにツールとして公開する仕組みです。
WebサイトがAIにツールを公開することで、AIが画面やDOMから推測して操作することが減り、ツールを用いて高精度なサイト操作を実現できることが大きな特徴です。

WebMCPによって、AIがWebサイトと標準的にやり取りできるようになります。

WebMCPが登場した背景

これまでWebサイトは人間向けに作られてきましたが、近年はAIがWebを用いて情報収集やタスク処理を担うことも一般的になり、Webサイトは人間だけが利用するものではなくなってきています。 人間用に作られたWebサイトはAIには理解しにくい面があり、操作中にエラーが起きるといった不安定さが拭えません。

そのためWebサイトには、人間向けのUIとは別にAIに対しても「どの機能をどう呼べばよいか」を明示的に提供できる仕組みが求められるようになりました。 こうした背景のもと、新しく登場した技術がWebMCPです。

Webサイトは人間向けから 人間向け+AI向け に生まれ変わろうとしているのです。

スクリーンショット 2026-03-05 18.32.17.png

WebMCPはAIエージェントのブラウザ操作と何が違うのか

大きな違いは、AIがWeb上でタスクを実行する際の安定性です。

従来のAIによるブラウザ操作は、画面やDOM(HTML/UI要素)から操作手順を推測して処理するためサイト構造に依存しやすく、見た目やDOM構造が変わると正しく動作しなくなるという課題があります。
AIは人間ほど柔軟にUIの変化に対応できないのです。

一方WebMCPは、Webサイトが定義した操作(ツール)に沿って処理を行うため、UI変更の影響を受けにくく、AIの操作をより安定させることができます。

WebサイトをWebMCPに対応させるには?

2種類の方法で実装することができます。

宣言型API

HTMLフォームで定義し、ツール名と説明を追加して実装します。
フォーム中心の定型操作のような簡単な操作を扱うのに適しています。

<!-- コードはイメージになります -->
<form
  action="/signup"
  method="post"
  toolname="register_member"
  tooldescription="会員登録を行う"
>
  <input
    type="email"
    name="email"
    required
    autocomplete="email"
    toolparamdescription="登録するメールアドレス"
  />
  <input
    type="password"
    name="password"
    required
    minlength="8"
    autocomplete="password"
    toolparamdescription="登録するパスワード(8文字以上)"
  />
  <button type="submit">会員登録</button>
</form>

向いているケース

  • 会員登録
  • ログイン
  • 住所入力

命令型API

JavaScriptで実装します。
「〇〇から△△の操作」のような複雑な操作を扱うのに適しています。

// コードはイメージになります
navigator.modelContext.registerTool({
  name: "search_products",
  description: "キーワードで商品を検索する",
  inputSchema: {
    type: "object",
    properties: {
      query: { type: "string", description: "検索キーワード" }
    },
    required: ["query"]
  },
  async execute(input) {
    const res = await fetch(`/api/products?query=${encodeURIComponent(input.query)}`);
    const products = await res.json();
    return {
      items: products.filter((p) => p.inStock)
    };
  }
});

向いているケース

  • 条件付きの商品検索
  • カート投入〜決済前確認のような多段階フロー

使い分けの基準

HTMLで完結するなら宣言型APIで実装、複雑なやり取りが必要なときは命令型APIで実装するのが良いでしょう。

WebMCPを試したい方へ

WebMCPを試せるOSSとして公開されているwebmcp.devでWebMCPを体験することができます。
Googleの早期プレビュープログラムとは異なりますのでご注意ください。

具体的な方法については割愛しますが、興味がある方は以下2つのURLを参考に試してみてください。
WebMCP Example
jasonjmcghee / WebMCP

デモ動画の視聴のみであれば、以下のURLから可能です。
jasonjmcghee / WebMCP Full Demo (3 minutes)

WebMCPの最新動向

現在は、まだ関係者によって議論・開発が進められている段階です。
2026/2/10には、Googleによるプレビューのリリースがあり、実装面での進捗も報告されています。

今後もWebMCPの動向に注目していきたいと思います。

参考文献

アバター画像

岩田

目次