AIエージェントはウェブサイトをどう見るのか

AIエージェントがサイトを見る3つの方法

AIエージェントがウェブサイトを見る方法は、大きく3つあります。1つ目は、画面をスクリーンショットのように見る方法です。2つ目は、ウェブサイトの構造を読む方法です。3つ目は、その2つを組み合わせて使う方法です。

それぞれのアプローチによって、AIエージェントがサイトをどこまで正確に理解できるかが変わります。そしてその理解の深さは、サイト設計の質に大きく左右されます。

画面を写真のように見る方法

AIエージェントは、人が画面を見るように、ウェブサイトの画面を画像として見ることがあります。ボタンがどこにあるか、文字がどこにあるか、入力欄がどこにあるかを、画面を見ながら判断します。

AnthropicのClaude Computer Useは、この方法に近い仕組みです。まず画面をキャプチャし、その画面を分析して、どこをクリックするかを決めます。クリックしたあと、もう一度画面を見て次の行動を決めます。

GoogleのProject Marinerも似た方法を使います。まず画面とコードの構造を見て何をするかを計画し、そのあと実際のユーザーのようにクリックしたり入力したりします。

ウェブサイトの構造を読む方法

AIエージェントは、ウェブサイトの中にある構造を読み取ります。ここで重要になるのが「ラベル」です。ラベルとは、ウェブサイトの大事な部分だけを整理して示す、地図のようなものです。

<img alt="商品写真">、<button>購入する</button>、<nav>、<h1>のように、HTMLに正しい意味と名前を入れることが大切です。するとブラウザはそれをもとに「これは購入するボタンだ」「これはメールアドレスの入力欄だ」というラベルを作ります。

OpenAIのChatGPT Atlasは、このラベル情報を使います。ボタン、リンク、入力欄などの要素がどのような役割を持っているのかを読み、その情報をもとにウェブサイトを理解します。MicrosoftのPlaywright MCPも同様に、ラベルスナップショットという構造情報を使い、より安定した理解を実現します。

画面と構造を一緒に見る方法

性能の高いAIエージェントは、多くの場合この2つの方法を組み合わせて使います。画面も見ながら、ウェブサイトの構造も読みます。

OpenAIのComputer-Using Agentは、スクリーンショット、DOM、ラベルを一緒に見ます。Perplexity Cometも、ラベルと画面情報を組み合わせて使います。

主要プラットフォームの比較

まとめると、AIエージェントはラベルをますます重要な情報として使うようになっています。ウェブサイトのラベル構造がきちんと整理されていれば、AIはそのサイトをよりよく理解し、より正確に行動できます。

ラベルはAIエージェントにとってサイト内の案内図

ラベルは、私たちがよく言うサイトマップとまったく同じものではありません。わかりやすく言うと、AIエージェントがウェブサイトの中で道に迷わないように助ける「AI向けのガイド」に近いものです。

一般的なサイトマップがウェブサイトにどのようなページがあるのかを教えるものだとすれば、ラベルは、1つのページの中で何がボタンで、何がリンクで、何が見出しで、何が入力欄なのかを教えるものです。だからAIエージェントは、ラベルを見ることで、このページで何を読み、何を押し、どこに入力すればよいのかを理解しやすくなります。

ボタンに名前がなかったり、入力欄に説明がなかったり、重要な情報が隠れていたりすると、AIは道に迷いやすくなります。

DESIGN PRINCIPLE

意味のあるHTMLが最も重要です

HTMLにはさまざまな種類のタグがあります。ボタンは<button>、リンクは<a>、見出しは<h1>のようなタグで表します。このようなタグをそれぞれの役割に合うように使うことを「セマンティックHTML」といいます。簡単に言えば、ウェブサイトの各部分に正しい名前札を付けることです。

良い例：本物のボタン

<button type="submit">航空券を検索</button>

このように書けば、AIは「これはボタンで、航空券を検索するためのボタンなのだ」と理解できます。

悪い例：見た目だけのボタン

<div class="btn" onclick="searchFlights()">航空券を検索</div>

