画像比較スライダーウィジェット

インタラクティブな画像比較スライダーで、ビフォーアフターの変化を視覚的に紹介しましょう。Jotformの画像比較スライダーウィジェットを使えば、比較する2枚の画像を追加し、スライダーの移動方向を横方向または縦方向から選択できます。ドラッグまたはホバー操作の設定、ラベルやキャプションの追加、全画面表示の有効化も可能です。完成したウィジェットは、コーディング不要でウェブサイトに埋め込めます。

Before and After Slider Widget for your website Hero Background image

ビフォーアフタースライダーウィジェットの作成方法

Add image pairs

画像ペアを追加

ビフォーとアフターの画像URLを貼り付け、それぞれの比較にわかりやすいラベルとキャプションを記入します。

Customize the reveal

表示方法をカスタマイズ

比較方向を水平または垂直から選び、区切り線の初期位置を設定し、ドラッグ、クリック、ホバー操作方法を設定します。

Embed it on your website

ウェブサイトに埋め込む

ウィジェットを公開する前に、サイズ、縦横比、色、全画面表示の動作、表示条件を調整します。

ページに合った画像比較スライダーで変化をわかりやすく紹介

ビフォー・アフターの画像を比較

2枚の画像を1つのフレーム内に重ねて表示し、リノベーション、デザイン、美容、修理、商品の変化をひと目で理解できます。

Compare before and after images

水平方向または垂直方向に画像を比較

比較する内容に合わせて区切り線の方向を切り替え、訪問者がドラッグ、クリック、ホバーの操作で変化を確認できるようにします。

Use horizontal or vertical reveal

変化を紹介する小さなギャラリーを作成

画像のペアを最大3組まで追加し、カルーセルナビゲーションを有効にすると、訪問者は複数のプロジェクトの進行段階や導入事例を切り替えて確認できます。

Create a small transformation gallery

Webサイトのデザインに合わせる

幅、画像の比率、角の丸み、区切り線のサイズ、色、ラベル、キャプション、カスタムCSS、全画面表示、スマートフォンでの表示・非表示を設定できます。

Match your website style

ビフォーアフタースライダーをWordPressに埋め込む方法

1埋め込みコードを取得

Jotformのホームページウィジェットをカスタマイズしたら、「無料で試す」をクリックし、生成された埋め込みコードをコピーします。

2ページエディターを開く

ウィジェットを表示したいWordPressの投稿または固定ページを開き、新しいブロックを追加します。

3カスタムHTMLブロックを追加

カスタムHTMLを選択し、Jotformホームページウィジェットの埋め込みコードをHTMLフィールドに貼り付けます。

4更新して表示

更新または公開をクリックし、ページを開いて埋め込まれたウィジェットを確認します。

Jotform ホームページウィジェットが選ばれる理由

Jotformのウィジェットは、ウェブサイトをよりインタラクティブにし、コンバージョンを高めます。星評価やお客様の声を表示するスライダー、ソーシャルプルーフのポップアップ、メディア埋め込みまで、多彩なツールが利用可能です。フォームやランディングページにウィジェットを追加して、データ収集、実績や信頼性のアピール、見込み顧客の獲得を実現できます。コーディングは不要です。

コーディングなしで埋め込む

シンプルな埋め込みコードで、Jotformウィジェットをウェブサイトに追加できます。ウィジェットをカスタマイズし、見た目をプレビューして、カスタムHTMLや埋め込みブロックに対応したあらゆるページに貼り付けるだけ。開発者は一切不要です。

よりインタラクティブなページを作成

Jotform ホームページウィジェットを使って、見込み顧客の獲得、お客様のフィードバックの表示、ソーシャルプルーフの活用、メディアの埋め込み、便利なウェブページツールの追加ができます。各ウィジェットは、訪問者がウェブサイトから直接あなたのビジネスとやり取りできるようサポートします。

必要なときにサポートを受けられる

ウィジェットの設定、カスタマイズ、埋め込み、トラブルシューティングでサポートが必要な場合、Jotformのカスタマーサポートチームが24時間年中無休で対応します。必要なときにいつでもサポートを受けられるので、安心してご利用いただけます。

画像比較スライダーウィジェットの活用シーン

視覚的な比較によって、訪問者が成果を信頼し、品質を理解し、より早く判断できる場所にウィジェットを設置できます。

リフォームやインテリアデザインのページでは、完了したプロジェクトの施工前後の変化を紹介できます。

美容、ウェルネス、フィットネスのサイトでは、お客様の見た目の変化や施術の経過を比較できます。

商品ページでは、アップグレード、修復、編集、機能の改善などをわかりやすく紹介できます。

ポートフォリオや導入事例のページでは、文章だけでは伝わりにくい成果を、視覚的にわかりやすく示せます。

不動産の紹介ページでは、ホームステージング、修繕、造園、リフォーム前後の変化を比較できます。

クリエイティブサービスのページでは、画像のレタッチ、モックアップ、デザインの修正、ブランドの刷新などを紹介できます。

Jotformのフォーム作成ツールで見込み顧客を顧客へと導く

Jotformで訪問者の関心を具体的なアクションにつなげましょう。見込み顧客の獲得、決済の受付、返信の自動化ができる高機能なフォームを、すべて一か所で作成できます。送信された回答はすべてJotformインボックスに届くため、フォローアップやお気に入りのアプリとの連携も簡単です。

無料で今すぐ始める
Convert leads into customers

よくある質問 (FAQ)

  • 画像比較スライダーウィジェットとは何ですか?

    画像比較スライダーウィジェットは、関連する2枚の画像を1つのインタラクティブな表示エリアにまとめて表示できるウィジェットです。訪問者は境界線を左右に動かして、変更前と変更後の画像の表示範囲を切り替えながら、その違いを比較できます。

  • スライダーの方向を選択できますか?

  • 訪問者はどのように区切り線を動かせますか?

  • 仕切り線の初期位置を設定できますか?

  • 複数の比較を表示できますか?

  • ラベルやキャプションを追加できますか?

  • このウィジェットは全画面表示に対応していますか?

  • モバイルでも使えますか?

  • コードを書く必要はありますか?