公開日: 2026 年 11 月 10 日
エージェント型ウェブ開発という新たな時代において、ウェブ デベロッパーはコーディング エージェントがウェブ開発の専門家であることを期待しています。最新の最先端コーディング モデルは非常に高性能で、通常は動作するコードを生成できますが、ウェブ デベロッパーに AI 生成コードのレビューを依頼すると、コードをより高速、よりアクセスしやすく、より安全にする方法をほぼ確実に見つけることができます。
Chrome は、エージェント型ウェブ開発の未来に多大な投資を行っています。この課題に対処するため、5 月の Google I/O で Modern Web Guidance の早期プレビュー版を発表しました。Modern Web Guidance は、ウェブ プラットフォームの専門知識、ベスト プラクティス、ブラウザの互換性データをコーディング エージェントに直接組み込む一連のスキルです。
本日、Modern Web Guidance バージョン 1.0 の安定版リリースを発表いたします。このリリースには、以下が含まれています。
- 新しいモダナイゼーション ワークフロー。既存のコードベースをスキャンして、エージェントが安全にモダナイズする機会を見つけられるようにします。
- 拡張されたガイド データベース。専門家が検証したクロスブラウザ ソリューションを使用して、検証済みの数百の AI ナレッジギャップをターゲットにしています。
- すべてのガイドについて、コンテンツ分野の技術責任者による承認や、ユーザー向けガイドに関する専用のアクセシビリティ レビューなど、人間の専門家による詳細なレビューを実施します。
- すべてのガイドにわたる完全な評価カバレッジ。公開評価ダッシュボードには、Modern Web Guidance を使用していないエージェントと比較して、測定可能な改善が示されています。
バージョン 1.0 では、Modern Web Guidance がクロスブラウザの取り組みとなり、Firefox と Edge が Chrome に加わって、クロスブラウザの互換性をサポート、改善し、プロジェクトに貢献することになりました。Baseline との共同作業を基盤として、エージェントを使用してコーディングするすべてのユーザーが、最新のウェブ プラットフォームのパワーと機能を最大限に活用できるようにすることを目指しています。
使用しているモデルやエージェント ハーネスに関係なく、ウェブ向けに構築している場合は、Modern Web Guidance が Agentic Workflows に含まれます。
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 では、ユーザー向けのガイドを、支援技術を日常的に使用しているアクセシビリティの専門家が、実際の支援技術を使用してレビューおよびテストしました。
ジョブに最適なウェブ機能を使用する
AI モデルは、JavaScript を使用して何かを動作させる方法を理解することに非常に優れていますが、多くの場合、HTML や CSS の機能を使用すれば、はるかに少ないコードで同じことを実現できます。また、ブラウザによって処理されるため、通常はパフォーマンスが向上し、ユーザー補助機能が提供されます。次に例を示します。
- ポップオーバーとダイアログをアニメーション化する機能
- スクロールやスワイプによる操作を強化する機能
- スムーズで流れるようなページ遷移を実現する優れた API
また、新機能によって、ユーザーにとって重要な方法でサイトのエクスペリエンスを向上させることもできます。次に例を示します。
- パスキーと WebAuthn: より高速で安全なログイン エクスペリエンスを実現
- 自動入力: カスタムの JavaScript ベースのフォーム コントロールを使用すると、購入手続きのフロー（特にモバイル）が失敗することがよくあります。このフローを改善します。
Modern Web Guidance は、ブラウザのサポート要件に基づいて、そのタスクに最適な機能を推奨するように設計されています。ガイドには Baseline とブラウザの互換性データが埋め込まれているため、プロジェクトのニーズに合わせて推奨事項を調整できます。
コードベースをスキャンして、モダナイズの機会を見つける
ほとんどのウェブ開発は、新しいプロジェクトで行われるわけではありません。これは、何年にもわたって蓄積された古い回避策、不要な依存関係、不要になったポリフィルを含む既存のコードベースで発生します。
バージョン 1.0 では、新しいモダナイゼーション ワークフローが追加されました。このワークフローは、既存の HTML、CSS、JavaScript、package.json を分析して、安全にアップグレードできる機会を見つけ、エージェントに変更を案内します。
/modern-web-guidance Modernize the code in this directory
この最初のリリースでは、モダナイゼーション ワークフローは静的分析を使用して、限定されたパターンのセットをチェックします。私たちは、予測可能な結果が得られる狭い範囲から始めて、そこから拡大することにしました。今後、さらに多くの分野をカバーする予定です。たとえば、エージェントが既知のパターンを照合するだけでなく、コードを直接推論するエージェント監査などです。
ウェブ プラットフォームの進化に合わせて最新情報を入手
ウェブ プラットフォームは常に変化しています。ブラウザにはマイルストーンごとに新機能が搭載され、以前は使用できなかった既存の機能が、新しいブラウザ リリースごとにBaselineになっています。
Modern Web Guidance は Baseline の互換性データに基づいて構築されており、その推奨事項はブラウザ エンジニア、ウェブ標準の専門家、アクセシビリティの専門家によって管理されているため、プラットフォーム自体の進化に合わせて進化します。そして、プロジェクトも同様に進化させることができます。
新しいウェブ機能とベスト プラクティスについて
Modern Web Guidance は主にエージェント向けのツールとして構築されていますが、多くのデベロッパーから、このガイダンス自体が学習リソースとして非常に有用であるというフィードバックが寄せられています。
エージェントによるコーディングの時代でも、ドメインの専門知識を構築することには価値があります。Modern Web Guidance は、ガイド自体を読むか、CLI を使用してユースケースを検索し、プロジェクトに関連する可能性のある新しい手法を見つけることで、これを実現するのに役立ちます。
Modern Web Guidance とエージェント向け Chrome DevTools を組み合わせる
エージェント型ウェブ開発において、コードの作成はワークフローの一部にすぎません。また、そのコードを実行して、想定どおりに動作することを確認する必要があります。そのため、デベロッパーは Modern Web Guidance とエージェント向け Chrome DevTools を併用することをおすすめします。
- Modern Web Guidance は、最新のベスト プラクティスに沿ってコードを記述するために必要な専門知識をエージェントに事前に提供します。
- エージェント向け Chrome DevTools を使用すると、Agent Runtime を可視化できるため、さまざまなデバイス機能、ユーザー設定、ネットワーク条件にわたってコードを検証、デバッグ、最適化できます。
これらを組み合わせることで、エージェントはより少ないターンでより適切な解決策にたどり着くことができます。次に、これらのツールを組み合わせて効果を最大化する方法の例をいくつかご紹介します。
成果目標を達成するまで最適化する
Modern Web Guidance は、メインスレッドをブロックする長時間実行の JavaScript タスクを効果的に分割する方法をエージェントに教えることはできますが、コードをテストして、それらの JavaScript タスクが実際にメインスレッドをブロックする時間を調べることはできません。
エージェント向け Chrome DevTools を使用すると、シミュレートされたローエンド CPU でパフォーマンス トレースを実行して、問題があるかどうかを確認できます。その後、Modern Web Guidance のパフォーマンスに関するアドバイスを使用して、コードがメインスレッドを 50 ミリ秒以上ブロックしなくなるまで（INP の低下に寄与しないように）反復処理を行います。
アニメーションをテストして調整する
Modern Web Guidance では、モーダル ダイアログ、ツールチップ、ポップオーバー メニューなどの機能を適切かつパフォーマンスに優れた方法でアニメーション化する方法をエージェントに提示できますが、このガイダンスを使用しても、アニメーションが実際に機能し、アプリケーション全体のコンテキストで使用したときに適切に表示されることを確認する必要があります。
エージェント向け Chrome DevTools は、コードを実行し、ページを操作して、アニメーションの動作をスクリーン レコーダーで記録できます。その後、録画を調べて、アニメーションが実行されることと、サイトの他の部分のスタイルや雰囲気に合っていることを確認できます。
エージェント向け Chrome DevTools を使用して、prefers-reduced-motion が設定されている場合にコンポーネントがユーザーの設定を優先することを確認することもできます。
メモリリークなしでビューをキャッシュする
Modern Web Guidance は、ビューをメモリにレンダリングしてキャッシュに保存し、ユーザー補助ツリーから適切に非表示にすることで、SPA の遷移を瞬時に行う方法をエージェントに教えることができます。
ただし、この方法を使用する場合は、ユーザーがページに長時間留まった場合にメモリリークが発生しないように、未使用のビューを適切にクリーンアップすることが重要です。エージェント向け Chrome DevTools にはメモリ デバッグ ツールが用意されているため、エージェントはメモリ使用量が際限なく増加しないようにすることができます。
Modern Web Guidance とエージェント向け Chrome DevTools を組み合わせて使用する方法について詳しくは、こちらの動画をご覧ください。
成功事例
世界中のエンジニアリング チームが、すでに Modern Web Guidance とエージェント向け Chrome DevTools を使用して、コード品質の向上、デリバリーの高速化、手動デバッグのボトルネックの解消を実現しています。
Pensionbazaar と Policybazaar
インドのフィンテック企業 Paisabazaar が立ち上げた新しい退職計画プラットフォームである Pensionbazaar は、Modern Web Guidance とエージェント向け Chrome DevTools を組み合わせて新しいページの構築と検証を行い、所要時間を 90% 以上短縮（約 4 日から数時間）し、新しい画面の UI バグを 90% 以上削減しました。その姉妹プラットフォームである Policybazaar は、9,700 万人以上の登録顧客を抱えるインド有数の保険プラットフォームです。同社は、エージェント向け Chrome DevTools を使用して、トラフィックの多い約 30 のランディング ページのパフォーマンス監査を自動化し、手動監査の労力を 92% 削減しました。
「Pensionbazaar にとって、後で技術的負債を抱えないように、初日から質の高いコードを構築することが優先事項でした。Modern Web Guidance は、特定のブラウザ互換性ターゲットを尊重しながら、最新のウェブ標準とパフォーマンスのベスト プラクティスを採用するようにコーディング エージェントを誘導しました。これにより、フロントエンドのコードレビューが大幅に容易かつ迅速になり、最終的に開発の所要時間が短縮されました。」
—Aman Soni 氏、Policybazaar、エンジニアリング マネージャー
WeTV
Tencent の国際的な動画ストリーミング プラットフォームである WeTV は、CI/CD パイプラインに AI コーディング エージェントを追加しました。このエージェントは、エージェント向け Chrome DevTools を使用してパフォーマンスの低下を診断し、Modern Web Guidance を使用して最新のウェブ プラットフォーム機能を使用して修正します。このエージェントは、パフォーマンス チェックの失敗の 90% を自動的に診断して解決するようになり、デバッグと解決の時間を 87% 短縮しました（手動評価を含めて 4 時間から 30 分に短縮）。
「スピードと品質の両面で、非常に効果的な結果が得られています。エージェント向け Chrome DevTools と Modern Web Guidance が提供する診断的インサイトは、複雑なレイアウトの問題を修正するための信頼できるリファレンスとなりました。修正のたびに厳格な検証を行っており、現在の成功率と安定性により、リリースの信頼性が大幅に向上しています。」
—Yangjie Zheng 氏、WeTV（Tencent）エンジニアリング責任者
note 株式会社
月間アクティブ ユーザー数が 9,000 万人を超える日本最大級のクリエイターおよびメディア プラットフォームである note 株式会社は、Next.js フロントエンドのモダナイズに向けた継続的な取り組みの一環として、社内のデザイン システムとともに Modern Web Guidance を使用しました。本番環境のコードベースで 180 回の評価を行ったところ、Modern Web Guidance は、スクロール アニメーション、ツールチップ、アコーディオンにカスタム JavaScript ではなくネイティブの HTML と CSS の機能を使用するようエージェントを誘導することで、最新のウェブチェックの合格率を 61% から 94% に引き上げました。また、431 件のマージされた PR 全体で、適切な LCP 画像の優先順位付けが 28% 増加しました。
「note の使命は『創作をはじめる、続ける』です。そのため、当社のプラットフォームは、すべてのクリエイターと読者にとって高速でアクセスしやすいものでなければなりません。AI コーディング エージェントで記述されるコードが増えるにつれて、Modern Web Guidance は、古い JavaScript パターンに頼るのではなく、最新の標準ベースのソリューションに移行するのに役立ちます。また、画像の読み込みの優先度やフォームのユーザー補助など、見落としがちな詳細も指摘します。デザイン システムと組み合わせることで、UI の一貫性を保ちながら、メモを継続的に改善できます。」
板橋武彦氏、note 株式会社、技術担当 VP
MetaMask
MetaMask は、約 190 か国で 1 億回以上ダウンロードされているセルフカストディ型の金融プラットフォームです。このプラットフォームでは、オープンソースのブラウザ拡張機能に対するすべての pull リクエストで、Modern Web Guidance が自動システムによる審査ボットとして実行されます。この設定は、わずか 3 行のプロンプトで行われています。最初の 5 週間で、この bot は約 480 件の pull リクエストをレビューし、そのうち 64 件にコメントしました。その結果、エンジニアは 43 件の検出結果（主に、linter では検出されないユーザー補助、HTML セマンティクス、フォームの問題）を修正しました。コメントから修正までの中央値は 15 分でした。
「レビューは本当に役に立ちます。これにより、Interest invokers や Popover API などの最新の API が表面化し、エンジニアがそれらに慣れることができました。PR のレビュー時間は増えておらず、むしろ減っている可能性があります。MWG が検出した問題は、これらの最新のウェブ技術に精通した人間のレビュアーが必要だったはずです。」
—Francis Nepomuceno 氏、MetaMask、UX エンジニア
エコシステムとコミュニティ サポート
Modern Web Guidance は Chrome 内のイニシアチブとして始まりましたが、この 1.0 のマイルストーンに到達できたのは、ウェブ コミュニティの多数のエキスパートとの協力によるものです。
各ウェブ プラットフォーム領域を監督するコンテンツ領域の技術リーダー、Firefox と Edge のブラウザ パートナー、ガイドの作成とテストを行った独立したウェブ標準とアクセシビリティの専門家、そしてこのリリースの形成に貢献してくれた GitHub のオープンソース コントリビューターの皆様に感謝いたします。
コーディング エージェントがウェブについて知っていることにギャップがある場合や、既存のガイドの改善に協力したい場合は、コントリビューション ガイドをご覧ください。
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 をインストールして更新できます。
詳しくは、以下のリソースをご覧ください。