タグアーカイブ WordPress

AIエージェントに最適化するWeb制作の新常識！アクセシビリティツリーが鍵を握る理由

主要なAIプラットフォームのすべてが、今やウェブサイトを自律的に閲覧できる能力を備えている。Google Chromeの自動ブラウジング機能はページをスクロールしてクリックを行い、ChatGPTのAtlas（アトラス）はフォームへの入力や購入手続きまで代行する。しかし、これらのAIエージェントは、私たち人間と同じようにウェブサイトを見ているわけではない。

サイバーセキュリティ企業であるImperva（インパーバ）の調査によれば、2024年には自動化されたトラフィックが人間によるトラフィックを初めて追い越し、全ウェブインタラクションの51%に達した。この数字のすべてがAIエージェントではないが、ウェブの主役が非人間に移りつつある事実は明らかだ。私たちは今、人間だけでなくマシンに対しても最適化されたサイトを構築する必要がある。

AIエージェントとの互換性を高めるために最も効果的な方法は、実はウェブアクセシビリティの向上である。かつてはスクリーンリーダーのために用意されていた「アクセシビリティツリー」が、今やAIエージェントがサイトを理解するための主要なインターフェースへと進化している。この記事では、AIがサイトをどのように認識し、制作者がどう対応すべきかを詳しく紐解いていく。

AIエージェントはウェブサイトをどう認識しているのか

人間がサイトを訪れるとき、色やレイアウト、画像、タイポグラフィといった視覚的な情報を処理する。これに対し、AIエージェントがサイトを訪問した際に受け取る情報は、そのプラットフォームの設計思想によって大きく3つのアプローチに分かれる。それぞれの違いを理解することが、対応の第一歩となる。

スクリーンショットによる視覚的解析（Vision）

Anthropic（アンソロピック）の「Computer Use（コンピューター・ユース）」は、最も直感的なアプローチを採用している。AIモデルのClaude（クロード）がブラウザのスクリーンショットを撮影し、その画像を解析して「どこをクリックすべきか」「何をタイプすべきか」を判断する。これは、人間が画面を見て操作するプロセスをデジタルで再現したものだ。

Googleの「Project Mariner（プロジェクト・マリナー）」も同様のループを採用しており、視覚的な要素と背後のコード構造を組み合わせて動作する。この「視覚ベース」のアプローチは汎用性が高い一方で、計算コストが非常に高く、レイアウトのわずかな変更に影響を受けやすいという弱点がある。また、画面に描画されていない情報を読み取ることはできない。

アクセシビリティツリーによる構造把握（Structure）

OpenAIのChatGPT Atlasは、異なる道を選んだ。彼らの公式ドキュメントによれば、AtlasはARIA（エリア）タグを活用してページの構造や対話型要素を解釈している。ARIAとは、視覚障害者が使うスクリーンリーダーなどにウェブサイトの構造を伝えるための技術規格だ。

Atlasはレンダリングされたピクセルを解析するのではなく、ブラウザが生成する「アクセシビリティツリー」に問い合わせを行う。ここから「ボタン」「リンク」といった役割（ロール）や、その要素の名前を取得する。MicrosoftのPlaywright（プレイライト）MCPも同様で、視覚的なレンダリングよりも構造化されたアクセシビリティデータを優先してブラウザの自動操作を行っている。

視覚と構造を組み合わせたハイブリッド方式

実務で最も強力なエージェントは、これら両方の手法を組み合わせている。OpenAIの「Computer-Using Agent（CUA）」は、スクリーンショットの解析に加えて、DOM（ドキュメント・オブジェクト・モデル）の処理とアクセシビリティツリーのパースをレイヤー化して実行する。DOMとは、HTML文書をプログラムから扱うためのデータ構造のことだ。

Perplexity（パープレキシティ）の調査でも、アクセシビリティツリーのスナップショットと選択的な視覚解析を組み合わせた「ハイブリッド・コンテキスト管理」が有効であるとされている。視覚だけで判断するよりも、構造化されたデータを利用する方が、情報の信頼性と処理効率が格段に向上するためだ。

