ちょっとしたJSでサイトにビフォーアフタースライダーが実装できる！？

ビフォーアフタースライダーとは

ビフォーアフタースライダーとは、2枚の画像を横並びに重ねて表示し、スライダーを左右にドラッグすることで「ビフォー（変化前）」と「アフター（変化後）」を比較できるUIコンポーネントです。

最近ではリフォーム会社・美容サロン・写真加工サービス・ゲームのグラフィック比較など、さまざまなWebサイトで見かけることが増えてきたます。単純に2枚の画像を並べるよりも、ユーザーが自分の手でスライダーを操作できるため、インタラクティブな体験を提供できるのが大きな魅力です。

たとえばこんな場面で効果的に使えます。

• リフォーム・内装工事の施工前後の比較
• 美容サロンの施術前後の変化
• 写真編集・レタッチの加工前後の見せ方
• デザインのリニューアル前後の比較
• 季節や天候による景観の変化

今回紹介するのは、外部ライブラリを一切使わず、純粋なHTML・CSS・JavaScriptだけで実装できるシンプルな方法です。コードも非常に短く、既存サイトへの導入コストが低いのが特徴です。

実装するスライダーのデモ

まずは実際に動くデモを見てみてください。中央にあるスライダーバーを左右にドラッグすることで、ビフォー画像とアフター画像が切り替わるのを確認できます。

スライダーバーをドラッグするだけでなく、画像内の任意の場所をクリックするだけでもスライダーを操作できます。スマートフォンでのタッチ操作にも対応しているので、モバイルユーザーにも快適に使ってもらえます。

このスライダーはCSS Variablesを活用したとてもスマートな実装になっています。次のセクションから実際のコードを順番に解説していきます。

HTMLコードの解説

ビフォーアフタースライダーのHTML構造はとてもシンプルです。全体を囲む外枠のdivと、ビフォー画像・アフター画像・スライダーのinputタグ、この4つの要素で成り立っています。

<div class="before_after_slider">
  <div class="box_before" id="js-boxBefore">
    <img src="/wp/wp-content/themes/e-web/assets/img/column/santa_before.jpg" alt="ビフォー画像">
  </div>
  <div class="box_after">
    <img src="/wp/wp-content/themes/e-web/assets/img/column/santa_after.jpg" alt="アフター画像">
  </div>
  <input type="range" min="0" max="100" value="50" oninput="beforeAfterSlider()" onchange="beforeAfterSlider()" class="slider_range" id="js-sliderRange">
</div>

各要素のポイントを解説します。

• 外枠 .before_after_slider：スライダー全体を包む親要素です。CSSで position: relative を設定して、内部要素の重ね合わせの基準点にします。
• ビフォー画像 .box_before#js-boxBefore：ビフォー画像を包むdivです。JavaScriptからこの要素のwidthを動的に変更することでスライドエフェクトを実現します。overflow: hidden を設定することで、はみ出た部分が見えないようにしています。
• アフター画像 .box_after：アフター画像を包むdivです。ビフォー画像の下に配置されていて、ビフォー画像の幅が狭まることで後ろのアフター画像が見えるようになる仕組みです。
• スライダー input[type=range]：ユーザーが操作するスライダーです。oninput と onchange の両方にJavaScript関数を設定することで、ドラッグ中にも、変化確定時にも関数が呼び出されるようにしています。

CSSコードの解説

CSSもとてもシンプルな構成になっています。CSS Variablesを活用することで、JavaScriptからスタイルを動的に変更できる設計になっているのが特徴です。

.before_after_slider {
  --slider-pos: 50%; /* CSS変数でスライダー位置を管理 */
  position: relative;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  cursor: col-resize;
}

.box_before,
.box_after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box_before {
  width: var(--slider-pos); /* CSS変数で幅を制御 */
  z-index: 1;
}

.box_before img,
.box_after img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.slider_range {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: col-resize;
  z-index: 2;
  margin: 0;
}

/* スライダーの区切り線の装飾 */
.before_after_slider::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--slider-pos);
  transform: translateX(-50%);
  width: 3px;
  height: 100%;
  background: #fff;
  z-index: 3;
  pointer-events: none;
}

CSSの設計ポイントを解説します。

• CSS Variables（--slider-pos）：スライダーの位置を管理するCSS変数です。JavaScriptからこの変数の値を変更するだけで、ビフォー画像の幅と区切り線の位置が同時に更新される仕組みです。
• input[type=range] を透明にする：スライダーの実体（input要素）は不透明度0で透明にして見えなくしています。ユーザーが操作するのは画像上に重ねた透明なスライダーになっていて、視覚的には白い区切り線とハンドルだけが表示される設計です。
• pointer-events: none：画像要素にはクリックやドラッグのイベントが反応しないように設定しています。これにより画像のドラッグ保存ダイアログが出てしまうのを防いでいます。

