WordPress でビフォーアフター写真をスライド効果付きで表示する方法

静的な並列画像で劇的な変化を披露しようとすると、少し平坦に感じられることがあります。素晴らしい仕事をしたとしても、訪問者が変化を自分で操作できないと、驚きの要素が失われてしまいます。

製品やサービスのインパクトを強調する最良の方法の1つは、インタラクティブなビフォーアフターのスライダーを使用することだとわかりました。これは、結果が自らを物語るように、私たち自身のプロジェクトでも使用してきた強力なツールです。

この記事では、WordPress サイトにビフォーアフター写真スライダーを追加するための、実績のある2つの方法をご紹介します。初心者向けの簡単なオプションと、より多くのコントロールを求める方向けのカスタマイズ性の高いオプションがあります。

WordPressでビフォーアフター写真スライダーを使用するタイミング

ビフォーアフター画像とは、通常、何らかの変化を示すインタラクティブな画像です。

訪問者はスライダーを使用して、魅力的でインタラクティブな方法で画像のさまざまな「バージョン」を切り替えることができます。

オンラインストアを WooCommerce のようなプラグインを使用して運営している場合、ビフォーアフター写真は製品やサービスの効果を示すことができます。

顧客が共感できる「ビフォー」写真と、望ましい「アフター」写真を示すだけで十分です。これにより、買い物客は「ビフォー」の状態から「アフター」の状態に移行させるものを買いたくなるでしょう。

あなたがアフィリエイトマーケターである場合、ウェブサイトに説得力のあるビフォーアフター写真を掲載することは、アフィリエイトリンクを宣伝し、より多くの売上を上げるための素晴らしい方法です。

スライダーをドラッグして「後」の写真を明らかにするのも、エンゲージメントを高める簡単な方法であり、訪問者をサイトに長く滞在させることができます。これは、ページビューを増やし、WordPressの直帰率を減らすのにも役立ちます。

それでは、スライド効果を使用してWordPressでビフォーアフター写真をどのように作成できるか見てみましょう。以下のクイックリンクを使用して、使用したい方法に直接ジャンプしてください。

• 方法1：無料プラグインを使用して変更前後の写真を表示する（簡単）
• 方法2：SeedProd を使用してビフォーアフター写真を表示する（よりカスタマイズ可能）
• Frequently Asked Questions About Before and After Sliders

方法1：無料プラグインを使用して変更前後の写真を表示する（簡単）

ビフォーアフター写真を作成する最も簡単な方法は、Ultimate Before After Image Slider & Gallery – BEAF プラグインを使用することです。

BEAFプラグインを使用すると、水平および垂直スライダーを作成し、さまざまなラベルと色で画像をカスタマイズできます。

重要なヒント: スライダー効果を完全に機能させるには、「ビフォー」と「アフター」の画像はまったく同じサイズ（ピクセル単位の幅と高さ）である必要があります。これにより、正しく配置されます。アップロードする前に、任意の写真編集ツールを使用して画像をトリミングまたはリサイズできます。

まず、Ultimate Before After Image Slider & Gallery (BEAF) プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、ダッシュボードの Before and After Slider » Add New に移動します。

まず、画像スライダーの名前を入力します。これは参照用ですので、識別するのに役立つものであれば何でも使用できます。

これで完了したら、「ビフォー画像」セクションまでスクロールして「ビフォー」画像を追加できます。

ここで「アップロード」をクリックし、WordPressのメディアライブラリから画像を選択するか、コンピューターから新しい画像をアップロードしてください。

検索エンジンがこの画像を理解し、適切なユーザーに表示できるようにするには、画像代替テキストを追加することをお勧めします。これを行うには、「画像代替」フィールドに入力するだけです。

altテキストの詳細については、画像SEOの初心者向けガイドをご覧ください。

これで完了したら、「アフター画像」セクションまでスクロールします。

上記と同じ手順で、「アフター」画像を追加できるようになりました。この画像にも必ず代替テキストを追加してください。これはWordPress SEOにとって重要です。

タイトルと説明を追加して（キャプションのように）、画像の下にテキストを表示することもできます。

例えば、訪問者にスライダーを操作してもらうように促すことができます。これは、インタラクティブなスライダーの仕組みに慣れていない訪問者を誘導するのに最適な方法です。

これは、画像にコンテキストを追加する簡単な方法でもあります。

テキストを追加するには、「スライダータイトル」または「スライダー説明」フィールドに単純に入力してください。

「続きを読む」URLを追加することもできます。これは、WordPressウェブサイトの任意の投稿またはページ、あるいは外部ウェブサイトにリンクできます。たとえば、スライダー画像で紹介されている製品を購入できるページに訪問者を誘導することができます。

このリンクは、ビフォー/アフター画像の下、および使用中のスライダータイトルまたは説明の下に表示されます。

他のウェブサイトにリンクする場合は、「新しいタブ」を選択することをお勧めします。そうすることで、訪問者をWordPressブログから離れさせないようにできます。

これが完了したら、「向きスタイル」セクションのサムネイルのいずれかをクリックして、縦長または横長のどちらのスライダーを作成するかを選択できます。

