AIとウェブサイトがもっと仲良くなる魔法：初心者でもわかるWebMCP完全入門ガイド

AI
この記事は約24分で読めます。

AIとウェブサイトがもっと仲良くなる魔法：初心者でもわかるWebMCP完全入門ガイドのPodcast

下記のPodcastは、Geminiで作成しました。

はじめに：AIエージェントが直面する「ウェブの壁」

現在のインターネットは、人間が目で見て理解し、マウスや指で操作することを前提に設計されています。色鮮やかなバナー、直感的なドロップダウンメニュー、そして複雑なレイアウトはすべて、人間の認知能力に合わせて最適化されてきました [1]。

しかし、今、私たちのウェブサイトを訪れる新しい「お客様」が登場しています。それが、自律的にタスクをこなす「AIエージェント」です。これまで、AIエージェントがウェブサイトを操作するためには、人間と同じように画面のスクリーンショットを撮り、それを画像解析モデル（マルチモーダルLLM）に読み込ませて、「どのボタンが『購入』ボタンか」を推測させる必要がありました [2]。

この方法は「抽出と推論（Extraction and Inference）」と呼ばれますが、非常に大きな課題を抱えています [3]。まず、このプロセスは驚くほど低速です。高解像度の画像を何度もAIに送信し、解析結果を待つ必要があるため、一つのアクションを完了するまでに数十秒かかることも珍しくありません [4]。さらに、サイトのデザインが少し変わったり、ボタンの色が変わったりしただけで、AIは途端に「何をしていいかわからない」状態に陥ります [5]。これは、AIが「見た目（プレゼンテーション層）」という不安定な情報に依存しているためです [6]。

こうした「ウェブの壁」を打ち破り、AIとウェブサイトが直接、正確に、そして瞬時にコミュニケーションを取れるようにするために開発されたのが、WebMCP（Web Model Context Protocol）です [7]。WebMCPは、GoogleやMicrosoftのエンジニアが中心となって提案し、現在はW3Cのコミュニティグループで標準化が進められている新しい技術です [8]。この記事では、この魔法のような新技術について、初心者の方にもわかりやすく丁寧に解説していきます。

WebMCPとは何か：ウェブに加わる「AI専用のメニュー表」

WebMCPを最もシンプルに表現するなら、「ウェブサイトがAIエージェントに対して提供する『構造化された操作メニュー』」と言えます [9]。人間向けのウェブサイトが「視覚的なインターフェース」であるのに対し、WebMCPは「プログラム的なインターフェース」をウェブサイトに付け加えます [10]。

開発者が自分のサイトにWebMCPを導入すると、AIエージェントはサイトのデザインを解析する手間を省き、サイト側が「私はこんなことができます」と宣言した「ツール（機能）」のリストを直接読み取ることができるようになります [11]。

例えば、航空券の予約サイトを考えてみましょう。これまでのAIは、カレンダーから日付を選び、出発地を入力し、検索ボタンを探すという一連の動作を「推測」しながら行っていました。しかし、WebMCPに対応したサイトであれば、サイト側が「航空券検索（search_flights）」というツールを公開し、そこに必要な入力項目（日付、出発地、到着地）を定義しておきます [12]。AIはこのツールを見つけると、中身を推測することなく、直接そのツールを使って必要な情報を取得できるのです [13]。

MCPとWebMCPの決定的な違い

「WebMCP」という名前を聞くと、Anthropic社が発表した「MCP（Model Context Protocol）」を思い出す方もいるかもしれません。両者は名前もコンセプトも似ていますが、活躍する場所が異なります [14]。

MCPは主に「バックエンド（サーバー側）」のための仕組みです [15]。会社のデータベースや、ローカルにあるファイル、クラウド上のサービスなどをAIに接続する際に使われます [16]。一方で、WebMCPは「フロントエンド（ブラウザ側）」、つまり私たちが普段見ているウェブサイトそのものに特化した仕組みです [17]。

以下の表は、MCPとWebMCPの主な違いをまとめたものです。