アクセシビリティツリーがAIとの接点になる理由

アクセシビリティツリーとは、ブラウザが支援技術のために生成する、DOMの簡略化された表現だ。通常のDOMには、デザインのための <div> や <span> 、スタイル指定、スクリプトなど、膨大な「ノイズ」が含まれている。これに対し、アクセシビリティツリーはそれらを削ぎ落とし、操作に関わる重要な要素だけを抽出する。

AIモデルにとって、処理できる情報の量（コンテキストウィンドウ）には限りがある。数千ものノードがあるDOMをすべて読み込ませるよりも、ボタンやリンク、見出し、フォームといった「意味のある要素」だけに絞り込まれたアクセシビリティツリーを渡す方が、AIははるかに正確にサイトを理解できる。OpenAIが「アクセシブルなサイトにすることは、Atlasがサイトを理解する助けになる」と明言しているのは、このためだ。

研究データが示すアクセシビリティの効果

カリフォルニア大学バークレー校とミシガン大学が2026年に発表した共同研究では、アクセシビリティの状態がAIエージェントの成功率にどう影響するかが検証された。Claude Sonnet 4.5を用いたテストの結果、標準的なアクセシビリティを備えた状態でのタスク成功率は78.33%であった。しかし、アクセシビリティを制限した条件では、その成功率は劇的に低下した。

例えば、キーボード操作のみ（スクリーンリーダー利用時を想定）に制限すると、成功率は41.67%にまで落ち込み、完了時間は2倍に増えた。さらに表示領域を制限した条件では、成功率は28.33%にまで低下している。この結果は、視覚的なヒントや複雑なJavaScript操作に頼り、アクセシブルな代替手段を提供していないサイトでは、AIエージェントが失敗する確率が高まることを示している。

構造化されたデータの優先順位

Perplexityの検索APIに関する論文（2025年9月）によると、彼らのインデックスシステムは、元の構造やレイアウトが保持された高品質なコンテンツを優先している。特にリストやテーブル形式で整理された「構造化データ」が豊富なサイトは、パース（解析）や情報の抽出が容易であるため、AIの回答に引用されやすくなるメリットがある。

セマンティックHTMLで構築するAIフレンドリーな基盤

アクセシビリティツリーはHTMLから構築される。つまり、正しい「セマンティックHTML」を使うことが、AI対応の最も基本的かつ強力な手段となる。セマンティックHTMLとは、タグそのものが意味を持つHTMLの書き方のことだ。例えば、単なる <div> ではなく <button> を使うことで、ブラウザは自動的にその要素を「ボタン」としてアクセシビリティツリーに登録する。

ネイティブ要素の活用とフォームのラベル付け

開発者が <div onclick="..."> のようなコードを書くと、AIはその要素がクリック可能であることを認識できない場合がある。一方で、ネイティブの <button> 要素を使えば、その役割とテキスト内容が正確に伝わる。同様に、フォームの入力フィールドには必ず <label> を紐付けるべきだ。ラベルがない入力欄を、AIは「何を入れればよいか不明な箱」として扱ってしまう。

また、 autocomplete 属性の活用も重要だ。これを使うことで、「名前」「メールアドレス」「住所」といったデータの種類をAIに明示できる。AIエージェントがユーザーに代わってフォームを入力する際、この属性があれば推測に頼らず自信を持ってフィールドを埋めることが可能になる。

見出しの階層とランドマークの明示

見出しタグ（ h1 から h6 ）を論理的な順序で使用することも欠かせない。AIエージェントは、見出しを頼りにページの構造を把握し、特定のセクションを探し出す。階層を飛ばして（ h1 の次に h4 を使うなど）しまうと、コンテンツの親子関係に混乱が生じる。さらに、 <nav> 、 <main> 、 <footer> といったランドマーク要素を使うことで、ページ内のどこに何があるのかをAIに一義的に伝えることができる。

このデモは、HTMLタグの選び方によってAIエージェントへの情報の伝わり方がどう変わるかを視覚化したものだ。

