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

Kasper Kulikowski

Omkar More

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

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

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

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

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

スクリーンショット

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

HTML

エージェントは DOM を分析し、HTML を読み取ります。要素のネスト方法、DOM ツリーの論理階層、構造を定義する ID やクラスなどの属性、サイトの情報バックボーンを形成する生データ文字列を理解します。これにより、エージェントは要素間の関係を把握できます。[今すぐ購入] ボタンが商品コンテナ内にある場合、エージェントはそのボタンがその特定の商品に属していると想定します。

ユーザー補助ツリー

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

複数のモダリティの組み合わせ

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

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

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