修正カンプの画像差分、まだ目で探していませんか？
結論から言うと、画像比較ツールで2枚を重ねれば、2pxの変化でも一瞬で検出できます。
この記事では、自分が「目視チェック」から「重ねて見る」に切り替えた経緯と、具体的な確認手順を書いていきます。
「微調整だから大丈夫」が一番危ない
修正カンプv4を受け取った日のこと、今も覚えています。
変更点の欄にはたった一言、「微調整」。
v3と並べてブラウザのタブを交互に切り替えてみましたが、正直どこが変わったのかわかりませんでした。
余白？ 色味？ フォントサイズ？ 5分ほど見比べて、「たぶん全部反映できてる」という感覚のまま実装を進めました。
その「たぶん」が、のちに信頼を傷つけることになります。
画像差分の確認は「自分の目の精度」の問題ではなく、「確認手法」の問題でした。
「重ねて見る」に切り替えるだけで、見落としていた2pxの変化も確実に検出できるようになります。
目視確認が破綻する理由——2pxは人間には見えない
画像の差分を目で探す。
一見まっとうな方法に思えますが、構造的に無理があります。
人間の視覚には「変化盲（change blindness）」という性質があります。
2つの画像を交互に見ても、微小な変化に気づけない現象です。
心理学の実験でも、かなり大きな変化すら見落とすことが実証されています。
2pxの余白変更。
微妙なグラデーションの色味シフト。
こうした差分は脳が自動的に補正してしまうため、並列比較では認知負荷が高すぎるのです。
つまり、見えないのは能力不足ではありません。
人間の視覚の構造的限界です。
私はデザインを何年もやったおかげで、今でこそ、2pxやほんのわずかなずれを見つけられるようにはなりましたが、
完璧なわけではありません。
まだそういう経験がない状態で、2pxなんかの小さなずれを気づくのは正直難しいのです。
テキストやコードの差分なら、diffツールが変更箇所をハイライトしてくれます。
テキスト比較の仕組みと差分検出の基礎で書いたように、差分検出は機械が得意な領域です。
画像も同じ発想が使えます。
「確認済み」で納品した日の話
あの日、v4の実装を終えて「確認済み」とメッセージを送りました。
翌朝、デザイナーからSlackが届きます。
「ヘッダーの余白、v4で2px詰めたんですが反映されてないようです。ちゃんと確認してますか？」
正直、ゾッとしました。
技術的なミスなら「すみません、修正します」で済みます。
でも「確認してますか？」という問いは、プロセスそのものへの不信です。
しかも自分は確認したつもりだった。
目で。
何度も。
修正自体は30秒で終わりました。
けれどなんとも言えない感覚でした。
「目で探す」から「重ねて見る」へ——画像比較ツールという発想転換
この経験のあと、画像比較ツールの存在を知りました。
試しにカンプv3とv4を重ねてみたところ、「確認済み」だと思っていたヘッダー部分に、明確な差分ハイライトが表示されたのです。
やっていることは単純です。
2枚の画像をピクセル単位で重ね合わせ、差異のある箇所を色で可視化する。
テキストのdiffと発想はまったく同じで、対象が文字列からピクセルに変わっただけです。
ぶっちゃけ、なんでもっと早く使わなかったのかと思いました。
画像比較ツールには差分ピクセル数や一致率を返すものもありますが、修正カンプの確認では「どこが変わったか」が見えれば十分です。
数値に振り回される必要はありません。
実際の手順：画像2枚を重ねて差分を確認する
手元にカンプの修正前・修正後の画像があれば、すぐに試せます。
レベル別に3つのルートを紹介します。
まずはブラウザで試したい場合。
AMIX 画像差分チェックツールが手軽です。
ブラウザ内で完結し、JPG・PNG・WebP・PDFに対応しています。
データが外部に送信されない点も、クライアントワークでは安心材料になります。
検出感度も調整できるので、微妙な色味変化まで拾えます。
無料の画像比較ツールとしては十分すぎる機能です。
もっと精度が欲しくなったら、デスクトップアプリという選択肢もあります。
Beyond Compare 5はWin/Mac/Linux対応で$35の買い切り。
ピクセルレベルの差分検出に加えてコード比較もできるので、画像とコードの両方を扱うコーダーには相性がいいです。
Mac環境ならKaleidoscope 4のPixel Comparison機能も評判で、Git統合もあります（月$8のサブスク）。
Windowsで無料にこだわるならWinMergeも画像比較に対応していますが、JPEG形式では精度が落ちる点に注意してください。
CI/CDに組み込んで自動化したいエンジニアなら、pixelmatchというnpmパッケージが約150行・依存ゼロで導入できます。VRT（Visual Regression Testing）を回す仕組みを作れば、カンプとの差分確認を完全に自動化できます。
ちなみにFigma Dev ModeにもCompare Changes機能がありますが、有料プラン限定です。
しかも「コーディング後のスクリーンショットとFigmaカンプの比較」はできないため、実装後の確認フローには使えません。
テキストやコードの差分確認には用途別のdiffツール選び方を、ファイル比較ワークフロー全体についてはフリーランスコーダーのファイル比較ワークフローを参考にしてみてください。
確認の仕組みが変わると、信頼の積み方が変わる
画像比較ツールを導入してから、確認フローが変わりました。
「たぶん全部反映しました」が「差分ツールで確認しました」に変わる。
たったこれだけの違いですが、デザイナーへの報告に根拠が生まれます。
スクリーンショットの差分結果を添えて「変更3箇所、すべて反映済みです」と送れるようになりました。
繰り返しますが、画像差分の確認は「目の精度」の問題ではなく「確認手法」の問題です。
「重ねて見る」に切り替えるだけで、2pxの変化も確実に拾えます。
やることはシンプルです。
手元の直近カンプ2枚で、まず1回試してみてください。
このシリーズでは、テキスト・コード・画像・ファイルそれぞれの「差分確認」を掘り下げています。
全体像はDiff Pro Max：ファイル比較完全ガイドまとめからどうぞ。
