公開日: 2026 年 6 月 22 日
AI エージェントがテキストの生成だけでなく、ウェブサイトの閲覧、操作、複雑なタスクの完了を行うように進化するにつれて、デベロッパーは、これらの非人間ユーザーに高品質のエクスペリエンスを提供するための専用ツールを必要としています。Lighthouse の新しいエージェント型ブラウジング カテゴリと Chrome DevTools の機能強化により、エージェント対応のウェブサイトを構築するための決定論的監査とテスト フレームワークが提供されます。
エージェント ウェブへの移行には、エージェントがウェブを検索する段階と、エージェントがウェブを使用する段階の 2 つの主要な段階があります。
エージェントがウェブサイトを検索する場合でも、検索エンジン最適化（SEO）の原則は適用されます。このブログ投稿では、エージェントがウェブサイトと直接やり取りする場合にデベロッパーが実行できる作業について説明します。
エージェント対応のウェブサイトを監査、改善、デバッグする
AI エージェントがサイトで予約や注文などのフローを確実に完了するには、予測可能で機械可読なシグナルが必要です。ここでは、その準備状況を評価し、改善に役立つツールを紹介します。
ウェブサイトのエージェント対応状況を監査する
Lighthouse の新しいエージェント型ブラウジング カテゴリは M150 以降で利用可能で、デベロッパーは一連の決定論的監査を利用して、ウェブサイトがエージェントにどれだけ適しているかを評価し、新しい業界標準の採用を促進できます。
監査でチェックする内容: 監査では、マシン インタラクションに不可欠な 3 つの主要分野に焦点を当てます。
- アクセシビリティ: アクセシビリティは、まず人間を対象としています。エージェントは、DOM から派生した支援技術（AT）用のアクセシビリティ ツリーを主要なデータモデルとして使用します。エージェント ブラウジング監査では、アクセシビリティ監査のカテゴリのうち、マシンとのやり取りに不可欠なサブセットが検証されます。たとえば、どちらの監査でも、すべてのインタラクティブ要素にプログラム名があることを確認します。適切な形式のユーザー補助ツリーは、AI エージェントがページを理解するための主な方法です。
- 安定性: Cumulative Layout Shift（CLS）を使用して視覚的安定性を測定し、要素が予期せず移動しないようにして、エージェントの誤クリックを防ぎます。
- WebMCP の統合: 登録済みの WebMCP ツールが利用可能かどうか、宣言型 WebMCP が欠落しているフォームがないかどうか、スキーマが有効かどうかを確認します。WebMCP を採用すると、エージェントがサイトのロジックとフォームを明示的に公開できるようになり、インタラクションの信頼性が高まります。
スコア: 他の Lighthouse カテゴリとは異なり、公開時点では、Agentic Browsing は情報提供のみで、ベンチマークは行われません。明確なランキングではなく、実用的なシグナル（合格または不合格のステータスと警告）を提供することに重点が置かれています。
具体的な監査チェックと改善策について詳しくは、Lighthouse のエージェント ブラウジング監査のドキュメントをご覧ください。
エージェントとウェブサイト間のやり取りをより迅速かつ信頼性の高いものにする
WebMCP は、既存のウェブサイトで構造化ツールを AI エージェントに公開し、エージェントのやり取りを高速化および簡素化することを目的とした提案中の標準です。実装について詳しくは、WebMCP についてをご覧ください。
お好みのコーディング エージェントを使用して最新機能を実装する
Modern Web Guidance は、デベロッパーがエージェント対応のウェブサイトを構築するのに役立つベスト プラクティスとスキルを集めたものです。これには webmcp スキルが含まれており、WebMCP ツールの実装をコーディング エージェントに委任できます。Modern Web Guidance を開発ワークフローに統合することで、アプリケーションが最新のエージェント フレンドリーな標準でゼロから構築されるようにすることができます。詳細については、Modern Web Guidance のドキュメントをご覧ください。
エージェント向けの Chrome DevTools を使用してウェブサイトをテスト、デバッグする
詳細なデバッグと反復開発には、エージェント向け Chrome DevTools が独自のテスト ペルソナを提供します。これにより、AI アシスト IDE やコーディング エージェントをブラウジング エージェントに変換し、高度な制御を実現できます。
エージェント用の DevTools を使用すると、次のことができます。
- エージェントの操作をシミュレートする: エージェントが実行する正確な手順をシミュレートできます。つまり、「ユーザー」（またはエージェント）になり、障害を再現して、ウェブサイトのフローが決定論的であることを確認できます。
- Lighthouse の直接呼び出し: テスト環境で、アクティブなタブで
lighthouse_auditツールを直接呼び出すことができます。これにより、ページの現在の状態に基づいて、複数のカテゴリのヘルスチェックが即座に実行され、Agentic Browsing の基準に照らして修正を繰り返し検証できます。 - スクリーンキャストとデバッグ: このツールには、詳細なロギングとスクリーンキャストの機能が用意されているため、エージェントがページをどのように認識し、操作しているかを正確に確認できます。これにより、エージェントが混乱する可能性があるアクセシビリティ ツリーなどの機械可読シグナルが公開されます。
これにより、デプロイ前に非人間のユーザーに高品質のエクスペリエンスを提供できます。
エージェント向けの Chrome DevTools の機能と構成の詳細については、GitHub リポジトリをご覧ください。
次の Chrome DevTools for Agents の構成例（AntigravityCLI の場合は ~/.gemini/config/mcp_config.json、Antigravity で構成）は、Chrome Canary に接続します。
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--autoConnect",
"--categoryExperimentalWebmcp",
"--channel=canary"
]
}
}
}
次のクエリの例を使用します。 「Chrome DevTools MCP を使用して、https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ にアクセスし、マッシュルーム 10 個とピーマン 2 個のピザを作ってください。何をしたか、どのツールを呼び出したかの概要を必ず教えてください。」
また、DevTools for Agents を使用して、エージェント対応の Lighthouse 監査を実行することもできます。
「Chrome DevTools MCP を使用して https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/?notoolname でエージェント Lighthouse 監査を実施したい。完全な概要を教えて。」
次のステップ
投稿やディスカッションへの参加については、Lighthouse の公式リポジトリをご覧ください。
WebMCP の詳細については、WebMCP のドキュメントをご覧ください。Modern Web Guidance の詳細については、Modern Web Guidance のドキュメントをご覧ください。生成 AI 向けにウェブサイトを最適化する方法について詳しくは、Google 検索の生成 AI 機能向けにウェブサイトを最適化するをご覧ください。