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

ウェブサイトで劇的な変化を見せたいですか？静的な並列写真は、訪問者が操作できないため、「すごい」効果を失いがちです。

インタラクティブな「ビフォーアフター」スライダーが、製品やサービスのインパクトを強調する最良の方法であることを見出しました。ユーザーを即座に惹きつけ、結果を自分で語らせることができます。

この記事では、WordPressにビフォーアフター写真スライダーを追加するための2つのテスト済み方法を共有します。簡単な無料プラグインと、私たちが自身のブランドで使用している強力なカスタムビルダーについて説明します。

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

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

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

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

単に、顧客が共感できる「ビフォー」写真と、望ましい「アフター」写真を示すだけで十分です。これにより、買い物客は「ビフォー」の状態から「アフター」の状態へ導く製品を購入したくなります。

アフィリエイトマーケターであれば、ウェブサイトで説得力のあるビフォーアフター写真を表示することは、アフィリエイトリンクを宣伝し、より多くの売上を上げるための優れた方法です。

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

さて、スライド効果を使用してWordPressでビフォーアフター写真を作成する方法を見てみましょう。簡単なリンクを使用して、使用したい方法に直接ジャンプしてください。

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

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

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

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

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

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

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

次に、「ビフォー画像」セクションまでスクロールして、「ビフォー」画像を追加できます。

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

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

代替テキストの詳細については、画像SEOの初心者向けガイドを参照してください。

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

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

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

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

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

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

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

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

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

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

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

ここでは、「デフォルトオフセット」が0.5（つまり50%）に設定されていることがわかります。これは、ページが最初に読み込まれたときに、訪問者が「変更前」画像と「変更後」画像の半分ずつを見ることを意味します。

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

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

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

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

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

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

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

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

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

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

これらのオプションはアクセシビリティを向上させることができますが、標準のスライダーの動作を変更します。ウェブサイトの訪問者にとって最も直感的に感じるものを確認するために、デスクトップとモバイルの両方でテストすることをお勧めします。「ホバー」効果は、一般的にタッチスクリーンでは機能しないことに注意してください。

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

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

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

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

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

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

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

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

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

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

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

また、すぐに使える [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にも無料バージョンがありますが、「Before After Toggle」ブロックにアクセスするにはプレミアムプランのいずれかが必要です。

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

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

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

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

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

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

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

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

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

この記事が、WordPressウェブサイトにスライド効果付きのビフォーアフター写真を追加する方法を学ぶのに役立ったことを願っています。また、WordPressメディアライブラリにカテゴリとタグを追加する方法に関するガイドや、最高のWordPressのアイキャッチ画像プラグインの専門家による厳選リストもご覧いただけます。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。