AIエージェントにWeb開発の「最新ベストプラクティス」を伝えるスキル Googleが公開：Web体験を向上させる「Modern Web Guidance」

Googleは、AIコーディングエージェントに最新のWeb実装ガイダンスを提供するスキル集「Modern Web Guidance」をプレビュー公開した。アクセシビリティー、パフォーマンス、セキュリティに優れたWeb体験の構築をAIエージェント経由で支援する。

[＠IT]

　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

GitHub Copilot CLIでのインストール手順

# 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

Claude Codeでのインストール手順

　「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）