ブラウザ内で処理 · アップロードなし
比較のため B を A のサイズに合わせました。
2枚の画像をブラウザ内で重ね、左右（または上下）にドラッグできる仕切り線でめくるように見比べられる before/after 比較スライダーです。AI 画像生成のワークフローで、アップスケール前後・画像補正前後・inpaint 修正前後などを「同じ位置で」並べて確認するのに向いています。A（before）と B（after）の2枚を読み込むと、B の上に A を重ね、仕切り線より手前側だけ A を表示します。スライダーをドラッグするか、画像の上を直接ドラッグ／クリックすると仕切りの位置が動き、境目で2枚がどう違うかが一目で分かります。仕切りの向きは『左右』（縦の仕切り）と『上下』（横の仕切り）から選べ、『ラベル』を ON にすると before / after の文字が画像に焼き込まれます。2枚のサイズが違う場合は B を A のサイズに合わせて拡縮してから重ねます。表示している比較画像（仕切り線・ラベル込み）は、現在の仕切り位置のまま PNG として保存できるので、SNS や記事に貼る「ビフォーアフター」画像をそのまま書き出せます。処理サイズは長辺 2048px までに収めて軽快に動作します。計算と描画はすべてお使いのブラウザ内で行い、画像を外部のサーバーや API に送信することは一切ありません。
使い方
- A（before）と B（after）の2枚を、ドロップ／クリック／貼り付けで読み込みます（アップロードはされません）。
- 仕切りを左右にドラッグするか画像の上をなぞって位置を決め、向き（左右／上下）とラベルを調整します。
- 気に入った位置で『PNG をダウンロード』を押すと、仕切り線・ラベル込みの比較画像が保存できます。
よくある質問
画像はどこかにアップロードされますか？
いいえ。読み込みから重ね合わせ、PNG 書き出しまで、すべてお使いのブラウザ内で行います。2枚とも外部のサーバーや API に送信することは一切なく、端末内で完結します。
2枚のサイズが違っても比較できますか？
はい。B を A のサイズに合わせて拡縮してから重ねます。ただし縦横比が違うと拡縮で歪むため、できれば同じ解像度・同じ縦横比どうしで比較するのが最もきれいです。
保存した PNG には仕切り線やラベルも入りますか？
はい。画面に見えているとおり、現在の仕切り位置・仕切り線・（ON にしていれば）before / after のラベル込みで書き出します。線やラベルを入れたくない場合はラベルを OFF にし、仕切りを端に寄せてから保存してください。
ピクセル単位でどこが変わったかを正確に知りたいです。
このツールは「見た目を並べてめくる」比較です。どのピクセルがどれだけ変化したかを数値・ヒートマップで知りたい場合は、画像差分（image-diff）ツールが向いています。