生成AIにWebのフロントエンドを書かせると、標準の<dialog>要素で足りる場面でJavaScript製の自作モーダルを組み立てたり、CSSだけで実現できる表現に大きなライブラリを持ち込んだりと、少し前の時代の書き方が出てくることがあります。モデルの知識が学習時点で止まっている以上、進化の速いWebプラットフォームとの間にずれが生まれるのは構造的な問題です。

Googleはこの問題への対策として、エージェントに最新のWebの書き方を教え込むスキル集「Modern Web Guidance」をGoogle I/O 2026（2026年5月19日）で発表しました。本記事では、公式ドキュメントとGitHubリポジトリを2026年7月18日に確認し、付属の検索コマンドを実際に動かしたうえで、何をどうやって「教える」のか、その仕組みを整理します。

発表にあわせて、Google I/O 2026のセッション動画も公開されています。

▲ セッション「Unlock modern web capabilities in your AI coding workflows」— Chrome for Developers（YouTube）

結論 — 導入する価値はあるか

先に、利用者目線での本記事の結論を述べます。AIコーディングエージェントにWebのフロントエンドを書かせているなら、導入する価値はあると判断します。理由は3点です。

  1. 導入・維持のコストが小さい。エージェントのコンテキストに常駐するのは約234トークンの案内文だけで、ガイド本文は必要になった時点で必要な分だけ（今回の実測では1本あたり1,000〜3,000トークン程度）取り込む設計です。普段の作業をほとんど圧迫せず、合わなければ外すだけで済みます。Apache-2.0ライセンスで無料です
  2. 教える内容が「エージェントが特に間違えやすい領域」に絞られている。<dialog>・Popover API・View Transitionsなど、ここ数年で書き方が大きく変わった部分が中心で、モデルが既に知っている当たり前の内容は意図的に削られています。さらにBaseline連携により、「どこまで新しい機能を使ってよいか」がプロジェクトのブラウザサポート方針に追従します
  3. 特定のエージェントに縛られない。同じスキルがClaude Code・GitHub Copilot CLI・Antigravityなど複数のエージェントで読めるため、エージェントを乗り換えても導入が無駄になりません

一方で、留意点も3つあります。改善幅（+27〜35ポイント）はガイド作成元であるGoogle自身の評価であること。早期プレビューであり、内容や仕組みが今後変わりうること。そして、エージェントがnpxコマンドを都度実行する構成のため、ネットワーク接続とコマンド実行の許可が前提になり、効くのはフロントエンドのタスクに限られることです。

幸い、インストールしなくてもsearch・retrieveコマンドを直接叩いて中身を確かめられます。まず手元の案件に近いクエリで検索し、返ってくるガイドの質を見てから導入を判断する、という段階的な試し方ができます。以下、この判断の根拠となる仕組みを順に見ていきます。

何が公開されたか

Google I/O 2026の発表記事は、Modern Web Guidanceを次のように説明しています。

Modern Web Guidance, now available in early preview, is a set of evergreen and expert-vetted skills that guide your coding agents across many common use cases to build modern web experiences that are more accessible, performant, and secure.

（早期プレビューとして公開されたModern Web Guidanceは、陳腐化しないよう保守され、専門家の検証を経たスキルのセットである。多くの一般的なユースケースにわたってコーディングエージェントを導き、よりアクセシブルで、高速で、安全なモダンWeb体験の構築を助ける）

実体はGitHubのGoogleChrome/modern-web-guidanceリポジトリでApache-2.0ライセンスのもと公開されており、次のコマンドで対話式のインストーラーが起動します。

npx modern-web-guidance@latest install

READMEには代替のインストール方法として、Claude Code、GitHub Copilot CLI、Google Antigravity、GitHub CLI、Vercel Skills CLI（npx skills）への導入手順が列挙されています。特定のエージェント専用ではなく、複数のエージェントが読める「スキル」という配布形態を取っているのが特徴です。スキルパックは2種類で、Web全般のmodern-web-guidance（約234トークン）と、Manifest V3準拠の拡張機能開発を扱うchrome-extensions（約181トークン）があります。

