画像比較スライダーとは？

ドラッグできる仕切り線で2枚の画像を重ね、ピクセル単位で比較できます。ビフォー・アフターの編集比較やA/Bデザインレビューに便利。水平・垂直の分割に対応。

同じ被写体の2枚の写真を読み込み、分割線を左右(または上下)にドラッグするだけで、どこがどう変わったかが一目で分かります。アスペクト比は問わず、水平・垂直の分割切り替えに対応。任意の位置でフラットなPNGを書き出せるので、デザインレビューでチーム全員が同じ画像にコメントできます。

使い方

1. ステップ1 — 2枚の画像をアップロードします。左に「Before」、右に「After」の画像を配置します。
2. ステップ2 — スライダーハンドルを左右にドラッグして各画像を表示します。水平・垂直の分割モードを切り替えられます。
3. ステップ3 — 任意のスライダー位置で比較画像のスクリーンショットをダウンロードして、チームと共有できます。

使用するタイミング

• 肌補正、色補正、背景クリーンアップなどのレタッチ結果を顧客に見せる場面。
• UIリデザイン版を同じスクロール位置でA/B比較する場面。
• リフォームの施工前後の状態を記録する場面。

結果

あるカメラマンがポートレート写真のオリジナルとレタッチ版をアップロードしました。スライダーをドラッグすることで、肌の補正・カラーグレーディング・背景処理がどの部分に施されたかを正確に確認できました。

よくある質問

2枚の画像は同じサイズでないとダメですか?

必ずしも同じである必要はありません。サイズが違う場合は、スライダー・フェード・差分の各ビューがきれいに揃うよう、変更前の画像を変更後の寸法に合わせて拡大縮小します。そのときは「サイズを揃える」スイッチが表示されます。厳密にピクセル単位で比較したい場合は、拡大縮小すると片方が再サンプリングされるため、先に両方を同じ幅・高さに切り抜いてください。

比較した状態を1枚の画像として保存できますか?

可能です。最も伝わる位置にスライダーを合わせて「ダウンロード」を押してください。フラットなPNGとして書き出され、片側に修正前、もう片側に修正後、中央にその位置の分割線が描画されます。

縦方向の比較もできますか?

できます。分割モードを「垂直」に切り替えると分割線が水平になり、上下にドラッグできます。横長のパノラマ写真など、左右分割では片側が細くなりすぎる場合に有効です。

アップロードした画像はどこかに送られますか?

送られません。2枚ともお使いの端末に残り、data URLとしてメモリに読み込まれるだけです。サーバへのアップロードも一時保存もなく、タブを閉じた瞬間にファイルは消えます。

写真レタッチ以外の活用例は?

衛星画像の比較(洪水被害や森林伐採の前後)、商品の販促ビフォー/アフター、フィットネスの経過写真、医療教材でのレントゲン比較、デザイン案のバージョン違いを並べる用途などです。

関連ツール