その後、画面の上部までスクロールし、「オプション」をクリックします。

ここでは、「デフォルトオフセット」が0.5に設定されていることがわかります。これは、ページが最初に読み込まれたときに、訪問者が「ビフォー」画像の半分を表示することを意味します。

ビフォー画像の表示を増やしたい場合は、0.6、0.7、またはそれ以上の大きな数値を入力してください。

ビフォー画像をすべて表示したい場合は、1 と入力してください。

これにより、次の画像でわかるように、スライダーがビフォー画像のの上部または右側に配置されます。

デフォルトでは、訪問者が画像にマウスカーソルを合わせたときに、プラグインは「ビフォー」と「アフター」のラベルを表示します。

これらのラベルをより説明的なものに置き換えたい場合があります。

これを行うには、「Before Label」と「After Label」フィールドに直接入力してください。

デフォルトでは、訪問者はドラッグアンドドロップでスライダーを操作します。一部のユーザー、特に移動に問題を抱えている場合や、スマートフォンやタブレットのような小さなデバイスを使用している場合は、これが難しいと感じるかもしれません。

それを踏まえて、訪問者がスライダーを操作する方法を変更したい場合があります。

「マウスホバーでスライダーを移動？」の横にある「オン」ボタンを切り替えると、訪問者は画像をマウスでホバーするだけでスライダーを移動できるようになります。

「クリックで移動」ボタンを有効にすると、訪問者は画像上のどこかをクリックして、スライダーをその位置に移動させることができます。

これらのオプションはアクセシビリティを向上させることができますが、標準のスライダーの動作を変更します。ウェブサイトの訪問者にとって最も直感的に感じるものを確認するために、テストすることをお勧めします。

次に、「スタイル」タブをクリックします。

ここでは、さまざまなラベル、背景、見出し、説明、および「続きを読む」ボタンに使用される色を変更できます。これにより、ビフォーアフター画像をWordPressテーマに合わせたり、ウェブサイトのデザインの他の部分から際立たせたりすることができます。

フォントサイズやテキストの配置を変更することもできます。

スライダーの設定が完了したら、「公開」ボタンをクリックします。

これにより、ビフォーアフター画像とスライダーを任意のページ、投稿、またはウィジェット対応エリアに追加できるショートコードが作成されます。

ショートコードの配置方法の詳細については、WordPressでショートコードを追加する方法に関するガイドを参照してください。

ショートコードをサイトに追加した後、「公開」または「更新」ボタンをクリックするだけで、変更前後の画像とスライダー効果がライブになります。

方法2：SeedProd を使用してビフォーアフター写真を表示する（よりカスタマイズ可能）

既存の投稿にシンプルなスライダーを追加したいだけであれば、方法1の無料プラグインが最適な選択肢です。しかし、コンバージョン率の高いランディングページ、セールスページ、またはビフォーアフター比較機能を備えたカスタムテーマを作成したい場合は、SeedProdの使用をお勧めします。これは、デザインを完全に制御できる強力なウェブサイトビルダーです。

WPBeginnerでは、Awesome Motiveファミリー内の多くのパートナーブランドのカスタムウェブサイトをデザインするために、SeedProdを幅広く使用しています。そのドラッグアンドドロップインターフェイスにより、コンバージョン率の高いページを迅速に作成する柔軟性が得られます。

SeedProd は、最高のドラッグ＆ドロップWordPressページビルダーです。300以上の既製のテンプレートが付属しており、コンバージョン率の高いランディングページ、セールスデザイン、カスタムWordPressテーマなどを作成するために使用できます。

また、すぐに使える [Before After Toggle] ブロックもあり、ユーザーが操作できる美しいビフォーアフター画像を作成するために使用できます。

左側のメニューからブロックをドラッグし、作業中の任意のページデザイン（セールスページを含む）にドロップするだけです。

製品を販売するためにWooCommerceを使用している場合、SeedProdはWooCommerceと統合されており、特別なeコマースブロックも付属しています。WooCommerce製品のプロモーションにビフォーアフター画像を使用する予定がある場合は、これが最適です。

SeedProdの使用方法については、WordPressでカスタムページを作成する方法に関するガイドをご覧ください。

ページを作成した後、デザインにビフォーアフター画像を簡単に追加できます。SeedProdのページエディターで、「Before After Toggle」ブロックを見つけるだけです。

次に、このブロックをデザインのどこにでもドラッグアンドドロップして、ページレイアウトに追加できます。

これで完了したら、「ビフォーアフター切り替え」ブロックを選択してクリックするだけです。左側のメニューが更新され、ビフォーアフター画像を作成するために使用できるすべての設定が表示されます。

まず、ビフォー画像として使用したい画像を追加する必要があります。「ビフォー画像」の下で、「自分の画像を使用」または「ストック画像を使用」のいずれかをクリックして、使用したい画像を選択してください。

デフォルトでは、SeedProd はこの画像の上に「Before」ラベルを表示します。ただし、[Before Label] フィールドに別の説明的なテキストを入力することで変更できます。

これで完了したら、「アフター画像」セクションまでスクロールします。