中身はプロンプト集ではなく「検索ツール」

リポジトリをクローンして中身を確認しました（2026年7月18日時点）。スキル本体のSKILL.mdは、ベストプラクティスの本文をほとんど含んでいません。冒頭の説明文は、エージェントに対する強い指示から始まります。

MANDATORY: Execute FIRST for all HTML/CSS and clientside JS tasks. Do NOT skip — web APIs evolve rapidly and training weights contain obsolete patterns.

（必須: すべてのHTML/CSSおよびクライアントサイドJSのタスクで最初に実行すること。省略してはならない——WebのAPIは急速に進化しており、学習済みの重みには時代遅れのパターンが含まれている）

「学習済みの重みには時代遅れのパターンが含まれている」——冒頭で述べた問題を、Google自身がスキルの動作条件として明文化している格好です。

SKILL.mdが指示するのは2段階の手順です。まずエージェントは、やりたいことを表すクエリでsearchコマンドを実行します。手元で実際に試したところ、次のようなJSONが返りました。

npx -y modern-web-guidance@latest search "smoothly animate a dialog opening"
[{"id":"animate-to-from-top-layer",
  "description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.",
  "category":"overlays",
  "featuresUsed":["::backdrop","<dialog>","overlay","@starting-style","transition-behavior"],
  "tokenCount":1541,"similarity":0.6335},
 {"id":"declarative-dialog-popover-control",
  "description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.",
  "category":"overlays",
  "featuresUsed":["Invoker commands","Popover","<dialog>"],
  "tokenCount":2948,"similarity":0.5348}]

次に、ヒットしたIDをretrieveコマンドに渡すと、該当ガイドの本文（Markdown）が返ります。つまりこのスキルの「教え方」は、教科書を丸ごと持たせることではありません。ガイド全文をエージェントのコンテキストに常駐させるのではなく、必要になった時点で必要な1〜2本だけを取り込ませる検索ツールとして設計されています。検索結果にtokenCount（そのガイドを読み込んだ場合のトークン数）が明示されているのも、この設計意図の表れです。READMEにも次の記述があります。

The guides are designed to be token-efficient; we run evals enabling us to prune lowest-common-denominator content that models already know.

（ガイドはトークン効率を重視して設計されている。評価を回すことで、モデルが既に知っている当たり前の内容を刈り込めるようにしている）

ガイド本体はguides/ディレクトリにあり、クローン時点で17分野・138本ありました。分野はaccessibility・performance・forms・overlays・scroll・motion・css・css-layout・typography・datetime・passkeys・privacy・security・canvas・html・built-in-ai・webmcpで、最多はperformanceの24本です。READMEの掲げる数字は「102の機能・128のユースケース」で、実際のファイル数のほうが多く、発表後も追加が続いていることがうかがえます（I/O発表記事も「継続的な更新を定期的に追加する」としています）。

ガイドの中身 — 例: top layerのアニメーション

先ほどの検索で最上位に出たanimate-to-from-top-layerを見てみます。<dialog>やpopoverのような「top layer」に描画される要素は、display: noneとの切り替えを伴うため従来はアニメーションが困難でした。ガイドは、これを解決する現行CSSの組み合わせ——@starting-style（出現時の開始スタイル）、transition-behavior: allow-discrete（displayのような離散プロパティの遷移）、overlayプロパティ（退場アニメーション中もtop layerに留める）——を、::backdropの演出とprefers-reduced-motionへの配慮まで含めた完全なコード例つきで解説しています。

注目すべきは、各ガイドにブラウザ互換性の情報が日付つきで埋め込まれている点です。たとえばフォーム検証のガイドには次の一文があります。

