※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

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

キャプチャ画像

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

 

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

 

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


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

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

 

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

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

 

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

 

キャプチャ画像

キャプチャ画像

 

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

 

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

 

Before

before画像

After

after画像

 

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

 

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

 

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

 

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

 

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

 

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

 

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

SIRIUSテンプレート【Volar】

キャプチャ画像

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

詳細および入手方法についてはコチラ↓をご覧ください

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