画像差分チェッカー

WebサイトのUIテストやデザインレビューでは、修正前後のスクリーンショットを並べて確認する作業が頻繁に発生します。しかし人間の目は微妙なピクセルのずれや色の変化を見逃しやすく、特に大きな画面や複雑なレイアウトでは漏れが起こりがちです。

画像差分チェッカーは、2枚の画像をピクセル単位で比較し、各ピクセルの色距離を計算して設定可能な閾値を超えた部分をハイライトします。結果は差分画像としてキャンバスに描画され、一致率・不一致ピクセル数も数値で確認できます。

3つの表示方式から選択できます：差分ハイライト（カスタマイズ可能な色で差分を強調）、フェード表示（2つの画像をスムーズに切り替え）、スライダー表示（画像を重ね合わせて比較）。ハイライト色はカラーピッカーで自由に設定でき、色覚多様性への対応も可能です。

閾値スライダーを調整すれば、アンチエイリアスの微差を無視したり、逆にわずかな変化も拾い上げたりと柔軟に対応できます。サイズが異なる画像は自動調整機能で対応でき、異なる解像度のスクリーンショット比較も容易です。

処理はすべてブラウザ内で完結するため、社内デザインや未公開のモックアップを外部に送信する心配がありません。開発チームのCIパイプラインに組み込む前のセルフチェック、デザイナーとエンジニアの認識合わせ、印刷データの校正チェック、色覚多様性対応の検証など幅広い場面で活用できます。