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

Kasper Kulikowski

Omkar More

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

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

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

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

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

スクリーンショット

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

HTML

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

アクセシビリティ ツリー

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

組み合わせたモダリティ

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

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

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

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

エージェントがウェブサイトをナビゲートできるようにするには、次のことを検討してください。

• 人間またはエージェントが行う必要なアクションはすべて、インターフェースに明確に反映される必要があります。
• レイアウトを安定させます。スクリーンショットを撮影するエージェントは、ウェブサイトのレイアウトが常に変化していると混乱する可能性があります。たとえば、商品ページの [カートに追加] ボタンが商品カテゴリごとに異なる場所にある場合などです。
• インタラクティブ要素を隠す可能性のある「ゴースト」要素や透明なオーバーレイは避けてください。エージェントによる視覚分析では、ノードが透明に見えても、覆われているノードは破棄される可能性があります。
• セマンティック HTML を使用して、操作可能な要素を設計します。変更された <div> 要素や <span> 要素よりも、<button> と <a> タグを使用することをおすすめします。エージェントはこれらをインタラクティブとして認識します。
  • セマンティック HTML を使用できない場合は、常に要素に適切な role と tabindex を指定してください。例: <div role="button">
• CSS で cursor: pointer を設定します。これは操作性の強いシグナルです。
• for タグに <label> 属性を追加して、入力にリンクします。これにより、AI エージェントは、アクション文字列に直接添付されたラベルテキストを示すことで、フィールドの目的を理解できます。
• ユーザー ジャーニーを続行するために必要なインタラクティブ要素は、視覚分析で除外されないように、表示領域が 8 ピクセル四方より大きくなるようにしてください。

次のステップ

サイトを「エージェント対応」にするために提案するすべてのことは、人間にとってもサイトを改善することにつながります。

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

• ウェブサイトがエージェントとやり取りできるようにするためのウェブ標準案である WebMCP について 読み、早期プレビュー プログラムに登録してテストを開始してください。
• A11y ツリーを監査する: 既存のツールを使用して、サイトの階層が機械可読で安定していることを確認します。