Baseline status for :user-valid and :user-invalid: Widely available.
It's been Baseline since 2023-11-02.

Baseline連携 — 「どこまで新しい機能を使うか」を方針で制御する

この互換性情報はBaseline——Chrome・Edge・Firefox・Safariの主要ブラウザすべてで動く機能を「Newly available」、そこから30か月経過して安心して使える機能を「Widely available」と段階づけるWeb業界の共通指標——に基づいています。

SKILL.mdはエージェントに対し、既定では「Baseline Widely availableの機能はフォールバックなしで使ってよい。そうでない機能はガイドのフォールバック推奨に従うこと」と指示します。そのうえで、プロジェクト側のCLAUDE.mdやAGENTS.mdにブラウザサポート方針が書かれていればそちらを優先する、という上書きの仕組みを用意しています。「Safari 17.4以上だけ動けばよい社内ツール」ではフォールバックを省き、「ポリフィルは一切使わない」方針なら軽量な代替実装か設計変更を選ぶ、といった制御が、自然文の方針を書くだけで効くわけです。

効果はどう測られているか

READMEには評価基盤の説明があります。専門家がガイドと正解実装（ゴールドデモ）を書き、Playwrightによる自動採点スクリプトを「正解実装では100%合格・意図的に古い書き方をしたネガティブデモでは100%不合格」になるまで校正したうえで、APIや機能名を含まない現実的な依頼文（例:「画像の読み込みを速くして」）でエージェントを走らせ、スキルあり・なしの合格率を比較する、という閉ループです。直近の結果として次の数値が掲載されています（129タスク・1,071アサーション、2026年7月6日実施分）。

エージェント（モデル）スキルなし → あり改善幅
Claude Code（Sonnet 5）52% → 87%+35pt
Codex CLI（GPT-5.5）57% → 84%+27pt
Antigravity54% → 87%+33pt

この表は2つの読み方ができます。ひとつは、スキルの導入で27〜35ポイント改善するという主張。もうひとつは、裏返せば、誘導のないエージェントは現代的なベストプラクティスに5〜6割程度しか沿えていないという、冒頭の問題のGoogle自身による定量化です。ただし、この数値はガイドの作成元であるGoogle自身の評価基盤によるものであり、タスクセットもガイドが扱う領域から作られている点は割り引いて読む必要があります。

まとめ

  • Modern Web Guidanceは、GoogleがGoogle I/O 2026（2026年5月19日）で発表した、AIコーディングエージェント向けのスキル集。早期プレビューとして、Apache-2.0ライセンスでGitHubに公開されている
  • 前提となる問題認識は「WebのAPIは急速に進化しており、学習済みの重みには時代遅れのパターンが含まれている」というもので、SKILL.mdの冒頭に明文化されている
  • 実体はプロンプト集ではなく検索ツール。エージェントはsearchで関連ガイドを探し、retrieveで必要な分だけを取り込む。ガイドは17分野・138本（2026年7月18日のクローン時点）で、各ガイドにトークン数が明示されるなど、コンテキストウィンドウの節約を強く意識した設計になっている
  • 各ガイドにはBaselineに基づくブラウザ互換性情報が日付つきで埋め込まれ、既定では「Widely availableはフォールバック不要」で動く。プロジェクトのCLAUDE.mdやAGENTS.mdにサポート方針を書けば、その方針が優先される
  • Google自身の評価基盤（129タスク・1,071アサーション）では、スキルの導入で合格率が27〜35ポイント改善したとされる。一方でこの数値は、誘導のないエージェントの合格率が5〜6割にとどまることの定量化でもある。作成元自身による評価である点は考慮が必要
  • Claude Code・GitHub Copilot CLI・Google Antigravity・Vercel Skills CLIなど複数のエージェントに同じスキルを導入でき、npx modern-web-guidance@latest installで対話式にインストールできる。インストールせずにsearch・retrieveコマンドだけ試すことも可能

参考