AIエージェント時代に向けて、Webサイトでは何を見直すべきですか？

まず見直すべきなのは、HTMLの意味付けと、画面上の操作しやすさです。ボタン、リンク、フォーム、ラベルなどを本来のHTML要素で正しく表現し、AIがDOMから役割を判断しやすい状態にしておくことが重要です。あわせて、重要な導線が視覚的にも分かりやすく、レイアウトが途中でずれない設計にしておく必要があります。

AIエージェントにフレンドリーなサイトとは、AIOやGEO対策と同じですか？

同じではありません。このPodcastで扱っているのは、AI検索で引用されやすくする話ではなく、AIエージェントがWebサイトを理解し、操作しやすくするための設計です。露出を増やす対策というより、AIが情報収集やブラウザ操作を行う時代に備えて、サイトを使いやすく整える観点です。

なぜセマンティックなHTMLがAIエージェントにとって重要なのですか？

人間は見た目から「これはボタンだ」「これは入力欄だ」と判断できますが、AIはまずHTML構造やDOMを読んで役割を推測します。見た目だけをCSSやJavaScriptで作り込み、意味を持たない要素でボタンやフォームを表現していると、AIにとって判断しづらくなります。button、a、input、form、labelなどを適切に使うことが、AIにも人にも伝わりやすいサイトにつながります。

AIエージェント対応で、見た目のデザインはどう考えればよいですか？

奇抜な見た目で差を出すより、標準的で分かりやすいレイアウトを優先するべきです。AIはスクリーンショットを見ながら操作することもできますが、視覚情報は重く、画面の迷いやレイアウトシフトは操作の妨げになります。重要なボタンや導線が明確で、位置、色、サイズ、近さが自然に理解できる、人間にもAIにも使いやすい設計が重要です。

次のWebサイトリニューアルでは、何を優先すべきですか？

セマンティックなHTML、認知負荷の低い画面設計、レイアウトシフトの少なさ、アクセシビリティ、そして中身の質を優先すべきです。AIが情報を集め、場合によってはブラウザを操作する前提では、見た目の派手さや小手先の誘導よりも、情報が整理され、標準的な構造で理解しやすいことが価値になります。Webサイトを情報の出所として分かりやすく整え、エージェントにとっても操作しやすい状態にしておくことが大切です。

第591回：AIに伝わるWebサイトへ中小企業が次のリニューアルで持つべき視点

このページの目次 非表示

1 Podcastを今すぐここで聞く

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

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

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

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

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

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

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

6 標準的な構造と中身で勝つ時代

6.1 奇抜なUIよりも、よくある分かりやすさ

7 まとめ：AIに伝わり、AIが扱いやすいWebへ

8 関連する公式情報

9 よくある質問

10 配信スタンド

11 ■Podcast /Webinar への質問は

12 運営・進行

Podcastを今すぐここで聞く

Podcast: Embed

この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にとっても負荷が大きい。だからこそ、なるべく視覚的な負荷を減らすことが重要です。

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

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

Core Web Vitalsでもレイアウトシフトは好ましくない要素ですが、AIエージェントにとっても大きな妨げになります。ここだと思って押したら位置が変わってしまう。すると、エージェントはもう一度状況を判断し直さなければなりません。

今は、エージェントによるWebサイト活用がそこまで一般化していないため、どれくらい行動制限につながるかは見えにくいかもしれません。しかし、ブラウザ操作が当たり前になった未来では、操作しづらいWebページは致命的になる可能性があります。

Webサイトのリニューアルは、毎年行うものではありません。3年に一度くらいのことも多いはずです。3年後には、エージェントを前提にした世界になっていてもおかしくありません。次にリニューアルする時は、セマンティック性のあるHTML、認知負荷の低い設計、レイアウトシフトの少ない画面、視覚的に使いやすいシンプルなサイトを、大きな指針にするべきだと考えています。

標準的な構造と中身で勝つ時代

私はもともと、AI時代のWebサイトはデータベースに近いものになっていくと思っていました。サイトの中身をAIが読み取り、それをもとに情報をまとめる。意思決定や操作は人間がするのだろう、と考えていました。

しかし、ブラウザを自動操作する技術の正確性や速度が、思った以上に上がっています。今は「AIが勝手に操作するのは怖い」「セキュリティ的にどうなのか」という感覚も強いですし、実際に危ない部分もあります。それでも一定のラインを超えると、当たり前のように使われるようになるでしょう。

そうなると、Webサイトを情報の出所であるDBとして分かりやすくしておくこと、網羅性のある情報を配置しておくことに加えて、エージェントに対するユーザビリティも考える必要があります。

奇抜なUIよりも、よくある分かりやすさ

