AIエージェントに伝わるサイトにするために、知っておきたいこと

AIエージェントでウェブ検索をすることが増えましたね。

私自身、直接Webページまで見に行く機会はぐっと減りました。

Notion AIやGeminiが取得した内容を確認し、必要に応じて元ソースを閲覧、という調べ方にしています。

そんな流れの中で、先日 web.dev で「AIエージェントがウェブサイトをどう認識するか」についての記事を読みました。今後のWeb制作を考えるうえで大事なポイントが整理されていて、とても参考になったのでシェアします。

個人的に一番の学びだったのが、AIエージェントはアクセシビリティツリーを重要な情報源として使っているという点。AIコーディングがどんどん進んでいるいま、コードの細部まできっちり作り込むことがより一層求められていると改めて感じました。

どんな仕組みでサイトが読まれているのか、整理してみました。

AIエージェントは、サイトをどう「読む」のか

ウェブサイトをリニューアルしたり、新しいページを公開したりするとき、「見た目」や「使いやすさ」を意識する方は多いと思います。

でも最近は、それに加えて「AIエージェントにちゃんと伝わるか」という視点も持っておく必要がでてきました。

AIエージェントは、人間がブラウザで見るのと同じようにサイトを「見て」いるわけではありません。ページの構造を解析して、そのサイトが何のためのものかを判断しています。

その仕組みと、制作視点で意識しておきたいポイントをまとめています。

AIエージェントが使う3つの「読み方」

AIエージェントがサイトを解析するとき、主に3つの方法を組み合わせています。それぞれの特徴を見てみましょう。

1. アクセシビリティツリー（ページの目的理解）

ブラウザには、アクセシビリティツリーという仕組みが標準で備わっています。

ページの目的と機能をシンプルな形で把握できるため、AIエージェントにとって、このアクセシビリティツリーはとくに重要な情報源です。

CSSのデザインやアニメーションといった見た目の情報は省かれ、各要素が「何か」「どんな状態か」だけが取り出されます。

たとえば、あるボタンが「送信ボタン」なのか「キャンセルボタン」なのか、チェックボックスがオンかオフか、といった情報が整理されたイメージです。

2. DOM（ページの論理構造理解）

次に、AIエージェントはDOMを参照します。

DOMとは、ブラウザがHTMLを読み込んだあとに内部で組み立てるツリー構造のことです。JavaScriptで動的に変化した後の状態を見るため、元のHTMLファイルとは少し違う場合もあります。

要素の入れ子関係や、IDやクラス名、テキストの内容などを確認します。

たとえば「今すぐ購入」というボタンが特定の商品情報のHTMLの中に入っていれば、エージェントは「このボタンはその商品に関係している」と理解できます。見た目のレイアウトではなく、コードの構造から関係性を読み取ります。

3. スクリーンショット（ビジョン解析）

3つ目は、ページのスクリーンショットを画像として解析する方法です。

要素の位置や色、大きさ、配置の近さなどから、ページの構造を視覚的に読み取ります。

ただし、この方法は処理に時間とコストがかかります。そのため、HTMLやアクセシビリティツリーだけでは判断しきれない部分を補う使い方が多いです。

3つの方法を組み合わせてギャップを埋める

AIエージェントは、これら3つを組み合わせることで、コードだけでは読み取りにくいギャップを補っています。

わかりやすい例が、<div> タグで作られた「ボタンっぽいもの」です。見た目はボタンでも、HTMLとして意味的な役割が与えられていないことがあります。そういった場合、エージェントはスクリーンショットで見た目を確認しながら、アクセシビリティツリーで role="button" が設定されているかどうかも合わせてチェックし、総合的に判断します。

制作側として押さえておきたいポイント

3つの解析手法を踏まえて、AIエージェントがサイトを正しく認識できるよう、開発チームと共有しておきたいポイントをまとめています。

1. セマンティックHTMLを使うこと

汎用的な <div> タグより、<button> や <a> など意味を持つHTMLタグを使うことが基本です。コードに「意味」が込められていると、エージェントもページの目的を正確に理解しやすくなります。

2. アクセシビリティツリーを定期的に確認する

Chromeのデベロッパーツールを使えば、サイトのアクセシビリティツリーを確認できます。ページの構造が意図どおりに伝わっているかを、定期的にチェックする習慣を持っておくと、品質管理にも役立ちます。

なお、1点目のセマンティックHTMLを使っていても、書き方によってはツリーから除外され（generic / ignore 扱いになる）場合があるので、ここは要チェックです。

3. レイアウトを安定させる

ページのコンテンツ構成が複雑だと、スクリーンショットで解析するエージェントが混乱することがあります。とくにUIの基本的な構造は、できるだけ規則性をもって決めておきましょう。

まとめ

AIエージェントがウェブサイトを読み解くとき、アクセシビリティツリー・HTML構造・スクリーンショットの3つを組み合わせて使っています。

それぞれ役割とコストが異なり、エージェントは状況に応じて使い分けながら「このサイトで何ができるのか」を理解します。

制作側としてできることは、セマンティックなHTML・アクセシビリティ・安定したレイアウトへの意識を、開発チームと共有しておくことが大事だなと思いました。

「人にとって使いやすいサイト」と「AIに伝わりやすいサイト」は、意外と同じ方向性だなと記事を読んで感じました。少しずつ整え、どちらにとっても読みやすいウェブサイトをつくっていきたいですね。

参照記事： 

Build agent-friendly websites | web.dev (5/8/2026 閲覧)