01 はじめに Diffscope は、2枚の画像をブラウザ上でピクセル単位に比較し、一致率と違いの内容を自動で解説するツールです。使い方は次の3ステップです。 画像Aと画像Bをアップロード — 各枠にドラッグ&ドロップするか、クリックしてファイルを選択します。 自動で比較が実行される — 2枚がそろうと、一致率・差分ヒートマップ・自動コメントがその場で更新されます。 必要に応じて再調整 — 「比較の許容誤差」スライダーを動かすと、判定基準を変えて再計算できます。 初回はサンプル画像で動作を確認できます。画像をアップロードすると自動的に置き換わります。「サンプルに戻す」ボタンでいつでも戻せます。 02 結果の見方 「比較結果」セクションには4つの指標が表示されます。 一致率 許容誤差の範囲内にあるピクセルの割合です。98%以上は「ほぼ同一」、90%以上は「非常に近い」、75%以上は「概ね類似」、50%以上は「部分的に類似」、それ未満は「大きく異なる」と判定されます。 輝度差 画像Aに対する画像Bの平均的な明るさの差です。正の値は画像Bのほうが明るく、負の値は暗いことを示します。 色成分の差(RGB) 赤・緑・青それぞれの平均的な差分をバーで表示します。特定の色だけ突出している場合、色調の変化(照明やホワイトバランスの違いなど)を示唆します。 サイズ 画像A・Bそれぞれの元のピクセルサイズです。縦横比が異なる場合は「解説」欄でも案内されます。 90%以上:高い一致 70〜90%:中程度の一致 70%未満:低い一致 03 差分ヒートマップの見方 「差分の可視化」セクションには3つの画像が並びます。 画像A(正規化後)/ 画像B(正規化後) — 比較用に321×321の正方形へリサイズしたものです。元の縦横比を保つため、余白は中間グレーで埋められます(この余白部分は常に一致するため、一致率を不当に下げません)。 差分ヒートマップ — 赤みが強いほど、その位置での差が大きいことを示します。特に差が大きい領域には、3×3のグリッド上で「左上」「中央」「右下」のようなラベルが表示されます。 04 許容誤差の調整 「比較の許容誤差」スライダー(0〜150)は、1ピクセルあたりのRGB平均差がどこまでなら「一致」とみなすかを決めます。 0に近い値 — ほぼ完全一致のみを「一致」として扱う、厳密な比較になります。圧縮やノイズの影響を受けやすくなります。 30前後(初期値) — 見た目の印象に近い、実用的なバランスです。 100以上 — 大まかな構図の一致だけを見たいときに使います。 値を変更すると即座に再計算されます。「再計算」ボタンは、同じ設定のまま結果を再描画したい場合に使えます。 05 自動コメントについて 「解説」セクションには、計算結果に基づく4種類のコメントが表示されます。 サイズ 縦横比が5%以上異なる場合に注記します。 明るさ 平均輝度差が4を超える場合に、明るい/暗いの傾向を示します。 色味 最も差が大きい色成分と最も差が小さい色成分の差が4を超える場合に、その色味の偏りを指摘します。 領域 9分割した領域の中で、平均より1.2倍以上差が大きいブロックがあれば、その位置(例:「右上」)を最大2箇所まで案内します。