Wixに画像比較スライダー（ビフォーアフター）を追加する方法

商品のメリットを潜在顧客に一目で伝えられることは大きなアドバンテージです。特にオンライン販売では、営業担当者がいないため、ブランディング、メッセージ、そしてビジュアルが重要な役割を果たします。ここで力を発揮するのが、ビフォーアフター画像比較スライダーです。

Wixには膨大なデザイン要素のライブラリがありますが、標準エディタにはカスタマイズ可能な画像比較スライダーが含まれていません。しかし、選択肢がないわけではありません。Wixアプリマーケットからサードパーティアプリをインストールする方法、無料の外部ウィジェットを埋め込む方法、またはVelo by Wixを使ってゼロから構築する方法があります。それぞれの仕組みと、無料ウィジェットがほとんどの人におすすめである理由を解説します。

方法1：Wixアプリマーケットの拡張機能をインストールする

最も手軽な方法はWixアプリマーケットです。「before and after slider」と検索してクリックするだけで、ページに画像比較スライダーが表示されます。埋め込みコードも開発者モードも不要です。

問題はインストール後に現れます。これらのアプリのほとんどはフリーミアムモデルで運営されており、無料プランでは妥協が必要です。レビュー評価4.7と高評価のPURPLE Before & After Sliderは、無料プランではウォーターマークが表示されます。ウォーターマークの削除やカスタム矢印スタイル、レイアウト形状のアンロックには月額2.50ドルかかります。一見少額ですが、サイト上の他のアプリのサブスクリプションと合わせると積み重なっていきます。

より大きなリスクはメンテナンスです。これらは小規模なサードパーティ開発者によるもので、アップデートが止まるとスライダーが壊れます。ポートフォリオや商品ページに壊れた要素があるのは、最も避けたい事態です。

それでもサードパーティアプリを試したい場合、インストール手順は以下の通りです：

1. Wixエディタでサイトを開き、左サイドバーのアプリをクリックしてから、アプリマーケットをクリックします。「before and after slider」と検索してください。

2. 使用したいアプリをクリックし、サイトに追加をクリックします。許可して追加で確定してください。
3. スライダーがページに配置されます。スライダーをクリックして設定を開き、ビフォーとアフターの画像を追加し、ハンドルやラベルを調整したら、公開をクリックします。

Wixのインストール手順の詳細は、サイトにアプリを追加するためのヘルプセンターガイドで確認できます。

方法2：無料のノーコード画像比較スライダーウィジェットを使う（おすすめ）

月額サブスクリプションなしでスライダーを自由にコントロールしたいなら、アプリマーケットをスキップして、無料の外部ウィジェットを埋め込みましょう。有料アプリと同じドラッグで画像を切り替える効果が得られ、有料プラン以上のカスタマイズ性があり、更新料もかかりません。

Jotformのビフォーアフタースライダーウィジェットは、まさにこの用途のために作られています。ビジュアルエディタで設定し、短い埋め込みコードをコピーしてWixに貼り付けるだけです。Jotformウェブサイトウィジェットは使用回数の制限やプランの要件なく無料で利用でき、スライダーを公開した後にアップグレードを促されることもありません。

機能面でもアプリマーケットの選択肢を上回ります。水平方向と垂直方向の切り替えが可能で、部屋の全体像や人物のビフォーアフターを見せる際に重要なポイントです。仕切り線の初期位置を設定できるため、訪問者に見せたいフレーミングで表示を開始できます。さらに、ナビゲーション機能付きで最大3組の比較画像を追加でき、1つの要素を単なる静的な比較ではなく、コンパクトなケーススタディギャラリーに変えられます。3人の患者の施術結果を見せたい歯科医や、段階的なリノベーションを紹介したいインテリアデザイナーにとって、埋め込みが1つで済むか3つ必要かの違いは大きいでしょう。

以下の手順で、JotformのウィジェットをWixサイトに追加しましょう：

1. Jotformビフォーアフタースライダーウィジェットを開き、ファイルをアップロードするか画像URLを貼り付けて画像ペアを追加します。各比較にビフォーとアフターのラベル、およびキャプションも追加してください。

