Episode Details

Podcastを今すぐここで聞く

このPodcast/書き起こしで得られること（要点）

• AIエージェント時代のWebサイト対応は、AI検索での露出対策とは別の話として重要度が高い
• HTMLの意味付けやアクセシビリティが、AIにとっての理解しやすさに直結する可能性が高い（Googleブログによると）
• 人間向けの見た目だけでなく、AIが操作しやすいレイアウトや導線が重要になる
• 小手先の見せ方より、標準的で分かりやすい構造と中身で戦う時代に入る

ラウンドナップWebコンサルティングの中山陽平です。

今回は、AIエージェント時代に向けて、Webサイトをどう整えておくべきかという話です。

最近は、情報探索や情報収集をAIに任せる場面が増えています。さらに踏み込んで使っている方であれば、意思決定のための材料集めをAIがかなり担うようになってきたことを、すでに体感しているのではないでしょうか。

そうなると、Webサイトは「人が直接見に来る場所」だけではなくなります。AIが情報を取りに来る。AIがブラウザを操作する。その前提で、自社のWebサイトをどう整えるかを考える必要が出てきます。

これはAI時代の露出の話（≒ いわゆるAIOやGEO）などの話とは違います

まず、これはAI検索で引用されやすくする話でも、AI OverviewやAImodeで露出を増やす話でもないです。

今回扱うのは、エージェントが情報を取りに来たとき、迷わず、正確に、負荷少なく扱えるWebサイトにしておくにはどうするか、という観点です。露出が上がるという文脈ではないのでご注意ください。

AIエージェントという新しいWeb利用者

AIエージェントという言葉から、ブラウザを勝手に操作してくれるもの、放っておいても作業を進めてくれるものなど、いろいろなイメージを持つと思います。ここでは厳密な定義には踏み込みません。

外から見た姿として考えると、これまでは人間がWebサイトを見て、情報を集め、資料を作り、意思決定をしていました。その情報収集の大きな部分を、自分ではない何か、つまりAIに任せる時代が来ている。まずはそのくらいに捉えておけば十分です。

もしまだ体験したことがなければ、セキュリティ面には注意しつつ、CodexのComputer Use、あるいは以前からある自動化 Playwrightのような、プログラムがブラウザを操作する仕組みを一度見てみるとよいと思います。

画面上でポインターが動き、処理が進んでいく様子を見ると、人間ではないものがブラウザを操作する時代が、かなり近いところまで来ていることが分かります。

もちろん、今はまだ遅い部分もあります。自分でやった方が早いと思う場面もあります。それでも、一度体感しておく価値はあります。AIがテキストで回答するだけでなく、画面を見て、判断し、操作していく世界を前提にすると、Webサイトに求められるものの見え方が変わるからです。

まず戻るべきHTMLの意味付け

最初に見るべきなのは、HTMLのセマンティック性、つまり意味付けです。

たとえば、クリックして何かアクションを起こす要素を作る場合、HTMLではbuttonタグを使うケースもあれば、aタグを使うケースもあります。一方で、意味を持たないdivタグなどにCSSやJavaScriptで見た目や挙動を寄せて、ボタンのように見せることもできます。

人間は見た目から「これはボタンだろう」と判断できます。しかしAIは、まずHTMLを読んで、そこから「これはアクションを起こすためのボタンだろう」と判断します。視覚を使わずにWebサイトを理解する場面では、Webの基本に沿った意味付けが重要になります。

SEOでは後回しにされがちだった構造

これまでSEOの世界では、HTMLの構造はそこまで重視されてこなかった面があります。H1くらいしか関係ない、HTML Lintで100点を取っても検索順位が上がるわけではない、といった感覚もありました。

経済的インセンティブが薄かったため、構造化データのようにGoogleが目に見えるメリットを出すもの以外は、どうしても後回しにされがちでした。極端な場合、全部をdivで組んでしまうような実装もあります。ブラウザのデフォルト挙動を避けたい、ゼロベースで見た目を作りたいという気持ちは分かります。

ただ、AIエージェントにとっては判断しづらくなります。button、a、input、form、labelといった要素を適切に使う。フォームではプレースホルダーだけに頼らず、きちんとラベルを付ける。HTMLとアクセシビリティの基本を整える。こうしたことが、改めて重要になってきます。

AIが操作しやすい画面設計

もう1つの大きなポイントは、視覚的な使いやすさです。

AIは今や、スクリーンショットを撮りながら画面を理解することもできます。Computer Useのような仕組みも、スクリーンショットを見ながら、どこを操作すべきかを判断しています。デバッグでも、色や余白、仕様通りかどうかを視覚的に確認できるようになっています。

ただし、視覚情報は重いです。HTMLはテキストなので軽いですが、スクリーンショットはすぐに1MB、2MBになります。それを動きながら取り続けるわけですから、AIにとっても負荷が大きい。だからこそ、なるべく視覚的な負荷を減らすことが重要です。

重要なボタン、ずれない画面、分かりやすい導線

重要なボタンは、重要だと分かるようにする。位置、色、サイズ、近さを分かりやすくする。ボタンを押した直後にレイアウトがずれて