YouTube・ケーススタディ

ケーススタディ：PolicybazaarとPensionbazaar

元の資料：Case Study: Policybazaar.com and Pensionbazaar — How Policybazaar cut auditing overhead by 92% and accelerated screen delivery by >90%
2026年11月10日（Chrome for Developers ブログ）

インドの保険プラットフォームPolicybazaarと、姉妹サービスのPensionbazaarが、「書く→ブラウザで確かめる→直す」の輪をエージェントに回させた事例です。

現場の規模

課題は2つありました。Pensionbazaarは複雑な新規画面が多数要るのに、エージェントが描画結果を見られないため、はみ出しやレイアウトのずれが人のQAまで残り、生成コードも古い書き方（重いJavaScriptのモーダル、不要なポリフィル、fetchpriority の欠落）に寄っていました。Policybazaarは約30のランディングページの性能監査が手作業で、PageSpeed Insightsを見て、開発環境で原因を調べ、直す、という繰り返しが規模に追いつきませんでした。

やったこと：書いて確かめる輪

1. デザインはFigma MCPからエージェントが読みます。
2. コード生成はModern Web Guidanceに沿わせます。
3. Chrome DevTools for agentsで、独立したブラウザを起動し、見た目の一致、コンソールのエラー、性能を監査します。
4. 監査結果でエージェントが自分で直し、デザインと比べ直します。
5. 最後に、スクリーンショット付きのQA報告とともに、確認済みのコードを渡します。

テストは毎回まっさらなブラウザで回すため、MCPサーバの設定に --isolated を付けています。拡張機能の影響と、個人情報の混入を避けるためです。

{
  "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
}

コードが変わった点

• JavaScriptの肩代わりが、標準の <dialog> とPopover API、CSS GridとFlexboxに置き換わりました。
• 基礎モデルが付け忘れる性能の手がかりが付きました。主役のLCP画像への fetchpriority="high"、画面下部のカードへの loading="lazy"、INPを守る時間予算付きの scheduler.yield() です。
• 古いブラウザでも壊れませんでした。:user-invalid やワンタイムコード欄の autocomplete="one-time-code" は、未対応のブラウザでは無視され、中核の機能がそのまま動きます。

性能については基礎モデルでも約70%はベストプラクティスに沿っていて、残りを12件のガイドの規則が埋めた、とエージェント自身の報告を引いて書かれています。例は次の4つです。

結果

導入前に立てた目標は、監査の開発者時間を80%超減らして監査を継続的にすること、確認済みの報告でQAの納期を短くすること、デザインと違う画面による不具合を減らすことでした。QAへ渡る報告には、Figmaとのピクセル差分の図、画面サイズ別のスクリーンショット、Core Web Vitalsと性能の診断、Lighthouseのスコア、操作の合格／不合格が含まれます。

「Pensionbazaarの優先事項は、後で技術的負債にならないよう、初日から質の高いコードを書くことでした。Modern Web Guidanceは、私たちのブラウザ互換の目標を守りながら、コーディングエージェントを現代的なWeb標準と性能のベストプラクティスへ向けてくれました。」— Aman Soni（Engineering Manager, Policybazaar）※発言の要旨