Modern Web Guidance は、ウェブ プラットフォームの専門知識、ベスト プラクティス、ブラウザの互換性データをコーディング エージェントに直接埋め込む一連のスキルです。これにより、コーディング エージェントが従来のパターンから離れ、最新のウェブ プラットフォームの能力を活用したソリューションに向かうようになります。
インストール
Modern Web Guidance は、スキルをサポートするコーディング エージェントにインストールして使用できます。
modern-web-guidance CLI（推奨）
推奨されるインストール方法は、Chrome チームが作成した modern-web-guidance CLI を使用する方法です。modern-web-guidance CLI を使用して Modern Web Guidance をインストールすると、自動更新が有効になります。modern-web-guidance CLI から次のようにインストールできます。
npx modern-web-guidance@latest install
Chrome 拡張機能を開発している場合は、次のコマンドをおすすめします。
npx modern-web-guidance@latest install --choose
これにより、インタラクティブ ウィザードが実行され、好みに合わせてスキルがインストールされます。
modern-web-guidance CLI を使用せずに Modern Web Guidance をインストールする場合は、次のエージェント固有の手順を参照してください。ただし、これらのオプションのほとんどは自動更新に対応していません。
Antigravity
Antigravity をダウンロードし、インストール フローで「modern-web-guidance」を有効にするか、[設定] ページの [カスタマイズ]、[Google プラグインで構築] の順に選択して有効にします。
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Modern Web Guidance は、[設定] > [AI アシスタント] > [スキル] の順に選択してアクセスできる Skill Manager で確認できます。スキルを選択して、詳細ページを開きます。スキルをインストールするには、[インストール] ボタンをクリックして、現在の IDE インスタンスに適用します。
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
Claude Code で使用する Modern Web Guidance をインストールする手順は次のとおりです。
1. マーケットプレイスを追加します。
/plugin marketplace add GoogleChrome/modern-web-guidance
2. マーケットプレイスからプラグインをインストールします。
/plugin install modern-web-guidance@googlechrome
3. プラグインを再読み込みします。
/reload-plugins
Copilot CLI
Copilot で使用する Modern Web Guidance をインストールするには、次の 2 つの手順を行います。
1. マーケットプレイスを追加します。
/plugin marketplace add GoogleChrome/modern-web-guidance
2. マーケットプレイスからプラグインをインストールします。
/plugin install modern-web-guidance@googlechrome
ガチョウ
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
インストール前に探索する
インストール前に、クエリで検索するか、ID でガイドを取得して、Modern Web Guidance ガイド ライブラリを評価します。これを行うには、CLI の search コマンドを使用して、プロンプトを使用してユースケース ID を見つけます。
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
ターミナルに JSON オブジェクトが出力されます。
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
description の値を読み取って、目標を最もよく反映する id を選択し、retrieve コマンドを使用します。
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
この場合、animate-to-from-top-layer ユースケースのガイド Markdown がターミナルに表示されます。その他のユースケースでは、animate-to-from-top-layer を有効なユースケース ID に置き換えます。
Modern Web Guidance を使用する理由
Modern Web Guidance は、次の 3 つの理由から、AI モデルを単独で使用するよりもウェブ デベロッパーにとってメリットがあります。
- AI コーディング エージェントは、最新のウェブ開発の問題に対して、古い時代遅れのソリューションをデフォルトで使用する傾向があります。これらのソリューションには、最新の CSS と HTML API でより適切に解決できる問題の機能を提供するための JavaScript が含まれていることがよくあります。
- これまで、AI モデルは最新のウェブ プラットフォーム機能について認識していなかったり、誤った情報を持っていたりしていました。
- 最後に、AI モデルは、特定のプロジェクトのベースライン要件に合わせてガイダンスを調整するのではなく、プロジェクトの要件やブラウザのサポート基準を考慮しない、古い推奨事項を提示する傾向があります。
Modern Web Guidance はこうした欠点を解消し、AI 支援コーディング ワークフローで、新しいウェブ プラットフォーム機能をフォールバックを考慮して最初に採用するためのツールを確実に利用できるようにします。
Modern Web Guidance の内容
Modern Web Guidance には、複数のコア分野にわたる 100 を超えるウェブ開発ユースケースのベスト プラクティスが含まれています。内部的には、コーディング エージェントに modern-web-guidance CLI を呼び出してユースケースに最適なガイダンスを見つけて取得する方法を指示するエージェント スキルです。
- ユーザー エクスペリエンス: ビューの切り替え、CSS
scrollbar-colorスタイリング、開始アニメーションと終了アニメーション。 - CSS: コンテナクエリ、
oklchなどの最新のカラースペース、CSS サブグリッド レイアウト、text-wrap、タイポグラフィの行の高さのトリミング。 - パフォーマンス: Interaction to Next Paint（INP）診断、長いタスクを分割するための
scheduler.yield、バックグラウンド タスクのスケジューリング、画像読み込みの優先順位付け。 - フォーム: 入力フィールドの自動サイズ調整（
field-sizing: content）、:user-invalidによる正確な検証スタイル。 - 組み込みの UI コンポーネント: ダイアログの直接制御、ツールチップの CSS アンカー ポジショニング、
popover。 - ユーザー補助機能: エラー アナウンスとキーボード フォーカス管理にアクセスできます。
- 組み込みの AI: ローカルのデバイス上のクライアント モデル（ネイティブの言語検出、要約、翻訳 API）を使用します。
- パスキー: パスキーの登録、認証、管理。
これらは、各分野のユースケースの一部です。すべてのユースケースを確認するには、ユースケースの完全なリストをご覧ください。
ベースライン
Baseline は、主要なブラウザ エンジンで相互運用可能なウェブ機能について、デベロッパーに明確な情報を提供します。ウェブ機能がベースラインの場合、ブラウザの互換性レベルを信頼できます。ウェブ機能は、Baseline で定義された次の 3 つのカテゴリのいずれかに分類されます。
- 限定公開とは、機能が相互運用できないことを意味します。
- 「新たに利用可能」とは、最近 30 か月以内に相互運用可能になった機能を意味します。
- 広く利用可能とは、その機能が 30 か月以上相互運用可能であることを意味します。
Baseline はウェブ機能の相互運用性の定義ですが、プロジェクトの構成可能な側面でもあります。ベースライン ターゲットを選択し、AGENTS.md ファイルや CLAUDE.md ファイルに追加して、それを使用するようにプロジェクトを構成できます。
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance と機能のフォールバック
Modern Web Guidance では、さまざまな最新のウェブ機能を使用しています。これらの一部は「Baseline Newly available」または「Baseline Widely available」に該当しますが、一部は在庫僅少に該当する可能性があります。機能が広く利用できない場合、ユースケース ガイドには、その機能をサポートしていないブラウザで幅広い互換性を確保する方法に関する具体的な手順が記載されています。多くの場合、フォールバックはプログレッシブ エンハンスメントとして実装され、最新の機能はサポートされている場所であればどこでも使用できます。サポートされていないブラウザでポリフィルが必要な場合、エージェントは常に条件付きで読み込むよう指示されるため、必要な場合にのみコストが発生します。
精度はどのように確保されていますか？
Modern Web Guidance の各ユースケースには、品質の高い出力を確保するために継続的に調整される一連の評価が含まれています。
ユースケース評価では、自動 QA ハーネスを実行してエージェントの正しい動作をテストします。このテストでは、Playwright が中心的な役割を果たします。
- 各ガイドについて、ガイドの実装の詳細が守られているかどうかをテストする Playwright スクリプトが開発されます。たとえば、
@media (prefers-reduced-motion: reduce)が要件どおりに観測されたかどうかをテストします。 - これらの Playwright スクリプトは、100% の合格率を想定した「正しい」参照デモ実装に対して継続的に調整されます。一方、スクリプトは、合格率が 0% になるように意図的に欠陥のある実装に対してチェックを行います。
- 「正しい」実装と意図的に欠陥のある実装のいずれかまたは両方で、それぞれ 100% と 0% の合格率が得られない場合、100% の調整が達成されるまで、コンテキストを使用してジェネレータが自動的に再試行します。
- 最後に、ベース アプリケーションに対するエンドツーエンドの評価が適用されます。これらの評価の 1 つはガイドなしです。これは、Modern Web Guidance を呼び出さずにデフォルトのトレーニング データを使用してタスクを完了するコントロールです。別の評価（テスト）では、Modern Web Guidance を使用して同じタスクに対処します。
評価は最先端のモデルとコーディング エージェントを使用して週に複数回実行され、Google のガイダンスがある場合とない場合でエージェントのパフォーマンスがどのように変化するかを明確に把握できます。初期の結果では、エージェントが Modern Web Guidance を使用した場合、最新のベスト プラクティスへの準拠が平均で 37 ポイント向上しています。ただし、結果はプロジェクトの要件、モデル、作成するプロンプト、使用するエージェント コーディング ツールによって異なる場合があります。
次のステップ
これで、Modern Web Guidance の概要と、AI コーディング ワークフローで最新のウェブのベスト プラクティスを簡単に採用できる可能性について理解できました。Modern Web Guidance で提供される分野とユースケースについて確認できるようになりました。