gihyo.jpサイトのロゴ

Google⁠⁠、モダンなWeb開発を支援するエージェントスキル「Modern Web Guidance」を公開

2026-05-21

Googleは2026年5月19日、Google I/O 2026に合わせて、モダンなWeb開発を支援するエージェントスキル「Modern Web Guidance」を早期プレビューとして公開した。アクセシビリティ、パフォーマンス、セキュリティを踏まえてWebアプリを実装できるよう支援する。

Modern Web Guidance⁠、モダンなWeb開発のガイダンスをAIエージェントに提供

Modern Web Guidanceは、モダンなWeb開発に関するガイダンスを、コーディングエージェントに読み込ませるスキルとして提供する。開発者はターミナルから用途に応じたガイドを検索・取得し、エージェントのコンテキストへ渡すことができる。

コーディングエージェントは、古い実装パターンを選ぶことがある。モデルの学習データにはレガシーコードが多く含まれるため、現在はネイティブのWebプラットフォーム機能で実現できる処理でも、JavaScriptを多く使う実装や古い回避策を生成しやすいと説明されている。また、モデルがAPIの存在を知っていても、本番向けの具体的な実装パターンが不足しやすいことも課題だという。

Modern Web Guidanceは、こうしたギャップを埋めるため、対象の作業に応じたガイドを参照できるようにする。たとえば、Popover API、CSS Anchor Positioning、<dialog>要素、パスキー、Content Security Policy、Core Web Vitalsの改善など、モダンなWeb機能を使った実装へ誘導する。対象領域には、ユーザーインターフェイス、CSSレイアウト、パフォーマンス、フォームとUI、アクセシビリティ、ブラウザ内蔵AIなどが含まれる。

Baselineと連携し⁠、対応ブラウザに応じた機能とフォールバックを選ぶ

Modern Web Guidanceは、Webプラットフォーム機能の対応状況を示す「Baseline」と連携する。開発者が選んだBaselineターゲットに応じて、どの機能を使い、どのフォールバックを用意するかをエージェント側で判断しやすくする。

未対応ブラウザで無視されても大きな問題になりにくい追加的な改善と、ダイアログ操作やネットワーク送信のように代替実装が必要な処理も分けて扱う。フォールバックでは、50行未満の軽量な個別実装や条件付きポリフィルを優先する方針も示されている。さらに、fetchLater()の64KBペイロード上限やmacOS固有のスクロールバー挙動のように、実装時に注意が必要な制限にも触れている。

関連ツールとして、実際のユーザーが使っているブラウザのデータからBaselineターゲットを検討できる「Baseline Checker」も紹介されている。

Antigravityやnpx⁠、各種エージェントから導入可能

Modern Web Guidanceは、Google Antigravityにワンクリックでインストールできるほか、npx経由でも導入できる。

npx modern-web-guidance@latest install

npx skillsや、GitHub CLI、Antigravity CLI、Gemini CLI、GitHub Copilot CLI、Claude Codeなどの各種エージェント環境向けの導入方法も用意されている。具体的なコマンドは、導入手順にまとまっている。

npxコマンドでインストールすると、導入先のエージェント環境を選ぶ画面が表示される。必要な環境を選択して進めると、modern-web-guidanceスキルがインストールされる。

インストールされたSKILL.mdでも、HTML/CSSやクライアントサイドJavaScriptの作業では最初に参照し、変化の速いWeb APIや古い実装パターンを確認するためのスキルとして説明されている。

100以上のユースケースを収録⁠、Chrome拡張向けスキルも用意

Modern Web Guidanceは、数十の新しいWeb機能を扱い、それらを使った100以上の実装場面に対応する。対象には、ダイアログ、CSS、パフォーマンス、フォーム、アクセシビリティなどの領域が含まれる。ドキュメントでは、スキルを呼び出すプロンプト例として、新しいUIの構築、レガシーコードのモダン化、セキュリティ改善、パフォーマンス改善などが示されている。

導入前に内容を確認したい場合は、ターミナルからnpx経由で、ユースケースごとのガイドを検索・取得できる。npx modern-web-guidance@latest searchでプロンプトに合うユースケースIDを探し、npx modern-web-guidance@latest retrieveで対象のガイドMarkdownをターミナルに表示する。検索はオフラインのTensorFlow.jsモデルを使ってローカルで動作し、ネットワーク呼び出しやAPIキーを必要としないとしている。

配布用のリポジトリ「GoogleChrome/modern-web-guidance」では、主スキルであるmodern-web-guidanceに加え、Chrome拡張の開発を支援するchrome-extensionsスキルパックも用意されている。Chrome拡張の開発も行う場合は、対話式のnpx modern-web-guidance@latest install --chooseでchrome-extensionsも選べる。

開発・評価用のソースリポジトリ「GoogleChrome/modern-web-guidance-src」も公開されている。このリポジトリでは、スキルとして配布されるガイダンスの作成、調整、評価を行う。ベストプラクティスも整備され、評価用の課題や検証条件を書き、評価ハーネスでコーディングエージェントがガイダンスに従っているかを測ることができる。READMEでは、この取り組みがGoogle Chromeチーム、Microsoft Edgeチーム、Web開発コミュニティによって支えられているとしている。

Chrome拡張開発向けには「Build extensions with coding agents」も公開されている。この記事では、chrome-extensionsとmodern-web-guidanceの両方を選んでコーディングエージェントに読み込ませ、Manifest V3やSide Panel API、Chrome Web Store公開時の権限説明などを扱わせる流れを説明している。

Chrome DevTools for agentsと組み合わせて確認⁠・修正も支援

Modern Web Guidanceのドキュメントでは、「⁠Chrome DevTools for agents」と組み合わせる使い方も示されている。Chrome DevTools for agentsを使うことで、エージェントはコンソールログ、ネットワーク通信、アクセシビリティツリーなどを参照し、コードの検証、デバッグ、最適化を進められる。

Modern Web Guidanceが実装方針やコードパターンを示すのに対し、Chrome DevTools for agentsは実行中のページを確認するための情報を渡す役割を持つ。両者を組み合わせることで、エージェントがパフォーマンス監査、アクセシビリティツリーの確認、コンソールログの取得を行い、その結果をもとにモダンなWebコードへ修正する流れを作ることができるとしている。

おすすめ記事

記事・ニュース一覧