Modern Web Guidanceとは？AIコーディングで最新のWeb標準を確認する使い方

Google Chromeチームが公開しているModern Web Guidanceを、現在Web制作に使っているCodex環境へ導入し、CLIでガイドの検索と取得を試しました。

Modern Web Guidanceは、コードを生成するツールではありません。Webプラットフォームの専門知識、実装時のベストプラクティス、ブラウザ互換性の情報を、Codexなどのコーディングエージェントで利用するためのSkillです。

AIコーディングでは、ページが動くコードが出力されても、その実装が現在のWeb標準に合っているか、対象ブラウザで利用できるか、フォールバックが必要かという判断が残ります。Modern Web Guidanceを使うと、コーディングエージェントが判断に必要なガイドを実装前に検索・取得できます。

この記事では、2026年9月2日時点のGoogle Chrome公式情報と、Modern Web Guidance CLI 0.0.185を実際に使った結果をもとに、導入方法、searchとretrieveの使い方、Baselineによるブラウザ対応の考え方、Web制作へ組み込む流れを整理します。

先に結論：Modern Web Guidanceはコーディングエージェントへ実装の判断材料を渡すSkill

Modern Web Guidanceを使う目的は、単にコードを生成させることではありません。実現したい内容に合うガイドを検索し、現在のWebプラットフォームで推奨される方法、アクセシビリティ上の条件、ブラウザ対応、必要なフォールバックを、実装時の判断材料として渡すことです。

基本的な流れは次のとおりです。

1. 作りたい機能と対応するブラウザの範囲を決める
2. searchで目的に近いガイドを探す
3. 検索結果から必要なガイドを選ぶ
4. retrieveでガイドの本文を取得する
5. プロジェクトの条件に合わせて実装する
6. ブラウザで表示、操作、アクセシビリティを確認する

Modern Web Guidanceを導入しても、ガイドを選び、制作するWebサイトの条件へ適用し、実際の画面で確かめる工程は残ります。生成されたコードを自動的に正解へ変えるものではなく、実装時に参照できる判断基準を増やす仕組みです。

参考：Modern Web Guidance｜Chrome for Developers

Modern Web Guidanceは、広い分野のSkillと具体的なユースケースで構成される

Google Chromeの公式ページでは、Modern Web Guidanceを、Webプラットフォームの専門知識、ベストプラクティス、ブラウザ互換性データをコーディングエージェントへ組み込む一連のSkillと説明しています。2026年9月2日時点では早期プレビューで、新しい内容が継続して追加されています。

ガイドには、分野全体を扱うものと、具体的な実装目的を扱うものがあります。

公式の導入ガイドでは、100件を超えるWeb開発のユースケースが案内されています。検索結果には、分野別ガイドとユースケース別ガイドの両方が出るため、作業内容に応じて使い分けます。

たとえば、フォーム全体のアクセシビリティを確認するなら分野別ガイドが役立ちます。ダイアログを画面外のクリックで閉じたい場合は、その操作に対応するユースケース別ガイドを選べます。

参考：Modern Web Guidanceの分野一覧｜Chrome for Developers / Modern Web Guidanceのユースケース一覧｜Chrome for Developers

AIが古い実装を選ぶ問題に、用途を絞ったガイドを渡す

Google Chromeの公式導入ガイドでは、Modern Web Guidanceを使う理由として、AIコーディングエージェントが古い解決方法を選ぶこと、最新のWeb機能を正しく把握していないこと、プロジェクトのブラウザ対応条件を考慮しない提案をすることが挙げられています。

AIが古いコードしか書けないという意味ではありません。モデルが持つ広い知識だけに任せると、現在はHTMLやCSSで実現できる機能にもJavaScriptを追加したり、ブラウザ対応を確認せず新しい機能を使ったりすることがあります。

Modern Web Guidanceでは、「モーダルを作る」のような広い依頼だけでなく、「画面外をクリックして閉じられるダイアログを作る」といった目的から関連ガイドを検索します。必要な情報だけをエージェントの作業文脈へ追加するため、プロジェクト全体へ大量のドキュメントを渡す必要はありません。

参考：Get started with Modern Web Guidance｜Chrome for Developers

導入は公式CLIのinstallが推奨されている

Google Chromeの公式導入ガイドでは、Chromeチームが提供するModern Web Guidance CLIからのインストールを推奨しています。

