WebMCPとは?AIエージェント向けブラウザ標準の仕組み・特徴・使い方を徹底解説

WebMCP とは AIエージェント 向け ブラウザ 標準 仕組み 特徴 使い方 徹底 解説
押さえておきたいポイント
  • WebMCPはWebサイト側が自らの機能を「ツール」としてブラウザ内のAIエージェントへ公開する機能
  • HTMLに属性を足すだけの宣言型APIと、JavaScriptで柔軟に登録する命令型APIの2方式を用意
  • スクリーンショットやDOM解析に頼る従来の操作から脱却し、速度と信頼性の改善が期待できる

2026年5月、GoogleからAIエージェント向けの新しいブラウザAPIが発表されました。

今回登場した「WebMCP(Web Model Context Protocol)」は、ウェブサイト自身がAIエージェントへの公式インターフェースを公開するための仕組みです。構造化されたツールをブラウザのAPIとして定義し、エージェントがページ上の機能を直接呼び出せるようにします。これまでのブラウザ操作型エージェントには、「スクリーンショット解析の計算コストが高い」「ページ構造が変わると操作が壊れる」「非公式な操作のため信頼性が低い」といった課題がありました。

WebMCPとは?AIエージェント向けブラウザ標準の仕組み・特徴・使い方を徹底解説

しかし、新しい機能が登場するたびに、「MCPと何が違うのか」「今すぐ自社サイトに導入できるのか」「セキュリティ上のリスクはないのか」といった疑問を感じる方も多いのではないでしょうか。

そこで本記事では、WebMCPの概要や仕組み、特徴を解説しながら、対応状況や使い方、業界別の活用シーンについて詳しく解説します。最後までお読みいただくことで、WebMCPがどのように設計され、どのような場面で力を発揮するのかが理解できるはずです。

\生成AIを活用して業務プロセスを自動化/

tamura

監修者田村 洋樹

株式会社WEEL代表取締役 / 累計25社以上のAIアドバイザリーを担当 / 企業向けセミナー・大学講義でのべ10,000人超に登壇 / 日本HP・インテルなど、大手企業主催カンファレンスへの登壇実績多数。AI導入支援・生成AIを活用した業務改革のプロとして、アドバイザリー・PM・講演者など多面的な立場から企業を支援中。

目次

WebMCPとは

参考:https://developer.chrome.com/docs/ai/webmcp?hl=ja

WebMCPは、Webサイトが自身の機能を構造化された「ツール」としてブラウザ内のAIエージェントへ公開するためのWeb APIです。GoogleとChromeチームが初期の提案と実装を主導し、2026年5月のGoogle I/O 2026で正式に発表されました。

仕様はW3CのWeb Machine Learning Community Groupで議論が進められており、編集にはMicrosoftも参加しています。ただし本記事執筆時点ではDraft Community Group Reportの段階で、W3C StandardでもStandards Trackでもありません

本記事執筆(2026年9月)時点では提案仕様およびOrigin Trialの段階のため、API名や属性名が変更される可能性が残されています。実装の際は必ず最新のドキュメントを確認してください。

従来のブラウザエージェントが抱えていた課題

AIエージェントがWebサイトを操作する従来の手法の一部には、大きなデメリットがありました。人間向けに設計されたUIを、機械が外側から推測しながら触るしかなかったためです。

スクロールできます
従来の手法抱えていた課題
スクリーンショット解析計算コストが高く、UI変更によって失敗しやすい
DOM解析ページ構造の変更に脆弱で、動的コンテンツに対応しにくい
シミュレートクリック非公式な操作のため信頼性が低い
従来のブラウザ操作型エージェントの課題

WebMCPは、こうしたブラウザエージェントに対して、サイト側から構造化された操作方法を渡すための仕組みです。

旅行予約サイトで考える具体例

従来型では、エージェントがカレンダーのスクリーンショットを撮影し、日付を解析し、フォームフィールドをクリックして、結果を再びスクリーンショットで確認していました。手数が多く、途中で1つ失敗すれば全体が止まります

参考:https://github.com/GoogleChromeLabs/webmcp-tools/tree/main/demos/react-flightsearch

WebMCPでは、エージェントがsearchFlights({origin: “TYO”, destination: “LAX”, date: “2026-06-01”})を直接呼び出し、構造化されたJSON結果を受け取るだけで完了。画面の見た目に依存しない点が決定的な違いです。