特徴MCP (Model Context Protocol)WebMCP (Web Model Context Protocol)
主な実行場所バックエンドサーバー、ローカルPCウェブブラウザのタブ内（クライアント側）
接続対象データベース、API、ファイルシステムウェブページ内の機能、DOM要素、セッション
持続性永続的（サーバーが動いている限り有効）一時的（タブを閉じるとアクセス不可）
認証方式APIキー、OAuthなどが必要ユーザーがログイン済みのセッションを利用
UIとの関係UIを持たないバックグラウンド処理ブラウザ上のUIとリアルタイムに連動

MCPとWebMCPはライバルではなく、協力関係にあります [18]。例えば、サービス全体の重たいデータ処理はバックエンドのMCPで行い、ユーザーが直接目にするブラウザ上の操作はWebMCPで行うといった「ハイブリッド」な使い方が、最も効率的なAI体験を生み出します [19]。

WebMCPを導入する5つの大きなメリット

なぜ今、多くのウェブ開発者や企業がWebMCPに注目しているのでしょうか。それには、従来の自動化技術（スクレイピングやRPA）では決して得られなかった5つの大きなメリットがあるからです [20]。

1. 壊れにくい「信頼性」の確保

従来のAIエージェントは、サイトのHTML構造が変わっただけで動かなくなる「脆弱な自動化」に依存していました [21]。ボタンのIDが変わったり、配置が少しずれたりするだけで、プログラムは壊れてしまいます。しかし、WebMCPはデザインではなく「アプリケーションのロジック」に直接繋がります [22]。そのため、サイトの見た目を大幅にリニューアルしても、公開している「ツール」さえ変わらなければ、AIエージェントは引き続き正確に機能し続けます [23]。

2. 劇的な「スピードアップ」とコスト削減

スクリーンショットをAIに送って解析させる方法は、膨大な「トークン（AIが処理する情報の単位）」を消費し、通信時間もかかります [24]。WebMCPはブラウザ内部の高速な通信システムを利用するため、AIとのやり取りはほぼ瞬時に完了します [25]。これはユーザー体験を向上させるだけでなく、AI利用にかかるコストを大幅に削減することにも繋がります [26]。

3. ログイン状態の「シームレスな共有」

通常、バックエンドのAIがユーザーのデータにアクセスするには、複雑なログイン処理やAPIキーの設定が必要です [27]。しかし、WebMCPは「ユーザーが今開いているタブ」の中で動作します [28]。つまり、ユーザーがすでにログインしていれば、AIエージェントもそのログイン状態（セッションやクッキー）をそのまま使って、本人の代わりに安全にアクションを実行できるのです [29]。

4. 既存コードを「そのまま再利用」できる手軽さ

WebMCPのために新しいサーバーを立てたり、全く新しい言語でプログラムを書き直したりする必要はありません [30]。現在使っているJavaScriptの関数に、AI用の「説明文」を少し加えるだけでツールとして公開できます [31]。開発者にとって、これまでの投資を無駄にすることなく最新のAI対応ができる点は非常に大きな魅力です [32]。

5. 誰にでも優しい「アクセシビリティ」の向上

WebMCPは、視覚障害を持つ方などが使う「支援技術（スクリーンリーダーなど）」にとって革新的な技術です [33]。画面上の細かいパーツを一つずつ読み上げるのではなく、「商品をカートに入れる」といった高度な目的（アクション）を直接AIや支援技術に伝えることができるようになるため、ウェブの使い勝手が飛躍的に向上します [34]。

WebMCPの心臓部：3つの基本概念

WebMCPがどのようにしてAIとウェブサイトを繋いでいるのか、その仕組みを支える3つの柱について解説します [35]。

発見 (Discovery)

AIエージェントがウェブサイトを訪れたとき、まず最初に行うのが「何ができるかを探す」ことです [36]。WebMCPに対応したサイトでは、ブラウザの `navigator.modelContext` という特別なオブジェクトの中に、利用可能なツールのリストが格納されています [37]。AIエージェントはこのリストを読み取るだけで、そのページで何ができるかを即座に理解します [38]。

スキーマ (JSON Schema)

