画像比較スライダー｜2枚の写真をドラッグでBefore/After比較
2枚の画像をドラッグできるスライダーで重ねて比較。レタッチやリフォームの前後、加工の効果を左右・上下に並べてその場で確認でき、合成画像のPNG書き出しにも対応します。
Before（変更前）
After（変更後）
Before と After の2枚を読み込むと、ドラッグで比較できるスライダーが表示されます。
このツールについて
使い方・特徴・補足情報
画像比較スライダーとは
画像比較スライダーは、2枚の画像を重ねて並べ、中央のつまみをドラッグして見比べるツールです。
加工前と加工後、修正前と修正後の違いが、同じ位置でそのまま分かります。
分割は左右と上下のどちらでも選べます。比べたい向きに合わせて切り替えてください。
縦横比が違う2枚でも、はみ出さないように自動で収めて表示します。歪ませません。
調整した位置のまま、1枚の比較画像として書き出すこともできます。
👤 こんな人におすすめ✨
写真やデザインの前後を見せたい人
✅ 楽になること
2枚の画像の違いを並べて確認
✍️ 避けたい手間
画像をサーバーに上げたくない
解決できる困りごと
- 加工前後の画像を別々のウィンドウで開いて見比べる手間と、切り替えの行き来をなくせる
- 2枚を横に並べただけでは伝わりにくい変化を、同じ位置で重ねて確かめられる
- 比較画像を作るために画像編集ソフトで手作業合成する手間を減らせる
使い方
- 「Before（変更前）」と「After（変更後）」の枠に画像を1枚ずつ読み込む
- 中央のつまみを左右（または上下）にドラッグして見比べる
- 必要に応じて分割方向の切り替えやラベル表示を調整する
- 現在の分割位置のまま「PNGで書き出す」で1枚に保存する
使用例
塗装リフォームの前後比較
同じアングルで撮った壁の塗装前と塗装後を重ね、左右スライダーで仕上がりを見せる例です。
入力
before: 壁_塗装前.jpg（1600×1200）/ after: 壁_塗装後.jpg（1600×1200）/ 横分割 50%
出力
中央で左が塗装前・右が塗装後に分かれた比較ビュー（PNG書き出し可）
写真の色補正チェック
補正前と補正後を縦に分割し、空の色の変化が強すぎないかを確認する例です。
入力
before: sunset-raw.jpg / after: sunset-edit.jpg / 縦分割 40%
出力
上40%が補正後・下が補正前で、境目の色差を確認できる比較画像
活用シーン
写真レタッチの効果確認
色補正やシミ消しの効果を前後で重ね、やりすぎていないかをその場で見比べられます。仕上がりの微調整に役立ちます。
リフォーム・DIYの記録
片付け前後や塗装前後の同じアングルの写真を並べ、どれだけ変わったかを分かりやすく見せられます。
デザイン案のビフォーアフター
修正前と修正後のバナーやロゴを重ね、どこをどう直したかを依頼者やチームに共有できます。
ガーデニングの成長記録
同じ鉢を定期的に撮り、芽が出る前と育った後を重ねて、成長の度合いをゆっくり振り返れます。
ブログ・SNSの比較投稿
加工アプリの効果や商品の使用前後を、1本のスライダーにまとめて読者に分かりやすく見せられます。
画像圧縮・変換の劣化チェック
圧縮前と圧縮後を重ねて見比べ、輪郭のにじみや色の変化が出ていないかを細かく確かめられます。
技術的な解説
補足: 仕組み
上側に重ねた Before 画像へ CSS の clip-path: inset() をかけ、分割位置までを見せています。
つまみを動かすと inset の値が変わり、見える範囲が切り替わります。
ドラッグ位置は Pointer Events で受け取り、要素のサイズを基に百分率へ換算します。
書き出しは createImageBitmap で読み込み、Canvas に2枚を描いて toBlob でPNGにします。
もっと詳しく
縦横比がそろった2枚だとズレない理由
2枚の縦横比が同じだと、重ねたときに被写体の位置がぴったり合います。
比率が違うと片方が余白付きで収まり、境目で輪郭がずれて見えます。
同じカメラで同じ構図のまま撮ると、前後の差だけがきれいに伝わります。
三脚や台に固定して撮ると、ズレはさらに小さく抑えられます。
clip-path と canvas 書き出しの違い
画面上のドラッグ比較は clip-path で見せる範囲を変えているだけです。元の2枚はそのまま残ります。
PNG書き出しは Canvas に2枚を実際に描き込み、1枚の画像に焼き付けます。
画面はいつでも動かせますが、書き出した画像は固定された結果になります。
共有や保存には書き出しを、見せ方の調整には画面のドラッグを使い分けてください。
圧縮や変換の劣化を見抜くコツ
圧縮前と圧縮後を重ね、分割線を文字や輪郭の上に置くと差が分かりやすいです。
ベタ塗りの境目や細い線は、劣化が最初に出やすい場所です。
書き出した比較画像を等倍で見ると、にじみや色の変化を見落としにくくなります。
迷ったら分割位置を少しずつ動かし、変化が目立つ場所を探してください。
よくある質問
画像はサーバーにアップロードされますか？
読み込みも比較も書き出しも、すべてお使いのブラウザ内だけで処理します。画像が外部のサーバーへ送られることは一切なく、通信も発生しません。
縦横比が違う2枚でも比較できますか？
はい、比較できます。Before画像の比率に合わせて自動で枠へ収めるので、縦横比が違ってもはみ出さず、歪まずに表示します。
対応している画像形式は何ですか？
読み込みは JPEG・PNG・WebP の3形式に対応します。書き出しは透過も扱える PNG 形式で保存され、SNSや資料にそのまま貼り付けられます。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。