デザインと実装を見比べて、ずれているところを探す作業。
AIに任せたら、ページ全体を縮小した画像では、細かい差をほとんど拾えませんでした。
🎥 この記事の内容は動画でも解説しています。
先に結論です。
- ページ全体を縮小して並べると、AIはボタンの幅や間隔、文字サイズの差を見落とす
- セクションごとに、上端をそろえて等倍で切り出したら、細かい差も指摘されるようになった
- 左端に目盛り、ラベルに「実装−デザイン」の高さの差を書き込んだら、今回は9pxや16pxの違いまで指摘された
縮小した全体図では、差を拾えなかった
副業のLP案件で、Figmaのデザインどおりに組めているかを、AIにレビューさせていました。
実装とレビューは、Claude CodeやCodexに分担してもらっていました。
最初は、デザインの画像と実装のスクショを、ページ全体のまま縮小して並べていました。
縦に長いページを1枚に収めるので、かなり小さくなります。
この方法だと、いちばん上のメインビジュアルの下のほうの差を拾えませんでした。
カードの幅、ボタン、文字サイズ、タグの並びの間隔。
どれも、AIのレビューには出てこなかったんです。
縮小すると、数pxの差は画像の上でつぶれてしまいます。
なので、AIが画像を読むときにさらに縮められないよう、比べる画像を小さく分けることにしました。
セクションごとに、等倍で切り出した
そこで、比べ方を変えてもらいました。
比較画像は、Claude Codeに小さなスクリプトを書いてもらって、毎回自動で作っています。
- ページをセクション(内容のまとまり)ごとに分ける
- デザインと実装を、セクションの上端でそろえて、等倍で切り出す
- 前後に30pxずつ余白をつける(セクションの上端・下端には赤線)
- AIが読むときに縮められないサイズに分ける(PCは幅1000px・高さ600pxずつ、スマホは幅390px・高さ1200pxずつ)
PCはデザインを上・実装を下に、スマホは左右に並べています。
縮小した全体図も1枚だけ残していますが、これは構成の確認用で、数字の判断には使わないことにしました。
目盛りと「高さの差」を書き込んだ
等倍にしても、何pxずれているかは読み取りにくいです。
なので、画像に2つ書き込んでもらいました。
- 左端に、セクションの上端を0にした10px刻みの目盛り(50pxごとに数字)
- ラベルに、セクションの高さと、「実装−デザイン」の高さの差
位置の数字は、実装側はブラウザでページを開いて、各セクションの座標をDOMから取り、JSONに保存しています。
デザイン側は、Figma MCP(AIがFigmaのデータを読む仕組み)で取った寸法表の数字です。
ラベルの数字は、セクション全体の高さの差です。
中のどこでずれたかは、目盛りと画像を見て探してもらいます。
レビューの指示には、こう書きました。
diff が ±4px を超えるセクションは、どこで高さがずれたかを特定して指摘する。こうしたら、今回は9pxや16pxの違いまで指摘が出るようになりました。
高さの差0を目標にしたら、原因が細かく分かった
「高さの差を0にする」を目標にすると、ずれの原因を1つずつ詰めていけます。
行間の端数の丸めまで原因の候補に挙がって、同じ日に行間の指定を単位なしの数字に直しました。
縮小した全体図のままだったら、ここまでたどり着けなかったと思います。
まとめ
AIにデザインとの見比べを頼むなら、ページ全体を縮小して渡さない。
セクションごとに、上端をそろえて等倍で切り出して、目盛りと高さの差を書き込む。
今回は、これで細かい差を、AIも数字で言えるようになりました。
見落としが続いたとき、頼み方だけでなく、渡す画像の作り方を見直したのがよかったです。
