Modern Web Guidance 1.0: プログラミングエージェントに不足しているWebプラットフォームの専門知識
要約
Googleは、Web開発エージェントの能力を向上させるための「Modern Web Guidance 1.0」をリリースしました。これは、Webプラットフォームの専門知識、ベストプラクティス、ブラウザ互換性データをエージェントに組み込むためのフレームワークです。今回のアップデートでは、既存コードのモダナイゼーションワークフロー、AIの知識ギャップを埋めるための拡張されたガイドデータベース、人間による専門家レビューの強化、およびクロスブラウザでの評価カバレッジが含まれています。
全文翻訳
Modern Web Guidance 1.0: プログラミングエージェントに不足しているWebプラットフォームの専門知識
［画像: Philip Walton］
公開日: 2026年11月10日
エージェントベースの開発の新しい時代において、開発者はプログラミングエージェントがWeb開発の専門家であることを「期待」しています。最先端のプログラミングモデルは、通常、動作するコードを生成できます。しかし、Web開発の専門家にAIによって生成されたコードをレビューしてもらうと、ほとんどの場合、コードをより高速、アクセス可能、または安全にする方法を見つけるでしょう。
Chromeでは、エージェントベースのWeb開発の未来に多大な投資を行っています。この課題に対処するため、5月のGoogle I/OでModern Web Guidanceの早期プレビュー版を発表しました。Modern Web Guidanceは、Webプラットフォームの専門知識、ベストプラクティス、ブラウザ互換性データを直接プログラミングエージェントに組み込むためのスキルセットです。
本日、Modern Web Guidanceの安定版バージョン1.0のリリースを発表できることを嬉しく思います。これには以下が含まれます。
- 新しいモダナイゼーションワークフロー: 既存のコードベースをスキャンし、エージェントが安全なモダナイゼーションの機会を見つけるのを支援します。
- 拡張されたガイドデータベース: 専門家によってテストされ、ブラウザ間で互換性のあるソリューションを備えた、AIの知識ギャップを数百件ターゲットにしています。
- 人間による詳細な専門家レビュー: 各ガイドについて、コンテンツの技術リーダーからの承認と、ユーザーに公開されるガイドの専用アクセシビリティテストが含まれます。
- すべてのガイドの完全な評価カバレッジ: Modern Web Guidanceを使用しないエージェントと比較して測定可能な改善を示す公開評価ダッシュボードがあります。
バージョン1.0では、Modern Web Guidanceがクロスブラウザプロジェクトになり、FirefoxとEdgeがChromeに加わりプロジェクトをサポートし、ブラウザ間の互換性を向上させ、プロジェクトに貢献することに興奮しています。 Baselineとの共同作業に基づき、エージェントを使用してコーディングするすべての人々が、モダンなWebプラットフォームのすべてのパワーと機能を活用できるようにすることを目指しています。
どのエージェントモデルやラッパーを使用しているかにかかわらず、Web開発を行っているのであれば、エージェントワークフローにModern Web Guidanceを組み込むことをお勧めします。
Modern Web Guidanceをインストールするには、プロジェクトディレクトリから次のコマンドを実行します。
npx modern-web-guidance@latest install
以前のバージョンをすでにインストールしている場合は、次のコマンドを実行してバージョン1.0に更新できます。
npx modern-web-guidance@latest update
追加のインストール手順と詳細については、Modern Web Guidanceのドキュメントを参照してください。この短い概要については、このビデオをご覧ください。
開発者とビジネスがModern Web Guidanceを使用すべき理由
プログラミングエージェントが開発者のコーディング速度をかつてないほど向上させていることは間違いありません。しかし、誰もがプログラミングエージェントを使用する世界では、スピードはもはや競争上の優位性ではありません。
今日では、使いやすさや体験の質などの基本的な要因で差別化することがこれまで以上に重要になっています。Modern Web Guidanceが役立つ例をいくつかご紹介します。
モデルが見落としがちなベストプラクティスの強化
高度なプログラミングモデルは多くのベストプラクティスをよく理解していますが、私たちの評価によると、まだ改善の余地がある重要な領域がいくつかあります。たとえば次のとおりです。
- アクセシビリティ: キーボードフォーカスと慣性管理、モーション削減のサポート、アクセシブルなフォーム検証。
- ユーザーエクスペリエンス: スワイプとタッチジェスチャー、ダイアログとポップアップ間の遷移、ダーク/ライトモードの実装。
- パフォーマンス: メインスレッドでのタスクスケジューリング、オフスクリーンのレンダリングの分離、レイアウトシフトの防止。
- セキュリティ: HTMLからの悪意のあるまたは機密性の高いコンテンツの削除、厳格なコンテンツセキュリティポリシー、パスキーを使用した認証情報管理。
ARIAの誤用のような間違いは、ARIAがないページよりもアクセスしにくいページにしてしまう可能性があるため、アクセシビリティのベストプラクティスを確保することは特に重要です。バージョン1.0では、ユーザーに公開されるガイドは、日常的に支援技術を使用しているアクセシビリティ専門家によって、実際の支援技術でテストされています。
タスクに最適なWeb機能の使用
AIモデルは、JavaScriptで何かを機能させる方法を理解することに非常に優れていますが、多くの場合、HTMLまたはCSS機能を使用すると、はるかに少ないコードで同じことを実現できます。そして、ブラウザがそれらを処理するため、通常はよりうまく機能し、アクセシビリティオプションが付属しています。たとえば、次のとおりです。
- ポップアップやダイアログにアニメーションを追加する機能
- スクロールやスワイプベースのインタラクションを強化する機能
- ページ間のスムーズで流れるような遷移のための強化されたAPI
新機能は、ユーザーにとって重要な方法でWebサイトのエクスペリエンスを向上させることもできます。たとえば、次のとおりです。
- パスキーとWebAuthn: より高速で安全なログインエクスペリエンスのために
- 自動入力: 特にモバイルでのチェックアウトプロセスを改善するため。これは、カスタムJavaScriptベースのフォームコントロールを使用すると失敗することがよくあります。
Modern Web Guidanceツールは、ブラウザサポート要件に基づいて、タスクに最適な機能を推奨するように設計されています。そのガイドには、Baselineとブラウザ互換性のデータが組み込まれているため、プロジェクトのニーズに合わせて推奨事項を調整できます。
コードベースのスキャンとモダナイゼーションの機会の特定
ほとんどのWeb開発は、完全に新しいプロジェクトでは行われません。これは、長年にわたって古い回避策、不要な依存関係、および不要になったポリフィルが蓄積された既存のコードベースで行われます。
バージョン1.0では、新しいモダナイゼーションワークフローを追加しました。これは、HTML、CSS、JavaScript、およびpackage.jsonの既存のコードを分析して、安全なアップグレードの機会を見つけ、その後、エージェントが変更を実装するのをガイドします。
/modern-web-guidance Modernize the code in this directory
この最初のリリースでは、モダナイゼーションワークフローは静的分析を使用して、限定された一連のパターンをチェックします。予期される結果をもたらす小さな範囲から始めて、それを拡張することを選択しました。将来的には、エージェントが単に既知のパターンに一致させるだけでなく、コードを直接分析するエージェントテストを含むように、テストを拡張する予定です。
Webプラットフォームの進化に関する最新情報の入手
Webプラットフォームは常に変化しています。ブラウザの新しいバージョンごとに新機能が追加され、以前は使用できなかった既存の機能がBaselineの一部になります。
Modern Web Guidance機能はBaseline互換性データに基づいており、その推奨事項はブラウザエンジニア、Web標準専門家、およびアクセシビリティ専門家によって管理されています。したがって、これらの推奨事項はプラットフォーム自体とともに進化し、プロジェクトも進化できるようになります。
新しいWeb機能とベストプラクティスに関する情報
Modern Web Guidanceは主にエージェントツールとして作成されましたが、多くの開発者から、ガイド自体が学習リソースとして非常に役立つと聞いています。
エージェントベースのコーディングの時代であっても、専門知識を開発することには依然として価値があります。Modern Web Guidanceは、その達成を支援できます。ガイド自体を読むこともできますし、CLIを使用してサンプルシナリオを検索し、プロジェクトに関連する可能性のある新しいテクニックを発見することもできます。
AIエージェント向けのChrome DevToolsとのModern Web Guidanceの統合方法
エージェントを使用したWeb開発では、コードの記述はワークフローの一部にすぎません。それが正しく機能することを確認するために、コードを実行する必要があります。そのため、開発者にModern Web GuidanceとAIエージェント向けのChrome DevToolsを組み合わせて使用することをお勧めします。
- Modern Web Guidance: エージェントに、モダンなベストプラクティスに従ってコードを記述するために必要な専門知識を提供します。
- AIエージェント向けのChrome DevTools: エージェントのAgent Runtimeに可視性を提供するため、さまざまなデバイス機能、ユーザー設定、およびネットワーク条件でコードを検証、デバッグ、および改善できます。
これらを組み合わせることで、エージェントはより少ないステップでより良いソリューションに到達できます。これらのツールを組み合わせて効率を最大化する例をいくつかご紹介します。
パフォーマンス目標を達成するまで最適化する
Modern Web Guidanceは、エージェントに長時間実行されるJavaScriptタスクをメインスレッドで効率的に分割する方法を教えることができますが、これらのJavaScriptタスクが実際にメインスレッドをどれだけブロックしているかを確認するためにコードをテストすることはできません。
AIエージェント向けのChrome DevToolsを使用すると、低レベルの仮想CPUパフォーマンスプロファイリングを実行して問題があるかどうかを確認し、その後、Modern Web Guidanceのパフォーマンス推奨事項を使用して、コードがメインスレッドを50ミリ秒以上ブロックしなくなるまで（INPの低下に寄与しないように）繰り返すことができます。
アニメーションのテストと改善
Modern Web Guidanceは、モーダルダイアログ、ツールチップ、ポップオーバーなどの機能にアニメーションを正しく効率的に追加する方法をエージェントに教えることができますが、これらのガイドラインを使用しても、アニメーションが実際に機能し、アプリケーション全体のコンテキストでどのように見えるかを確認する必要があります。
AIエージェント向けのChrome DevToolsは、コードを実行し、ページ上のアクションを実行し、アニメーションが動作しているのを記録できます。その後、録画を検査して、アニメーションが機能しており、サイトの残りの部分のスタイルと感触に合っていることを確認できます。
AIエージェント向けのChrome DevToolsを使用して、prefers-reduced-motionが設定されている場合に、コンポーネントがユーザーの環境設定に従って動作することを確認することもできます。
メモリリークのないキャッシュビュー
Modern Web Guidanceは、エージェントにSPA遷移を即座に見せる方法を教えることができます。これは、ビューをレンダリングしてメモリにキャッシュし、アクセシビリティツリーから非表示にすることによって行われます。
ただし、ユーザーが長時間ページに留まった場合にメモリリークを防ぐために、使用されていないビューを適切にクリーンアップすることが重要です。AIエージェント向けのChrome DevToolsにはメモリデバッグツールが含まれているため、エージェントはメモリ使用量が無制限に増加しないことを確認できます。
このビデオでは、Modern Web GuidanceとAIエージェント向けのChrome DevToolsの使用方法について説明します。
成功事例
世界中のエンジニアリングチームが、Modern Web GuidanceとAIエージェント向けのChrome DevToolsを使用して、コードの品質を向上させ、配信プロセスをスピードアップし、手動デバッグのボトルネックを解消しています。
Pensionbazaar と Policybazaar
インドのフィンテック企業Paisabazaarが立ち上げた新しい退職計画プラットフォームであるPensionbazaarは、Modern Web GuidanceとAIエージェント向けのChrome DevToolsを統合しました。これにより、新しいページの作成と検証が可能になり、開発時間を90%以上（4日から数時間へ）短縮し、新しい画面でのUIバグを90%以上削減しました。姉妹プラットフォームであるPolicybazaarは、インド有数の保険プラットフォームであり、9,700万人以上の登録顧客を抱えています。同社はAIエージェント向けのChrome DevToolsを使用して、約30の高トラフィックランディングページのパフォーマンスチェックを自動化し、手動チェックの労力を92%削減しました。
"Pensionbazaarでの私たちの主な目標は、最初から高品質のコードを記述して、将来の技術的負債を回避することでした。Modern Web Guidanceは、プログラミングエージェントにモダンなWeb標準とパフォーマンス向上のベストプラクティスを採用するように指示し、特定のブラウザ互換性の目標を考慮しました。これにより、UIコードレビューがより簡単かつ迅速になり、最終的に開発時間が短縮されました。"
—Aman Soni, エンジニアリングマネージャー, Policybazaar
WeTV
Tencentの国際ストリーミングプラットフォームであるWeTVは、AIベースのプログラミングエージェントをCI/CDパイプラインに追加しました。エージェントはAIエージェント向けのChrome DevToolsを使用してパフォーマンスの低下を診断し、Modern Web Guidanceを使用してWebプラットフォームのモダンな機能で修正します。エージェントは、失敗したパフォーマンスチェックの90%を自動的に診断および解決し、デバッグと解決にかかる時間を87%（4時間から30分、手動評価を含む）短縮します。
"結果は、スピードと品質の両面で非常に効果的でした。AIエージェント向けのChrome DevToolsとModern Web Guidanceの専門知識から得られた洞察は、複雑なデプロイメントの問題を解決するための信頼できる情報源を提供してくれました。各修正後に厳密な検証を実行しており、現在の成功率と安定性は、リリースに対する私たちの自信を大幅に向上させました。"
—Yangjie Zheng, エンジニアリングマネージャー, WeTV (Tencent)
note inc.
日本で最大のメディアおよびクリエイタープラットフォームの1つであり、月間アクティブユーザー数が9,000万人を超えるnote inc.は、Next.js UIのアップグレードの継続的な取り組みの一環として、内部デザインシステムと共にModern Web Guidanceを使用しました。Modern Web Guidanceコードベースでの180回の実行の評価では、モダンなWebチェックの合格率が61%から94%に向上しました。これは、エージェントがスクロールアニメーション、ツールチップ、アコーディオンに対してカスタムJavaScriptの代わりに適切なHTMLおよびCSS機能を使用するように指示されたためです。また、431件のプルリクエストでLCP画像の優先度が28%向上しました。
"noteでの私たちの使命は「継続的に開始し、作成する」ことです。そのため、私たちのプラットフォームは、すべてのクリエイターと読者にとって高速でアクセス可能である必要があります。AIベースのプログラミングエージェントによってより多くのコードが記述されるにつれて、Modern Web Guidanceは、古いJavaScriptパターンに依存するのではなく、標準に基づいたモダンなソリューションに到達するのに役立ちます。また、画像の読み込み優先度やフォームのアクセシビリティなど、見落としがちな詳細にも注意を払っています。デザインシステムと組み合わせることで、UIの一貫性を維持しながらNoteを継続的に改善できます。"
—板橋 丈彦, テクノロジー担当執行役員, note inc.
MetaMask
世界190か国で1億ダウンロードを超えるセルフカストディ型の金融プラットフォームであるMetaMaskは、オープンソースブラウザ拡張機能のすべてのプルリクエストに対してテストボットとしてModern Web Guidanceを実行しています。わずか3行のプロンプトで設定されています。最初の5週間で、ボットは480件近くのプルリクエストをチェックし、そのうち64件に応答しました。これにより、エンジニアは43件の発見事項（主にアクセシビリティの問題、HTMLセマンティクス、および静的コード分析ツールでは検出されないフォーム）を、応答から修正までの中央値15分で修正しました。
"レビューは本当に役立ちます。エンジニアにInterest InvokersやPopover APIのようなモダンなAPIを紹介し、それらを認識させるのに役立ちました。PRのテスト時間を長くすることはなく、むしろ短縮したかもしれません。MWGが特定した問題は、これらのモダンなWebテクニックを認識している人間のテスターが必要でした。"
—Francis Naphomousno, UXエンジニア, MetaMask
ビジネスとコミュニティのサポート
Modern Web Guidance機能はChromeのイニシアチブとして始まりましたが、バージョン1.0のマイルストーンへの到達は、Webコミュニティの多くの専門家との共同作業でした。
Webプラットフォームの各領域を監督するコンテンツ分野の技術リーダー、FirefoxおよびEdgeのブラウザパートナー、ガイドを執筆およびテストした独立したWeb標準およびアクセシビリティ専門家、そしてこのバージョンを形成するのに役立ったGitHubのオープンソース貢献者全員に感謝します。
プログラミングエージェントのWebに関する知識のギャップに気づいた場合、または既存のガイドの改善に協力したい場合は、貢献ガイドを参照して参加してください。
Modern Web Guidanceの使用を開始する方法
Modern Web Guidanceをプロジェクトに追加するには、プロジェクトディレクトリからCLIインストーラーを実行します。
npx modern-web-guidance@latest install
以前のバージョンをすでにインストールしている場合は、次のコマンドを実行してバージョン1.0に更新できます。
npx modern-web-guidance@latest update
CLIに加えて、Claude Code、Codex、Cursor、Antigravity、Copilot、WebStorm、Kimi Code、Grok Buildなど、ほとんどの一般的なプログラミングエージェントプラグインマーケットプレイスからModern Web Guidanceを直接インストールおよび更新できます。
［画像: Modern Web GuidanceをサポートするプログラミングエージェントおよびIDEのロゴ: Codex、Cursor、Kimi、Google Antigravity、Grok、JetBrains WebStorm、GitHub Copilot。］
詳細については、次のリソースを参照してください。