WebMCPの仕組み

WebMCPは用途に応じて2種類のAPIを提供します。どちらも最終的には、ブラウザからエージェントへ同じ形の構造化ツールとして公開されるのがポイント。

スクロールできます
API実装方法主な用途
宣言型APIHTMLの<form>に属性を追加標準的なフォーム操作
命令型APIdocument.modelContextで登録動的で複雑な操作
WebMCPが提供する2つのAPIモデル

宣言型APIはHTMLに属性を足すだけ

最もシンプルな実装方法が宣言型APIです。JavaScriptのコードは不要で、既存のHTMLフォームに専用属性を追加するだけで機能します。

参考:https://developer.chrome.com/docs/ai/webmcp/declarative-api?hl=ja

ブラウザは<form>の構造からJSONスキーマを自動生成し、エージェントへ提供。エージェントは適切な値を推論してフォームを正確に埋められます。なお、スキーマ生成まわりは仕様の一部がなお策定中です。

スクロールできます
属性必須説明
toolname必須エージェントが認識するツール名(snake_case推奨)
tooldescription必須ツールの機能を自然言語で説明。エージェントの理解精度に直結
toolparamdescription任意個々のフィールドの詳細な説明
toolautosubmit任意エージェントがフォームを埋めた後に自動送信するかを制御
宣言型APIの主要な属性

宣言型APIはHTMLの標準フォームに属性を追加するだけのため、WebMCP未対応のブラウザでは通常のフォームとして動作します。フォールバックが自動的に確保される点は実装のハードルを大きく下げてくれます。

命令型APIはJavaScriptで柔軟に定義する

より複雑な操作や動的なデータ取得が必要な場合は、document.modelContextを使う命令型APIを使用します。ツール名・説明・入力スキーマに加えて、呼び出された際の処理をexecuteで実装者が直接定義できます。

参考:https://developer.chrome.com/docs/ai/webmcp/imperative-api?hl=ja

既存のJavaScript関数を呼んだり、アプリケーションのstateを変更したりと、自由度の高い処理を実装可能。ReactなどのSPAでは、登録時にAbortControllerのAbortSignalを渡しておき、コンポーネントのアンマウント時にabort()でツールを解除するライフサイクル管理が基本形です。

Reactについては、useWebMcpという実験的なサポートも提供されています。

ツール呼び出しまでの流れ

ページを開いてからツールが実行されるまでのステップは短く、4段階で完結します。

  1. サイト側がregisterToolでツールをブラウザへ登録する
  2. エージェントがJSONスキーマ経由で利用可能なツールを検出する
  3. エージェントが目的に合うツールを選びexecuteを呼び出す
  4. 構造化された実行結果がエージェントへ返される

この流れはMCPサーバーのツール呼び出しとよく似ています。MCPやエージェントのツールを作った経験がある方なら、見覚えのある形ではないでしょうか。

ブラウザ操作型のAIエージェントについて、詳しく知りたい方は下記の記事もあわせてご覧ください。

WebMCPの特徴

WebMCPの価値は、賢さの上乗せではなく失敗しやすさの減少にあります。ここでは他のアプローチと比べた際の特徴を見ていきます。

人間とAIが同じ画面を使える

エージェント向けにツールを公開しても、人間向けのUIはそのまま残せます。エージェントにフォーム入力やスライド編集を任せた場合でも、その結果は普段使っている画面へ反映されます。

人間は結果を確認し、必要であれば手で修正し、再びエージェントに続きを任せられます。人間向けUIとエージェント向けツールを別々に用意するのではなく、同じWebアプリの状態を両方から操作できる形です。

MCPとの違いは「どこに機能があるか」

WebMCPはMCPから着想を得ていますが、解決する問題が異なります。両者は競合せず、補完関係にあるという位置づけです。

スクロールできます
観点MCPWebMCP
接続先主にバックエンドの機能へ接続ブラウザ(タブ内)のページ機能
プロトコルJSON-RPC、stdio、Streamable HTTPなどブラウザネイティブAPI
ライフサイクル永続的(サーバープロセス)エフェメラル(タブに紐づく)
主な用途DBアクセス・外部APIの統合訪問中のWebページ操作
標準化状況Anthropic主導、業界採用が進むW3C Web Machine Learning CG
アクセス制御サーバー側で管理Permissions Policyとorigin指定
MCPとWebMCPの違い

