2 枚のスクリーンショットを比較して、変わった部分を見つける方法
結論
ピクセル単位の変化を見るなら、画像編集ソフトで一方のスクリーンショットをもう一方の上に重ね、上のレイヤーの描画モードを差の絶対値（Difference）にします。同じ部分は黒くなり、変わった部分が明るく浮かび上がります。どの値、ラベル、要素が変わったかを言葉で知りたいなら、ScreenFeel の比較レンズが 2 枚のキャプチャを受け取り、すべての違いを重要な順に挙げます。変更前と変更後の値を引用し、カーソルの位置や圧縮のようなノイズは無視します。
2 種類の「違い」
ピクセル差分が答えるのは「何か変わったか？」です。正確で、1 ピクセルのずれも捉えますが、進んだ時計や動いたカーソルまで拾い、変化が何を意味するかは決して教えてくれません。意味の差分が答えるのは「何が変わったか？」です。合計が 1,240 から 1,310 になった、保存ボタンが左に移動した、行が 1 つ欠けている、といったことです。実際の疑問のほとんどは後者です。
無料の画像編集ソフトでピクセル差分を取る
- レイヤーと描画モードを使える画像編集ソフトで、両方のスクリーンショットを開きます。GIMP や Paint.NET なら無料です。
- 新しいほうのスクリーンショットを、古いほうの上にレイヤーとして重ね、左上の角をそろえます。
- 上のレイヤーの描画モードを差の絶対値（Difference）にします。同じピクセルは黒くなり、変わったところは明るく表示されます。
- 明るい部分を拡大して、何が変わったのかを確認します。
この方法が使えるのは、2 枚のスクリーンショットの大きさと位置が同じ場合だけです。数ピクセルずれたキャプチャでは、全体が明るくなってしまいます。
何が変わったかを言葉で：ScreenFeel の比較
- ライブラリを開き、2 枚のキャプチャにチェックを入れます。古いほうが基準として使われます。
- 比較を選びます。
- 結果を読みます。もっとも重要な違いを述べる 1 文に続いて、最大 8 つの変更点が並びます。それぞれ要素、その位置、どう違うかを示し、両方に見えていれば変更前と変更後の値を引用します。さらに、片方にしかないものも挙げます。
比較レンズは、アンチエイリアス、圧縮によるノイズ、カーソルやスクロールバーの位置、ただ進んだだけのタイムスタンプを無視します。結果は新しいほうのキャプチャに保存され、その下の欄で両方の画像について質問を続けられます。
いちばん時間を節約できる場面
- リリース後のリグレッション確認：同じ画面の変更前と変更後。
- デザインレビュー：モックアップの 2 つのバージョンと、すべての変更点の一覧。
- ダッシュボードや表計算：今週と先週を比べ、動いた数値を確認。
- 修正が反映されたことの証明：修正前のエラー画面と、修正後の正常な画面。
よくある質問
2 枚の画像の違いを無料で見つけるには？
GIMP や Paint.NET で 2 枚をレイヤーとして重ね、上のレイヤーの描画モードを「差の絶対値」（Difference）にすると、変わったピクセルが明るくなります。何が変わったかを文章の一覧で知りたいなら、ScreenFeel の「比較」レンズを AI の毎月の無料枠で使えます。
2 枚のスクリーンショットは同じサイズである必要がありますか？
ピクセル差分なら必要です。ScreenFeel の「比較」レンズは両方の画像を意味として読むので、位置がそろっていなくてもかまいませんが、2 回とも同じ範囲をキャプチャすると、いちばん分かりやすい結果になります。
3 枚以上のスクリーンショットを比較できますか？
「比較」レンズが扱えるのは、ちょうど 2 枚です。一連の画面なら、ScreenFeel の「手順書作成」レンズが 2〜8 枚のキャプチャを順に読み、各手順を説明します。