タイトル

施工実績ページを作ったのに、問い合わせにつながらない。写真は載せているのに「で、何がどう変わったの？」と聞かれてしまう。中小企業のWeb担当者さんから、こうした相談をよくいただきます。

原因の多くは写真そのものではなく、見せ方です。ビフォーとアフターを左右に並べるだけでは、読者は2枚を見比べる作業を強いられます。ここを「重ねて、指でなぞる」形に変えるだけで、滞在時間も伝わり方も変わります。

並べるより「重ねる」が伝わる理由

左右に並べた2枚は、視線が往復します。しかも撮影角度が少しズレているだけで、脳内の比較が止まってしまいます。

一方、同じ位置に重ねてスライダーで切り替える形式なら、変化した部分だけが動いて見えます。差分が一目で分かるので、説明文を読まなくても価値が伝わります。リフォーム・外壁塗装・ハウスクリーニング・エクステリア・歯科の症例など、「見た目の変化」が商品そのものの業種と相性が抜群です。

実装は30行弱でできます

ライブラリは不要です。input[type=range] と clip-path だけで作れます。

<div class="ba" style="--p:50%">
  <img class="ba__after"  src="after.jpg"  alt="施工後">
  <img class="ba__before" src="before.jpg" alt="施工前">
  <input class="ba__range" type="range" min="0" max="100" value="50"
         aria-label="ビフォーアフターの比較位置">
</div>

.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ba img { position: absolute; inset: 0;
          width: 100%; height: 100%; object-fit: cover; }
/* 上に重ねたbefore側を、左からvar(--p)だけ表示 */
.ba__before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ba__range  { position: absolute; inset: auto 0 0; width: 100%; }

document.querySelectorAll('.ba').forEach(ba => {
  const range = ba.querySelector('.ba__range');
  range.addEventListener('input', () => {
    ba.style.setProperty('--p', range.value + '%');
  });
});

ポイントは、操作部に input[type=range] を使うことです。自前の mousedown 実装だとキーボード操作とスクリーンリーダー対応が抜けますが、rangeなら矢印キーで動き、aria-label も効きます。

実際に動くとこうなります。つまみを左右に動かしてみてください。

写真の揃え方で9割決まる

実装より難しいのが撮影です。位置がズレていると、スライダーにした瞬間に粗が目立ちます。現場に渡す撮影ルールを決めておきましょう。

スマホ撮影なら、グリッド表示をONにして「窓枠の角をグリッド交点に合わせる」と決めておくだけで再現性が上がります。before画像は loading="eager"、以降の実績は loading="lazy" にすると初期表示も軽くなります。

実績ページ全体の説得力を足す

比較スライダーの下に、施工件数や対応エリア数などの数字を置くと、1件の事例が「会社の実績」に接続されます。数字は静止させず、画面に入ったときに動かすと視線が止まります。

書く数字は必ず自社で確認できるものに限ってください。根拠のない「満足度98%」は、信頼を上げるどころか一瞬で失わせます。「施工実績127件（2024年実績）」のように期間を添えるのが安全です。

よくある失敗3つ

• キャプションがない：「before/after」のラベルは画像の中ではなく、HTMLテキストで入れる。検索エンジンにも読者にも伝わります
• スマホで操作できない：touch-action: pan-y を親に指定しないと、スライド操作とページスクロールが競合します
• 事例が1件だけ：3件以上並べて初めて「この会社は慣れている」と伝わります

実例をまとめて見たい方へ

とはいえ、比較スライダー以外にどんな見せ方があるのか、手を動かす前に比べたい場面もあると思います。motionAETHERのカタログでは、こうした動くWebパーツが500点ほど実際に動く状態で並んでいて、無料で閲覧できます。社内で「この動きにしたい」とURLで共有するだけでも、やり取りがかなり短くなります。

まとめ

ビフォーアフターは、並べずに重ねる。実装は30行、本当の勝負は撮影ルールです。まずは自社の代表的な施工事例を1件、同じ立ち位置で撮り直すところから始めてみてください。