最も効果的なエージェントアプリケーションは、両方の強みを活用します。MCPでコア業務ロジックを管理し、WebMCPでコンテキスト依存のUI操作を実装するのが基本形といえるでしょう。

ただし、WebMCPツールはページが開いている場合にのみ存在します。ユーザーがサイトから移動したりタブを閉じたりすると、エージェントはサイトにアクセスできなくなる点には注意が必要です。

WebMCPの安全性・制約

WebMCPでエージェントがWebサイトを操作しやすくなる一方、サイトが公開するツールをどこまで信用するかは重要な論点になります。権限の仕組みと、設計時に押さえたい注意点を解説します。

参考:https://developer.chrome.com/docs/ai/webmcp?hl=ja

Permissions Policyとアノテーション

宣言型・命令型の両APIは、tools Permissions Policyで制御されます。デフォルトはselfで同一オリジンのみ許可。クロスオリジンiframeで使用する場合はallow=”tools”属性が必要です。

さらに現在は、ツールを公開する相手を明示的に絞り込むexposedToとfromOriginsも用意されています。allow=”tools”と合わせた3つの仕組みで、どのオリジンにどのツールを見せるかを制御する形。

ツール定義にはannotationsでヒントを付けられます。readOnlyHint: trueは副作用がないことをエージェントへ伝える指定で、エージェントはこのツールをより積極的に呼び出します。

一方、購入や解約のように重大で不可逆な操作にはconsequentialHint: trueを付けます。エージェントに実行前の確認を求めさせるための明示的なヒントです。信頼できない外部データを返すツールにはuntrustedContentHintも用意されています。

実装時に押さえたいセキュリティ観点

スクロールできます
リスク対策
ツール定義からの情報漏えいtoolnameとtooldescriptionは外部から参照可能なため機密情報を含めない
不正な入力値命令型APIのexecuteハンドラーで受け取った入力を必ずバリデーションする
意図しない副作用不可逆な操作にはconsequentialHintを付け、ユーザーへの確認フローを設計する
模倣サイトによる偽ツール購入・削除・解約など影響の大きい操作は人間の確認を挟む
プロンプトインジェクションツールの説明や実行結果に悪意ある指示が混入する前提で検証する
WebMCP実装時の主なリスクと対策

正規のサイトであってもエージェントが常に想定したツールを選ぶとは限りません。解約・一時停止・プラン変更のツールが並んでいるとき、「しばらく料金を止めたい」という依頼をどう解釈するかはエージェントによって変わる可能性があります。

WebMCPの料金

WebMCPはブラウザのAPI仕様であり、仕様自体に利用料は設定されていません。実装に必要なのはHTMLの属性追加かJavaScriptの記述だけです。

スクロールできます
項目費用備考
WebMCP API本体利用料の設定なしブラウザの仕様自体に料金体系はない
Chrome Origin Trialへの参加利用料の設定なし早期プレビュープログラムから登録
Cloudflareの対応機能詳細は公開されていませんAgent ReadinessのLabsでトグルを有効化
エージェント側のLLM利用料利用するサービスに準拠ユーザーが契約しているAIに依存
WebMCP関連のコスト

構成によっては、会話UIやLLMの利用コストをすべてサービス側で持たず、ユーザーが契約しているAIを利用してもらうこともできます。自社でチャットボットを運用する場合と比べたコスト構造の違いは、検討時に押さえておきたい点ではないでしょうか。

AIチャットボットの導入について、詳しく知りたい方は下記の記事もあわせてご覧ください。

WebMCPのライセンス

WebMCPの仕様は、Contributorsによって執筆され、W3C Community Contributor License Agreement(CLA)のもとで公開されています。権利関係の詳細はW3Cコミュニティグループの公開情報で確認できます。

なお、これとは別に、Chrome for Developersが公開しているWebMCPの解説ドキュメントはクリエイティブ・コモンズ表示4.0ライセンス、掲載されているコードサンプルはApache 2.0ライセンスのもとで使用が許諾されています。仕様本体のライセンスとは扱いが異なる点に注意してください。

仕様がDraft Community Group Reportの段階であるため、今後の標準化プロセスのなかでライセンスや権利関係の扱いが変わる可能性もあります。