各ツールには、そのツールの「使い方」を詳しく記した仕様書がついています [39]。これを「入力スキーマ」と呼びます [40]。例えば、「予約ツール」であれば、「日付は文字列で『YYYY-MM-DD』形式で入力してください」「人数は整数で、1名から10名までです」といった厳密なルールが定義されています [41]。AIはこのスキーマを読み、ユーザーの自然言語の依頼を正しいデータ形式に変換してツールを呼び出します [42]。

状態 (State)

ウェブサイトは生き物のように変化します。ユーザーがログインしているかどうか、どのページを見ているかによって、できることは変わります [43]。WebMCPでは、サイトの状態に合わせてツールを「登録」したり「解除」したりすることができます [44]。ショッピングカートに商品が入っていないときは「決済ツール」を隠し、商品が入った瞬間に「決済ツール」を表示させるといった柔軟な制御が可能です [45]。

初心者向け：WebMCPを実装する2つの方法

WebMCPの実装には、大きく分けて「宣言的API」と「命令的API」の2種類があります [46]。自分のスキルやサイトの目的に合わせて選ぶことができます。

1. 宣言的API (Declarative API)

プログラミングの経験が少なくても、HTMLタグに特定の「属性」を書き加えるだけで実装できる方法です [47]。既存のフォーム（検索窓や申し込みフォーム）をそのままAI対応にすることができます [48]。主な属性は以下の通りです。

`toolname`: ツールの名前（AIが識別しやすい英単語）

`tooldescription`: ツールの説明（AIが「いつ、何のために使うか」を理解できるように自然な日本語で書く）

`toolautosubmit`: 自動送信の有無（"true"にするとAIが自動で送信します）

`toolparamdescription`: 入力項目の説明（各入力欄に「何を入れるか」の説明を添える）

HTMLの例：

html

<form action="/order" method="POST" 
      toolname="order_pizza" 
      tooldescription="ピザの種類とサイズを選んで注文します">
  
  <input type="text" name="pizza_type" required 
         toolparamdescription="注文したいピザの名前（例：マルゲリータ）" />
  
  <select name="size" toolparamdescription="ピザのサイズ">
    <option value="S">Sサイズ</option>
    <option value="M">Mサイズ</option>
    <option value="L">Lサイズ</option>
  </select>
  
  <button type="submit">注文を確定する</button>
</form>

2. 命令的API (Imperative API)

JavaScriptを使って、より複雑で高度な機能を定義する方法です [49]。サイト独自のロジックや、複数のステップが必要な操作をAIに公開する場合に適しています [50]。

JavaScriptの例：

javascript

// navigator.modelContext.registerTool を使って登録します
navigator.modelContext.registerTool({
  name: "get_stock_status",
  description: "商品のIDを受け取り、現在の在庫数と最短お届け日を返します",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string", description: "商品管理番号" }
    },
    required: ["productId"]
  },
  execute: async (input) => {
    // ここで在庫確認のプログラムを走らせる
    const status = await inventorySystem.check(input.productId);
    return {
      available: status.count > 0,
      stockCount: status.count,
      eta: status.deliveryDate
    };
  }
});

命令的APIを使えば、ウェブサイト内のあらゆるJavaScript関数をAIのための「ツール」として再定義できます [51]。

セキュリティとプライバシー：人間が常に主役であるために

AIがサイトを操作すると聞くと、「勝手にお金を使われたりしないか？」「個人情報が盗まれないか？」と心配になるかもしれません。WebMCPはその懸念に応えるため、「Human-in-the-loop（人間が必ず介入する）」という設計思想を貫いています [52]。

ユーザーの同意が必須: AIがWebMCPのツールを呼び出そうとすると、ブラウザが「このAIエージェントが『注文』ツールを使おうとしています。よろしいですか？」といった確認をユーザーに求めます [53]。ユーザーの明示的な許可がない限り、AIが勝手に決済を行ったり、重要なデータを書き換えたりすることはありません [54]。

