ICYMI: Modern Web Guidance が安定版になりました

Matthias Rohmer
Alexandra Klepper
Alexandra Klepper
GitHub Bluesky

公開日: 2026 年 11 月 13 日

このサイトを定期的に読んでいる方、X、LinkedIn、Bluesky でデベロッパー向け Chrome をフォローしている方、今週 DevTools で [新機能] パネルを開いた方は、ほぼ間違いなくこのニュースを耳にしているはずです。しかし、開発に専念していた皆さん、Modern Web Guidance が安定版バージョン 1.0 として利用可能になりました。

ブログ投稿、ケーススタディ、ソーシャル メディア投稿、Chrome DevTools の [新機能] パネルで Modern Web Guidance 1.0 を発表しているコラージュ。

Google I/O で早期プレビュー版を公開して以来、多くの改善を加え、Firefox や Edge とのクロスブラウザ コラボレーションに Modern Web Guidance を拡大してきました。今週は、記事、ケーススタディ、動画、ドキュメントで、これらの発表について詳しく説明しました。

まとめ

フロンティア モデルは、ウェブ開発のレガシー パターンをデフォルトにすることがよくあります。たとえば、CSS スクロール駆動型アニメーションよりも JavaScript アニメーション ライブラリを好んだり、カスタマイズ可能なプルダウンに appearance: base-select を使用する代わりに、複雑なネストされた div モンスターを構築したりします。

Modern Web Guidance は、プロンプトに基づいて、簡潔でタスク スコープのガイドを挿入することで、この問題を解決します。1.0 リリースでは、次の機能が提供されます。

  • 専門家が監修したガイドの追加: パフォーマンス、スタイル、ユーザー補助、セキュリティ、プライバシー、フォームなど、多岐にわたるガイドが追加されました。各スキルは、技術分野の専門家によってレビューされ、テストされました。スキルはガイドカタログで参照できます。
  • デフォルトでクロスブラウザ: Mozilla Firefox、Microsoft Edge、Google Chrome を構築するチームによるコラボレーション。すべてのガイドは、ベースライン互換性データとフォールバックで強化されています。
  • 公開評価スイート: 数千回の評価実行。公開評価ダッシュボードで検査可能。合格率の向上が強調されています。

Modern Web Guidance 1.0 のお知らせの投稿では、解決される AI 知識ギャップの具体的な例、エージェント向け Chrome DevTools を使用したエンドツーエンドのワークフロー、I/O プレビューからの更新手順について説明しています。

お客様の声

Modern Web Guidance の共同作成者として、もちろん私たちは少し偏見を持っています。Chrome の AI コーディング ツールのフルスイートを日常のワークフローでテストしたパートナーの感想をご覧ください。

  • Policybazaar と Pensionbazaar: ビルドと検証のループを閉じることで、新しいページのターンアラウンドと UI バグを 90% 以上削減しました。また、Policybazaar は、約 30 のランディング ページにわたる Core Web Vitals の手動監査作業を 92% 削減しました。
  • MetaMask: Wired Modern Web Guidance を約 480 件の pull リクエストにわたる 3 行のアドバイザリ PR レビュー bot に組み込み、43 件のユーザー補助とセマンティック HTML の修正を推進し、15 分の中央値のターンアラウンドを実現しました。
  • WeTV: エージェント向け Chrome DevTools と Modern Web Guidance を CI/CD に追加して、繰り返される CLS 回帰の 90% を自動的に診断して修正し、デバッグ時間を 87% 短縮しました。
  • note inc.: 最新のウェブ ガイダンスと内部デザイン システムのルールを組み合わせることで、最新のウェブ チェックの合格率が 61% から 94% に向上し、適切な LCP 画像の優先順位付けが 28% 向上しました。

始める

エージェントに Modern Web Guidance のインストールを依頼すると、うまくいくこともありますが、次の npx コマンドを使用すると、プロジェクトとエージェントをステップバイステップのフローで設定できます。

npx modern-web-guidance@latest install

GitHub で別のインストール オプションを確認することもできます。

設定が完了したら、新しいユースケースと、Modern Web Guidance 1.0 の内部的な仕組みについて詳しく確認できます。

Chrome を使用したエージェント型ウェブ開発の今後の展望

コーディング エージェントで Modern Web Guidance を使用すると、素晴らしいスタートを切ることができます。しかし、さらに進めることもできます（そしてそうすべきです）。エージェントには、実際のブラウザでコードを実行、検査、検証する方法が必要です。

1 年以上にわたり、エージェント向け Chrome DevTools は、コーディング エージェントに、アクセシビリティやパフォーマンスの検査からメモリのデバッグやアニメーションの記録まで、幅広いツールを使用してライブ ランタイムの可視性を提供してきました。これにより、エージェントはこれらのツールを微調整できます。

今後数週間以内に、エージェント向け Chrome DevTools の次のマイルストーンがリリースされます。Chrome からエージェントに適切なコンテキストを渡すことがさらに簡単になります。

Modern Web Guidance 1.0 をお試しいただき、ご意見をお寄せください。Modern Web Guidance とエージェント向け Chrome DevTools はどちらも、GitHub でオープンに構築されています。エージェントがまだ間違えているウェブ プラットフォーム タスクを見つけた場合や、次に取り組むべきことについてアイデアがある場合は、問題を報告してお知らせください。