ビフォーアフター — 動きの伝え方辞典

media

before after slider / image comparison

ビフォーアフター

1本のハンドルをドラッグして2枚の画像を見比べるスライダー。レタッチ前後・施工前後など「差分そのもの」が価値のとき最も雄弁なUI。上の画像をclip-path: inset()で切り抜き、ハンドルはtransformで動かすのが定石。

01 — Demo video

Play live →

02 — Prompt template

2枚の画像を比較する before/after スライダーを実装してください。

- after画像を下、before画像を上に同サイズで重ね、上の画像を clip-path: inset(0 右側% 0 0) で左側だけ見せる
- ハンドル(縦線+ツマミ)は left ではなく transform: translateX で動かす(リフロー禁止)
- Pointer Events(pointerdown/move/up)で実装し、setPointerCaptureで枠外に出てもドラッグを継続する
- コンテナに touch-action: none を指定し、スマホのスクロールと競合させない
- 初期位置は {{initial}}%
- clip-pathとハンドルの transform に {{follow}}s ease-out の transition をかけ、指をやわらかく追従させる
- prefers-reduced-motion 時は追従のtransitionを0sにして即時反映する

2枚の画像を比較する before/after スライダーを実装してください。

- after画像を下、before画像を上に同サイズで重ね、上の画像を clip-path: inset(0 右側% 0 0) で左側だけ見せる
- ハンドル(縦線+ツマミ)は left ではなく transform: translateX で動かす(リフロー禁止)
- Pointer Events(pointerdown/move/up)で実装し、setPointerCaptureで枠外に出てもドラッグを継続する
- コンテナに touch-action: none を指定し、スマホのスクロールと競合させない
- 初期位置は {{initial}}%
- clip-pathとハンドルの transform に {{follow}}s ease-out の transition をかけ、指をやわらかく追従させる
- prefers-reduced-motion 時は追従のtransitionを0sにして即時反映する

2枚の画像を比較する before/after スライダーを実装してください。

- after画像を下、before画像を上に同サイズで重ね、上の画像を clip-path: inset(0 右側% 0 0) で左側だけ見せる
- ハンドル(縦線+ツマミ)は left ではなく transform: translateX で動かす(リフロー禁止)
- Pointer Events(pointerdown/move/up)で実装し、setPointerCaptureで枠外に出てもドラッグを継続する
- コンテナに touch-action: none を指定し、スマホのスクロールと競合させない
- 初期位置は {{initial}}%
- clip-pathとハンドルの transform に {{follow}}s ease-out の transition をかけ、指をやわらかく追従させる
- prefers-reduced-motion 時は追従のtransitionを0sにして即時反映する

03 — Params

initial(初期位置 %) — 範囲 10〜90 / 初期 50
読み込み時のハンドル位置。50で半々。afterを主役にするなら30前後でafter側を広く見せる。
follow(追従の時間 s) — 範囲 0〜0.5 / 初期 0.15
ドラッグ位置にハンドルが追いつくまでの時間。0で即時、0.1〜0.2sだと指に吸い付く柔らかさが出る。

04 — Vocab

clip-path: inset() — 矩形の切り抜き。上の画像を inset(0 X% 0 0) で切ると、2枚が同じ位置のまま「見える窓」だけが動く。widthを縮めると画像自体が潰れるので不可。
setPointerCapture — ドラッグ中にポインタが要素外へ出てもイベントを受け続ける仕組み。これがないと枠外に出た瞬間ハンドルが置き去りになる。
touch-action: none — ブラウザ既定のスクロール・スワイプ処理を無効化する指定。横ドラッグUIでは必須。忘れるとスマホでページごと動く。
Pointer Events — マウス・タッチ・ペンを単一のイベント系で扱えるAPI。mousedownとtouchstartを二重に書くより短く安全。

05 — NG → OK examples

言い方: 「「画像をビフォーアフターで比較できるようにして」」

なぜNG: マスク方式もドラッグ挙動も未定義。widthを直接縮めて画像が潰れる実装や、mousemoveのみでスマホで動かない・スクロールと喧嘩する実装が返ってきがち。

言い方: 「「before/afterスライダーを実装。2枚重ねて上をclip-path: inset()で切り、ハンドルはtranslateX。Pointer Events+setPointerCapture、touch-action: none。初期位置50%、追従0.15s ease-out」」

なぜOK: マスク方式・ハンドルの動かし方・入力系・タッチ対策まで指定されている。「clip-pathで切る」の一言が、画像が変形する事故を確実に防ぐ。