Chrome、AIに最新のウェブの作り方を教える指針を正式公開

2026年11月11日 6:44

解説アイキャッチ。ChromeがAIに最新のウェブの作り方を教える指針を正式公開

文：AB通信編集部｜運営：株式会社abcompany

平山大樹　AB通信運営責任者

AB通信編集部が、企業・行政の公式発表や決算資料などの一次情報を確認して書いています。運営会社・編集方針

この記事のポイント

Chromeは2026年11月10日、AIコーディングエージェント向けの指針「Modern Web Guidance」の正式版1.0を公開しました
新しいHTML・CSSの書き方や、表示速度・アクセシビリティの基準をエージェントに渡します。既存コードを点検する機能も加わりました
FirefoxとEdgeも参加し、複数のブラウザによる取り組みになりました
公式ブログによると、note社の検証では、モダンなウェブの点検合格率が61%から94%に上がりました
導入の推奨手順は npx modern-web-guidance@latest install です。利用データは初期設定で送られるため、止めるときは DISABLE_TELEMETRY=1 を設定します

Modern Web Guidance 1.0が正式版になりました

Chrome for Developersの公式ブログは、2026年11月10日、AIコーディングエージェント向けの指針「Modern Web Guidance」の正式版1.0を公開したと発表しました。公式X（@ChromiumDev）でも、同日17:06 UTC（日本時間11日 2:06）に案内しています。初期のプレビューは、同年5月のGoogle I/Oで示されていました。

公式の説明では、Modern Web Guidanceは、ウェブプラットフォームの専門知識、推奨される書き方、ブラウザの対応状況を、使っているコーディングエージェントへ直接渡すスキルの集まりです。エージェントが古いJavaScriptの書き方に寄りがちなのに対し、いまのHTMLやCSSで足りる方法へ案内することを目指しています。

Modern Web Guidanceの公式カバー画像。青いランタン型のマークの中央に星がある — 出典：Chrome for Developers「Modern Web Guidance」のページ画像（2026年11月11日時点）

1.0でできるようになったこと

公式ブログとドキュメントによると、1.0では次のような内容が加わり、拡充されています。

新しい機能を作るとき、新しいHTMLやCSSの書き方へ案内する。たとえば、<dialog> や Popover API、CSS Anchor Positioning、コンテナクエリなどです
表示速度では、Interaction to Next Paint（INP）の診断や、Largest Contentful Paint（LCP）向けの画像読み込みの優先度など、Core Web Vitalsに関する基準を渡します
アクセシビリティでは、キーボード操作やフォーカスの扱い、動きを減らす設定への対応、フォームの検証表示など、間違えやすい点を案内します。1.0では、利用者が触れるガイドに、支援技術を使った専門家の確認が入ったと説明されています
既存のHTML、CSS、JavaScript、package.json を調べ、安全に新しくできそうな箇所を見つける「modernization workflow」が加わりました
FirefoxとEdgeも参加し、複数のブラウザで進める取り組みになりました。公式Xでは、MDN Web Docsも協力していると案内しています

公式Xでは、1.0には200を超える専門家によるガイドと、Baselineの対応状況が含まれるとしています。推奨内容は、プロジェクトで決めたブラウザ対応の条件に合わせて変わります。条件を設定しない場合、公式ドキュメントでは Baseline Widely available（主要なブラウザで、少なくとも30か月以上使える機能）が既定になると書かれています。

ガイドの検索そのものは、公式GitHubによると端末の中だけで動き、ネットワークやAPIキーは不要です。コードを書く段階の指針として使い、実行中の確認には Chrome DevTools for agents と組み合わせる使い方が、公式に勧められています。

公式が案内する対応エージェントのロゴ。Codex、Cursor、Kimi、Google Antigravity、Grok、WebStorm、GitHub Copilot — 出典：Chrome for Developers公式ブログ「Modern Web Guidance 1.0」の掲載画像（2026年11月10日）

公式ブログによると、CLIのほか、Claude Code、Codex、Cursor、Antigravity、Copilot、WebStorm、Kimi Code、Grok Buildなどのプラグイン一覧からも導入できます。

