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

アフィリエイトサイトを運営する際、
ジャンルによっては使用前・使用後の画像を使う機会があるかと思います。

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

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

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

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

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

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

Before

After

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

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

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

もしも同位置から撮影した、しかも同じサイズの（ビフォー・アフター）画像を2枚お持ちなら
試してみてはいかがでしょう。