Claude Code × Chrome DevTools MCPで、表示崩れをAIに見つけさせる

複数の画面幅で表示確認をしていると、横スクロールや文字切れを目視だけで拾い続けるのは大変です。そこでClaude CodeへChrome DevTools MCPを接続し、ページを操作しながらDOMや計算済みスタイルを調べ、崩れの候補を報告させることにしました。

検査条件を固定する

URLだけ渡すと、たまたま開いた幅だけを見て終わります。「幅375pxと1440pxで、横スクロール、重なり、文字切れ、画像抜けを調べ、問題はセレクターと根拠を添える」と指定します。メニュー、モーダル、フォームエラーなど確認する状態も列挙します。

スクリーンショットとDOMを往復する

1. 全体と問題箇所を撮る

2. scrollWidthとclientWidthを比べる

3. はみ出した要素の矩形と計算済みスタイルを確認する

4. CSSの定義元を特定する

5. 修正後に同条件で再確認する

[...document.querySelectorAll('*')].filter((el) => {
  const rect = el.getBoundingClientRect();
  return rect.left < 0 || rect.right > document.documentElement.clientWidth;
});

フォントや画像の読込完了を待ち、アニメーション中の撮影を避けます。コンソールエラーと通信失敗も一緒に確認します。

最終判断は人が行う

AIは数値で検出できるはみ出しに強い一方、ブランド上の違和感や読みやすさの判断は苦手です。AIには複数幅での巡回と原因候補の特定、人には報告箇所と主要導線の最終確認を任せる分担が有効でした。

今回は以上です。