公式に載っているnote社の検証事例

公式ブログの事例紹介では、日本のメディアプラットフォームであるnote社の事例が紹介されています。公式の説明では、月間のアクティブユーザーは9,000万人を超え、社内のデザインシステムと並行して、Next.jsで作っている画面の刷新にModern Web Guidanceを使ったとされています。

本番のコードを対象にした180回の評価で、モダンなウェブの点検合格率が61%から94%に上がった
スクロールの動き、ツールチップ、アコーディオンなどで、独自のJavaScriptではなく、標準のHTMLやCSSを使う方向へエージェントを誘導した
マージされた431件のプルリクエストで、LCP候補の画像を正しく優先する割合が28%増えた

公式ブログは、noteのVP of TechnologyであるTakehiko Itabashi氏のコメントとして、「コードのより多くをAIコーディングエージェントが書くようになるなかで、Modern Web Guidanceは古いJavaScriptの書き方に戻らず、標準に沿った新しい方法を選ぶ助けになる」という趣旨を紹介しています。画像の読み込み優先度やフォームのアクセシビリティなど、見落としやすい点も指摘してくれる、とも述べています。

同じブログには、Pensionbazaar／Policybazaar、WeTV（Tencent）、MetaMaskの事例も載っています。いずれも公式の自己申告にもとづく結果です。

始め方

図：Modern Web Guidanceを導入し、新規作成と既存コードの点検に使い、必要なら利用データを止める流れ — 出典：Chrome for Developers「Get started with Modern Web Guidance」と公式GitHub READMEをもとにAB通信が作成（2026年11月11日時点）

公式が推奨する導入方法は、Chromeチームが用意した modern-web-guidance CLIです。プロジェクトのディレクトリで、次のコマンドを実行します。この方法では、自動更新が有効になると説明されています。

npx modern-web-guidance@latest install

すでに以前の版を入れている場合は、次のコマンドで1.0へ更新できます。

npx modern-web-guidance@latest update

導入前にガイドを試すこともできます。公式ドキュメントでは、次の例が示されています。

npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
npx modern-web-guidance@latest legacy-scan .

既存コードの点検は、1.0以上が必要です。スキルの一部として入っているため、「legacy patterns」や「modernize」のように自然な言葉で依頼しても、スキャナーを起動できます。公式ブログでは、次のような依頼例が紹介されています。

/modern-web-guidance Modernize the code in this directory

公式は、見つけた箇所を確認したうえで変更の計画を出してから直す、という進め方を示しています。自動で一括修正する --fix のような旗は、意図的に用意していないと説明されています。

注意点

公式GitHubのREADME「Telemetry & Privacy」によると、初期設定では、ツールの安定性や関連性、性能を改善するために、匿名の利用情報がGoogleへ送られます。対象は、導入回数、呼び出しているエージェントの名前、取得したガイドのID、エージェントが作ったCLIの検索語（例：dark mode scrollbar color-scheme）です。利用者の元の依頼文そのものは集めないと書かれています。

送らないようにするには、シェルの設定ファイル（.bashrc や .zshrc など）へ、次の環境変数を書きます。

export DISABLE_TELEMETRY=1

データの扱いは、Googleのプライバシーポリシーに沿うと説明されています。集めている内容は、公式ソースリポジトリの modern-web.ts でも確認できると案内されています。

既存コードの点検にも、範囲の限りがあります。公式ドキュメントによると、最初の公開では静的解析で、確度の高い限られたパターンだけを見ます。対象は、約200件のガイドのうち、誤検出を避けて機械的に見つけられる約20%です。それ以外のガイドは、新しい機能を作るときにエージェントが検索して取得します。意図したフォールバックや、@supports で囲んだ書き方は、確認の段階で対象外にするようエージェントへ指示されます。

公式ドキュメントの評価では、Modern Web Guidanceを使った場合、推奨される新しい書き方への適合が、平均で37ポイント改善したという初期結果が示されています。一方で、プロジェクトの条件、モデル、依頼の書き方、使うエージェントによって結果は変わる、とも書かれています。