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

キャプチャ画像

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

 

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

 

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


スライダー画像比較機能のデモ

このコンテンツ(記事)の機能はカスタムテンプレート【Volar】に搭載済みです。

 

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

(※自作の猫用ハウスの画像です)

 

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

 

キャプチャ画像

キャプチャ画像

 

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

 

右下にあるスライダーをマウスで移動させると2枚の画像が消えたり現れたりします。
右下にあるスライダーを指でドラッグ移動させると2枚の画像が消えたり現れたりします。

 

Before

before画像

After

after画像

 

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

 

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

 

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

 

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

 

カスタムテンプレート【Volar】には、ベースとなるスクリプトやスタイルが搭載済みとなってます。

 

そのためこちらからお渡しするコードを所定の位置にコピーペーストするだけで、
上のサンプルのような比較画像が簡単に再現できます。

 

ただし用意していただく2枚の(前後)画像は同じサイズである必要があります。

 

またできれば2枚の画像とも同じ位置から撮影したモノの方が、前後の比較がよりわかりやすくなるというものです。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替