エージェントフレンドリーなウェブサイトを構築する

Kasper Kulikowski

Omkar More

ウェブサイトに新しいタイプの訪問者がいます。一部のユーザーは、手動ナビゲーションから、目標指向のジャーニーを AI エージェントに委任する方向に移行しています。これらの自律システムは、ユーザーの代わりに、入力を解釈し、計画を立て、アクションを実行できます。

しかし、多くのウェブサイトは、複雑なホバー状態、レイアウトの変更、流動的なモーションなど、人間にとって美しいものになるように設計されています。エージェントに対して機能的に破損しています。

エージェントがサイトをどのように表示するか

エージェントはモニターでウェブサイトを確認しません。サイトの機械可読表現に基づいて動作します。この表現の品質によって、パフォーマンスが決まります。

エージェントは、スクリーンショット、生の HTML、アクセシビリティツリーという 3 つの主な方法でウェブサイトを表示できます。

スクリーンショット

エージェントはレンダリングされたページのスナップショットを取得し、ビジョンモデルを使用して要素を識別します。スクリーンショットから、エージェントは右上の検索バーがグローバル検索であり、中央のボックスがフォームフィールドである可能性が高いことを認識できます。エージェントは色、サイズ、近接性を使用して重要度を判断できるため、視覚的な手がかりは役立ちます。大きな [削除] ボタンは、小さな [ヘルプ] リンクよりも慎重に解釈される可能性が高くなります。ただし、スクリーンショットの分析は時間がかかり、費用もかかる（使用されるトークンの観点から）ため、構造がわかりにくい場合のバックアップとして使用することをおすすめします。

HTML

エージェントは DOM を分析し、HTML を読み取ります。要素のネスト方法、DOM ツリーの論理階層、構造を定義する ID やクラスなどの属性、サイトの情報バックボーンを形成する生データ文字列を理解します。これにより、エージェントは要素間の関係を理解できます。

[今すぐ購入] ボタンが商品コンテナ内にある場合、エージェントはそのボタンがその特定の商品に属していると想定します。

ユーザー補助ツリー

ユーザー補助ツリーは、ブラウザネイティブの API で、DOM を最も重要なもの（インタラクティブ要素のロール、名前、状態）に抽出します。支援技術で使用されるページのセマンティックサマリーです。AI エージェントの場合、CSS の視覚的な「ノイズ」を無視して純粋なユーティリティに焦点を当てる高忠実度マップとして機能します。このツリーを解釈することで、エージェントはすべての切り替え、スライダー、入力フィールドの機能的な意図を学習できます。

WebMCP ツール

WebMCP は、ウェブサイトとエージェントのギャップを埋め、明示的な目的とタスクをエージェントに共有するためのウェブ標準案です。これを行うには、JavaScript または HTML のアノテーションであるツールを定義します。エージェントは、標準のアクチュエーションよりも高速かつ正確にこれらのツールを解釈します。

WebMCP ツールは、カスタマーサポート、e コマース、ディスカバリーなどに使用できます。購入などの一部のアクションは機密情報に関わるものです。確認ダイアログでユーザーインタラクションをリクエストするコマンドを含めることができます。

WebMCP のユースケースと効果的なツールを構築する方法について説明します。

複数のモダリティ

単一の入力に依存すると、セマンティックギャップが生じます。たとえば、DOM では、エージェントは <div> を認識しても、CSS と JavaScript で機能ボタンとして構成されていることを認識しない可能性があります。スクリーンショットでは、エージェントが画面上のボタンの位置を特定できる可能性がありますが、ボタンの本来のリンク先や、ボタンがトリガーするように設計されたアクションは特定できません。

そのため、最新のエージェントは複数のモダリティを組み合わせています。DOM とアクセシビリティツリーを使用して、インタラクティブ要素の構造化されたリストを取得し、それを視覚的なレンダリングと相互参照して、レイアウト、グループ化、視覚的なキューを理解します。

Google の役割は、これらのすべてのチャネルでクリーンなシグナルを提供することです。

エージェント向けのウェブサイトを構築する

エージェントがウェブサイトを操作しやすくするため、人間またはエージェントが行う必要のある操作はすべて、サイトのインターフェースに明確に反映されている必要があります。ベストプラクティスをいくつかご紹介します。

ゴースト要素を避ける。インタラクティブな要素を隠す透明なオーバーレイは避けてください。エージェントによる視覚的分析では、ノードが透明に見えても、覆われているノードは破棄されることがあります。
セマンティック HTML を使用します。セマンティック HTML を使用して、操作可能な要素を設計します。たとえば、変更された <div> 要素と <span> 要素に <button> タグと <a> タグを使用します。エージェントは、前者をインタラクティブ要素として認識します。
- セマンティック HTML を使用できない場合は、常に要素に適切な role と tabindex を指定します。例: <div role="button">
- <label> タグに for 属性を追加して、入力にリンクします。これにより、AI エージェントは、アクション文字列に直接付加されたラベルテキストを示すことで、フィールドの目的を理解できます。
視覚的な合図に CSS を使用する。CSS で cursor: pointer を設定します。これは、操作可能性の強いシグナルです。
画像分析の最小サイズを満たしている。アクションを完了するために必要なインタラクティブ要素は、モデルの視覚分析で除外されないように、8 平方ピクセルより大きく表示されるようにしてください。
レイアウトを安定させる。ウェブサイトのレイアウトが常に変化している場合（商品ページで [カートに追加] ボタンが商品カテゴリごとに異なる位置にある場合など）、スクリーンショットを撮るエージェントは混乱する可能性があります。
WebMCP ツールを作成して、API をサポートするエージェントの明示的なタスクとアクションを定義します。

次のステップ

サイトを「エージェント対応」にするために推奨するすべてのことは、サイトを人間にとってより使いやすくすることにもつながります。

ウェブサイトを AI エージェントに対応させることは、構造化され、アクセス可能で、セマンティックなウェブサイトを構築するという基本原則に改めて取り組むためのインセンティブとなります。

アクセシビリティツリーを監査する: 既存のツールを使用して、サイトの階層が機械可読で安定していることを確認します。
WebMCP について: ウェブサイトがエージェントとやり取りするためのウェブ標準案です。これらの API は、オリジントライアルで Chrome の本番環境で試験運用できます。