npx modern-web-guidance@latest install

公式説明では、この方法で導入すると自動更新が有効になります。Chrome拡張機能向けのSkillなど、導入対象を選びたい場合は、対話形式で選択する--chooseも用意されています。

npx modern-web-guidance@latest install --choose

公式ページは、Skillに対応するコーディングエージェントで利用できると説明しています。Antigravity、Gemini CLI、GitHub CLI、Claude Code、Copilot CLIなどの個別手順も掲載されています。

現在の公式ページにはCodex専用の導入手順は掲載されていません。一方、今回使用したCodex環境ではModern Web GuidanceのSkillを読み込み、Skillの指示に沿って公式CLIのsearchとretrieveを実行できました。そのため、本記事ではCodexでの利用を公式の個別対応としてではなく、今回の環境で確認した結果として扱います。

参考：Modern Web Guidanceの導入方法｜Chrome for Developers

Modern Web Guidanceを知った経緯と、イベント後に導入したときの印象は「Google I/O Extended Tokyo 2026に参加した感想」で紹介しています。

searchで目的に合うガイドを探す

Modern Web Guidanceは、インストール前でもCLIからガイドを検索できます。今回は次のコマンドを実行しました。

npx -y modern-web-guidance@latest search "build an accessible modal dialog that closes when clicking outside"

実行時のCLIバージョンは0.0.185です。検索結果には、次のガイドが含まれていました。

検索結果には、ガイドID、説明、カテゴリー、使われるWeb機能、トークン数、検索内容との類似度がJSONで返ります。エージェントは説明を比較し、今回の目的に最も近いIDを選べます。

検索結果をすべて使う必要はありません。今回は、ダイアログの外側をクリックまたはタップして閉じる実装を確認するため、light-dismiss-a-dialogを選びました。アクセシビリティ全体を監査する場合は、別途accessibilityを取得します。

retrieveで実装条件とフォールバックまで取得する

選んだガイドはretrieveで取得します。

npx -y modern-web-guidance@latest retrieve "light-dismiss-a-dialog"

取得したガイドでは、モーダルダイアログにclosedby="any"を設定し、showModal()で開く方法が示されました。また、ダイアログにはaria-labelledbyまたはaria-labelで名前を付けること、非モーダルのshow()では同じ方法を使わないことも書かれています。

実装の中心となる部分は次の形です。

<dialog id="myDialog" closedby="any" aria-labelledby="dialogTitle">
  <h2 id="dialogTitle">お問い合わせ</h2>
</dialog>

document.getElementById('myDialog').showModal()

取得時点のガイドでは、closedbyはLimited availabilityとして扱われ、未対応ブラウザ向けのフォールバックも示されました。つまり、新しい属性の使い方だけでなく、ブラウザの対応範囲や、必要な代替処理の実装方法まで確認できます。

この例から分かるのは、Modern Web Guidanceの役割がコード例の提示だけではないことです。実装に必要な条件、アクセシビリティ、避ける方法、ブラウザ対応、フォールバックが一つのガイドとして返ります。

参考：light-dismiss-a-dialogガイド｜Google Chrome公式GitHub

Baselineでブラウザ対応の基準を決める

Modern Web Guidanceでは、Web機能のブラウザ対応をBaselineで扱います。Baselineは、主要なブラウザエンジンでWeb機能を相互運用できるかを分かりやすく示す取り組みです。

公式導入ガイドでは、次の3段階が説明されています。

プロジェクトでBaselineの対象年を決めている場合は、AGENTS.mdやCLAUDE.mdなどへ記録できます。

This project's Baseline target is Baseline 2024.

対象を設定していない場合、Modern Web GuidanceはBaseline Widely availableを既定として扱います。Widely availableではない機能を使うガイドには、ブラウザ対応を広げるための具体的な指示が含まれます。

新しい機能を使わないことが目的ではありません。対象ブラウザで利用できる機能は採用し、Widely availableではない機能には、ガイドに従って必要なフォールバックを用意します。採用する機能と対応方法は、プロジェクトのブラウザ対応方針に合わせて決めます。

参考：Baseline｜web.dev / Modern Web GuidanceとBaselineの説明｜Chrome for Developers

評価が100%通ることと、生成コードが100%正しいことは別