制御の主体はウェブサイト側: どの機能をAIに公開するかを決めるのは、サイトの開発者です [55]。安全な「検索」機能だけを公開し、危険な「全データ削除」機能などは公開しないという選択が明確に行えます [56]。また、ツールが実行されるのはあくまでブラウザの中（サイトと同じ場所）なので、ブラウザが元々持っている強力なセキュリティ機能（同一オリジンポリシーなど）によって守られています [57]。

requestUserInteraction による安全な対話: プログラム（命令的API）の途中で、ユーザーに選択を迫ることもできます [58]。例えば、削除ツールの中で「本当にこのファイルを削除して良いですか？」という独自の確認画面を出し、ユーザーが「はい」を押すまで処理をストップさせるといった制御が可能です [59]。

WebMCPの具体的なユースケース

WebMCPが導入されることで、私たちのインターネット体験はどう変わるのでしょうか。いくつかの具体的な場面を想像してみましょう [60]。

カスタマーサポートの自動化: 複雑な技術トラブルの際、AIがユーザーに代わってサポートサイトの診断ツールを実行し、現在のPCの状態やエラーログを正確にサポート担当者に伝えることができます [61]。ユーザーが難しい専門用語を覚える必要はありません。

ショッピングのパーソナライズ: 「私の予算に合う、赤いドレスをいくつかのショップから探して、それぞれの在庫状況を教えて」とAIに頼むことができます [62]。各ショップがWebMCPに対応していれば、AIは瞬時に複数のサイトから正確な在庫と価格をリストアップし、ユーザーが選んだものをカートに入れるところまでを数秒で完了させます [63]。

B2B（企業間）業務の効率化: 企業のダッシュボードには、非常に多くのボタンやフィルタがあり、使いこなすのが大変です [64]。WebMCPを使えば、「Q1の売上で、前年比20%以上の顧客だけを抽出して」と話しかけるだけで、AIが背後で適切なフィルタ操作やデータ抽出を代行してくれます [65]。

WebMCPの最新動向と今後の展望

WebMCPは現在、非常にエキサイティングな進化の過程にあります [66]。

2026年ロードマップの注目点

2026年のロードマップでは、単なるデータのやり取りだけでなく、AIがウェブサイトの一部として動作するための機能が強化される予定です [67]。

PWA（Progressive Web Apps）との統合: オフライン環境でもAIツールが動くようになります [68]。

サービスワーカーの活用: ユーザーがサイトを開いていない時でも、AIがバックグラウンドでタスク（新着情報のチェックなど）をこなせるようにする研究が進んでいます [69]。

より豊かなUI要素: AIとのチャットの中で、サイト独自のグラフやフォームを直接表示・操作できる「MCP Apps」などの拡張機能も登場しています [70]。

開発者コミュニティの広がり

WebMCPを支援するエコシステムも急速に育っています [71]。ブラウザ内でフル機能のPostgreSQL（データベース）を動かす「PGlite」と連携することで、AIが生成したデータをブラウザ内に保存し、次回のアクセス時に活用するといった高度な使い方も提案されています [72]。また、既存のウェブサイトに簡単にWebMCPを導入するためのSDK（ソフトウェア開発キット）も、TypeScriptなどの主要な言語で提供され始めています [73]。

実装に役立つヒントとベストプラクティス

これからWebMCPを書きたいと考えている方のために、Googleなどの公式ドキュメントが推奨している「上手に書くコツ」をまとめました [74]。

明確なアクション動詞を使う: ツールの名前（name）は、AIが迷わないように具体的な動詞で始めましょう [75]。

❌ `data_process`（曖昧）

✅ `calculate_shipping_cost`（明確）

AIに計算させない: AIは複雑な計算やデータの加工が苦手な場合があります [76]。AIから「生のデータ（原材料）」を受け取り、ウェブサイト側のJavaScript（プログラム）で正確に処理して結果を返すように設計するのが、信頼性を高めるコツです [77]。

説明文（Description）を丁寧に書く: AIにとって、ツールの説明文は「唯一の道しるべ」です [78]。単に「検索します」と書くのではなく、「製品カタログの中から、商品名やカテゴリー、価格帯を指定して一致するものを最大10件返します」といった具合に、AIがそのツールの「得意分野」を理解できるように詳しく記述しましょう [79]。