MCPの導入事例に興味がある方は下記も参考にしてください。

WebMCPの使い方

WebMCPを試すには、対応ブラウザの用意とサイト側のツール実装の2つが必要です。基本的な始め方をステップ形式で解説します。

STEP
ブラウザの対応状況を確認する

現在の中心はChrome 149以降のOrigin Trialです。Microsoft EdgeでもすでにOrigin Trialが提供されており、リリースノートに掲載されています。

スクロールできます
ブラウザバージョン状態
Chrome 安定版149以降Origin Trial実施中
Microsoft Edge150以降Origin Trial提供中
Chrome Canary146以降初期プレビュー。フラグの有効化で利用可能
WebMCPのブラウザ対応状況
STEP
宣言型APIでフォームをツール化する

既存のフォームにtoolnameとtooldescriptionを追加すれば、それだけでエージェントから呼び出せるツールになります。各入力欄にはtoolparamdescriptionで補足を付けると精度が上がります。

エージェントの精度はtooldescriptionの品質に大きく依存します。「検索する」のような曖昧な説明ではなく、「商品名またはカテゴリでECサイトの商品を検索する」のように、何をどの形式で入力すべきかを明記するのが推奨されています。

STEP
命令型APIで複雑な操作を登録する

フォームで表現しきれない操作は、registerToolでツールを登録します。まず“modelContext” in documentのような判定で対応可否を確認し、未対応環境では従来のUIにフォールバックさせる形が安全です。

登録時にAbortControllerのAbortSignalを渡しておけば、画面から離れるタイミングでツールを解除できます。

STEP
読むツールと書くツールをそろえる

ツール設計で有用なのが読むツールと書くツールの組み合わせ。追加や変更といった操作系のツールだけでは、エージェントは現在の画面の状態を把握できません。

スクロールできます
種別ツールの役割
read現在の状態や仕様を返す一覧取得、単体取得、選択可能な値の取得
write状態を変更する追加、更新、移動、削除、取り消し
読むツールと書くツールの役割分担

状態を返すツールで現状を把握し、仕様を返すツールで選択肢を確認してから、変更系のツールを実行する。この観察から計画、そして実行というフローを組めるようにしたことで、エージェントが正確に動作するようになったという検証結果も報告されています。

コード変更ゼロで試す選択肢

2026年8月6日には、Cloudflareが既存サイトへコード変更ゼロでWebMCP対応を追加する機能を発表

Cloudflareを利用しているサイトでDeveloper Previewを有効化した場合、エッジのHTMLRewriterがHTMLレスポンスへbridge.jsのscriptタグを1行だけ差し込みます。オリジンのコードは変わらず、サイト側の再デプロイも不要。

注入されたbridgeは、MCPサーバーへtools/listを取りに行き、見つかったツールをdocument.modelContextへshimとして登録します。注入の確認はcurl -s https://your-site.example | grep webmcpで足ります。

【業界別】WebMCPの活用シーン

WebMCPは訪問中のWebページ操作に特化した仕組みのため、Web上で完結する手続きが多い業界ほど効果が出やすいと考えられます。ここでは業界別に想定される活用シーンを見ていきます。

EC・小売

商品検索・カート追加・決済フローをツールとして公開すれば、エージェントが在庫や価格を確認しながら購入手続きを進められます。Google I/O 2026の公式資料では、ShopifyもWebMCPを実験している企業として紹介されました。

複数サイトを横断した比較検討も、各サイトがWebMCPツールを公開し、利用するエージェントが対応していれば、スクリーンショットの解析なしで実行可能。ただし決済のような不可逆の操作では、人間の確認を挟む設計が前提になります

ECでの生成AI活用について、詳しく知りたい方は下記の記事もあわせてご覧ください。

旅行・観光

ExpediaやBooking.comも、Google I/O 2026の公式資料でWebMCPを実験中の企業として紹介されています。旅行予約はカレンダーUIのような操作難度の高い要素が多く、構造化ツール化の効果が出やすい領域です。

Booking.comはホテル検索と予約フローをツール化し、チェックイン日・アウト日・人数・部屋タイプを構造化入力として受け取る形にしています。Expediaについても、出発地・目的地・日付を直接APIへ渡すようにしています。

