株式会社ファストコーディングで主に国外のお客様を担当しています長谷川と申します。社長の大号令で全員ブログを書いていこうということになりまして、、、他の記事のようにすぐ使えるコードを書くことはできないのですが、お客様とお話ししていて気づいたことや、最近流行っていることを書いていこうと思っております。
どうぞ宜しくお願いします。
さて、つい先日ですが、お客様と新しいプロジェクトについてお話ししているときに、「そういえば、最近AIブラウザって聞くんですけど、新しいブラウザですよね？うちのサイトは対応してるんですかね？」と聞かれました。営業として日々お客様と接している私ですが、実はここ数ヶ月でAIブラウザに関する質問がじわじわ増えているんです。
皆様もご存知の通り、今年に入ってから、OpenAIの「ChatGPT Atlas」やPerplexityの「Comet」、The Browser Companyの「Dia」など、主要なAIブラウザが相次いでリリースされています。これまでブラウザといえば人間が操作するものでしたが、AIが代わりに操作する時代がすぐそこまで来ているのです。
お客様からは「うちのサイトは対応できているの？」というお声を聞くようになりました。今回は、AIブラウザとは何か、そしてAIブラウザに対応したコーディングとは具体的にどういうものなのか、実際に弊社で対応した事例も交えてお伝えします。
AIブラウザとは何か
そもそもAIブラウザとは、AI技術を組み込んだWebブラウザのことです。もっとシンプルに言いますと、AIが勝手に操作してくれるブラウザ、だと思えば分かりやすいと思います。
従来のブラウザは人間がクリックやスクロールで操作していましたが、AIブラウザではAI自身がWebサイトを理解し、自動で操作を行います。
例えば「この商品を最安値で探して購入手続きまで進めて」といった指示を出すと、AIが複数のサイトを巡回し、価格を比較し、カートに入れて購入画面まで進める、といったことが可能になります。
代表的なAIブラウザ製品
2025年は「AIブラウザ元年」と言っても過言ではありません。主要な製品が一気にリリースされたからです。
| 製品名 | リリース時期 | 提供元 | 特徴 |
|---|---|---|---|
| ChatGPT Atlas | 2025年10月 | OpenAI | ユーザーの行動を記憶し、情報収集からサイト操作まで統合的に行える |
| Perplexity Comet | 2025年7月 | Perplexity | 有料プラン加入者向けに招待制で提供中 |
| Dia | 2025年6月 | The Browser Company | Arc Browserの開発チームが手掛ける次世代ブラウザ |
| Edge with Copilot | 2025年4月 | Microsoft | 全ユーザーへAI機能を開放 |
| Genspark AI Browser | 2025年6月 | MainFunc社 | AI検索エンジンGenSparkで知られる企業の製品 |
お客様との会話でも、これらの製品名が頻繁に出るようになりました。ただあまりご存知なく、「AIブラウザ」がFirefoxやChromeのように、新しいブラウザの名前のようのおっしゃられていることもあって、正しくは浸透していないかなというのが所管です。AIブラウザ＝新しいブラウザの種類、と考えると良いと思います。
実際のプロジェクト事例―旅行業界のホテル検索サイト
ここで実際にあったお客様の事例をご紹介します。
先月、旅行代理店のお客様から相談を受けました。そのお客様はWebサイトでホテル検索サービスを提供しており、最近こんな問題に直面していました。
「AIブラウザでホテルを検索させてみたところ、途中で検索が止まってしまうんです。しかも、指定した条件と違う条件で検索されてしまうこともあって…」
詳しく話を聞くと、以下のような問題が起きているとのことでした。
- 「東京、2名、3月10日〜12日」という条件で検索するようAIに指示をしたのに、なぜか3月10日から22日になってしまう。
- 人数選択のドロップダウンで操作が止まってしまう。
- 検索ボタンを押せないことがある。
- 検索結果が一部しか表示されず、スクロールして続きを見られない。
弊社のエンジニアと一緒に、実際にそのサイトをAIブラウザで操作してみると、確かに問題ありでした。ただ毎回発生するわけでもないし、発生する条件もまちまちで、何かの特定のバグではないことは確かです。
車内に持ち帰りいろいろと実験を重ねた結果、根本的な原因は、デザイン性を重視したカスタムUI部品の多用と、ARIA属性の不足でした。見た目は美しいのですが、AIから見ると「何をすればいいかわからない」状態だったのです。
AIブラウザに対応したコーディングとは
先に書いた通り、AIブラウザは人間とは異なる方法でWebサイトを操作します。具体的には、DOMを解析し、JavaScriptのイベントを使ってクリックやスクロールを実行します。つまり、AIにとって「わかりやすいDOM構造」でなければ、正しく操作できません。
AIが理解できるDOMの条件
AIブラウザに対応するには、以下の条件を満たす必要があります。
- セマンティックなHTML構造
- ARIA属性による明確な役割の定義
- 基本的なクリック・スクロールイベントへの対応
見た目のデザインだけでなく、スタイリングを外しても理解できる構造が求められるのです。
セマンティックHTML＋ARIA属性の重要性
お客様から「セマンティックHTMLって聞いたことはあるけど、そこまで重要なの？」と聞かれることがあります。答えは「はい、極めて重要です」。
セマンティックHTMLとは、HTML要素を意味に沿って正しく使うことです。弊社は創業以来SEOに、最近はAIに強いコーディング、を謳っていることもありまして、ずっとこのセマンティックコーディングにはこだわってきました。たとえばですが、弊社でこれまで対応してきたプロジェクトの経験から、対AIに対しても、以下のような使い分けが基本になることがわかっています。
| 要素の役割 | 使うべきHTMLタグ | 重要な理由 |
|---|---|---|
| ナビゲーション | <nav> | AIが「サイト内の移動メニュー」と認識できる |
| 見出し | <h1>〜<h6> | ページの構造をAIが理解できる |
| ボタン | <button> | クリック可能な操作要素であることが明確になる |
| リンク | <a> | 別ページへの遷移であることがわかる （いいかえますと、onclickでリンクするような書き方はだめです） |
| メインコンテンツ | <main> | ページの主要な内容をAIが特定できる |
| フォーム | <form>、<fieldgroup> | 入力と送信の一連の流れをAIが理解できる |
お客様からよくこんな質問をいただきます。「見た目は同じなのに、なぜタグを使い分ける必要があるの？」答えは簡単です。AIは見た目ではなく、HTMLの構造を読み取るからです。デザイン上は同じに見えても、正しいタグを使わなければAIには役割が伝わりません。
実際、いくつか(*1 *2)の記事でも「セマンティックHTMLは、アクセシブルで、SEOに最適化され、将来性のあるWeb体験の基盤である」と指摘されています。これは人間のユーザーだけでなく、AIエージェントにとっても同様です。
ARIA属性で役割を明示する
ARIA（Accessible Rich Internet Applications）属性は、元々はアクセシビリティ向上のための技術ですが、AIブラウザ対応でも極めて重要です。
弊社でAI対応プロジェクトを進める中で、ARIA属性の有無でAIの動作が大きく変わることを実際に確認してきました。具体的には以下のような属性が重要です。
| ARIA属性 | 役割 | 使用例 |
|---|---|---|
aria-label | 要素の名前を説明 | 「商品を検索」「メニューを開く」などボタンの目的を明示 |
aria-expanded | 開閉状態を示す | ドロップダウンが開いているか閉じているかをAIに伝える |
aria-haspopup | ポップアップの存在を示す | クリックするとメニューが開くことをAIに予告 |
aria-controls | 操作対象を指定 | このボタンがどの要素を制御するかを明示 |
role | 要素の役割を定義 | 検索フォーム、ナビゲーション、ダイアログなどの役割を示す（これが一番重要） |
例えば検索フォームであれば、「これは検索フォームである」「ここに入力する」「このボタンを押せば検索できる」という情報をARIA属性で明示します。そうすることで、AIは迷わず操作できるようになります。
Medium (*3)の記事でも「セマンティックHTML、論理的なタブ順序、正確な要素の命名、包括的なARIAロールは、アクセシビリティ基準への準拠だけでなく、AIとのインタラクションへの準備も保証する」と指摘されています。
カスタム部品の落とし穴
お客様のサイトで多く見られるのが、デザイン性を重視したカスタムUI部品です。見た目は美しいのですが、AIブラウザからすると大きな問題があります。弊社でこれまで対応してきたプロジェクトから見えてきた問題点を整理すると、以下のようになります。
よくあるカスタムUI部品の問題点
| 問題 | 具体例 | なぜAIが操作できないのか |
|---|---|---|
| 操作方法が不明確 | <div>をボタンの代わりに使っている | 標準の<button>であればAIは操作を知っているが、カスタム部品では判断できない |
| 特殊なイベントに依存 | マウスオーバーでしか開かないメニュー | AIは基本的にクリックやスクロールで操作するため、マウスオーバーのみだと操作不可 |
| スクロールイベントの不備 | 無限スクロールが実装されていない | AIがページの続きを読み込めず、全体を把握できない |
| ARIA属性の欠如 | カスタムドロップダウンに属性がない | AIがその要素の役割を理解できない |
実際の対応プロジェクトで何度も経験したのが、「デザインは最高なのに、AIが全く操作できないサイト」という状況です。見た目と機能性の両立が、今後ますます重要になってきます。
特に注意すべき「マウスオーバー」依存
お客様のサイトで最も多い問題が、マウスオーバー（カーソルを乗せる操作）でしか動作しないメニューやドロップダウンです。
人間であればマウスを動かしてメニューを開けますが、AIブラウザはクリックやスクロールといった基本的な操作を使います。マウスオーバーのみに依存していると、AIは操作できません。
弊社での対応経験から、クリックイベントにも対応することで解決できることがわかっています。人間もAIも操作できる設計が理想的です。
試行錯誤、そして改善へ
お客様と相談しながら、段階的に改善を進めました。
| フェーズ | 改善内容 | 改善のポイント |
|---|---|---|
| 第1フェーズ | 日付ピッカーの見直し | カスタムUIから標準の日付入力フォームに変更。見た目はCSSでカスタマイズしつつ、AIが確実に操作できる形に |
| 第2フェーズ | ドロップダウンの改善 | マウスオーバーのみだった仕様を、クリックでも開くように変更。ARIA属性も追加して役割を明確化 |
| 第3フェーズ | 検索ボタンと結果表示 | 検索ボタンにARIA属性を追加。無限スクロールも標準的な実装に変更してAIが続きを読み込めるように |
各フェーズでエンジニアが実装した後、私も立ち会ってAIブラウザでテストを行いました。実際にAIが動いている様子を見ると、「ここで止まるんだな」「ここは認識できているんだな」というのが視覚的にわかり、非常に勉強になりました。特に印象的だったのは、日付ピッカーの改善です。見た目はぜんぜん変わらないのに、AIの動きが劇的に改善されたのを見て、「構造の重要性」を実感しました。
実はこの案件では、私自身も何度か現場のエンジニアと一緒にテストに立ち会いました。AIがどこで止まるのか、どう操作しようとしているのかを見るのは、営業の立場からも非常に勉強になりました。お客様への提案の際にも、この経験が活きています。
今後はすべてのコーディングがAI対応を求められる時代へ
お客様との会話の中で、最近こんな質問が増えています。「AIブラウザ対応って、今すぐ必要ですか？」
私の答えは「準備は今から始めるべきです」です。
2025年は主要なAIブラウザが出揃った年であり、今後数年でAIによるWeb操作は一般化するでしょう。ECサイトであれば、AIが価格比較をしながら自動で購入するケースが増えます。予約サイトであれば、AIが空き状況を確認して予約まで完了させます。そのとき、AIが操作できないサイトは選択肢から外されてしまうかもしれません。いい商品を掲載しているのに、AIにとって使いにくいから、結局ユーザに届かなくなるのです。
まずはご相談ください。
弊社ではAIに対応したコーディングに積極的に取り組んでおり、既存サイトの診断から再構築まで幅広くサポートしています。「うちのサイトは大丈夫かな」と不安を感じている方は、ぜひお気軽にご相談ください。現場の知見を活かして、最適な対応方法をご提案します。
参考文献
- *1 Julian Pineda (2025). “Why Accessibility and Semantic HTML Matter for the Future of AI Tools Like OpenAI’s ‘Operator'”, Medium. https://medium.com/@julianpinedayyz/why-accessibility-and-semantic-html-matter-for-the-future-of-ai-tools-like-openais-operator-1c1c90678ec4
- *2 Gerry Leo Nugroho (2025). “Semantic HTML in 2025: The Bedrock of Accessible, SEO-Ready, and Future-Proof Web Experiences”, DEV Community. https://dev.to/gerryleonugroho/semantic-html-in-2025-the-bedrock-of-accessible-seo-ready-and-future-proof-web-experiences-2k01
- *3 Apexure (2025). “How to Build AI Agent Friendly Websites?”. https://www.apexure.com/blog/ai-agent-friendly-websites