ARIAとレンダリング戦略の注意点

OpenAIは、動的なウェブコンテンツをアクセシブルにするための標準規格であるARIAの使用を推奨している。しかし、ARIAはあくまで「補足」であり、不完全なHTML構造を隠すための魔法ではない。W3C（ワールド・ワイド・ウェブ・コンソーシアム）が定めた「ARIAの第一ルール」は、ネイティブなHTML要素で実現できるならARIAを使うな、というものだ。

ARIAの誤用が招くリスク

アクセシビリティの専門家であるAdrian Roselli（エイドリアン・ロセリ）氏は、OpenAIの推奨が不適切なARIAの多用を招く可能性を懸念している。実際、WebAIMの調査によれば、ARIAを使用しているサイトは、そうでないサイトよりもアクセシビリティエラーが多い傾向にある。これは、ARIAが「とりあえずの修正」として誤って使われることが多いためだ。

正しいアプローチは、まずセマンティックなHTMLで土台を作り、タブパネルやツリービューのようにHTML標準にないカスタムコンポーネントを作る場合に限って、ARIAで役割や状態（ aria-expanded など）を補完することだ。キーワードを aria-label に詰め込むような行為は、初期のSEOにおけるメタキーワードの乱用と同じく、逆効果になる可能性がある。

サーバーサイドレンダリング（SSR）の必須性

ブラウザベースのAIエージェントはJavaScriptを実行できるが、すべてのAIクローラーがそうであるとは限らない。PerplexityBotやOAI-SearchBotなどは、コンテンツを収集する際にクライアント側のJavaScriptを実行しないことが多い。もしサイトがReactなどで構築され、ブラウザで実行されるまで中身が空の <div id="root"></div> であれば、AIは何も見つけることができない。

AIエコシステムにおいて「存在しない」と見なされないためには、サーバーサイドレンダリング（SSR）やプリレンダリングが不可欠だ。また、重要な情報をタブや展開メニューの中に隠さないことも推奨される。Microsoftのガイドラインによれば、AIシステムは隠されたコンテンツをレンダリングしない場合があるため、重要な詳細は初期表示のHTMLに含めるべきだとしている。

AI対応状況を確認するためのテスト手法

サイトを公開する前にブラウザで表示を確認するように、AIエージェントがどう認識しているかをテストすることも重要だ。最も手軽で効果的な方法は、スクリーンリーダー（macOSのVoiceOverやWindowsのNVDA）を使ってサイトを操作してみることだ。視覚を使わずに主要なタスクを完了できるなら、AIエージェントも同様に操作できる可能性が高い。

ツールによるアクセシビリティスナップショット

より直接的にAIの「目」を確認したい場合は、MicrosoftのPlaywright MCPが提供するアクセシビリティスナップショット機能が役立つ。これは視覚的なプレゼンスを取り除き、AIが処理する「役割」「名前」「状態」だけを構造化されたテキストとして出力してくれる。もし重要なボタンがこのスナップショットに現れない、あるいは適切な名前が付いていない場合は、改善が必要だ。

テキストブラウザでの見え方を確認する

Lynx（リンクス）のようなテキスト専用ブラウザでサイトを表示してみるのも有効な手段だ。画像やレイアウトをすべて剥ぎ取った状態で、コンテンツの順序や階層が論理的に整理されているかを確認できる。AIエージェントは、私たちがデザインした美しいレイアウトを見ているのではなく、その背後にある情報の流れを読み取っているからだ。

この記事のポイント

• AIエージェントはアクセシビリティツリーを主要なインターフェースとして利用している
• セマンティックHTML（正しいタグ選び）がAI最適化の最も重要な基盤となる
• ARIAは魔法ではなく、ネイティブHTMLで足りない部分を補うために使うべきだ
• JavaScriptに依存しすぎず、SSRを活用して初期HTMLにコンテンツを含めることが重要だ
• スクリーンリーダーでのテストは、AIエージェントとの互換性を測る最良の指標になる

海田 洋祐

・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験

www.aandgweb.co.jp