観光業界の課題について、詳しく知りたい方は下記の記事をご覧ください。

バックオフィス・経理

経費申請のような定型フォームは、WebMCPと相性がよい領域です。申請テンプレートの参照、入力可能な項目の取得、申請内容の入力までをツール化すれば、エージェントが下書きまで進めてくれます。

最終確認は人間が行う運用にすれば、責任の所在を保ったまま入力の手間だけを削減可能。社内システムの画面を大きく変えずに導入できる点も実務的です。

経理業務での生成AI活用に興味がある方は下記も参考にしてください。

SaaS・カスタマーサポート

「この設定はどこにあるのか」「今のプランでこの機能は使えるのか」といった質問は、実務でも回答に時間がかかります。現在の契約状態やヘルプ情報をツールとして返せば、エージェントが該当する設定画面まで案内できます。

ヘルプ記事を検索して手順を説明するだけでなく、そのまま該当画面まで連れていってもらえる体験は、サポート工数の削減に直結すると考えられます。契約変更のような影響のある操作は確認画面までに留め、確定は人間が行う設計が現実的です。

金融

口座照会や各種申込フォームなど、Web上で完結する手続きの多い業界です。読み取り専用のツールと操作系のツールを厳密に分け、readOnlyHintやconsequentialHintで性質を明示する運用が求められます。

永続データや秘密情報はブラウザ側に寄せず、サーバー側のMCPに残して中継する設計が推奨されています。ブラウザへ寄せる範囲を見誤ると、便利さより運用の危うさが先に出てしまうでしょう。

金融業界の課題について、詳しく知りたい方は下記の記事もあわせてご覧ください。

WebMCPを実際に使ってみた

ここからは実際にWebMCPを使っていきたいと思います。

検証1:ページにAIから呼べるツールを作る

題材は「やることリスト」だけのシンプルなページを自作して実行してみます。入力欄と追加ボタンが1つずつあるだけのフォームを、AIから操作できるようにします。検証環境はmacOS、Chrome 152(安定版)。

WebMCPは実験段階の機能なので、まずChromeの設定でchrome://flags/#enable-webmcp-testingをEnabledにして再起動します。ページの再読み込みでは反映されません

参考:chrome://flags/#enable-webmcp-testing

次にページ側です。WebMCPでいうツールとは、AIに使わせたい操作に名前を付けて公開したものです。宣言型は既存のフォームに属性を足すだけで、JavaScriptを書きません。

宣言型のサンプルはこちら
<form toolname="add_task"
      tooldescription="やることリストにタスクを1件追加する">
  <input name="title" toolparamdescription="追加するタスクの名前">
  <button type="submit">追加</button>
</form>

命令型はJavaScriptで登録します。executeの中でもともと動いている関数を呼んでいるだけで、AI用に処理を作り直してはいません。

命令型のサンプルはこちら
document.modelContext.registerTool({
  name: "add_task_js",
  description: "やることリストにタスクを1件追加する",
  inputSchema: {
    type: "object",
    properties: { title: { type: "string", description: "追加するタスクの名前" } },
    required: ["title"],
  },
  annotations: { readOnlyHint: false },
  async execute({ title }) {
    return addTask(title);
  },
});

実際に動かしてる様子がこちらです。

コンソールでexecuteToolを実行した瞬間に、画面へ結果が反映されます。

検証2:AIに自分でツールを選ばせる

検証1では人間がツールを指定しましたが、本来その判断はAIの担当です。ここではデバッグ用の拡張機能Model Context Tool Inspectorを使い、Gemini経由で日本語の依頼を投げてみます。

参考:https://chromewebstore.google.com/detail/webmcp-model-context-tool/gbpdfapgefenggkahomfgkhfehlcenpd

使用にはGeminiのAPIキーが必要なので、取得して設定をしましょう。指示はこの一文だけです。

現在のやることリストを表示したあとに、「資料作成」をタスクに追加してください。

結果、AIは依頼を2つの操作に分解し、順番にツールを呼びました。ツール名も引数も、こちらは一切指定していません。

結果はこちら
AI calling tool "list_tasks" with {}
Tool "list_tasks" result: タスクはありません
AI calling tool "add_task" with {"title":"資料作成"}

実際に動かしている様子がこちらです。

日本語で頼むだけで、画面のリストが更新されます。

