Modern Web Guidance 日本語解説

公式発表・概要

Modern Web Guidance 1.0 が正式リリースされた

元の資料:Modern Web Guidance 1.0: The web platform expertise your coding agent is missing
2026年11月10日(Chrome for Developers ブログ、Philip Walton)

コーディングエージェントに、Webの専門知識とブラウザ互換データを直接覚えさせる仕組み「Modern Web Guidance」の安定版1.0が出た、という公式発表です。5月のGoogle I/Oで先行公開されたものの正式版になります。

何が新しいのか

なぜ要るのか

今の有力なモデルでも、動くコードは書けます。ただ専門家が見ると、速くできる、アクセシブルにできる、安全にできる余地がほぼ毎回残ります。学習データに古い書き方が多いためです。Modern Web Guidanceは、その不足分をエージェントの作業中に補います。

モデルが落としやすい分野として、発表では次が挙げられています。アクセシビリティ(キーボードのフォーカス、動きを減らす設定への対応、フォーム検証)、使い心地(スワイプ、ダイアログやポップオーバーの遷移、ライト/ダークテーマ)、性能(メインスレッドのタスク分割、画面外の描画の省略、レイアウトのずれ防止)、セキュリティ(HTMLの無害化、厳しいContent Security Policy、パスキーの資格情報管理)です。

もう一つの考え方は「その仕事に一番合うWeb機能を使う」ことです。JavaScriptで作り込んでいたものを、HTMLやCSSの標準機能で済ませると、コードが減り、ブラウザ側で処理されるため速く、アクセシビリティも付いてくることが多い、としています。例として、ポップオーバーとダイアログのアニメーション、スクロールやスワイプの操作、ページ遷移、パスキーとWebAuthn、自動入力(autofill)が挙げられています。

入れるには

npx modern-web-guidance@latest install

以前の版が入っている場合は更新します。

npx modern-web-guidance@latest update

既存コードのモダナイズは、エージェントにこう頼む形でも起動します。

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

DevTools for agentsとの組み合わせ

発表は、Chrome DevTools for agentsと併せる使い方を勧めています。役割分担は明確です。Modern Web Guidanceは「書く前に必要な知識」を与え、DevTools for agentsは「書いたものを実際のブラウザで確かめる目」を与えます。性能目標まで直す、動き(アニメーション)を録画して確かめる、画面をメモリに保持する作りでメモリ漏れがないか見る、といった使い方が例に挙げられています。詳しくは動画の解説ページを見てください。

発表に載っている成果の数字

約4日→数時間
Pensionbazaarの新規画面の納期(90%超の短縮)。UIの不具合も90%超減
-92%
Policybazaarの手作業の監査工数(約30のランディングページ)
90%
WeTVで性能チェックの失敗を自動で診断・解決できた割合。所要時間は4時間→30分
61%→94%
noteのモダンWebのチェック合格率(180回の評価)。LCP画像の優先付けは導入後の431件のPRで28%増
43件/中央値15分
MetaMaskでレビューボットの指摘が直された件数と、コメントから修正までの時間の中央値

各社の詳しい話は、このサイトのケーススタディのページに分けてあります。

原文を読む:Modern Web Guidance 1.0: The web platform expertise your coding agent is missing

短縮URL(投稿の記載):https://goo.gle/4Cgnnfc / 解決先:https://developer.chrome.com/blog/modern-web-guidance-v1

動画で知る:Modern Web Guidanceとは何か →