ビフォー＆アフター画像をスライダーで比較表示

商品やサービス紹介サイトを運営する際、ジャンルによっては使用前・使用後の画像を使う機会があるかと思います。

例えばリフォーム前・リフォーム後とか洗浄前・洗浄後とかメイク前・メイク後とか修正前・修正後とかいろいろありますね。

こんなとき、画像を2枚並べて比較するのももちろんアリですが、2枚の画像を重ねて見較べるとどこがどのように変わったのかがよりわかりやすくなる場合もあります。

たとえばコチラ↓に2枚の画像があります。

（※自作の猫用ハウスの画像です）

見較べればどこがどう変わったかはなんとなくわかりますでしょ。

今度は2枚の画像を分けずに重ねて見てみます。

画像を並べて見較べた場合は視点の移動が伴うため、どこがどのように変わったのかがすぐには気づきにくいモノです。

しかし上のサンプルのような見せ方であれば、サイト訪問者に比較のポイントをアピールしやすいと言えます。

しかも縦に長い画像だった場合は、画面の小さいスマホでは画面をスクロールせずに比較することができるので、このテクニックは使い方によってはサイト訪問者により強い印象を与えることができます。