今回、AIが命令型のadd_task_jsではなく、宣言型のadd_taskを選んでいます。この2つは説明文が同じでした。同じ説明のツールを複数公開すると、どちらが呼ばれるかは制御できないようです。

検証3:項目が多い業務フォームで試す

ここまでのデモは入力欄が1つだけでしたが、次は入力欄が複数あるものを用意してみます。WebMCPの良さが出るのは人間がやると面倒な画面かと思います。

入力項目は10個。申請区分や支払方法はコード値のプルダウンで、さらに条件によって必須項目が変わります

  • 旅費交通費のときは出発地と到着地が必須
  • 交際費のときは同席者が必須
  • 金額が1万円を超える場合は利用目的を20文字以上で記入

この手のルールは、知らないまま送信して初めてエラーで気づくものじゃないでしょうか。操作そのものより、どこに何を入れるか調べる時間のほうが長い画面です。

依頼は下記です。

9月18日の東京から大阪への出張の交通費、28,000円を経費申請したい。
プロジェクトはWebMCP検証、部署は開発、自分で立て替えました。
結果はこちら
AI calling tool "get_form_catalog" with {}
Tool "get_form_catalog" result: {"options":{"category":{"TRV":"旅費交通費","ENT":"交際費","SUP":"消耗品費","BOK":"新聞図書費"},"payment":{"ADV":"立替払い","CRD":"法人カード","INV":"請求書払い"},"project":{"P-001":"社内開発","P-014":"WebMCP検証","P-022":"受託A社"},"cost":{"CC-10":"経営企画","CC-20":"開発","CC-30":"営業"}},"rules":["申請区分がTRV(旅費交通費)のときは from と to が必須","申請区分がENT(交際費)のときは guests が必須","金額が10000円を超える場合は purpose を20文字以上で記入"],"today":"2026-09-21"}
AI calling tool "fill_expense" with {"purpose":"WebMCP検証プロジェクトに伴う東京から大阪への出張交通費","amount":28000,"category":"TRV","cost":"CC-20","from":"東京","project":"P-014","to":"大阪","date":"2026-09-18","payment":"ADV"}
Tool "fill_expense" result: 9項目を入力しました。入力内容に問題はありません。送信は人間が確認してください。
AI result: 以下の内容で経費申請フォームに入力を行いました。内容をご確認の上、送信を行ってください。

- **利用日**: 2026年9月18日
- **申請区分**: 旅費交通費(TRV)
- **金額**: 28,000円
- **支払方法**: 立替払い(ADV)
- **コストセンター(部署)**: 開発(CC-20)
- **プロジェクト**: WebMCP検証(P-014)
- **出発地**: 東京
- **到着地**: 大阪
- **利用目的**: WebMCP検証プロジェクトに伴う東京から大阪への出張交通費

依頼文にはコード値もルールも書いていません。「交通費」をTRV、「自分で立て替え」をADV、「開発」をCC-20へ変換したのはGeminiの判断です。

検証4:実験参加を表明している大手サイトを見てみる

ExpediaやBooking.com、Shopifyなどは実験への参加が公表されています。実際にツールが公開されているのかを確かめるため、日本版のExpediaを開いて検出を試みました。

参考:https://www.expedia.co.jp/
No tools registered yet in https://www.expedia.co.jp/

上記のように表示され、ツールなしでした。Expediaは実際の活用事例として上がっていましたがダメなようです。

この状態でAIに「航空券とホテルを探して」と依頼すると、下記のようになりました。

呼べるツールがないため、タブの内容を読み取ろうとしては失敗し、最終的に検索エンジンを開こうとする動きに戻っています。

最終的には下記のような結果が返ってきました。

結果はこちら
AI result: 現在、システムの仕様・エラーによりブラウザ上でのリアルタイムな最新価格検索を直接実行することができません。

代わりに、**2026年11月23日(月・祝)〜11月30日(月)の7泊8日・大人1名**の条件における、**最も安く抑えるための航空会社・ホテル選びのポイントおよびおすすめの検索方法**をまとめました。

---

### 1. 航空券の選び方(羽田発 ⇔ 新千歳着)

羽田空港(HND)発着の場合、LCC(成田発のPeachやJetstar等)は運航していませんが、以下の航空会社の**早期割引**を利用するのが最安値の狙い目です。