終わりに：AI時代の「おもてなし」としてのWebMCP

WebMCPは、単なる新しい技術規格ではありません。それは、人間とAIが共にウェブという舞台で活躍するための「新しいルール」です [80]。これまでのウェブは、AIを「画面を勝手にスクレイピングしてくる迷惑な存在」として扱うか、あるいは無理やり人間に見せかけて操作させるか、という極端な二択を迫られてきました [81]。

しかし、WebMCPが登場したことで、ウェブサイト側からAIに対して「どうぞこのツールを自由に使ってください」と手を差し伸べることができるようになります [82]。AIエージェントにとって使いやすいサイトを作ることは、巡り巡って、そのサイトを利用する人間のユーザーに、かつてないほどの利便性と快適さをもたらすことになります [83]。AI時代のウェブサイト制作において、WebMCPは最も強力な「おもてなし」の手段となるでしょう。まずは身近なフォームから、AIへの第一歩を刻んでみませんか？

参考資料

1. WebMCP: MCP for the web, https://developer.chrome.com/blog/webmcp-mcp-usage?hl=ja

2. Model Context Protocol: TypeScript SDKs for the Agentic AI, https://www.speakeasy.com/blog/release-model-context-protocol

3. @modelcontextprotocol/sdk - npm, https://www.npmjs.com/package/@modelcontextprotocol/sdk

4. Model Context Protocol TypeScript SDK - GitHub, https://github.com/modelcontextprotocol/typescript-sdk

5. From Zero to MCP: Building a Model Context Protocol Server with TypeScript, https://dev.to/glaucia86/from-zero-to-mcp-building-a-model-context-protocol-server-with-typescript-and-the-star-wars-api-1kdi

6. Develop with MCP - SDKs, https://modelcontextprotocol.io/docs/sdk

7. WebMCP - Integrated AI for your website, https://webmcp.dev/

8. WebMCP-org/webmcp-sh: A modern web-based MCP playground, https://github.com/WebMCP-org/webmcp-sh

9. WebMCP-org Overview - GitHub, https://github.com/WebMCP-org

10. Web pages that use WebMCP - GitHub, https://github.com/webmachinelearning/webmcp

11. WebMCP Shortname: webmcp Level: None Status: CG-DRAFT, https://github.com/webmachinelearning/webmcp/blob/main/index.bs

12. SSE vs WebSockets: Choosing the Right Real-Time Communication, https://oneuptime.com/blog/post/2026-01-27-sse-vs-websockets/

13. WebSocket vs SSE: Practical Differences, https://www.svix.com/resources/faq/websocket-vs-sse/

14. SSE vs. Streamable HTTP in Modal Context Protocol, https://brightdata.com/blog/ai/sse-vs-streamable-http

15. Arguments against using the WebSocket protocol in MCP, https://news.ycombinator.com/item?id=43948753

16. Supergateway v2.4: Run MCP STDIO Servers over WebSockets, https://www.reddit.com/r/modelcontextprotocol/comments/1jgvtkg/supergateway_v24_run_mcp_stdio_servers_over/

17. The Agentic Web is Here: How WebMCP Transforms Websites into AI Toolkits, https://medium.com/google-cloud/the-agentic-web-is-here-how-webmcp-transforms-websites-into-ai-toolkits-be5453f4364e

18. WebMCP: The Complete Guide to Making Your Website AI Agent Ready, https://atalupadhyay.wordpress.com/2026/03/06/%F0%9F%8C%90webmcp-the-complete-guide-to-making-your-website-ai-agent-ready/

19. How to Make Your Website Agent-Ready With WebMCP: A Practical Guide, https://www.ivanturkovic.com/2026/02/23/webmcp-tutorial-make-website-agent-ready/

20. WebMCPを活用した具体的なユースケース（宿泊予約・在庫比較）, https://note.com/sakaishun/n/nc8a68dbabcd4

21. MCP C# SDK 1.0 Released with Specification Updates, https://www.i-programmer.info/news/89-net/18731-mcp-c-sdk-10-released.html

