ブログBLOG

Image Compare Viewerを使った画像比較スライダーの実装方法

更新日：2026/07/21

「BeforeとAfterをもっと分かりやすく見せたい」
「2枚の画像の違いを直感的に伝えたい」

そんなことを思ったことはありませんか？
そんなときに便利なのが、画像比較スライダーです。
ドラッグやスワイプするだけで画像を見比べられるため、商品の魅力や施工事例、デザインの変化を効果的にアピールできます。

今回は、Image Compare Viewerを使用して画像比較スライダーの作成方法を分かりやすくご紹介します。

1 画像比較スライダーとは？
2 今回作成する画像比較スライダー
- 2.1 事前準備
3 作成の手順
4 完成
5 おまけ
6 まとめ

画像比較スライダーとは？

画像比較スライダーとは、2枚の画像をスライダーで左右（または上下）に比較できるUIのことです。
前後（または上下）にスライダーを動かして二枚の画像を比較することができます。

使われる場面としては、写真加工・リフォーム・美容・デザインの比較などでよく使用されています。
「ビフォーアフタースライダー」や「画像比較ビューア」とも呼ばれます。
ここでは便宜上、画像比較スライダーと称します。

今回作成する画像比較スライダー

今回はモノクロの画像とカラーの画像を比較できるスライダーを作成します。

デモはこちらです。
画像比較スライダー

事前準備

画像比較スライダーのプラグインはいくつかありますが、ここでは『Image Compare Viewer』を使用します。
CDNでも利用可能です。

image-compare-viewer.min.css
image-compare-viewer.min.js

上記二つのファイルをそれぞれ読み込みます。

事前準備はこれで完了です。

作成の手順

最終的なコードはこちらです。

HTML


<div id="image-compare">
  <img src="/img/img-monochrome.jpg.webp" alt="" />
  <img src="/img/img-collar.jpg.webp" alt="" />
</div>

</div>

CSS


