スクリーンショット比較とビジュアルリグレッションテストの違いは？

スクリーンショット比較は、2枚以上の画像を比べる行為全般を指します。ビジュアルリグレッションテストはその用途の1つで、意図しないUI変更を見つけるため、CI/CDの処理内でスクリーンショットを自動比較します。

レイアウトだけでなく、内容の変更も検出できますか？

画素ベースの差分は、文字、色、余白、画像など、目に見える変更を検出します。ただし、何かが違うことは示せても、その変更の意味までは判断できません。

比較前に両方を同じビューポート幅で撮るか、同じ寸法へ正規化します。寸法が違う画像を比べると、実際の不具合ではなく、意図したレスポンシブレイアウトの差まで検出されます。

可逆圧縮のPNGが適しています。JPEGは保存のたびにわずかに異なる圧縮ノイズが生じる場合があり、画素単位の比較で誤検出につながります。

はい。複数のブレークポイント、ブラウザ、時期における同じページを同時に確認できる、複数画像比較対応のツールもあります。

スクリーンショット比較とは、バージョン、状態、環境による見た目の違いを見つけるため、2枚以上のスクリーンショットを横に並べたり、重ねたりして比べることです。

最も簡単なのは、2枚の画像を横に開いて目で違いを探す方法です。デザイン案と公開中のページを比べる、UI変更の前後を確認するなど、短時間の確認には使えます。

ただし、枚数が増えると手動比較は難しくなります。人の目では、わずかな余白、色、フォント描画の違いを多くのページから見つけにくくなります。プルリクエストやデプロイのたびに同じ作業を繰り返すにも手間がかかります。

自動比較は、ソフトウェアで差を検出します。基準となるスクリーンショットを保存し、変更後に新しい画像を撮り、2枚を画素単位で比較します。通常は、変わった画素を目立つ色で示す差分画像が作られ、1ピクセルのずれも確認できます。ただし、検出された差が不具合かどうかは別途判断が必要です。

見た目の一貫性が重要な場面で使われます。

いずれも、目視だけでは見落としやすい差を確認しやすくする方法です。

多くの差分ツールは、次の手順で比較します。

基準画像を撮る： 特定のビューポート寸法と設定で、正しいと確認済みの状態を撮影します。
新しい画像を撮る： 基準画像と同じ条件で、現在の状態を撮影します。
画像をそろえる： 2枚の寸法を一致させます。小さな位置ずれを調整できるツールもあれば、完全に同じ寸法が必要なものもあります。
画素を比較する： 対応する画素を順に比べ、差を計算します。画素ごとの比較、人間の視覚感度に応じて差へ重みを付ける知覚的差分、構造的類似性（SSIM）などの方法があります。
差分画像を作る： 変わった画素を目立つ色で示し、違いをひと目で確認できるようにします。

通常、検出感度は調整できます。厳しいしきい値はサブピクセルのずれまで拾うため、画素単位の再現を求めるデザインシステムに向いています。緩いしきい値は、アンチエイリアスなどの細かな描画差が出やすいページで使われます。ただし、緩めすぎると本当の不具合も見逃します。

比較用の画像と一緒に、URL、ビューポート、ブラウザ、カラーテーマ、撮影日などの撮影条件も残します。条件がなければ差の理由を判断しにくく、後から同じ問題を再現するのも難しくなります。

異なるビューポート寸法で比べる： 基準画像が幅1,440ピクセル、新しい画像が幅1,280ピクセルなら、幅の変化によるレイアウト差がすべて検出されます。撮影寸法を必ずそろえます
JPEGを使う： 非可逆圧縮により、同じページでもわずかに違うノイズが生じ、誤検出につながります。安定した比較にはPNGを使います
動的な内容を無視する： 時刻、広告、アニメーション、利用者ごとのデータは撮影のたびに変わり、差として検出されます。既知の動的領域はマスクするか比較対象から外します
しきい値を緩めすぎる： 差をノイズ扱いする範囲が広いと、本当の表示不具合も隠れます。最初は厳しく設定し、既知の変動がある領域に限って調整します