* **スカイマーク(Skymark)**【最おすすめ】
* 羽田発新千歳行きのフルサービス系・LCC中間の中堅エアライン。
* 早期割引プラン「**いま得**」「**たす得**」を利用すると、羽田発の中でも最安値帯(片道1万円前後〜)で予約可能です。手荷物預け(20kgまで)も無料です。
* **AIR DO(エア・ドゥ)**
* 北海道の地域航空会社(ANAとの共同運航)。
* 早期割引「**DOバリュー7・21・28**」「**AIRDOスペシャル**」が安く、受託手荷物も無料です。
* **JAL / ANA**
* 「**先特・スペシャル**」「**ANA SUPER VALUE**」などの早期割引。時間帯(早朝や夜間便)によってはスカイマークと同等の安さになる場合があります。

> **💡 価格を抑えるコツ**
> * **11月23日(月)**は「勤労感謝の日」の祝日です。午前の便は混雑して高くなりやすいため、**昼以降〜夕方・夜の便**を選ぶと航空券代を大きく抑えられます。

---

### 2. 札幌駅近くのおすすめ格安・高コスパホテル

11月終わりの札幌は初雪や寒さがあるため、**JR札幌駅直結**または**地下街直結・徒歩数分**のホテルが非常に快適でおすすめです。

1. **JRイン札幌(または JRイン札幌北2条)**
* **特徴**: JR札幌駅PASEO西口から徒歩約2分。ビジネス・一人旅に大人気で、清潔・枕が選べる・コスパ抜群。
2. **ホテルグレイスリー札幌**
* **特徴**: JR札幌駅南口から**地下街(アピア)直結**。外に出ずにチェックインできるため、天候が悪くても安心です。価格も手頃。
3. **京王プレリアホテル札幌**
* **特徴**: JR札幌駅北口徒歩3分。大浴場完備で新しく綺麗。コスパと快適性のバランスが非常に高いです。
4. **ネストホテル札幌駅前 / Richmond Hotel(リッチモンドホテル札幌駅前)**
* **特徴**: 駅徒歩5分圏内。時期により早期割引で1泊数千円台〜お得に泊まれることがあります。

---

### 3. 一番安く予約するための総額節約テクニック

単品で航空券とホテルを別々に予約するよりも、**「航空券 + 宿泊」のダイナミックパッケージ(セット予約)**を利用するのが一番安くなります。

