画像比較スライダー（ビフォーアフター）
加工前と加工後の2枚の画像を読み込み、境界線をドラッグまたは矢印キーで動かして違いを確認できます。左右・上下の切り替え、「Before」「After」のラベル表示、2枚を並べた画像のPNG保存に対応しています。写真の色味を整えるなら画像フィルター・色調補正もご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
ここに画像ファイルをドラッグ＆ドロップすることもできます
ここに画像ファイルをドラッグ＆ドロップすることもできます
2枚の画像を読み込むと比較できます。
比較プレビュー
分割の向き
プレビュー上をドラッグするか、スライダーを選んで矢印キーで境界を動かせます。
使い方
- 「ビフォー画像を選択」と「アフター画像を選択」で2枚の画像を読み込みます（ドラッグ＆ドロップも可能です）。
- プレビュー上をドラッグするか、「境界の位置」を矢印キーで動かして見比べます。
- 「分割の向き」と「ラベルを表示」を必要に応じて切り替えます。
- 「比較画像をPNGで保存」または「並置画像をPNGで保存」で保存します。
注意点
- アフター画像がビフォー画像と縦横比が違う場合は、ビフォー画像の大きさに合わせて余白付きで収めて表示します。
- 保存するPNGの1枚あたりの長辺は最大4,096pxです。これより大きい画像は縮小されます。
- 「並置画像をPNGで保存」はビフォーとアフターを並べた画像で、分割の向きに応じて横並びまたは縦並びになります。
- GIFアニメーションは最初のフレームだけを使います。アニメーションGIFとしての出力には対応していません。
用語解説
ビフォーアフター
加工や修正の前後を並べて見せる表現。画像比較スライダーでは、境界線の片側に加工前、もう片側に加工後を表示します。
並置画像
2枚の画像を横または縦に並べて1枚にまとめた画像。SNSや資料に貼るとき、スライダーを使えない場所でも違いを見せられます。
よくある質問
2枚の画像のサイズが違っても比較できますか？
はい。ビフォー画像の大きさを基準に、アフター画像を縦横比を保ったまま収めて重ねます。縦横比が違う場合は余白ができるので、同じサイズに揃えた画像で比べるとより正確です。
比較スライダーをキーボードで動かせますか？
「境界の位置」のスライダーを選択して左右の矢印キーで動かせます。マウスやタッチでプレビュー上をドラッグしても動かせます。
「比較画像」と「並置画像」は何が違いますか？
比較画像は現在の境界位置で左右（または上下）に切り分けた1枚で、境界線が入ります。並置画像はビフォーとアフターをまるごと並べた1枚で、境界位置には依存しません。
GIFアニメーションとして書き出せますか？
いいえ。保存形式はPNGのみです。入力にアニメーションGIFを選んだ場合は最初のフレームだけを使います。
このページをシェア