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

Kasper Kulikowski

Omkar More

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

しかし、多くのウェブサイトは、複雑なホバー状態、レイアウトの変更、スムーズな動きなど、人間にとって美しいデザインになるように設計されています。これは、エージェントにとっては機能的に壊れている状態です。

エージェントがサイトをどのように見ているか

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

エージェントは、スクリーンショット、生の HTML、ユーザー補助ツリーの 3 つの主な方法でウェブサイトを表示できます。

スクリーンショット

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

HTML

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

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

ユーザー補助ツリー

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

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

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

そのため、最新のエージェントは複数のモダリティを組み合わせています。DOM とユーザー補助ツリーを使用して、インタラクティブ要素のクリーンで構造化されたリストを取得し、それを視覚的なレンダリングと相互参照して、レイアウト、グループ化、視覚的な手がかりを把握します。

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