「修正前と修正後、どこが変わったか分からない」——スクリーンショットを2枚並べて目視で確認しているなら、 それは非常に非効率で見落としも起きやすい方法です。 ピクセル単位で差分を検出して赤く可視化する画像差分比較ツールを使えば、 デザインレビュー・フロントエンドQA・スキャン文書の照合まで、 確認作業をブラウザで完結させることができます。 この記事では、ツールの使い方・しきい値の選び方・ありがちな落とし穴・他の差分ツールとの使い分けを解説します。
こんな場面で使う — 画像差分比較の活用シーン
画像差分比較が特に役立つのは、「2つの画像を人間の目で見ても差が判然としない」状況です。 具体的には次のような場面が代表例です。
- デザインレビュー — デザイナーがフィードバックを受けて修正したデータと修正前のデータを比較し、意図した箇所だけが変わっているかを確認する
- フロントエンドのビジュアルリグレッション — コード変更（CSS・レイアウト）がページの見た目に意図しない影響を与えていないかをスクリーンショットで確認する
- QAチェック — テスト環境と本番環境のスクリーンショットを比較し、環境差異による表示崩れを検出する
- スキャン文書の照合 — 同じ書類のスキャンが複数ある場合、内容に差異がないかを素早く判断する
- バナー・広告素材の確認 — 入稿前のクリエイティブが承認済み版と一致しているかを担当者がチェックする
いずれのケースも「完全に同じはずなのに、本当に同じか？」という確認作業です。 目視では数十分かかる照合が、画像差分比較ツールなら数秒で完了します。
使い方の手順 — 6ステップで差分を検出する
ツールを使った基本的な流れは以下の通りです。 すべての処理はブラウザ内で完結し、ファイルはサーバーに送信されません。
- 画像A（Before）に1枚目をアップロード — 左側の「画像A」エリアに比較元の画像をドラッグ＆ドロップするか、「ファイルを選択」から選びます。 JPEG・PNG・WebPに対応しています。
- 画像B（After）に2枚目をアップロード — 右側の「画像B」エリアに比較先の画像を同様にアップロードします。 両方の画像が同じサイズ・解像度であることを確認してください。
- しきい値を用途に合わせて調整 — しきい値スライダーで感度を設定します。 デザイン確認なら10〜30、JPEG圧縮ノイズを無視したい場合は30〜50が目安です（後述）。
- 「差分を比較する」ボタンをクリック — 設定完了後にボタンを押すと、ブラウザ内でピクセル単位の比較処理が実行されます。
- 差分マップで赤く表示された箇所を確認 — 差分マップが表示されます。赤い部分がしきい値を超えた差分箇所です。 赤が集中していれば局所的な変更、全体に散在していれば圧縮ノイズなどの面的な変化と判断できます。
- （オプション）差分画像をPNGでダウンロード — 差分マップをPNGとして保存できます。レビュー記録や報告書への添付に使えます。
しきい値の選び方 — 0〜100の意味と用途別推奨値
しきい値は「どの程度の色差を"差分あり"と見なすか」の基準です。 0に近いほど感度が高く、100に近いほど感度が低くなります。
| 用途 | 推奨しきい値 | 特徴 |
|---|---|---|
| ビジュアルリグレッション（PNG同士） | 5〜15 | 微細なレンダリングずれも検出。PNG推奨 |
| デザイン修正前後の確認 | 10〜30 | 意図した変更と意図しない変更を区別しやすい |
| JPEG画像の内容比較 | 30〜50 | 圧縮ノイズを無視して内容の差分だけを検出 |
| スキャン文書の照合 | 40〜60 | スキャンの揺らぎを無視しつつ書き込みを検出 |
上記はあくまで目安です。まず中間値（30前後）から試して、 差分が多すぎればしきい値を上げ、見落としが心配なら下げる、という方法で調整してください。
こんなときは注意 — よくある失敗と対処法
画像差分比較では、ツールの仕組み上いくつかの「罠」があります。
画像サイズが異なる場合
2枚の画像のサイズ（ピクセル数）が異なると、差分マップが全面赤になったり正確な比較ができなくなります。 スクリーンショットを撮る際はブラウザのズームを同じ倍率に固定し、 同じ解像度設定でキャプチャすることが重要です。 サイズが違う場合は画像リサイズツールで揃えてから比較してください。
JPEG圧縮ノイズの誤検知
JPEGは不可逆圧縮のため、同じ内容の画像でも保存のたびに圧縮アーティファクト（ブロックノイズ）が変化します。 そのため「内容は変わっていないのに差分が大量に出る」ことがあります。 対策は2つです。 しきい値を30以上に上げてノイズを無視するか、画像フォーマット変換ツールでどちらも可逆圧縮のPNGに変換してから比較することです。 デザインデータはPNGで保管する習慣をつけると、こうした問題を未然に防げます。
カラープロファイルの違い
同じ画像でも、デバイスやアプリによってカラープロファイル（sRGB・AdobeRGB等）が異なる場合、 ピクセルの色値が微妙にずれることがあります。 全体的に薄く差分が出る場合はこの影響が考えられます。しきい値を20〜40に上げることで対応できます。
他の差分ツールとの使い分け
ぱんだツールズには画像差分比較のほかにも差分系ツールがあります。 「何を比較したいか」によって使うツールを変えるのがポイントです。
| ツール | 比較対象 | 向いている用途 |
|---|---|---|
| 画像差分比較 | 画像ファイル（見た目） | デザインQA・スクリーンショット照合・ビジュアルリグレッション |
| テキスト差分比較 | プレーンテキスト・コード・文書 | 仕様書の改定確認・設定ファイルの比較・コードレビュー補助 |
| JSON差分比較 | JSONの構造・キー・値 | APIレスポンスの変化確認・設定JSONのバージョン間比較 |
フロントエンド開発では3つを組み合わせるのが実践的です。 「コードの変更内容」はテキスト差分比較で確認し、「APIレスポンスの変化」はJSON差分比較で確認し、「その変更がページの見た目にどう影響したか」は画像差分比較で確認する、という流れです。