画像差分ツール

無料のオンライン画像差分ツール。2枚の画像を並列・スライダー・オニオンスキン・ピクセル単位ハイライトの4方式で比較。すべてブラウザ内で完結、アップロード不要。

2枚の画像を4方式で比較：並列・スライダー・オニオンスキン・ピクセルハイライト。 2枚の画像をドロップすれば、変更点がひと目でわかります。UIリグレッション、デザイン改稿、スクショ確認に最適。 🔒 すべてあなたのブラウザ内で完結します。画像は一切サーバーにアップロードされません。

ここに画像をドラッグ、またはクリックして選択
ここに画像をドラッグ、またはクリックして選択
両側に画像を読み込むと比較を開始します。

画像差分の仕組み

4つの比較方式

  • 並列比較 —— 最もシンプルな確認：2枚を原寸で横に並べて表示。
  • スライダー —— ドラッグ可能な仕切りで、片側に旧画像・片側に新画像を表示。UIの前後比較に最適。
  • オニオンスキン —— 2枚目を調整可能な不透明度で1枚目に重ね、ずれや位置の乱れを見つけやすくします。
  • ピクセル差分 —— 全ピクセルを比較し、変化した箇所を赤く塗ります。1ピクセルの変更も見逃しません。

ピクセル差分の指標

ピクセル差分モードは単純な RGB 減算ではなく、YIQ 色距離 指標を用います —— 人気ライブラリ pixelmatch と同じ考え方です。YIQ は明るさ（Y）と色度（I、Q）を分離し、人間の目の差の知覚に近づけます。しきい値 スライダーで、どれだけの差でピクセルをマークするかを制御します。

よくあるシーン

  1. UIリグレッションテスト —— コード変更前後のスクショを比較。
  2. デザインレビュー —— 実装がモックアップと一致するか確認。
  3. 画像圧縮のQA —— エンコーダーがどの領域を変えたか正確に確認。
  4. 写真編集 —— レタッチがどのピクセルに触れたか確認。

すべてブラウザの Canvas API 上で動作 —— アップロードも待ち時間もありません。

よくある質問

画像はサーバーにアップロードされますか？
いいえ。すべての比較は Canvas API を使ってブラウザ内でローカルに処理されます。画像がデバイスから出ることはありません。
2枚の画像のサイズが違う場合は？
左上を基準に整列し、大きい方のキャンバスを使って比較します。両方のサイズが表示されます。ピクセル単位の正確な結果には同じサイズの画像を使ってください。
対応形式は？
ブラウザがデコードできるものすべて：PNG、JPG、WebP、GIF（先頭フレーム）、BMP、SVG。
しきい値スライダーの役割は？
YIQ 色距離を用いて、2つのピクセルがどれだけ違えば変化とみなすかを設定します。低いほど厳密、高いほど軽微な色差に寛容になります。
ピクセル差分の結果を保存するには？
「ピクセル差分」モードに切り替え、「差分を保存」をクリックするとハイライト結果を PNG として書き出せます。