Claude Code + Chrome拡張で『見た目のズレ』を直す実践

コードを読む限りは正しそうなのに、ブラウザで開くとmockupと微妙に違う——UI開発でいちばん厄介なのが、この「見た目のズレ」です。CSSのわずかな指定、要素のネスト、フレックスの折り返し。コードの静的な読み合わせでは気づけないズレが、実際にレンダリングして初めて姿を現します。

これまでは、人間がブラウザで画面を開き、mockup画像と見比べて、違いを言葉にしてAIに伝える必要がありました。この「人間が目で見て言語化する」工程を、AIエージェント自身にブラウザ経由で画面を見せることで置き換えるのが、この記事のワークフローです。Claude Code とブラウザ自動化拡張（Chrome拡張）を組み合わせ、localhost で実際にレンダリングされた画面を“見て”、mockupと突き合わせ、レイアウトのズレを特定して直すところまでを回します。

なぜ「実画面を見せる」必要があるのか

コードだけを渡してUIレビューさせると、限界があります。コードから最終的なレンダリング結果を頭の中で完全に再現するのは、人間にもAIにも難しい。特にこういうズレは、コードを見るだけでは検出しづらいものです。

レイアウト骨格のズレ — 2カラムのつもりが片方の領域が潰れている、上下分割の比率がmockupと違う、といった構造レベルの乖離
要素の配置ミス — 本来は右カラム上部にあるべきプレビューが、下部に回り込んでいる
想定外の折り返し・はみ出し — 幅が足りずコンポーネントが折り返り、mockupと印象が変わる

こうしたズレは「レンダリング結果」という事実を見なければ判定できません。だから、AIに実際の画面を見せます。

ワークフロー：見せて、突き合わせて、直す

1. mockupを基準として渡す

まず、目標となるmockup画像をAIに渡し、「これが正解の見た目」と基準を共有します。特にレイアウトの骨格を言語化しておくと、後の突き合わせが正確になります。たとえば「全体は2カラム。左カラムは調整UI。右カラムは上下に分割し、上部にレーダーチャートとプレビュー、下部に声のサンプルと高度な調整」といった構造の記述です。

2. 実画面をローカルで立ち上げ、AIに“見せる”

開発サーバを localhost で起動し、ブラウザ自動化拡張を通じて Claude Code にその画面を開かせます。ここで拡張が果たす役割は、実際にレンダリングされたDOMとスクリーンショットをAIの目に届けることです。AIはもはやコードを想像するのではなく、描画された現物を見て判断します。

必要なら、特定の状態（音声を録音した後、スライダーを動かした後など）まで操作させてからスクリーンショットを撮らせます。動的に変わるUIは、静止した初期画面だけ見てもズレを拾いきれないためです。

3. mockupと実画面を突き合わせてズレを特定する

基準（mockup）と現物（スクリーンショット）が揃ったので、AIに差分を挙げさせます。ここで効くのが、ステップ1で骨格を言語化しておいたことです。「右カラム上部にあるべきプレビューが下部に来ている」「右カラムが上下分割されず一列になっている」といった、構造レベルのズレを具体的に指摘させます。

抽象的に「なんか違う」で終わらせず、「どの領域の、どの要素が、mockupではどこにあり、実画面ではどこにあるか」まで落とし込むのがコツです。これがそのまま修正指示になります。

4. 直して、もう一度見せる

指摘をもとに Claude Code にコードを修正させ、再びブラウザで開いて突き合わせる。修正が本当にレンダリング結果に反映されたか、そして新たなズレを生んでいないかを、また現物で確認します。実際、2カラム＋右カラム上下分割のようなレイアウト再構成は、一発で決まらないことが多く、この「見せて直して、また見せる」ループが要になります。コードを直しただけで確認を省くと、直ったつもりのズレが残ります。

落とし穴と学び

このループを回して見えてきた注意点です。

スクリーンショットは修正のたびに撮り直す — 一度撮った画面を使い回すと、直したはずの状態を評価できない。毎回、現物を撮り直す。
状態を再現してから見せる — 初期表示だけでなく、録音後・スライダー操作後など、mockupが想定している状態まで操作してからスクリーンショットを撮る。
ビューポート幅を合わせる — 表示幅が違えば折り返しも変わる。mockupが想定する幅にブラウザを合わせてから比較する。
骨格を先に言語化する — 「2カラム／右カラム上下分割」のような構造記述があると、AIの指摘が抽象論に流れず、修正可能な粒度になる。
コードレビューと画面レビューは別物 — コード上の整合と、レンダリング結果の整合は一致しない。最終判定は必ず実画面で行う。

まとめ

コードの静的な読み合わせでは、レイアウト骨格のズレや折り返し・はみ出しといった「見た目のズレ」は検出しきれない
ブラウザ自動化拡張で localhost の実画面を Claude Code に“見せ”、mockup画像と突き合わせてズレを特定する
ズレは「どの領域のどの要素が、mockupと実画面でどう違うか」まで具体化し、そのまま修正指示にする
修正したら再びブラウザで開いて突き合わせる。見せて直して、また見せるループが要
スクリーンショットは毎回撮り直し、状態とビューポート幅を揃えてから比較する
最終判定はコードではなく実画面で——AIに画面を見せて直させる、が新しい実践