01

価値の高い状態から選ぶ

最初から全サイトを撮らず、トップ、ログイン、主要コンバージョン、フォームエラー、空状態、共通部品を優先します。各状態でブレークポイントのリスクが見えるviewportを選びます。

ルート、データ、言語、テーマ、viewport、エンジン、基準日を記録します。

02

ノイズになる変数を除く

テストデータとタイムゾーンを固定し、アニメーションを止め、フォントと画像を待ちます。ランダムID、時計、カルーセル、第三者広告はマスクし、制御できない外部内容を比較から外します。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
03

部品と全ページの証拠を残す

部品画像はボタン、カード、ダイアログの精密比較に向き、全ページ画像は高さ、固定要素、フッター問題を見つけます。長いページでは両方を使います。

04

受け入れる前に差分を分類

期待する更新、回帰、環境ノイズ、製品判断に分類します。意図した変更を確認してから基準を更新し、不具合を新しい標準にしないようにします。

  • 文字と改行
  • 余白、整列、重なり
  • 欠落または想定外の内容
  • 色、コントラスト、フォーカス
05

再現手順へつなげる

基準、現在画像、差分画像、URL、viewport、バージョン、手順を報告します。同じ幅と隣の幅で再テストし、1枚だけに合わせた脆いCSSを防ぎます。