logo hsb.horse

画像差分チェッカー

2枚の画像をブラウザ上で比較し、許容誤差を調整しながら差分をマゼンタで強調表示する無料ツール。ファイルは端末内で完結します。

基準画像と比較画像を読み込むだけで、一致率と差分を可視化。処理はすべてローカルで行われ、外部へのアップロードは不要です。

1. 基準画像のアップロード

基準画像を選択

2. 比較画像のアップロード

比較する画像を選択

3. 判定の厳しさ

許容誤差: 0%

厳密 (0) 緩め (100)

許容誤差: 0%

JPEGなどの圧縮で微小な差分が出る場合があります。誤差を許容したいときは値を上げ、完全一致を確認したいときは0%にしてください。

判定結果

2枚の画像を選択してください

一致率
–
差分ピクセル
–
総ピクセル数
–
マゼンタ部分 = 差分
グレー部分 = 一致（基準画像プレビュー）

Diffプレビュー

2つの画像をアップロードしてください

ユースケース

UIリグレッションチェック

リリース前のスクリーンショットを比較し、意図しないデザイン崩れを検知します。

アセット品質検証

圧縮やリサイズ後のバナー・サムネールが承認データと一致しているか確認します。

レビュー・監査のエビデンス作成

ファイルを外部に渡さず、一致率を数値で示した差分検証結果を共有できます。

活用のコツ

  • 基準と比較画像の向きを揃えると精度が上がります。アスペクト比が大きく異なると差分が多く出ます。
  • 非常に大きな画像を処理する場合はタブをアクティブに保つと計算がスムーズです。
  • 完全に透過しているピクセルは無視されます。透明縁を厳密に比較したい場合は背景色を付けてください。

使い方

  1. 1

    基準画像を追加

    正とするゴールデンイメージをアップロードします。

  2. 2

    比較画像を追加

    検証したいスクリーンショットや書き出しデータをアップロードします。サイズが違っても基準画像に合わせて自動スケーリングされます。

  3. 3

    許容誤差を調整し、差分を確認

    スライダーで許容誤差を動かし、圧縮ノイズを無視するかどうかを調整します。マゼンタの差分と一致率を確認してください。

よくある質問

画像はサーバーにアップロードされますか？
いいえ。処理はすべてブラウザ内で完結します。ファイルは端末外へ送信されず、サーバーに保存されることもありません。
どの画像形式に対応していますか？
ブラウザで開ける形式であれば利用できます（JPEG, PNG, WebP, GIF, BMP, SVG, AVIF など）。差分結果はキャンバス上に描画されます。
透過やアルファ値はどう扱われますか？
両画像で完全に透過しているピクセルは、RGB値が異なっていても一致とみなします。それ以外の場合はアルファ値の差も判定に含まれます。
許容誤差の目安は？
厳密な一致確認は0%。圧縮後のバナーやサムネは1〜5%。フォントやアンチエイリアスの差を許容したい場合はさらに上げてください。