* **楽天トラベル(楽パック) / じゃらんパック / Yahoo!トラベル**
* JAL/ANA/スカイマーク便と駅近ホテルを組み合わせたパックで、個別予約より数万円安くなることがあります。
* **比較・検索サイトの活用**
* **航空券単品の検索**: [Skyscanner(スカイスキャナー)](https://www.skyscanner.jp) や [Google Flights](https://www.google.com/travel/flights) で全社一括比較。
* **ツアー・パック比較**: [トラベルコ](https://www.tour.ne.jp) で「羽田発・札幌・7泊8日」の最安値を比較。

では現時点でExpediaをAIに操作させる手段がないかというと、そうではありません。Playwright MCPやChrome DevTools MCPを使えば、MCP経由でブラウザを動かして予約まで到達できます。

ただしこれはスクリーンショットとDOMを読んでボタンの位置を推測する方式です。WebMCPが解決しようとしている課題が、そのまま残っている状態といえるでしょう。

本記事執筆(2026年9月)時点の検証結果です。ツールはページ単位で登録され、地域によって出し分けられる可能性もあるため、状況は今後変わると考えられます。

【課題別】WebMCPが解決できること

ここではWebMCPが解決できる代表的な課題を解説します。自社での導入可否を判断する材料として参考にしてください。

UI変更のたびに自動化が壊れるのを解決

スクリーンショット型やDOM解析型の自動化は、画面の見た目が変わるたびに動かなくなります。WebMCPツールは設計ではなくアプリケーションロジックに接続するため、エージェントが操作する機能を損なうことなくUIを再設計できます。

エージェントが何をするか予測できないを解決

WebMCPがない場合、エージェントはUIの理解に基づいて取るべきアクションを推測します。ツールを定義しておけば、エージェントはUI要素からアクションを推測する必要がなく、特定の機能がどのように動作するかを把握できます。

ログイン後の情報をエージェントに渡せないを解決

WebMCPツールは、ブラウザの既存のログインセッションをそのまま利用できます。サーバーに保存される前の画面上の未保存データでも、JavaScriptを介して操作可能。

スクロールできます
できることできないこと
ページを開いた状態でのツール呼び出しページを閉じた後にツールを呼び続けること
ログイン済みセッションを前提にした操作WebMCP自体が永続ストレージ機構を提供すること
未保存の画面状態への読み書きサイト側が公開していない操作の実行
未対応ブラウザでの通常フォームとしての動作未対応ブラウザでのツール呼び出し
WebMCPで解決できること・できないこと

生成AIによる業務効率化について、詳しく知りたい方は下記の記事もあわせてご覧ください。

AIエージェントのご相談はWEELへ

WebMCPを活用することで、AIエージェントに任せられるWeb上の作業の範囲を一気に広げられます。一方で、どの操作をツールとして公開するかという線引きは設計次第で効果が大きく変わるため、対象業務の棚卸しから始める進め方も重要な選択肢です。

「生成AIで新しいプロダクトを作りたい」「もっと本格的に生成AIを業務に組み込みたい」とお考えの方は、ぜひ株式会社WEELにご相談ください。

開発実績として、

・新規事業室での「リサーチ」「分析」「事業計画検討」を70%自動化するAIエージェント
・社内お問い合わせの1次回答を自動化するRAG型のチャットボット
・過去事例や最新情報を加味して、10秒で記事のたたき台を作成できるAIプロダクト
・お客様からのメール対応の工数を80%削減したAIメール
・サーバーやAI PCを活用したオンプレでの生成AI活用
・生徒の感情や学習状況を踏まえ、勉強をアシストするAIアシスタント

などの開発実績がございます。

生成AIを活用したプロダクト開発の支援内容は、以下のページでも詳しくご覧いただけます。
➡︎株式会社WEELのサービスを詳しく見る。

アイデア段階でも構いません。まずは無料相談でお気軽にご相談ください。
➡︎生成AIを活用したプロダクト開発・業務効率化について相談する

大規模言語モデル(LLM)比較レポート
LLM比較レポート

「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。

セミナー内容や料金については、ご相談ください。

また、大規模言語モデル(LLM)を対象に、言語理解能力、生成能力、応答速度の各側面について比較・検証した資料も配布しております。この機会にぜひご活用ください。

WebMCPのよくある質問

WebMCPはMCPに取って代わるものですか?

取って代わるものではありません。MCPとWebMCPは対戦相手ではなくパートナーと位置づけられており、MCPがサーバー側のコアロジックを、WebMCPがブラウザ内のUI操作を担当します。どちらかを選択する必要はなく、両方を組み合わせるのが最も効果的です。

WebMCPの利用に費用はかかりますか?

WebMCPはブラウザのAPI仕様のため、利用そのものに料金は発生しません。Chrome 149以降のOrigin Trialへの参加も無料です。

WebMCP未対応のブラウザではサイトが壊れますか?

壊れません。宣言型APIはHTMLの標準フォームに属性を追加するだけのため、未対応のブラウザでは通常のフォームとして動作します。命令型APIを使う場合も、documentにmodelContextが存在するかを判定して分岐させれば問題ありません。

どのAIエージェントからWebMCPのツールを呼び出せますか?

対応クライアントも発展途上のため、利用環境によって動作状況が異なります。Codex内のブラウザで動作を確認したという報告がある一方、同じ操作がChrome拡張やGemini in Chromeでは失敗した事例も共有されています。

Gemini in ChromeやClaude for Chromeのように、既存のブラウザをAIから操作する選択肢自体は増えています。提供地域やプラン、対応機能はそれぞれ異なるため、実装前に自社の想定環境で検証しておくのが安全です。

WebMCPの動きを試せるデモはありますか?

あります。GoogleChromeLabsが公式デモをGitHubで公開しているほか、開発者が制作した経費申請サイト・架空のSaaS管理画面・AIと人間が一緒に編集するスライドという3つのデモも公開されています。

後者は一部のコードがGitHubで公開されており、ローカルで動かすことも可能。仕様を読む前に挙動を確かめたい場合は、こうしたデモから触ってみるとイメージをつかみやすいのではないでしょうか。

  • URLをコピーしました!
  • URLをコピーしました!
目次