画像比較

ABDiff は、目視による確認と解析的な diff を組み合わせた画像レビューのために設計されています。目的は、2 つのファイルが違うと示すことだけではなく、その違いが本当に重要かどうかを判断することです。

画像比較を始める

• 2 枚の画像をドロップすると画像比較が開きます。
• すでに 2 枚を比較している状態で新しい画像をドロップした場合、ABDiff は最後に追加された画像を保持します。

推奨ワークフロー

1. 最初に位置合わせする。 2 枚の画像が意味のある共通グリッドを共有していることを確認します。
2. まずは目視確認から始める。 解析モードに入る前に、Split、Side-by-side、Crossfade を使います。
3. 2 つのスケールで確認する。 まずは全体像を見るためにフィット表示を使い、その後 Actual Size (1:1) に切り替えてピクセル単位で確認します。
4. 変更箇所を見つける。 Change Boxes を使うと、怪しい領域をすばやく見つけられます。
5. 違いを分類する。 確認したい内容に応じて解析モードを選びます。
6. ルーペで詳細を確認する。 差分が本当のリグレッションなのか、予想される描画差なのか、単なるノイズなのかを見極めます。
7. 必要なビューを書き出す。 必要な証拠が揃ったら、現在の比較ビューをエクスポートします。

比較前に位置合わせする

Alignment は、対応するピクセルを意味のある形で比較できるように、2 枚の画像を共通の比較キャンバスへどう配置するかを決めます。Alignment は画像の移動や拡大縮小を行いますが、ズームやフィットモード自体は変更しません。

Side-by-side と Change Boxes は、表示のために元画像を横に並べます。それ以外のモードでは、2 枚の画像を共通キャンバス上に重ね、次の 4 つの Alignment モードのいずれかを使います。

• Top-Left: 2 枚の画像を拡大縮小も移動もせず左上に配置します。サイズと位置がすでに一致している場合に使います。
• Find Smaller Image in Larger…: 小さい画像を大きい画像の中から見つけ、その位置に合わせます。片方が切り抜き画像だったり、大きい画像の中に収まっている場合に使います。
• Scale Right to Left: 右画像を一様に拡大縮小して、左画像のサイズ基準に合わせます。
• Scale Left to Right: 左画像を一様に拡大縮小して、右画像のサイズ基準に合わせます。

Alignment が有効なとき、ヘッダには Scaled to Left、Scaled to Right、Aligned (Containment) などのバッジが表示されます。

まずは目視確認から始める

レビューはまず視覚モードから始めて、その変更がより深い分析に値するかどうかを判断するのが良いです。

• Split は、画像全体を見渡しながら局所的な部分を直接比較したいときの標準的な選択です。
• Side-by-side は、2 枚の元画像を同時に見たいときに向いています。
• Crossfade は、動きや点滅として見たほうが差が分かりやすいときに便利です。
• Change Boxes は、「この画像のどこが最も変わったか？」に答えるのに向いています。

問題に応じて解析モードを使う

解析モードは、すでにどの領域やどの種類の差を調べたいか分かっているときに最も力を発揮します。

• Absolute Difference は、アンチエイリアスによるノイズを含めて、変更されたすべてのピクセルを表示します。
• Proportional Difference は、とても暗い部分や明るい部分にある小さな違いを見つけやすくします。
• Blurred Difference は、厳密なピクセルノイズよりも大きな視覚差のほうが重要なときに役立ちます。
• Edge Difference は、レイアウト、余白、形状の変化を見たいときによく合います。
• SSIM は、ピクセル一致ではなく構造的な類似性を評価します。
• Delta E は、色精度が中心的な問題である場合に適したモードです。

全体表示と 1:1 で確認する

全体の把握にはフィットモードを使い、最終判断は 1:1 で行います。

• Actual Size (1:1): 固定の 1:1 ピクセル表示。小さな差分が許容できるか判断する前に使います。
• Fill Window (Split、Cross-fade、Difference): 現在の表示領域へ 1 回だけ合わせます。100% を超える拡大も可能です。
• Fill Pane (Side-by-side、Change Boxes): 両ペインを共有で 1 回だけ合わせます。100% を超える拡大も可能です。
• Show Whole Image: 画像全体が見えるように 1 回だけ合わせますが、100% は超えません。
• Fit to Window (Auto): ウィンドウサイズの変化に合わせて再計算される持続的な自動フィットモードです。
  • Split、Cross-fade、Difference では連続的な Fill Window のように動作します。
  • Side-by-side、Change Boxes では、両画像が収まるときは自動で 1:1 を使い、収まらないときは全体表示に戻ります。

Show Whole Image は、100% を超えて拡大せずに全体を 1 回だけ確認したいときに使います。 Fit to Window (Auto) は、ウィンドウのサイズ変更に合わせて ABDiff に継続的に調整させたいときに使います。

ズームはマウスホイールか 表示 ▸ ズーム コマンドで行えます。

画像の移動はドラッグ、またはミニマップを使って行います。ミニマップは、現在のズームで画像が表示領域より大きい場合にのみ表示されます。2 秒間操作がないと自動的に隠れますが、ホバー中や内部でドラッグしている間は表示されたままです。

ルーペで怪しい領域を確認する

ルーペはカーソル周辺を拡大し、すばやく反対側の画像へ切り替えられます。

ショートカット:

• L でルーペをオン/オフ
• A で左画像を表示
• D で右画像を表示
• S で倍率を切り替え: 1× → 2× → 4× → 8× → 1×

すばやい判断ガイド

• まだ何が変わったか分からないときは、まず Split か Side-by-side を使います。
• 変更された領域をすばやく見つけたいなら Change Boxes を使います。
• レイアウト、余白、形状が問題なら Edge Difference を使います。
• 正確なピクセル変化が重要なら Absolute Difference を使います。
• 厳密なピクセルノイズが邪魔なら Blurred Difference を使います。
• 知覚上の構造的類似性が重要なら SSIM を使います。
• 目に見える色差が重要なら Delta E を使います。
• 最終判断は、フィット表示だけでなく Actual Size (1:1) で行います。

書き出しとリビジョン確認

• 現在の画像比較を保存したり共有したりしたい場合は、今見ている比較ビューをそのままエクスポートします。
• 時系列での変更確認には、Git 履歴を使って、どちらかのペインに以前の画像リビジョンを読み込みます。

関連トピック

• キーボード操作
• Git diff / merge ワークフロー