← 一覧へ

やってみよう真ん中の線を左右にドラッグしてみてください

ボタン・操作部品マイナー（知る人ぞ知る）

ビフォーアフタースライダー

Before/After Slider / Image Comparison

2枚の画像を重ね、真ん中の線を左右に動かすと、加工前と加工後を見比べられる。

別名画像比較スライダー比較スライダーBefore Afterビフォーアフター

どこで使われている？

よく見かける場所
リフォーム会社、美容室・エステ、写真編集アプリ
使うとよい場面
変化の大きさを、同じ場所で見比べてほしいとき
避けたい場面
変化が小さく、並べて見比べた方がわかりやすいとき

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「ビフォーアフタースライダー（Before/After Slider / Image Comparison）」を実装してください。

動き：同じ大きさの2枚の画像を重ね、上の画像を縦の境目線で切り取って表示する。境目線をドラッグすると左右に動き、左にビフォー、右にアフターが見える。左右の端に「Before」「After」のラベルを出す。

使う部品：自作（clip-path と range 入力）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら自作（clip-path と range 入力）
iPhoneアプリなら自作
Androidアプリなら自作
Flutterならbefore_after パッケージ
React Nativeなら自作

似ているもの・一緒に使うもの