デフォルトのCSSはシンプルに設計されているので、サイトのデザインに合わせて区切り線の色・太さ、ハンドルの形状などを自由にカスタマイズしてみてください。

JavaScriptコードの解説

JavaScriptの処理はたった数行で完結しています。とてもシンプルなコードなのに効果は抜群です。

function beforeAfterSlider() {
  // スライダーのvalue（0〜100）をパーセント文字列に変換
  const sliderValue = document.getElementById('js-sliderRange').value;
  const sliderPos = sliderValue + '%';

  // CSS Variablesを更新してビフォー画像の幅と区切り線位置を同時に変更
  document.querySelector('.before_after_slider').style.setProperty('--slider-pos', sliderPos);
}

処理の流れを詳しく説明します。

1. input[type=range] のスライダーを操作すると、oninput または onchange イベントが発火します。
2. beforeAfterSlider() 関数が呼び出されて、スライダーの現在値（0〜100の整数）を取得します。
3. 取得した値をパーセント文字列（例："42%"）に変換して、外枠要素のCSS変数 --slider-pos に設定します。
4. CSS変数が更新されることで、.box_before の幅（width: var(--slider-pos)）と区切り線の位置（left: var(--slider-pos)）が瞬時に変わります。

CSS Variablesを仲介役にすることで、JavaScriptから複数のCSSプロパティを一括で更新できるのが、このコードのスマートなところです。1つの変数を変えるだけで見た目が連動して変わる設計は、コードの保守性も高くて非常に優れています。

また、oninput と onchange の両方に関数を設定していることで、ドラッグ操作中のリアルタイム更新と、操作完了時の確実な更新の両方をカバーしています。

活用シーンとカスタマイズのヒント

ビフォーアフタースライダーはさまざまな業種のWebサイトで活用できます。どんな場面で特に効果的なのか、具体的な例を挙げながら解説します。

効果的な活用シーン

• リフォーム・建築会社：施工前と施工後の室内・外観を比較できると、工事のクオリティが一目で伝わります。テキストだけの説明より圧倒的に説得力が増すます。
• 美容サロン・エステ：施術前後のビフォーアフターを見せることで、効果を視覚的に伝えられます。新規顧客の興味を引く強力なコンテンツになります。
• 写真編集・グラフィックデザイン：レタッチや加工前後の変化を見せることで技術力をアピールできます。ポートフォリオサイトとの相性が抜群です。
• 不動産・インテリア：空き部屋と家具配置後のイメージを比較したり、リノベーション前後を見せたりする使い方が効果的です。
• ゲーム・アプリ紹介：グラフィック品質の比較や、機能追加によるUI変化を見せる用途でも使えます。

カスタマイズのヒント

今回紹介したコードはシンプルなベース実装なので、いくつかのカスタマイズを加えることでよりリッチな表現ができます。

• 区切り線の装飾：CSSの ::after 疑似要素で区切り線にハンドルアイコンや矢印を追加するとより直感的なUIになります。
• ラベルの追加：ビフォー・アフターそれぞれの画像にテキストラベルをオーバーレイ表示すると、どちらが変化前・変化後なのかが明確になります。
• 縦スライダー対応：CSSとJavaScriptを少し変更することで、左右だけでなく上下方向のスライドにも対応できます。
• アニメーション自動再生：ページ表示時に自動でスライダーが動くアニメーションを付けると、スライダーの存在をユーザーに気づかせやすくなります。

ホームページ制作においてインタラクティブなUIパーツはユーザーの滞在時間を延ばし、コンテンツへの関心を高める効果があります。ビフォーアフタースライダーは実装コストが低い割に視覚的インパクトが大きいので、積極的に取り入れてみてください。

よくある質問

まとめ

今回はビフォーアフタースライダーの実装方法について解説したます。ポイントをまとめるとこうなります。

• 外部ライブラリ不要で、純粋なHTML・CSS・JavaScriptだけで実装できる
• CSS Variablesを仲介することで、JavaScriptからビフォー幅と区切り線位置を一括更新できる
• スマートフォンのタッチ操作にも標準対応している
• シンプルな構造なので、デザインのカスタマイズがしやすい
• リフォーム・美容・写真加工など、変化を見せたいコンテンツと相性が抜群

実装してみると思ったより簡単だったと感じていただけるはずです。ビフォーアフターで表示することで効果をアピールできる場面があれば、ぜひ取り入れてみてみてください。