AIにとって一番分かりやすいのは、よくあるレイアウト、よくあるやり方です。奇抜なUIではなく、「普通はこの辺にこれがあるよね」という標準的な構造を守る。そして、情報やサービスの中身の質で勝っていく。そういう形にしていかなければなりません。

逆に、テクニックや見た目の違い、小手先の心理的な誘導で差を感じさせていたところは、今後ジリ貧になっていくと思います。人間の認知的な部分に強く依存して売っている意識があるなら、そのバフが効かなくなる前提で見直した方がよいでしょう。

たとえば「値下げしました」と見せても、実は毎月値下げしていることはAIに調べさせればすぐ分かります。アップセルをどこで出すか、この段階で何を見せるか、といった人間向けの見せ方も、AIが情報収集を始めると必要なければ見ません。買う側にとっては、超有能なスタッフが代わりに買いに行ってくれるようなものなので便利です。しかし売る側としては、今までそうした見せ方で乗せてきた部分がある会社ほど、脱却しないと急に売れなくなることも十分考えられます。

まとめ：AIに伝わり、AIが扱いやすいWebへ

今回お伝えしたかったのは、AIエージェント時代のWebサイト対応は、単なるAI検索の露出対策ではないということです。エージェントが情報を取りに来る、場合によってはブラウザを操作する。そのときに、正しく理解され、迷わず扱われるWebサイトにしておく必要があります。

まずHTMLの構造、セマンティック性、意味付けをきちんと整えること。次に、AIが操作しやすいように、分かりやすく、ずれにくく、人間にも使いやすいアクセシビリティの観点で構成すること。そして、見た目で奇をてらうのではなく、AIが分かりやすい標準的な構造をベースに、中身で勝負する時代に備えることです。

私たちとしても、BrowserやComputer Useを使って実際に操作させること、HTMLをきっちり整えることなど、かなり気を使って作るようにしています。まだAIエージェントによる申し込みなどは少なく、実証実験としては難しい面もありますが、間違いなくそちらに流れていくと見ています。

どうしたらよいか、今の自社サイトにどんな問題があるのかで悩んでいる方は、診断だけでもよいのでご相談ください。次のリニューアルでは、人間に見せるためのWebサイトだけでなく、AIに伝わり、AIが扱いやすいWebサイトという視点を、ぜひ入れていただければと思います。

よくある質問

AIエージェント時代に向けて、Webサイトでは何を見直すべきですか？: まず見直すべきなのは、HTMLの意味付けと、画面上の操作しやすさです。ボタン、リンク、フォーム、ラベルなどを本来のHTML要素で正しく表現し、AIがDOMから役割を判断しやすい状態にしておくことが重要です。あわせて、重要な導線が視覚的にも分かりやすく、レイアウトが途中でずれない設計にしておく必要があります。
AIエージェントにフレンドリーなサイトとは、AIOやGEO対策と同じですか？: 同じではありません。このPodcastで扱っているのは、AI検索で引用されやすくする話ではなく、AIエージェントがWebサイトを理解し、操作しやすくするための設計です。露出を増やす対策というより、AIが情報収集やブラウザ操作を行う時代に備えて、サイトを使いやすく整える観点です。
なぜセマンティックなHTMLがAIエージェントにとって重要なのですか？: 人間は見た目から「これはボタンだ」「これは入力欄だ」と判断できますが、AIはまずHTML構造やDOMを読んで役割を推測します。見た目だけをCSSやJavaScriptで作り込み、意味を持たない要素でボタンやフォームを表現していると、AIにとって判断しづらくなります。button、a、input、form、labelなどを適切に使うことが、AIにも人にも伝わりやすいサイトにつながります。
AIエージェント対応で、見た目のデザインはどう考えればよいですか？: 奇抜な見た目で差を出すより、標準的で分かりやすいレイアウトを優先するべきです。AIはスクリーンショットを見ながら操作することもできますが、視覚情報は重く、画面の迷いやレイアウトシフトは操作の妨げになります。重要なボタンや導線が明確で、位置、色、サイズ、近さが自然に理解できる、人間にもAIにも使いやすい設計が重要です。
次のWebサイトリニューアルでは、何を優先すべきですか？: セマンティックなHTML、認知負荷の低い画面設計、レイアウトシフトの少なさ、アクセシビリティ、そして中身の質を優先すべきです。AIが情報を集め、場合によってはブラウザを操作する前提では、見た目の派手さや小手先の誘導よりも、情報が整理され、標準的な構造で理解しやすいことが価値になります。Webサイトを情報の出所として分かりやすく整え、エージェントにとっても操作しやすい状態にしておくことが大切です。