2. 切り替え方向、仕切り線の初期位置、操作方法（ドラッグ、クリック、ホバー）を設定します。幅、画像比率、角丸、仕切り線のサイズ、色をサイトに合わせて調整してください。訪問者が細部を確認する必要がある場合は、フルスクリーンを有効にしましょう。

3. 埋め込みコードをコピーします。

4. Wixエディタで＋追加をクリックし、埋め込みコードを選択します。コードスニペットを貼り付け、要素のサイズを調整して、公開をクリックします。

Wixのサイトまたはウィジェットの埋め込みガイドでは、埋め込みコードにHTTPSが必要であることなど、この要素の制限事項が説明されています。

方法3：Velo by Wixを使ってカスタムスライダーを構築する

サードパーティアプリや外部の埋め込みに頼りたくない場合は、Velo by Wixを使って自分でスライダーをコーディングできます。基本的なアプローチは、エディタで2枚の画像を重ね、ドラッグハンドルとして線やボックス要素を追加し、開発者モードをオンにして、訪問者のドラッグ操作に応じて上の画像の表示範囲を変えるJavaScriptを記述するというものです。

ただし、ここに落とし穴があります。Veloのページコードでは、要素上を移動するポインターを追跡できません。標準Wix要素で利用可能なイベントハンドラーは、クリック、フォーカス、要素への出入り、ビューポートでの表示状態をカバーしていますが、マウスムーブハンドラーやタッチイベントのサポートはありません。ドラッグ式スライダーにはその両方が必要です。

理想的な方法は、HTML iFrame要素内に通常のDOM JavaScriptを記述し、Veloはデータの受け渡しにのみ使用することです。この時点で、方法2と同じ埋め込みの仕組みを使うことになりますが、コード、レスポンシブ対応、そしてすべてのバグを自分で管理する必要があります。

試してみたい方は、以下の手順に従ってください：

1. Wixエディタで、上部バーの開発者モードをクリックしてデベロッパーモードをオンにします。Wix Studioの場合は、左サイドバーのコーディングを開始をクリックします。

2. スライダーを配置したい場所にHTML埋め込み要素を追加し、画像のサイズに合わせて調整します。

3. その要素内に比較スライダーのマークアップ、スタイリング、ポインターイベント処理を記述し、すべてのブレークポイントでマウスドラッグとタッチスワイプの両方をテストします。

スマートなノーコードウィジェットでWixサイトを強化する

Jotformビフォーアフタースライダーウィジェットは、月額のソフトウェア費用を増やしたりVeloでタッチイベントをデバッグしたりすることなく、ビフォーアフターの変化を見せる最も手軽な方法です。一度設定してコードを貼り付けたら、あとは次の作業に進むだけです。

このウィジェットは、Jotformが提供する150以上の無料ウェブサイトウィジェットのひとつでもあります。ポートフォリオやサービスサイトと相性の良いウィジェットをいくつかご紹介します：

• Googleレビュー：実績のすぐ横にクライアントの評価を表示でき、成果と称賛を同じページにまとめられます。
• FAQ：「どのくらい時間がかかりますか」「費用はいくらですか」といった質問に、訪問者がメールで問い合わせる前に回答できます。
• ポップアップ：ギャラリー全体をスクロールしたものの、まだ予約には至らない訪問者のメールアドレスを取得できます。
• トップに戻る：ポートフォリオページが長くなり、上までスクロールするのが面倒になったら追加する価値があります。

いずれもスライダーで使用したのと同じHTML埋め込み要素でインストールできるため、2つ目や3つ目のウィジェットの追加も数分で完了します。

まだサイトを構築中の方は、Wixウェブサイトの作り方ガイドでプラットフォームの全体像を確認できます。また、Jotform-Wix連携ページでは、お問い合わせフォームや予約フォームの追加方法を解説しています。ウィジェットディレクトリ全体をチェックして、あなたのサイトに足りないものを見つけてみましょう。