Webサイトは近いうちに、用事を済ませようとする人と、その人の代わりに動くAIエージェントという、2種類の訪問者に同時に対応する必要が出てくるかもしれません。実際に目指すべきなのは、機械専用の別サイトを作ることではありません。必要な情報を見つけやすく、操作をしやすくし、何が起きたかを人にもエージェントにも分かるほど明確に示すことです。

訪問者が達成したいことから考える

AIエージェントは、決められた手順をたどる従来のスクリプトとは異なります。ページの内容を判断し、いったん止まって次の行動を選び、状況の変化に応じて方針を変えられます。その柔軟性によって情報を調べたり、予約などのタスクを試みたりできますが、分かりにくいWebサイトでも問題なく使えるわけではありません。

Googleのエージェントによる電話機能は、正確な事業者情報がWebページの外でも重要になる理由を示しています。この機能は、営業時間や予約の空き状況を確認するために地元の事業者に電話をかけられます。エージェントが顧客と事業者をつなぐには、事業者の営業時間などの情報を参照でき、電話でも連絡が取れる必要があります。

同じことは、人間の訪問者にも当てはまります。ノンフライヤーを買おうとしている人に必要なのは、商品の詳細と購入までの分かりやすい道筋であり、無関係な会社沿革を長々とたどることではありません。短い訪問でも、用事をすぐに済ませられれば成功といえます。ページの滞在時間だけでは、その体験がうまくいったかどうかを判断できません。

スクリプトの実行前に重要な情報を読めるようにする

クライアントサイドJavaScriptは、ページの読み込み後に訪問者のブラウザーで動くコードです。多くのAIシステムは、ページを取得する際にこれを実行しません。価格、在庫状況、サイズなどの重要な情報がコードの実行後にしか表示されない場合、エージェントが受け取るページは不完全なものになるおそれがあります。

JavaScriptを無効にすると、有用な確認ができます。Adidasの商品ページなどでは、この方法でサイズや在庫状況の情報が欠けていることや、ページの内容を機械に伝える構造化データであるスキーママークアップの不備が見つかる場合があります。サイトの担当チームは、ブラウザーでスクリプトが実行される前に配信されるHTMLでも、そうした情報を読み取れるか確認する必要があります。

商品情報が整然と並ぶ層の上に、洗練されたビジュアル層が重なる商品ページ

▲ ビジュアル層の下にある商品情報

読み取れるコンテンツには、分かりやすい階層構造も必要です。言語モデルが情報を取得する際、ページ冒頭の約200語が特に重視される場合があります。主要な答えは冒頭近くに置くべきですが、情報取得時に考慮すべきこの点を、タスクを実行するエージェントが冒頭しか読まないという決まりと取り違えてはいけません。エージェントは目的を達成するために、ページの下の方にある特定の操作部品を探す必要があるかもしれません。

セマンティックHTMLは、その探索に役立ちます。JavaScriptのクリックハンドラーで汎用的なページ要素をボタンのように動かすのではなく、標準のボタンやフォームなどの要素を使って、操作部品の役割を示します。明確なラベルと標準的な操作部品は、アクセシビリティ支援ツールを使う人だけでなく、操作箇所を探すエージェントにも役立ちます。

フォームの結果を必ず確認できるようにする

フォームを送信しても、成功したかどうか訪問者に分からなければ、タスクは完了したとはいえません。エージェントは、ソフトウェアが調べられるページ構造である文書オブジェクトモデル（DOM）と、ページ内の要素を支援技術に伝えるアクセシビリティツリーを頼りにすることがよくあります。フォームの送信後にボタンの表示文字だけが変わる場合、エージェントが明確な完了状態を検知できないことがあり、再試行したり、タスクを諦めたりする可能性があります。

入力欄にフォーカスが当たり、成功とエラーの状態が視覚的に区別されたシンプルなWebフォーム

▲ フォーム送信後の明確な状態

フォームは、成功したことを明示するメッセージをページ構造内に表示すべきです。エラーも、ブラウザー標準の入力検証ツールチップだけに頼らず、該当箇所にアクセシブルなメッセージを表示する必要があります。ツールチップは、エージェントが参照できるDOMやアクセシビリティツリーに現れない場合があるためです。こうした変更によって、人間の訪問者には修正すべき点がより明確になり、エージェントには検知できる結果が示されます。

担当チームは、不要なフォーム入力の手順、操作を妨げるポップアップや通知も、可能な限り取り除くべきです。これらは人をいら立たせるだけでなく、訪問者と目的の操作との間に割り込むため、自動操作も同じように中断させかねません。

実際のタスクを試し、データの限界を見極める

有用な点検には、実際のタスクを試すことと、自動化された訪問者が何にアクセスできるかの確認を組み合わせます。

  1. JavaScriptなしでページを確認する。 商品やサービスの主要な情報を読み取れるか調べます。
  2. ChatGPTまたはClaudeで目的のタスクを試す。 エージェントに情報を探すか、該当する一連の操作を完了するよう依頼し、どこで迷ったり止まったりするか観察します。独自のブラウザー自動化スクリプトだけでは、商用エージェントの挙動を再現できない場合があります。
  3. フォームの結果をすべて確認する。 成功とエラーの状態が、アクセシブルなページ内容として表示されることを確かめます。
  4. サーバーログとCloudflareのデータを確認する。 これらの記録から、自動化された訪問者がどのページのパスをリクエストしたかを把握できます。サーバーログにはサイトへのリクエストが記録されますが、エージェントの目的や、タスクが失敗したすべての理由までは分かりません。

Google Analyticsだけでは、エージェントがつまずいた箇所や中断したタスクの全体像はつかめません。ログは調査の出発点にはなりますが、エージェントが利用者の望んだことを達成できたかどうかを測る指標ではありません。エージェントの挙動は試行ごとに変わる場合もあるため、1回の成功は次回の成功を保証しません。

Web上の情報に一貫性を持たせる

ページ設計だけでは、AIシステムが組織について何を述べるかを完全には制御できません。有用な対策は、組織の基本的な事実、提供内容、公開情報を一つにまとめ、更新とバージョン管理を続ける、正本となる組織情報の文書を用意することです。担当チームは、その共通の基準とWebサイト、各種ディレクトリ、プロフィール、その他の公開情報を照らし合わせ、食い違いを修正できます。

この取り組みは、コンテンツをアクセスしやすく、構造化され、見つけやすい状態にするテクニカルSEO（検索エンジン最適化）を土台としています。生成エンジン最適化（Generative Engine Optimization、GEO）によって、こうした基本が不要になるわけではありません。どのサイトもAIシステムによる説明や推奨の仕方を保証することはできませんが、表示の速いページ、明確な構造、一貫した情報、使いやすい操作部品が出発点であることに変わりはありません。

今すぐ取り組むこと

まず、訪問者にとって重要なタスクを一つ選びます。エージェントがJavaScriptなしで必要な情報を読み取り、標準的な操作部品を見つけ、操作を完了し、その結果を検知できるか確認します。次に、人として同じタスクを試し、どちらの訪問者の妨げにもなるものを取り除きます。サイトが変わるたびにテストを繰り返しましょう。エージェントを意識した設計は、人にとって分かりやすい体験を置き換えるのではなく、それを強化するときに最も効果を発揮します。