AIエージェントにWeb開発の「最新ベストプラクティス」を伝えるスキル Googleが公開：Web体験を向上させる「Modern Web Guidance」
Googleは、AIコーディングエージェント向けに最新のWeb実装ガイダンスを提供するスキル集「Modern Web Guidance」をプレビュー公開した。
Webプラットフォームの専門知識やベストプラクティス、ブラウザ互換性データをエージェントに直接埋め込むことで、アクセシビリティー、パフォーマンス、セキュリティに優れた最新のWeb体験の構築を支援するという。
AIエージェントが「古いコード」「肥大化したJavaScript」を出力する理由
LLM（大規模言語モデル）のトレーニングデータには膨大な量のレガシーコードが含まれているため、AIコーディングエージェントは古い実装パターンを出力しがちだ。その結果、現在ではブラウザネイティブの高性能な解決策が存在するタスクであっても、AIは肥大化したJavaScriptを生成してしまうことが多い。
仮にAIモデルが新しいAPIの存在を認識していても、本番環境のコードに求められる実用的でモダンな実装パターンの知識が不足しているケースがある。
Modern Web Guidanceは、専門家が厳選したガイドラインをエージェントのコンテキストウィンドウに含めることでこうした課題の解消を目指すものだ。AIが頻繁に誤用する「モダンブラウザAPI」を正しく構造化できるよう支援する。
ブラウザで最適化可能かつアクセシビリティー機能を備えたプラットフォームレベルのAPIを優先的に使用するようAIをガイドする。動作対象外のブラウザ向けに重いポリフィルやレガシーライブラリを読み込ませるのではなく、軽量で合理的なフォールバックを実装するよう誘導できるという。
スキルの利用方法は？
Modern Web Guidanceは、CLI（コマンドラインインタフェース）を使用してインストールする方法が推奨されている。
npx modern-web-guidance@latest install
加えて、主要なAIコーディングエージェント向けの専用スキルも提供されている。「GitHub Copilot CLI」や「Claude Code」は以下の手順でインストールできる。
# 1. Add the marketplace: /plugin marketplace add GoogleChrome/modern-web-guidance # 2. Install the plugin /plugin install modern-web-guidance@googlechrome
# 1. Add the marketplace: /plugin marketplace add GoogleChrome/modern-web-guidance # 2. Install the plugin /plugin install modern-web-guidance@googlechrome # 3. Reload plugins /reload-plugins
「Vercel」のエージェントスキルや「Google Antigravity CLI」など、各種環境向けの手順も公式サイトで公開されている。
Modern Web Guidanceのプロンプト例
Googleは、以下の4つの領域におけるサンプルプロンプトを次のように紹介している。
新しいユーザー体験の構築
- 「開閉時にスムーズにアニメーションするアコーディオン形式の統計コンポーネントを作成して」
- 「CSS Anchor Positioningを用いて、アクティブな項目に追従してハイライトがスライド移動するタブバーを作成して」
- 「表示される場所の幅に合わせて、自動的に見た目が変わるダッシュボードカードを作成して」
レガシーコードのモダナイゼーション
- 「レガシーなモーダルウィンドウ実装をdialog要素に置き換え、モダンCSS機能でアニメーションを追加して」
- 「レガシーなツールチップを、Popover APIとCSS Anchor Positioning方式に移行して」
セキュリティの強化
- 「最新のWebAuthn機能を利用したパスキーベースのログインフローを実装して」
- 「アプリを壊さない範囲で、許可したものだけを実行するContent Security Policy（CSP）を実装して」
- 「自分のサイトのセキュリティ監査を実施し、改善を提案して」
パフォーマンスの改善
- 「ユーザーが重要なリンクにマウスカーソルを合わせたタイミングで、ページのプリロードを開始するようにアプリを設定して」
- 「アプリに長時間実行される処理が多く、INP（Interaction to Next Paint）に影響している。改善方法を教えて」
- 「アプリのLCP（Largest Contentful Paint）を改善して」
エージェント向けChrome DevToolsとの組み合わせ
Modern Web Guidanceのスキルは、エージェント向け「Chrome DevTools」と組み合わせて利用できる。両者を併用することで、Web開発のワークフローを改善できるとGoogleは説明している。
「リアルタイムのパフォーマンス監査の実行、アクセシビリティーツリーの検査、コンソールログのキャプチャーに加え、その結果に基づいて最新のWeb実装を反映したコード修正を自動適用できる」（Google）
関連記事
-
2026年07月02日 Web開発AIコーディングエージェントが生成するプルリクエスト（PR）が急増する中、人間によるレビューの在り方が新たな課題になっている。GitHubは2026年5月7日（... -
2026年07月02日 Web開発T&D保険グループのペット保険会社であるペット＆ファミリー損害保険は、基幹システムの刷新によって業務効率化やサービス開発の迅速化を実現した。新基幹システム「Pa... -
2026年06月01日 Web開発近年、npmレジストリを狙うソフトウェアサプライチェーン攻撃が深刻化している。CI/CD（継続的インテグレーション／継続的デリバリー）ワークフローや自動化された... -
2026年05月02日 Web開発Cloudflareは2026年4月1日（米国時間）、オープンソースCMS（コンテンツマネジメントシステム）「WordPress」の後継を目指すサーバレスCMS... -
2026年07月02日 Web開発マイクロソフトは、TypeScriptをGo言語に移植した最初のバージョンとなる「TypeScript 7.0」リリース候補版のリリースを発表しました。 Typ... -
2026年07月02日 システム開発JavaScript/TypeScriptランタイムのDenoを開発するDeno Landは、Deno 2.9正式版をリリースしました。Deno 2.9は起動を...