#image-compare {
  border-radius: 20px;
  overflow: hidden;
  max-width: 1000px;
  margin: auto;
  isolation: isolate;
}
.icv__control-line {
  width: 5px !important;
}
.icv__theme-wrapper {
  background: #fff;
  border-radius: 100px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  height: 80px;
  width: 80px;
  z-index: 10;
}
.icv__arrow-wrapper {
  position: relative;
  -webkit-transform: translate(0) !important;
          transform: translate(0) !important;
  height: 22px;
  width: 14px;
}
.icv__arrow-wrapper::before {
  background: url(../img/ico-arrow.svg) no-repeat center center/contain;
  content: "";
  height: 22px;
  width: 14px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.icv__arrow-wrapper:nth-child(1)::before {
  left: 0;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
.icv__arrow-wrapper:nth-child(1)::before {
  right: 0;
}
.icv__arrow-wrapper svg {
  display: none;
}

#image-compare {

border-radius: 20px;

overflow: hidden;

max-width: 1000px;

margin: auto;

isolation: isolate;

}

.icv__control-line {

width: 5px !important;

}

.icv__theme-wrapper {

background: #fff;

border-radius: 100px;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

gap: 20px;

height: 80px;

width: 80px;

z-index: 10;

}

.icv__arrow-wrapper {

position: relative;

-webkit-transform: translate(0) !important;

transform: translate(0) !important;

height: 22px;

width: 14px;

}

.icv__arrow-wrapper::before {

background: url(../img/ico-arrow.svg) no-repeat center center/contain;

content: "";

height: 22px;

width: 14px;

position: absolute;

top: 0;

bottom: 0;

margin: auto;

}

.icv__arrow-wrapper:nth-child(1)::before {

left: 0;

-webkit-transform: scale(-1, 1);

transform: scale(-1, 1);

}

.icv__arrow-wrapper:nth-child(1)::before {

right: 0;

}

.icv__arrow-wrapper svg {

display: none;

}

jQuery


const $element = $('#image-compare');
const viewer = new ImageCompare($element[0]).mount();

const $element = $('#image-compare');

const viewer = new ImageCompare($element[0]).mount();

HTML

HTMLはシンプルです。

　
<div id="image-compare">
  <img src="/img/img-monochrome.jpg.webp" alt="" />
  <img src="/img/img-collar.jpg.webp" alt="" />
</div>

</div>

比較したい画像二枚をdivなどで囲むだけです。

jQuery

jQueryもシンプルです。

　
const $element = $('#image-compare');
const viewer = new ImageCompare($element[0]).mount();

const $element = $('#image-compare');

const viewer = new ImageCompare($element[0]).mount();

まず画像二枚を格納している親要素を取得します。
『new ImageCompare($element[0])』でインスタンスを作成、
『.mount() 』でHTMLを書き換え、ドラッグできる比較スライダーを生成しています。

これだけで、画像比較スライダーが実装されます。

公式サイトでは細かいオプションなどもあります。
適宜サイトにあったオプションをつけてください。

CSS

適宜スライダーに合わせてボタンなどを調整します。

CSS


#image-compare {
  border-radius: 20px;
  overflow: hidden;
  max-width: 1000px;
  margin: auto;
  isolation: isolate;
}
.icv__control-line {
  width: 5px !important;
}
.icv__theme-wrapper {
  background: #fff;
  border-radius: 100px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  height: 80px;
  width: 80px;
  z-index: 10;
}
.icv__arrow-wrapper {
  position: relative;
  -webkit-transform: translate(0) !important;
          transform: translate(0) !important;
  height: 22px;
  width: 14px;
}
.icv__arrow-wrapper::before {
  background: url(../img/ico-arrow.svg) no-repeat center center/contain;
  content: "";
  height: 22px;
  width: 14px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.icv__arrow-wrapper:nth-child(1)::before {
  left: 0;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
.icv__arrow-wrapper:nth-child(1)::before {
  right: 0;
}
.icv__arrow-wrapper svg {
  display: none;
}

#image-compare {

border-radius: 20px;

overflow: hidden;

max-width: 1000px;

margin: auto;

isolation: isolate;

}

.icv__control-line {

width: 5px !important;

}

.icv__theme-wrapper {

background: #fff;

border-radius: 100px;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

gap: 20px;

height: 80px;

width: 80px;

z-index: 10;

}

.icv__arrow-wrapper {

position: relative;

-webkit-transform: translate(0) !important;

transform: translate(0) !important;

height: 22px;

width: 14px;

}

.icv__arrow-wrapper::before {

background: url(../img/ico-arrow.svg) no-repeat center center/contain;

content: "";

height: 22px;

width: 14px;

position: absolute;

top: 0;

bottom: 0;

margin: auto;

}

.icv__arrow-wrapper:nth-child(1)::before {

left: 0;

-webkit-transform: scale(-1, 1);

transform: scale(-1, 1);

}

.icv__arrow-wrapper:nth-child(1)::before {

right: 0;

}

.icv__arrow-wrapper svg {

display: none;

}

完成

画像比較スライダーの完成です。
画像比較スライダー

おまけ

スライダーを上下にしたい場合は、以下のオプションを追加します。

　
const options = {
  verticalMode: true
}

const options = {

verticalMode: true

}

縦向きに合わせてボタンなどもCSSで調整してください。

縦向き画像比較スライダー

まとめ

画像比較スライダーは、分かりずらい違いでもユーザーに分かりやすく伝えられる便利なUIです。

今回ご紹介した Image Compare Viewer を使えば、短いHTML・jQueryだけで手軽に実装できます。
デザインのカスタマイズも柔軟に行えるため、サイトの雰囲気に合わせた見た目に調整することも可能です。
施工事例や商品紹介、画像加工の比較など、ビフォーアフターを見せたいさまざまなシーンで活用してみてください。