上記と同じ手順で、画像を追加し、デフォルトの「後」ラベルをカスタマイズできるようになりました。

SeedProd は、垂直または水平のスライド効果を追加できます。

これらの2つのスタイルを切り替えるには、「スライダーの向き」セクションまでスクロールし、「縦」または「横」のいずれかをクリックします。

デフォルトでは、訪問者はスライダーをドラッグして、ビフォー画像とアフター画像を移動します。

ただし、一部のユーザーは、画像の上にマウスをホバーしてスライダーを移動する方が簡単だと感じるかもしれません。これは、訪問者がスライダーをより大きくドラッグする必要がある大きな画像では特に当てはまります。

この設定を試すには、左側のメニューで「マウスオーバー時に移動」を有効にします。

次に、変更前と変更後の両方の画像にカラーオーバーレイを追加したい場合があります。これにより、画像がカラー スキームの残りの部分に溶け込むようにしたり、背景から際立たせたりすることができます。

色付きのオーバーレイを半透明にして、より繊細な効果を作成することもできます。

別の色を試すには、[Overlay Color] セクションをクリックし、表示されるポップアップで変更を行います。

これで、[Comparison Handle] セクションをクリックして展開することで、スライダーハンドルをカスタマイズできます。

デフォルトでは、SeedProd は「before」画像の半分と「after」画像の半分を表示します。これを変更するには、[Handle Initial Offset] スライダーをドラッグするだけです。

ビフォー画像の一部を少なく表示するには、スライダーを左にドラッグして数値を小さくします。ビフォー画像の一部を多く表示するには、スライダーを右にドラッグして数値を大きくします。

次に、「ハンドルの色」設定を使用してスライダーの色を変更できます。

「Handle Thickness」スライダーを使用して、ハンドルを太くしたり細くしたりすることもできます。

このように、ハンドルを目立たせたり、より控えめな効果を作成したりできます。

ハンドルに満足したら、円を変更したくなるかもしれません。「円の幅」設定を使用して円を大きくしたり小さくしたり、円の半径を変更してシャープな角や丸い角を作成できます。

変更を加えると、ライブプレビューが自動的に更新されるため、さまざまな設定を試して最適なものを見つけることができます。

円形に満足したら、その円の中の三角形のサイズを変更したくなるかもしれません。例えば、円を大きくした場合、三角形のサイズも大きくしたいと思うかもしれません。

この変更を行うには、「三角形のサイズ」スライダーをドラッグして、見た目が気に入るまで調整してください。

これで、SeedProdページに新しいブロックを追加し、コンテンツをカスタマイズし続けることができます。

ページの見た目に満足したら、保存ボタンの横にある矢印をクリックし、「公開」を選択してください。

これで、ウェブサイトにアクセスすると、変更前と変更後の画像がライブで表示されるようになります。

ビフォーアフター スライダーに関するよくある質問

WordPress でビフォーアフター写真スライダーを作成する方法について、読者からよく寄せられる質問のいくつかに回答しました。

ビフォーアフター写真用のプラグインは無料ですか？

方法1で紹介されているUltimate Before After Image Slider & Galleryプラグインは完全に無料です。SeedProdにも無料版がありますが、「ビフォーアフター切り替え」ブロックにアクセスするには、プレミアムプランのいずれかが必要になります。

ビフォーアフターのスライダーを作成するのに、どちらの方法が良いですか？

最適な方法は、ニーズによって異なります。ブログ記事に簡単なスライダーをすばやく追加するには、無料プラグインが優れた選択肢です。よりデザインのコントロールが必要な場合や、カスタムランディングページを作成している場合は、柔軟性の高いSeedProdをお勧めします。

2枚以上の画像でスライダーを作成できますか？

このガイドのツールは、2つの画像を比較するために特別に設計されています。複数の画像をシーケンスで表示する必要がある場合は、Soliloquy のような専用の WordPress スライダープラグインを使用することをお勧めします。

ビフォーアフターのスライダーはウェブサイトの表示速度を低下させますか？

どの画像でもそうですが、大きなファイルはサイトの読み込み速度に影響を与える可能性があります。これを防ぐために、WordPress にアップロードする前に、ウェブ用に画像を最適化することを常にお勧めします。

WordPress画像ヒントとトリックをさらに学ぶ

WordPressで画像をカスタマイズするためのヒントやコツをもっと知りたいですか？これらのガイドをご覧ください：

• WordPressでInstagram風の写真フィルターを追加する方法（ステップバイステップ）
• WordPressでフリップボックスのオーバーレイとホバーを作成する方法
• WordPressで画像にウォーターマークを自動追加する方法
• WordPressでAIを使って画像を生成する方法
• WordPressにアニメーションGIFを追加する方法（正しい方法）
• WordPressでレスポンシブスライダーを簡単に作成する方法

この記事が、WordPressウェブサイトにスライド効果でビフォーアフター写真を挿入する方法を学ぶのに役立ったことを願っています。また、WordPressメディアライブラリにカテゴリとタグを追加する方法に関するガイドや、おすすめのWordPressアイキャッチ画像プラグインもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。