2つの画像をビフォー・アフターで比較したり、2つの画像の違いを見比べて欲しいときに、どんなふうに画像を配置しますか?
上下に2枚置いたり、あるいは左右に並べて配置させて比べてみたり、様々な方法があります。

その中で、近年様々な媒体で使われている「画像比較スライダー」と呼ばれる手段があります。
画像比較スライダーとは、1枚の画像の枠に2枚の画像を重ねて配置し、境界線をスライドさせることで2枚の画像を切り替えることができるウィジェットです。

実装するためのプラグインはすでに多数リリースされており、少しのコードで簡単に実装することができます

今回は、画像比較ができるjQueryスライダープラグイン9つをご紹介します。
ユーザーのマウス操作やスマートフォンの指の操作で作動するユニークなユーザーインターフェイスなので、ホームページブログ記事で使うと面白みが増すかもしれません。

画像比較ができるjQueryスライダープラグイン9選

1. jQuery Images Compare

01.png
スクリーンショット:2017年10月

jQuery Images Compareは、その名の通りjQueryを使ったシンプルな画像比較スライダーです。
IEでは9以上に対応し、スマートフォンでのタッチにも対応、レスポンシブ対応で、jQueryでロジックを加えることで複雑な処理にも対応します。
JavaScriptファイルはわずか2KBと、軽量なのも嬉しいですね。

2. cocoen

02.png
スクリーンショット:2017年10月

cocoenは非常に簡単に設置できるjQuery画像比較スラーダーです。
以下のコードのように、DIVの中に入れたい画像を2枚挟み込むだけで完了です。

<div class="cocoen">
  <img src="img/before.jpg" alt="">
  <img src="img/after.jpg" alt="">
</div>

jQuery側でも、ファイルを読み込み、以下のコードを実行するだけでいいのは楽ですね。

$('.cocoen').cocoen();

なお、npmやBowerでの簡易インストールもできるようになっています。

3. Before After Slider

03.png
スクリーンショット:2017年10月

Before After Sliderは、シンプルながら人気のある画像比較プラグインです。
iOSAndroidアプリでも使えるように開発が進んでいます。
境界線を非表示にすることもできるようです。

4. JuxtaposeJS

04.png
スクリーンショット:2017年10月

JuxtaposeJSは新聞社のニュース記事などで多く実績のある画像比較プラグインです。
APIにも対応しており、右下にクレジットをつけたり、水平方向に画像比較を行うこともできます。

5. jQuery Sequency

05.png
スクリーンショット:2017年10月

jQuery Sequencyは、JSONによって複数枚の画像を比較対象にできるjQuery画像プラグインです。
CSSを操作することでスタイルを自由に整えることもでき、JavaScript側ではスピードやスマートフォンでの見え方(Viewportの設定)を行うこともできます。

6. TwentyTwenty

06.png
スクリーンショット:2017年10月

TwentyTwentyはcocoenのように簡単なコードで設置することができる画像比較スライダーです。
カスタマイズも簡単に行えるほか、スタイリングを行うCSSはSass対応しており、いくつかの変数を変えるだけで簡単に画像比較スライダーを設置することができます。
ラベルやオーバーレイの色を変えるのもあっという間です。

7. Image Comparison Slider

07.png
スクリーンショット:2017年10月

Image Comparison Sliderはその名前の通りの画像比較スライダーで、ソニー(アメリカ)の薄型テレビの商品比較ページでも採用されています。
豊富なスタイルが用意されているので、カスタマイズ性が高いのが特徴です。

8. HTML5 Video Before-and-After Comparison Slider


スクリーンショット:2017年10月

HTML5 Video Before-and-After Comparison Sliderは、HTML5の映像機能を使った、映像比較スライダーです。
画像とは違って、動いているものを比較しているので、自然と視界がスライダーのほうに向かってしまいます。

9. Smooth Image Comparison Slider

09.png
スクリーンショット:2017年10月

Smooth Image Comparison SliderもjQueryを使った画像比較プラグインですが、マウスを画像から離すと境界線が真ん中に戻っていくという点では他のスライダーとは一口違います。
場合によってはかえってそのほうがUXが向上する場合もあるので、利用を検討してみましょう。

まとめ

ビフォー・アフターを比べたりするのが簡単になるだけでなく、ユーザーにも楽しんでもらえるインターフェイスを兼ねそろえているのが、画像比較スライダーです。

アイデア次第ではさまざまな用途に使用することができそうです。
コマースサイトでも、2つの商品を比較することで購買を促進することもできるので、ぜひ利用を検討してみましょう。