人の目にはボタンのように見えるかもしれません。けれどもコード上では、これはただのdivです。そのためAIは、これがクリックすべきボタンなのかをすぐには判断しにくくなります。

入力欄には説明を付ける必要があります

ウェブサイトに名前、メールアドレス、電話番号を入力する欄があるなら、それぞれの欄に説明が必要です。そうすれば、人もAIも、何を入力すればよいのかがわかります。

良い例

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" autocomplete="email">

autocomplete="email"も重要です。この属性は、ブラウザとAIに「ここにはメールアドレスを入れればよい」と教えてくれます。

悪い例

<input type="text" placeholder="メールアドレスを入力してください">

見た目には問題なさそうに見えますが、入力欄と説明がきちんと結びついていません。そのため、AIや支援技術にとって理解しにくくなることがあります。

見出しと領域も順番に整理する必要があります

ウェブページには見出しがあります。いちばん大きな見出しはh1、その次の見出しはh2、さらに小さい見出しはh3というように、順番に使う必要があります。本のタイトル→章タイトル→小見出しという構造と同じです。

また、ウェブページにはメニュー、本文、横の領域、下部の情報といった区画があります。このような場所には、<nav>、<main>、<aside>、<footer>のようなタグを使います。

<nav aria-label="メインメニュー">
  <ul>
    <li><a href="/products">製品</a></li>
    <li><a href="/pricing">料金</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>航空券検索</h1>
  </article>
</main>

このように作ると、AIは「ここはメニューで、ここは本文なのだ」と理解できます。

重要な内容は最初から見えるようにする必要があります

AIエージェントやAIクローラーがウェブサイトを見るとき、すべてのJavaScriptを実行するとは限りません。問題は、重要な内容がJavaScriptの実行後に初めて表示される場合です。最初のHTMLには空の画面だけがあり、あとからReactが内容を読み込む形になっていると、一部のAIクローラーはその内容を見られないことがあります。

• •価格、商品説明、在庫、重要な情報はタブやアコーディオンの奥に隠さない
• •サーバーサイドレンダリング（SSR）またはプリレンダリングで最初のHTMLに内容を含める
• •Next.jsのApp RouterはデフォルトでSSRになるため、この問題を自然に解決できる

AIが使いやすいウェブサイトかどうかをテストする方法

人にとって見やすいかどうかを確認するだけでは不十分です。これからは、AIエージェントが理解できるかどうかも確認する必要があります。

スクリーンリーダーでテストする

スクリーンリーダー（VoiceOver、NVDA、TalkBackなど）がボタン名を正しく読み、入力欄の説明をきちんと伝え、メニューと本文を区別できるなら、そのウェブサイトはAIエージェントにとっても理解しやすい構造である可能性が高いです。

Playwright MCPでラベルスナップショットを確認する

Playwright MCPを使うと、AIが見ているラベルスナップショットを確認できます。

[heading level=1] 航空券検索
[navigation "メインメニュー"]
  [link] 製品
  [link] 料金
[main]
  [textbox "出発空港"] value=""
  [textbox "到着空港"] value=""
  [button] 航空券検索

この構造を見ると、AIはどの部分が見出しで、どの部分がメニューで、どの部分が入力欄なのかを簡単に理解できます。

まとめ

AIエージェントは、ウェブサイトを人間とまったく同じように見ているわけではありません。画面を画像として見ることもあれば、コード構造を読むこともあります。そして、ラベルを通じてボタン、リンク、入力欄の意味を理解することもあります。

• •セマンティックHTMLが基本：ボタンはボタンタグで、リンクはリンクタグで、入力欄はラベルと一緒に作る
• •ラベルがAIの案内図：ラベルがきちんと作られていれば、AIエージェントはサイトをよりよく理解し、より正確に行動できる
• •重要なコンテンツは隠さない：AIクローラーがJavaScriptを実行できない場合、隠れている内容を見ることができない。SSRやプリレンダリングが重要
• •スクリーンリーダーでテスト：スクリーンリーダーがきちんと読めるサイトは、AIエージェントにとっても理解しやすい