22. Model Context Protocol: A New Universal Standard for AI, https://medium.com/@adarshakarki/a-new-universal-standard-for-ai-is-quietly-forming-model-context-protocol-mcp-aa920e7bf3fc

23. Model Context Protocol Roadmap 2026: Production Challenges, https://thenewstack.io/model-context-protocol-roadmap-2026/

24. The 2026 MCP Roadmap: Stable Specs and Extensions, https://blog.modelcontextprotocol.io/

25. Draft: Model Context Protocol and Agent Skills over Media over QUIC Transport, https://datatracker.ietf.org/doc/draft-jennings-ai-mcp-over-moq/

26. Web Model Context Protocol: Agents are Learning to Browse Better, https://abvijaykumar.medium.com/webmcp-web-model-context-protocol-agents-are-learning-to-browse-better-22fcefc981d7

27. WebMCP: W3C Web Machine Learning Community Group Specification, https://github.com/webmachinelearning/webmcp

28. WebMCP SEO: Making Websites Executable for AI Agents, https://www.brainz.digital/blog/webmcp-seo-making-websites-executable-for-ai-agents/

29. WebMCP API: Extensions to the Navigator Interface, https://webmachinelearning.github.io/webmcp/

30. WHAT IS WEBMCP? YOUR WEBSITE JUST BECAME A FUNCTION CALL, https://www.nohackspod.com/blog/what-is-webmcp

31. WebMCP Cheat Sheet: Core Ideas and Code Examples, https://www.webfuse.com/webmcp-cheat-sheet

32. WebMCP chrome-devtools-quickstart - GitHub, https://github.com/WebMCP-org/chrome-devtools-quickstart

33. WebMCP vs MCP: Key Differences and Synergy, https://www.capsolver.com/blog/AI/webmcp-vs-mcp

34. WebMCP: A Proposed Web Standard for AI Agents by Google and Microsoft, https://innfactory.ai/en/blog/webmcp-w3c-web-standard-ai-agents/

35. What is WebMCP by Google and How it Works, https://www.youngurbanproject.com/webmcp-google-ai-agent-protocol/

36. Google Chrome Ships WebMCP in Early Preview, https://venturebeat.com/infrastructure/google-chrome-ships-webmcp-in-early-preview-turning-every-website-into-a

37. Web MCP: New Protocol from Google and Microsoft (Video), https://www.youtube.com/watch?v=ql6pY7EN1xg

38. WebMCP: Structured Interactions for the Agentic Web (Chrome Blog), https://developer.chrome.com/blog/webmcp-epp

39. How WebMCP Impacts Agent Operations (Video), https://www.youtube.com/watch?v=35oWt7u2b-g

40. WebMCP: The Standard That Lets AI Agents Call Website Functions Directly, https://locomotive.agency/blog/webmcp-ai-agents-website-functions/

41. WebMCP: The Missing Bridge Between AI Agents and the Web, https://www.scalekit.com/blog/webmcp-the-missing-bridge-between-ai-agents-and-the-web

42. WebMCP: New Browser-native Execution Model for AI Agents (Reddit), https://www.reddit.com/r/mcp/comments/1rdcvkd/webmcp_is_new_browsernative_execution_model_for/

43. MCP Basic Transports: Streamable HTTP and stdio, https://modelcontextprotocol.io/specification/2025-06-18/basic/transports

44. MCP Server Transports Overview: Roo Code, https://docs.roocode.com/features/mcp/server-transports

45. Legacy Concepts and Transports in MCP, https://modelcontextprotocol.io/legacy/concepts/transports

46. Exploring WebMCP and Testing it in Browser, https://dev.classmethod.jp/articles/exploring-webmcp-and-testing-it/

47. WebMCP非対応環境におけるデグレ防止のメリット, https://zenn.dev/844/articles/64233a8dd6a1fd

48. MCP導入による標準化と開発・保守コストの削減, https://chatgpt-enterprise.jp/blog/mcp-airennkei/

49. AIアプリに拡張機能を与えるMCPのメリット, https://qiita.com/to3izo/items/99dd3cde237c2e5a007f

コメント

タイトルとURLをコピーしました