サービス前後の劇的な変化を示すビフォーアフター画像は、自社サービスのアピールに欠かせません。これをうまく演出してくれるスライドプラグイン TwentyTwentyがあったので紹介します。

プラグインTwentyTwentyの使い方

まず、WordPress管理画面左サイドバーから、TwentyTwentyをインストール有効化します。

次に、ビフォーアフターの画像を表示したい投稿の編集画面で、元画像を2枚をアップロードして投稿に挿入します。

このとき2枚の写真のサイズを全く同じにしておくと、劇的さが際立つのでオススメです。

そして、今アップロードした2枚の画像を[twentytwenty]と[/twentytwenty]で囲みます。

テキストエディタならこんな感じです。

[twentytwenty]
<img class="aligncenter size-full wp-image-173" src="http://beembeem2006.xsrv.jp/wp/wp-content/uploads/2014/02/2014-04-23_11021.jpg" alt="2014-04-23_1102" width="325" height="345" />
<img class="aligncenter size-full wp-image-174" src="http://beembeem2006.xsrv.jp/wp/wp-content/uploads/2014/02/2014-04-23_11031.jpg" alt="2014-04-23_1103" width="325" height="345" />
[/twentytwenty]

この状態で保存すれば、ビフォー・アフター・スライダーの完成です。

実際の表示

ビフォー・アフター・スライダーにマウスを持っていくと、色調が暗くなり、「before」「after」の文字が浮かび上がります。

中央の矢印アイコンをマウスでドラッグすると、ビフォーとアフターの境界線が動きます。

ビフォーアフターの写真を単に2枚並べるよりも何処がどう変わったかがとても鮮明に分かりますね。

実際に試してみたい方はこちらのデモサイトが便利です。

• jQuery twentytwenty Plugin Demos

こんな方にオススメ

ビフォーアフターの写真は何かを綺麗にするようなサービスをされている個人法人のサイトでは結構使えるのではないでしょうか。

• エステの施術前･施術後
• リフォームの前と後
• クリーニングの前と後
• 掃除の前と後
• 画像補正の前と後
• 車修理の前と後

…などなど色々使えそうです。

皆さんもいかがですか。