【2026年】Shopifyの画像Before Afterスライダー導入Q&A｜アプリとコードどっちで作る？
目次
- はじめに
- Q. そもそも Shopify で画像 Before After スライダーは表示できる？
- Q. アプリとコード自作、どっちで作るのが正解？
- Q. どのアプリを選べばいい？料金や機能はどう違う？
- Q. アプリのインストールはどう進める？
- Q. インストールしたのにスライダーが出てこない。なぜ？
- Q. 設定項目が多くて何を触ればいいか分からない
- Q. 業種ごとに、どんな設定がしっくりくる？
- Q. アプリを使わずコードで自作したい。サンプルは？
- Q. スライダーって本当に効果あるの？逆効果じゃない？
- Q. スライダーを増やすとページが重くならない？
- Q. 化粧品や健康食品のビフォーアフター、薬機法は大丈夫？
- Q. 画像準備で失敗しないコツは？
- Q. その他、導入前によく聞かれること
- まとめ
- 参考記事
はじめに
「商品の使用前後をスライダーで比べさせたいが、Shopify にそんな機能はあるのか」「アプリを入れるべきか、コードで自作すべきか分からない」。Shopify 画像 Before After スライダーを検討し始めた方の多くが、まずこの入り口で迷います。
この記事は、調べても答えが散らばっていて判断しづらい疑問を Q&A 形式で一つずつ片づけていく構成にしました。Shopify ビフォーアフター 導入で実際に問い合わせの多いテーマ、たとえば「無料でできるのか」「OS2.0 の商品ページに置けるのか」「薬機法に触れないか」といった論点を順番に取り上げます。途中で Shopify ビフォーアフター アプリを使う場合の具体的な設定手順と、コード派向けの複数スライダー対応サンプルも挟み込みました。気になる問いから読み進めてください。
この記事は以下の記事を参考にしています。
- Shopify で画像 Before After スライダーを表示できる？おすすめアプリ 5 選を紹介！
- Shopifyの画像Before Afterスライダーアプリ12選
- 【2026年】Shopifyの画像ビフォーアフターを表示できるアプリを紹介！
- Shopifyで画像ビフォーアフタースライダーを導入できるアプリについて徹底解説｜ご利用ガイド
Q. そもそも Shopify で画像 Before After スライダーは表示できる？
表示できます。ただし Shopify の標準テーマには Before After スライダーの機能が用意されていないため、自分で追加する必要があります。手段は大きく次の二択です。
- テーマの Liquid ファイルに HTML・CSS・JavaScript を書いてスライダーを自作する
- Shopify App Store のビフォーアフターアプリをインストールして、ノーコードで設置する
どちらでも同じ「スライダーで比較できる見た目」は作れます。違いは、作るときの手間と、後から触るときの自由度です。この記事では両方を扱いますが、次の問いで触れるように、ほとんどのストアはまずアプリから入るのが現実的です。
Q. アプリとコード自作、どっちで作るのが正解？
ここが最初の分かれ道です。判断材料を絞ると、見るべきは 「コードを書ける人が社内にいるか」 と 「テーマ更新のたびにメンテナンスし続けられるか」 の 2 点に集約されます。
コード自作は、ライブラリを使えば実装そのものは難しくありません。たとえば定番の jQuery 系ライブラリ 「TwentyTwenty」 を使う場合、theme.liquid の </head> 直前に CDN から JS と CSS を読み込み、2 枚の画像を twentytwenty-container クラスでラップして（左が before、右が after）、$('.twentytwenty-container').twentytwenty(); で初期化するだけで動きます。アプリ料金はかからず、見た目も自由です。
きれいに収めたいなら、テーマの sections フォルダに before-after-slider.liquid のようなセクションファイルを新規に追加し、そこへ HTML・読み込み・初期化をまとめてテーマエディタから配置できるようにしておくと管理が楽になります。逆に言えば、ここまで自分で設計・配置できる人がいないと、コード自作はきれいに運用できません。
一方で落とし穴もあります。TwentyTwenty は jQuery への依存があり、テーマによっては読み込み順やバージョンの相性問題が出ます。さらにテーマをアップデートすると追加コードが上書きで消えることがあり、不具合が出ても自分で直すしかありません。筆者の実感として、コード自作は「触れる人が常駐している」前提でないと、数か月後に誰も保守できないお荷物になりがちです。実装そのものより、その後ずっと面倒を見続けられるかどうかが本当の判断材料になります。
アプリは月額がかかる代わりに、レスポンシブ・タッチ操作・テーマ更新への耐性が最初から組み込まれており、設定は管理画面で完結します。「まず効果を試して、必要なら作り込む」 という順番なら、無料体験のあるアプリで小さく検証するのが遠回りになりません。判断の目安は次のとおりです。
- 社内にフロントエンドを触れる人がいて、保守も継続できる → コード自作も選択肢
- 担当者が非エンジニア、または運用を止めたくない → アプリ
- まず効果を確かめてから決めたい → 無料体験のあるアプリで検証
Q. どのアプリを選べばいい？料金や機能はどう違う？
ビフォーアフターアプリは似た見た目でも、料金とできることに差があります。検討時に比較した主な選択肢を挙げておきます（いずれも執筆時点の情報です。要確認（各アプリの最新料金・プラン））。
- Magic: Before And After Slider … 月額 $1.50 と最安帯。1〜3 カラムレイアウトと縦横スライダーの切り替えに対応
- Ultimate Before/After Widget … 月額 $1.50。Magic と同価格帯のシンプル構成
- Snap: Before and After Slider … 月額 $2.99（年額 $17.99 で 50% オフ）。無料プランはなく 3 日間トライアルのみだが、アプリブロックとしてテーマエディタにネイティブ統合される点が強み
- Before/After Image Slider Pro … 月額 $6.99。ズーム拡大鏡（zoom magnifier） を備え、ディテールの違いを見せたい商材に向く
同じ「スライダーで比較する」機能でも、選ぶ視点は価格だけではありません。たとえば月額 $1.50 の最安帯はコストを抑えたいときに魅力的ですが、Snap のようにアプリブロックとしてテーマエディタへネイティブ統合されるタイプは、置き場所の自由度や OS2.0 テーマとの噛み合いで扱いやすさが上回ることがあります。ディテールの差を見せたい写真加工やジュエリーのような商材なら、Pro のズーム拡大鏡が効く、といった具合に「自社の商材で何を見せたいか」で正解が動きます。海外製アプリは設定 UI が英語のものが多く、ラベルを日本語に整えたり、サポートに日本語で問い合わせたい場面で手が止まりやすいのも、実務では地味に効いてくる差です。
こうした観点を総合すると、日本語のストアで管理画面まで含めて迷わず設定したい場合は、まず試したい一本として日本製アプリ 「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」 を挙げます。日本語のラベル運用と国内向けサポートが前提になっている点が、検証段階の負担を軽くしてくれます。
このアプリは、Before/After 画像をスライダー形式で重ねて比較できるノーコードアプリです。管理画面から直感的に操作でき、コードを書かずにストア内の任意のページへビフォーアフタースライダーを設置できます。
アプリの基本情報
- アプリ名: シンプル画像ビフォーアフター｜お手軽イメージ前後比較
- 価格: 月額 $5.99（7 日間無料体験あり）
- カテゴリー: 画像とメディア
- 対応言語: 日本語を含む多言語
押さえておきたい機能
ドラッグ＆タッチで Before/After を比較
PC ではマウスドラッグ、スマートフォンではタッチで、Before 画像と After 画像をスライダー比較できます。ユーザーが自分のペースで境界を動かせるため、変化の度合いを体感的に伝えられます。
PC 用・モバイル用の画像を個別設定
デバイスごとに別画像を設定できます。PC は横長の高解像度、スマホは縦長のコンパクト、といった出し分けが可能です。横長画像をスマホにそのまま出すと比較対象が小さくなりがちなので、ここを分けられるのは実務で効きます。
ハンドルデザイン 3 種類
スライダーのつまみを矢印・丸・線のみの 3 種から選べます。ストアのトーンに合わせて見た目の統一感を保てます。
ラベルのカスタマイズ
Before / After のラベルテキスト、表示位置（上部・下部）、フォントサイズ、文字色を調整できます。「使用前」「使用後」のような日本語ラベルはもちろん、多言語ストア向けの英語ラベルも設定可能です。
ワンクリックでテーマに追加
インストール後、テーマエディタから 「アプリブロック」 としてワンクリックで追加できます。コード編集は不要で、すぐ反映されます。
Q. アプリのインストールはどう進める？
ここからは「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」を例に、インストールの流れを画面ごとに追います。
ステップ 1: Shopify 管理画面から「設定」をクリック
管理画面にログインし、左下の「設定」を開きます。
ステップ 2: 「アプリと販売チャネル」から Shopify App Store へ
左メニューの「アプリと販売チャネル」を選び、「Shopify App Store」ボタンから App Store に移動します。
ステップ 3: アプリを検索
検索バーに「シンプル画像ビフォーアフター」と入力します。結果に表示された「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」をクリックして詳細ページへ進みます。
ステップ 4: 「インストール」をクリック
詳細ページの「インストール」ボタンをクリックします。
ステップ 5: アクセス権限を確認して「インストール」
権限の確認画面が出ます。内容を確認し、問題なければ「インストール」を押して完了します。
ステップ 6: アプリの管理画面が開く
インストールが終わるとアプリの管理画面が表示されます。ここで各種設定を行います。次はテーマへの追加（有効化）です。
Q. インストールしたのにスライダーが出てこない。なぜ？
インストールだけではストアに表示されません。アプリブロックをテーマに追加して有効化する必要があります。ここでつまずく方が多いので、手順を分けて説明します。
ステップ 1: テーマエディタでアプリブロックを追加
「オンラインストア」>「テーマ」>「カスタマイズ」でテーマエディタを開きます。スライダーを出したいページのセクションで「ブロックを追加」をクリックし、「アプリ」カテゴリーから「シンプル画像ビフォーアフター」を選びます。
ステップ 2: プレビューを確認して「保存」
追加できたらプレビューで見え方を確認します。問題なければ右上の「保存」を押します。これでページに Before After スライダーが表示されます。
Q. 設定項目が多くて何を触ればいいか分からない
設定はコンテンツ・モバイル画像・スライダー/文字/レイアウトの 3 グループに分かれています。最初に触るべきところから順に見ていきます。
コンテンツ設定
Before 画像と After 画像の登録、ラベルの表示・非表示、ラベル位置、ラベルテキストを設定します。まずはここだけ埋めれば動きます。
Before 画像 / After 画像
スライダーに表示する 2 枚を設定します。画像は Shopify のメディアライブラリから選べます。Before と After で同じサイズ・アスペクト比にすると、境界がきれいに揃います。
ラベルの表示
Before / After のラベルを表示するか切り替えます。表示しておくと、どちらが使用前でどちらが使用後かが一目で伝わります。
ラベルの位置
「上部」「下部」から選べます。画像の上部にロゴやテキストがあるなら下部、下部に見せたい変化があるなら上部、と画像側の都合で決めると失敗しません。
ラベルのテキスト
デフォルトは「Before」「After」ですが、日本語ストアなら「使用前」「使用後」「施工前」「施工後」など商材に合わせて変更できます。
モバイル画像設定
スマホ・タブレット向けに、PC とは別の画像を設定できます。
モバイル用 Before 画像 / After 画像
モバイル表示時に PC とは違う画像を出せます。スマホ画面に最適化した縦長画像を用意すると、比較対象が小さくなりません。未設定の場合は PC 用画像がそのまま使われます。必須ではありませんが、スマホ流入が多いストアでは設定をおすすめします。
スライダー・文字・レイアウト設定
ハンドルデザイン、文字スタイル、余白を調整します。
ハンドルデザイン
つまみのデザインを 3 種類から選べます。
- 矢印: 左右の矢印で操作方法が直感的に伝わる。初見ユーザーが多いページ向き
- 丸: ミニマルなデザインに馴染むシンプルな丸型
- 線のみ: 画像を邪魔せず、仕上がりに集中させたいときに最適
フォントサイズ
ラベルの大きさを画像サイズやストア全体のトーンに合わせて調整します。
文字色
ラベルの色を設定します。明るい画像には暗めの文字、暗い画像には明るめの文字、とコントラストを優先すると視認性が上がります。
セクションの余白
スライダーセクションの上下パディングを調整し、前後のセクションとのバランスを整えます。
Q. 業種ごとに、どんな設定がしっくりくる？
Before After スライダーは、美容（スキンケア・ヘア）、フィットネスのボディメイク、ホームリフォームやハウスクリーニング、歯のホワイトニングなど「変化・効果の可視化」が購買の決め手になる商材で特に効きます。業種別の設定例を挙げます。
スキンケア・美容系
- Before ラベル: 「使用前」
- After ラベル: 「使用後」
- ラベル位置: 下部
- ハンドルデザイン: 矢印
- ラベルを下部に置くと、肌の変化が見える画像上部を隠しません。矢印ハンドルは初見ユーザーにも操作が伝わります。
肌の比較は、同じ照明・同じアングルで撮ることが信頼性を左右します。自然光の下で、できるだけ同じ時間帯に撮ると公平な比較画像になります。後述しますが、化粧品・健康食品はラベルや訴求文に薬機法の制約があるため、撮影と同じくらい言葉選びにも注意が必要です。
リフォーム・インテリア
- Before ラベル: 「施工前」
- After ラベル: 「施工後」
- ラベル位置: 上部
- ハンドルデザイン: 丸
- 部屋全体の変化を見せることが多いので、ラベルは上部に寄せて中央を広く見せます。丸型ハンドルはインテリア系の世界観に馴染みます。
広角で撮ると空間全体の変化が伝わりやすく、家具や小物まで含めたトータルの差を見せると訴求力が上がります。
写真加工・デザイン
- Before ラベル: 「オリジナル」
- After ラベル: 「加工後」
- ラベル位置: 上部
- ハンドルデザイン: 線のみ
- 主役は画像そのものなので、線のみのハンドルでつまみを目立たせず、仕上がりに集中させます。
色補正・レタッチ・背景処理といった細かな差が見どころです。高解像度の画像を使い、ディテールの変化が分かるようにすると効果的です。
Q. アプリを使わずコードで自作したい。サンプルは？
コードを書ける方向けに、HTML・CSS・JavaScript だけで動くシンプルな Before After スライダーのサンプルを載せます。jQuery などの外部ライブラリに依存せず、素の JavaScript でドラッグとタッチに対応させています。
実装の流れ
- テーマの Liquid ファイルに HTML を追加する
- CSS でスライダーのスタイルを定義する
- JavaScript でドラッグ＆タッチ操作を実装する
HTML を追加
テーマエディタの「テーマコードを編集」から、スライダーを出したいテンプレート（例: product.liquid や page.liquid）に次の HTML を追加します。
<div class="ba-slider-container">
<div class="ba-slider" id="baSlider">
<div class="ba-slider__after">
<img src="AFTER画像のURLをここに入力" alt="After" />
</div>
<div class="ba-slider__before" id="baBefore">
<img src="BEFORE画像のURLをここに入力" alt="Before" />
</div>
<div class="ba-slider__handle" id="baHandle">
<span class="ba-slider__handle-icon">← →</span>
</div>
<div class="ba-slider__label ba-slider__label--before">Before</div>
<div class="ba-slider__label ba-slider__label--after">After</div>
</div>
</div>
BEFORE画像のURLをここに入力 と AFTER画像のURLをここに入力 を、実際の画像 URL に置き換えてください。Shopify のメディアライブラリにアップロードした画像 URL が使えます。
CSS を追加
テーマの CSS ファイル（base.css や theme.css など）に次のスタイルを追加します。レスポンシブ用のメディアクエリも含めています。
.ba-slider-container {
max-width: 800px;
margin: 40px auto;
padding: 0 16px;
}
.ba-slider {
position: relative;
width: 100%;
overflow: hidden;
cursor: ew-resize;
user-select: none;
-webkit-user-select: none;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ba-slider img {
display: block;
width: 100%;
height: auto;
pointer-events: none;
}
.ba-slider__after {
position: relative;
width: 100%;
}
.ba-slider__before {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
z-index: 2;
}
.ba-slider__before img {
position: absolute;
top: 0;
left: 0;
width: 200%;
max-width: none;
height: 100%;
object-fit: cover;
}
.ba-slider__handle {
position: absolute;
top: 0;
left: 50%;
width: 4px;
height: 100%;
background: #ffffff;
z-index: 3;
transform: translateX(-50%);
cursor: ew-resize;
display: flex;
align-items: center;
justify-content: center;
}
.ba-slider__handle-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #333333;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
letter-spacing: -2px;
}
.ba-slider__label {
position: absolute;
bottom: 16px;
padding: 6px 16px;
background: rgba(0, 0, 0, 0.6);
color: #ffffff;
font-size: 14px;
font-weight: 600;
border-radius: 4px;
z-index: 4;
pointer-events: none;
}
.ba-slider__label--before {
left: 16px;
}
.ba-slider__label--after {
right: 16px;
}
@media (max-width: 768px) {
.ba-slider-container {
margin: 24px auto;
}
.ba-slider__handle-icon {
width: 32px;
height: 32px;
font-size: 12px;
}
.ba-slider__label {
font-size: 12px;
padding: 4px 12px;
bottom: 12px;
}
}
JavaScript を追加
テーマの JavaScript ファイル、またはテンプレート内の <script> タグに次のコードを追加します。マウスドラッグとタッチ操作の両方に対応しています。
document.addEventListener('DOMContentLoaded', function () {
const slider = document.getElementById('baSlider');
const before = document.getElementById('baBefore');
const handle = document.getElementById('baHandle');
if (!slider || !before || !handle) return;
let isDragging = false;
function getPositionX(e) {
if (e.touches && e.touches.length > 0) {
return e.touches[0].clientX;
}
return e.clientX;
}
function updateSlider(clientX) {
const rect = slider.getBoundingClientRect();
let x = clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width));
const percent = (x / rect.width) * 100;
before.style.width = percent + '%';
handle.style.left = percent + '%';
}
// マウスイベント
slider.addEventListener('mousedown', function (e) {
isDragging = true;
updateSlider(e.clientX);
e.preventDefault();
});
document.addEventListener('mousemove', function (e) {
if (!isDragging) return;
updateSlider(e.clientX);
e.preventDefault();
});
document.addEventListener('mouseup', function () {
isDragging = false;
});
// タッチイベント
slider.addEventListener('touchstart', function (e) {
isDragging = true;
updateSlider(getPositionX(e));
e.preventDefault();
});
slider.addEventListener('touchmove', function (e) {
if (!isDragging) return;
updateSlider(getPositionX(e));
e.preventDefault();
});
slider.addEventListener('touchend', function () {
isDragging = false;
});
});
Q. このコードを 1 ページに複数置きたいときは？
上のサンプルは ID（baSlider など）で要素を取得しているため、そのままコピーして増やすと ID が重複し、2 つ目以降が動きません。実務でつまずきやすいのがこの点です。複数設置するときは、ID をやめてクラスで全スライダーをまとめて取得し、ループで初期化する形に書き換えます。考え方は次のとおりです。
- HTML 側の
id="baSlider"をclass="ba-slider"のようにクラス指定へ変更し、同じ構造のブロックを必要な数だけ並べる - JavaScript 側は
document.querySelectorAll('.ba-slider')で全スライダーを取得し、forEachで 1 つずつ初期化する - ドラッグ状態（
isDragging）はスライダーごとに別々に持たせ、各スライダー内の before 要素・handle 要素はそのスライダーのスコープ内から探す
ライブラリで済ませたい場合は、前述の TwentyTwenty を使えば複数設置や jQuery 初期化がライブラリ側で面倒を見てくれます。素の JS で軽量に保つか、ライブラリで楽をするか、保守体制に合わせて選んでください。
コード実装の注意点
テーマのバックアップを取る
編集前に必ずテーマを複製しておきます。エラーが出ても複製から戻せます。
画像サイズを統一する
Before 画像と After 画像は同じ幅・高さで用意します。サイズが違うと境界がずれて表示が崩れます。
パフォーマンスに配慮する
画像は WebP で保存し、適切なサイズにリサイズしてからアップロードします。目安は幅 1200px 以下、ファイルサイズ 200KB 以下です。
テーマアップデートに注意
テーマを更新すると追加したカスタムコードが上書きで消える可能性があります。更新前にカスタムコードのバックアップを取っておきましょう。
Q. スライダーって本当に効果あるの？逆効果じゃない？
「スライダー＝離脱の原因」という話を聞いたことがある方もいるはずです。ここは切り分けが必要です。一般的なトップページのカルーセル（自動で切り替わる画像スライダー）については、クリックした人の 84% が 1 枚目のスライドに留まり、2 枚目以降はほぼ見られないという調査があります（CommerceGurus）。受け身で「流し見」されるスライダーは、確かに効きが悪いのです。
一方、Before After スライダーは性質が違います。ユーザーが自分の手で境界を動かし、能動的に比較するインタラクティブな要素です。流し見されるカルーセルと違い、「動かしてみたくなる」操作そのものが商品理解につながります。つまり「スライダー全般が無意味」なのではなく、受け身型か参加型かで結果が分かれる、という整理が正確です。Before After は後者なので、変化を見せたい商材ほど相性が良いと言えます。
裏を返せば、操作したくなる見せ方になっているかが効果を左右します。境界が中央でぴたりと止まっていると「動かせる」ことに気づかれないので、初期位置を少しずらしておく、矢印ハンドルで操作可能だと示す、といった工夫が地味に効きます。設置場所も、商品説明をひととおり読んだ直後など「効果を確かめたい」気持ちが高まったタイミングに置くと、自然に触ってもらえます。
Q. スライダーを増やすとページが重くならない？
なります。Before After スライダーは 1 つにつき 2 枚の画像を読み込むため、複数設置すると単純に読み込み枚数が倍々で増えていきます。ページ速度の低下はユーザー体験だけでなく SEO にも響くので、ここは設置数と画像最適化のバランスで管理します。
実務での目安は、画像を WebP 形式 で保存し、幅 1200px 以下・1 枚あたり 200KB 以下に圧縮しておくことです。WebP は JPEG とほぼ同等の見た目を保ったままファイルサイズを大きく削れるため、画質を落とさずに軽量化できます。1 ページに何本も並べたいときほど、この前処理を省かないことが効いてきます。スマホ向けには前述のモバイル用画像で軽い画像を別途指定しておくと、回線が細い環境でも体感速度を保てます。
Q. 化粧品や健康食品のビフォーアフター、薬機法は大丈夫？
ここが日本のストアで見落とされやすい論点です。化粧品・健康食品のビフォーアフター写真は、薬機法（医薬品等適正広告基準）の制約を受けます。 2017 年 9 月の基準改正以降、ビフォーアフター写真によって「承認外の効能効果を想起させる」「効果が出るまでの時間や持続時間を保証する」「安全性を保証する」といった表現は禁止されています。
化粧品の場合は、いわゆる「56 の効能効果」の範囲内であれば使用できます。たとえば染毛料の染毛前後、化粧水使用後の保湿状態、シャンプー後の状態といった、認められた効能の範囲を示すビフォーアフターは可能です。この線引きを知らずに「シミが消えた」「○週間で激変」のような訴求を画像とセットで出すと、違反リスクが生じます。
皮肉なことに、ビフォーアフターが最も刺さる化粧品・健康食品ほど、法規制に触れやすいという表裏一体の構造があります。スライダーの導入自体は問題ありませんが、ラベルや前後の説明文に「保証」「即効」を思わせる言葉を入れないなど、訴求文言の確認は必須です。実際の出稿前には、自社商材が認められた効能の範囲に収まっているかを確認しておくと安心です。
Q. 画像準備で失敗しないコツは？
スライダーの説得力は画像の質でほぼ決まります。運用で外したくないポイントを挙げます。
画像サイズを揃える
Before と After は必ず同じ幅 × 高さで用意します。サイズが違うと境界がずれ、画像が歪んで見えます。撮影後に編集ソフトでトリミング・リサイズし、ピクセル数を完全に一致させましょう。比率は 16:9 または 4:3 が多くのデバイスで扱いやすい目安です。
同じアングルで撮る
Before と After はできるだけ同じアングル・距離・照明で撮影します。条件が違うと「商品の効果」ではなく「撮影環境の差」が目立ち、比較として信頼されにくくなります。三脚で位置を固定し、被写体の置き場所に目印をつけておくと品質が安定します。
ラベルを分かりやすくする
ラベルは一目で意味が通るものにします。「使用前 / 使用後」「施工前 / 施工後」「導入前 / 導入後」など、日本語にすると伝わりやすくなります。文字色は背景に対してコントラストの高い色を選ぶと視認性が上がります。
Q. その他、導入前によく聞かれること
Q: どのページに設置できますか？
A: アプリブロックに対応した Shopify テーマ（OS 2.0 以降）であれば、商品ページ、コレクションページ、固定ページ、ブログ記事ページなど、テーマエディタで編集できるあらゆるページに設置できます。トップで世界観を見せる、商品ページで購入を後押しする、と目的に応じて使い分けられます。
Q: 1 ページに複数のスライダーを置けますか？
A: アプリならテーマエディタでアプリブロックを複数追加するだけで設置できます。コード自作の場合は前述のとおりクラス＋ループでの書き換えが必要です。いずれも画像枚数が増えるぶん、サイズ最適化に注意してください。
Q: 画像の推奨サイズは？
A: Before と After を同じサイズで用意するのが前提です。目安は幅 1200px 程度、比率 16:9 または 4:3、1 枚あたり 200KB 以下への圧縮です。WebP 形式なら JPEG と同等の画質でファイルサイズを大きく減らせます。
Q: 既存テーマを変えずに導入できますか？
A: アプリを使えばテーマコードを一切変更せずに導入できます。「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」はアプリブロックとして追加するだけなので、既存ファイルに影響しません。アンインストールすればテーマは元の状態に戻ります。
まとめ
Shopify 画像 Before After スライダーの導入で迷いやすい疑問を、Q&A 形式で整理してきました。要点を振り返ります。
- Shopify 標準には機能がないため、コード自作か アプリ導入 で追加する
- 判断軸は「コードを触れる人がいるか」と「テーマ更新後も保守し続けられるか」。非エンジニア運用やまず効果検証したい場合はアプリが現実的
- アプリは Magic / Ultimate（月額 $1.50）や Snap（$2.99）など選択肢が幅広い。日本語ストアで迷わず設定したいなら 「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」（月額 $5.99・7 日間無料体験）が最初に試したい一本
- コード自作は素の JS でも実装可能だが、複数設置は ID 重複に注意し、クラス＋ループで初期化する
- Before After スライダーは受け身のカルーセルと違い参加型なので、変化を見せる商材と相性が良い
- 化粧品・健康食品は 薬機法 に配慮し、保証や即効を想起させる訴求は避ける
- 画像は同じアングル・同じサイズで用意し、WebP で軽量化することが成果を左右する
まずは無料体験で自分のストアでの見え方と反応を確かめ、必要になったらコードでの作り込みを検討する、という順番がリスクを抑えられます。
.png?w=400){kind=icon}
