TopicBase
GoogleのChromeチームは、コーディングエージェントにWeb開発の実装知識を提供するオープンソースプロジェクト「Modern Web Guidance」の安定版1.0を公開しました。既存のフロントエンドから改修候補を探すワークフローが加わり、200以上のガイドについて専門家によるレビューと評価も強化されています。
Modern Web Guidanceは、エージェントが作業に応じた実装ガイドを検索・取得するためのスキル群です。HTMLやCSSの標準機能を使う方法のほか、アクセシビリティ、性能、セキュリティに関する注意点を扱います。プロジェクトはChrome、Microsoft Edge、Mozilla Firefox、MDNの各チームとWeb開発コミュニティが共同で運営しています。
既存コードを走査し、候補を確認してから修正
1.0で加わった改修支援ワークフローは、HTML、CSS、JavaScriptやTypeScript、フレームワーク固有のコンポーネント、依存パッケージなどを記録するpackage.jsonを走査します。スキャナーは大規模言語モデルを呼び出さずにファイルをローカルで構文解析し、古い実装パターンを検出します。
続いてエージェントが周辺コードを調べ、古いブラウザーへの対応など意図的に残された処理を候補から除いて結果を報告します。利用者が改修を求めた場合は、関連ガイドを取得して修正し、再走査とプロジェクトのテストで結果を確かめます。
検出例には、入力に合わせてテキストエリアの高さを変えるJavaScriptをCSSのfield-sizingに置き換える方法や、ポップオーバーを開く処理をHTML属性で制御する方法があります。日本語などの入力方式で変換をEnterキーで確定した際、入力内容まで送信してしまう処理も対象です。
スキャナーが扱うのは、約200のガイドのうち約20％に相当するパターンです。改修時には動作やブラウザー対応への影響を考慮するため、一括修正の--fixオプションは設けられておらず、継続的インテグレーション・デリバリー（CI/CD）との自動連携は開発中です。
対応ブラウザーの目標を指定
各ガイドには、主要ブラウザー間でのWeb機能の互換性を示す「Baseline」などの情報が含まれます。プロジェクトの指示ファイルであるAGENTS.mdやCLAUDE.mdには、例えば「Baseline 2024」のように目標を記載できます。指定しない場合は、主要ブラウザー間で30カ月以上相互運用できる機能を示す「Widely available」が標準になります。
ガイドは、広く利用できない機能について、対応していないブラウザー向けの代替策も示します。明示されたブラウザー対応方針がある場合は、その要件と互換性情報に基づいて代替策の要否を判断できます。
スキルに対応するコーディングエージェントでは、プロジェクトのディレクトリからnpx modern-web-guidance@latest installを実行して導入できます。このCLIを使う方法では自動更新が有効になり、エージェントは作業に合うガイドを検索して取得できます。
評価での合格率とnoteの検証
Chromeチームの11月9日時点の集計では、評価対象エージェントの平均チェック合格率は、Modern Web Guidanceを導入しない場合が52％、導入した場合が91％でした。Claude Code、Codex CLI、Antigravity CLIに同じ課題を与え、ブラウザー操作の自動化ツールPlaywrightで表示や動作、ソースコードを確認しています。
各ガイドは担当分野の技術責任者がレビューして承認し、画面や操作に関するガイドはアクセシビリティの専門家が支援技術を使って検証しています。ガイドに沿った実装ができるかの評価は全ガイドを対象とし、結果を公開ダッシュボードで確認できます。
日本のnoteは、投稿サービスなどを開発する企業で、自社のNext.jsリポジトリの複製を使い、2種類のコーディングエージェントと6種類のUI実装・改善課題で検証しました。計180回の実行結果に19項目の自動チェックを行ったところ、未導入時と使用を明示的に指示した場合の合格率は、一方のエージェントが60.8％から94.0％、もう一方が75.8％から90.0％になりました。
一方、ガイドの推奨を無条件に優先する指示では、社内のUI部品ライブラリ「note-ui」に部品があっても標準のHTML要素が選ばれる場合がありました。noteはAGENTS.mdに、既存のUI部品と実装規約を優先し、それらで対応できない要件にModern Web Guidanceを参照する方針を記載しました。
