2枚のスクリーンショットの差分を見つける

やりたいこと

2枚のスクリーンショットは重ねるまで同一に見えます。差分マップはベース画像を薄くして変化したピクセルだけを目立つ色で塗るため、1ピクセルのずれやアイコンの入れ替わりも一目で分かります。

使い方

画像Aと画像Bを選んで比較します。JPEGノイズや1ピクセルのずれで全体が赤くなる場合は、本物の変化だけが残るまで感度しきい値を上げます。

• 同じビューポート・同じサイズのスクリーンショットが最もきれいな差分になります。
• サイズが違うと2枚目を1枚目に拡縮して比較します。精度が要る場面では同寸に切りそろえてから比較してください。

具体例

設定ページの新旧ビルドを比較すると、移動したボタンは赤い矩形、アンチエイリアスのずれは点々として現れます。差分の割合でピクセル単位の微調整かレイアウト変更かが分かります。

注意点

差分はピクセル単位であり意味的な比較ではありません。移動した要素は「変化領域」として出ます。アニメーションGIFは非対応なので先にフレームを書き出してください。サイズ不一致でBをAに拡縮すると拡縮由来の差も出るため、同じサイズの入力が最も正確です。