Modern Web Guidanceの各ユースケースには評価が用意されています。公式ページでは、Playwrightを使った自動QAにより、ガイドの要件を満たす正しい参照実装で100%、意図的に問題を入れた実装で0%になるよう評価を調整すると説明しています。さらに、ガイドを使わない場合と使う場合を比較するE2E評価も行っています。

公式ページが紹介する初期結果では、Modern Web Guidanceを使った場合、現代的なベストプラクティスへの準拠が平均37パーセントポイント改善したと報告されています。ただし、同じページに、プロジェクトの要件、モデル、プロンプト、コーディングエージェントによって結果が変わることも明記されています。

ここでいう100%は、評価用の正しい参照実装がテストを通るように調整されているという意味です。Modern Web Guidanceを導入すると、生成されるすべてのコードが100%正しくなるという意味ではありません。37パーセントポイントという数値もGoogleが公開している初期結果であり、個別の制作環境に同じ改善を保証するものではありません。

ガイド自体を評価していることは信頼性を確認する材料になります。一方で、実際のWebサイトでは、使用する技術、デザイン、コンテンツ、利用者、対応ブラウザが案件ごとに異なります。最終的には、その環境でビルドと操作を確認します。

参考：Modern Web Guidanceの精度評価｜Chrome for Developers

Modern Web Guidanceは実装依頼とテストで使う

Modern Web Guidanceは、Codexなどのコーディングエージェントへ機能の実装を依頼するときに使います。実装内容に合うガイドを検索・取得させ、その内容を踏まえてコードを書かせる使い方が基本です。

作りたい機能と完成条件をコーディングエージェントへ伝える
        ↓
コーディングエージェントがModern Web Guidanceで関連ガイドを検索・取得する
        ↓
ガイドの実装条件、ブラウザ対応、フォールバックを踏まえてコードを書く
        ↓
ガイドの要件を基準にコードと動作を確認する
        ↓
実際のブラウザで表示と操作を確認する

たとえば、「画面外をクリックして閉じられるダイアログを実装して」と依頼する際は、light-dismiss-a-dialogを取得させます。コーディングエージェントはclosedby="any"、showModal()、アクセシブルな名前、未対応ブラウザへのフォールバックという条件を確認してからコードへ反映できます。

ガイドは実装後の確認にも使えます。今回取得したガイドに書かれている必須条件や避ける実装を確認項目にして、同じエージェントへコードレビューや動作テストを依頼します。ガイドを読ませてコードを書かせるだけでなく、書かれたコードがガイドの要件を満たしているかまで確かめる使い方です。

新しくWebサイトを作る場合も、既存サイトへ機能を追加する場合も、この使い方は変わりません。ただし、取得したガイドをそのまま採用するのではなく、使用するフレームワーク、デザイン、対応ブラウザに合わせて実装します。

こうした実装依頼では、目的と完成条件を伝え、実装後に差分と画面を確認します。Codexでの具体的な制作フローは「CodexをWeb制作で使う方法」で紹介しています。Modern Web Guidanceは、実装と確認に具体的な基準を加えます。

AIによってワイヤー、デザイン、実装の境界が変わる中でも、公開できる状態まで仕上げる必要があります。制作全体の変化は「AI時代のWebサイト制作の流れ」で紹介しています。実装後の確認項目は「AIコーディングで作ったWebサイトの品質チェックリスト」にまとめています。

Modern Web Guidanceを導入しても、最後は実際のWebサイトで確認する

Modern Web Guidanceは、AIコーディングで現在のWeb標準を選びやすくするためのSkillです。分野全体のガイドと具体的なユースケースを検索し、実装条件、アクセシビリティ、Baseline、フォールバックを作業文脈へ追加できます。

今回、CodexでCLI 0.0.185を実行しました。目的に合うガイドを検索し、light-dismiss-a-dialogの実装条件とフォールバックを取得できました。

一方で、ガイドを取得することと、Webサイトが完成することは別です。検索結果から使うガイドを選び、プロジェクトの条件へ合わせ、実際のブラウザで表示と操作を確認する必要があります。

AIコーディングで実装できる範囲が広がるほど、何を根拠に実装し、どこまで確認して公開するかが重要になります。Modern Web Guidanceは、その判断を最新のWebプラットフォーム情報で支える仕組みとして、実装依頼と実装後の確認に組み込めます。