Looking for the best before and after WordPress plugin?
A before and after WordPress plugin lets you compare two images side-by-side using a draggable slider. It’s perfect for showing transformations, product results, or visual changes on your site.
I’ve tested quite a few of these on client sites and my own pages. Whether you’re showing a makeover, redesign, or restoration project, these tools make it easy to highlight the difference.
In this guide, I’ll share the best before and after plugins for WordPress and what to expect from each one.
| プラグイン | Free Plan | 価格 | Slider Type | Editor Compatibility |
|---|---|---|---|---|
| シードプロ | いいえ | From $39.50/year | Horizontal & Vertical | SeedProd Builder |
| BEAF | はい | Pro from $19/year | Horizontal & Vertical | Block Editor, Elementor, Divi, WPBakery |
| Ultimate Addons | いいえ | From $57/year | Horizontal & Vertical | Elementor |
| Twenty20 | はい | 無料 | Horizontal & Vertical | Shortcodes, Page Builders |
| Image Comparison Block | はい | 無料 | Horizontal & Vertical | Block Editor |
WordPressのビフォーアフター・プラグインとは？
ビフォーアフタースライダープラグインは、訪問者が2つの異なる画像の間にスライダーをドラッグすることができますあなたのウェブサイトのためのアドオンです。ハンドルをドラッグすると、1つの画像が次の画像に切り替わります。
多くのウェブサイトは、製品やサービスの効果を強調するためにbefore afterプラグインを使用しています。例えば、同じ人がエステやメークアップを受ける前と後の写真を見せることができます。
あるいは、このタイプのプラグインは、複雑なトピックを図解して説明するのに役立ちます。例えば、気候変動についての意識を高めたいとしましょう。その場合、ビフォーアフターウィジェットを使って、地球温暖化の影響前と影響後の同じ風景の写真を表示することができます。
結局のところ、ビフォーアフターのWordPressプラグインは、WordPressウェブサイトの所有者が簡単に2つの画像の違いや類似点を示すのに役立ちます。
では、最高のWordPressビフォーアフター・スライダー・プラグインは何でしょうか？調べてみよう。
最高のWordPressビフォーアフター・プラグイン
以下に、あなたのWordPressウェブサイトに最適なビフォーアフター・プラグインをご紹介します。各プラグインの仕組みや機能性、モバイルフレンドリーかどうか、使いやすさなどを見ていきましょう。
ビデオガイド
1.シードプロ
| Pricing: Starts at $39.50/year |
| Free Plan / Trial: No |
| Standout Features: |
| 🔹 Drag-and-drop builder 🔹 Mobile preview toggle 🔹 Before/after block with full customization |
| Rating: A+ |
| Best For: Beginners who want full site editing and image comparison in one plugin |
SeedProdは、WordPressのための最高のドラッグアンドドロップウェブサイトビルダーです。そのユーザーフレンドリーなビジュアルインターフェースにより、ランディングページ、多目的WordPressテーマ、柔軟なサイドバーレイアウトをコードなしで作成することができます。
SeedProdのWordPressブロックを使って、ウェブサイトのどのエリアもカスタマイズすることができます。画像ギャラリー、価格テーブル、コールトゥアクションボタン、カウントダウンタイマーなど、高度な機能でサイトを強化することができます。
そのブロックのひとつが、強力なBefore Afterトグルです。これを使えば、2つの画像を表示して、その違いを並べて比較することができます。
このブロックには、水平と垂直のレイアウト、オーバーレイの前後の色、ラベルが含まれています。また、インタラクティブな画像スライダーや、タイポグラフィ、色、パディング、スペーシングなどの高度なカスタマイズも設定できます。
SeedProdは100％モバイルフレンドリーなので、すべてのデザインがさまざまなモバイルデバイスに完璧に適応します。さらに、ライブモバイルプレビュー機能や、モバイルまたはデスクトップデバイス上で特定のデザイン要素を表示または非表示にするオプションも含まれています。
このプラグインを使えば、HTML、CSS、jQuery、ショートコードの知識は一切必要ありません。完全にコードフリーなので、開発者の手を借りずにサイトのあらゆる部分を視覚的にカスタマイズすることができます。
SeedProdは、人気のWordPressプラグインやテーマとの完全な互換性を提供します。また、主要なメールマーケティングツール、WooCommerce、Zapierともシームレスに動作します。
特徴
- ドラッグ＆ドロップ式ページビルダー
- WordPressテーマビルダー
- 近日公開とメンテナンス・モード
- カスタム404ページモード
- ワードプレスのログインページモード
- 加入者管理ダッシュボード
- ユーザーアクセス制御
- ドメインマッピング
- ダイナミックテキスト
価格SeedProdの価格は年間39.50ドルから。
2.BEAF - 究極のビフォーアフター画像スライダー＆ギャラリー
| Pricing: Free, Pro starts at $19/year |
| Free Plan / Trial: Yes |
| Standout Features: |
| 🔹 Unlimited sliders 🔹 Slider templates 🔹 Page builder support |
| Rating: B+ |
| Best For: Bloggers and small sites wanting a free image comparison plugin |
BEAFはWordPress用の無料のビフォーアフター画像スライダーです。あなたのサイトにスライダーを無制限に追加でき、2つの画像の比較を簡単に表示できます。
このプラグインは、水平と垂直のレイアウト、タイトル、説明、続きを読むボタンが付属しています。また、ラベルや背景色のカスタマイズも可能です。
管理画面は直感的で使いやすく、便利なショートコードジェネレーターを備えています。また、あなたのWordPressサイト上の任意の場所にビフォーアフターの写真を埋め込むことができます。
特徴
- マルチカラムのビフォーアフター画像ギャラリー
- オーバーレイを無効にする機能
- マウスホバーオプション
- スライダーテンプレート
- SEOフレンドリー・ディスクリプション
- 100％モバイル対応
BEAFは、WPBakery、Elementor、Visual Composer、Divi、Beaver Builder、WordPressブロックエディタ（Gutenberg）など、人気のページビルダーもサポートしています。
価格BEAFの無料版はWordPressのプラグインリポジトリからダウンロードできます。プロ版の価格は年間19ドルからです。
3.究極のアドオン ビフォーアフタースライダー
| Pricing: Starts at $57/year |
| Free Plan / Trial: No |
| Standout Features: |
| 🔹 Elementor integration 🔹 Image resizing and slider controls 🔹 Part of a full widget pack |
| Rating: B |
| Best For: Elementor users looking to expand their widget library |
Ultimate Addonsは、ページビルダーの機能を拡張する有名なWordPressプラグインです。Elementor Before and After Slider用のUltimate Addonsを使えば、WordPressサイトにレスポンシブ画像比較を素早く簡単に追加できます。
画像やスクリーンショットのサイズ変更、スライダーの向きや配置の設定、特定の色のカスタマイズなど、SeedProdと同様の機能を提供しています。また、縦型と横型のスライダーを選択したり、1つのページに複数のスライダーを追加することもできます。
Ultimate Addonsのちょっとした落とし穴は、ウェブサイトに別のWordPressプラグインを追加する必要があることです。SeedProdのようなプラグインは、1つのプラグインでビジュアルページ構築とビフォーアフター機能を提供します。
特徴
- レスポンシブ・ビフォー・アフター・スライダー
- Elementorページビルダーとの互換性
- このプラグインには、他にも多くのウィジェットとモジュールが含まれています。
- カスタマーサポートのための豊富なナレッジベースとチュートリアル
価格アルティメットアドオンバンドルは年間57ドルから。
4.ビフォーアフター
| Pricing: Free |
| Free Plan / Trial: Yes |
| Standout Features: |
| 🔹 Simple shortcode-based setup 🔹 Responsive and minimal 🔹 Page builder support |
| Rating: B |
| Best For: Users who want a lightweight comparison plugin without extra features |
Twenty20 Image Before-Afterは、もう一つの無料のビフォーアフターWordPressプラグインです。このプラグインを使用すると、メディアライブラリから2つの画像を並べて表示することができますので、ウェブサイトの訪問者が違いを比較することができます。
このプラグインは、シンプルなWordPressプラグインです。
このプラグインはスライドショーウィジェットのパラメータを設定するためにショートコードを使用します。画像サイズ、前後のテキスト、スライダーの方向、オフセット、整列などを入力してショートコードをカスタマイズできます。
Twenty20は人気のページビルダーにも対応しており、初心者の方でもビフォーアフターのスライダーを視覚的にサイトに追加することができます。
特徴
- レスポンシブ・モバイル・フレンドリー
- 最小限のユーザーインターフェース
- 画像のaltを画像のaltとタイトルとして使用できます。
- 人気のページビルダーをサポート
価格このプラグインは完全に無料です。
5.画像比較ブロック
| Pricing: Free |
| Free Plan / Trial: Yes |
| Standout Features: |
| 🔹 Built for Gutenberg 🔹 Controls for slider movement 🔹 Custom label styling |
| Rating: B+ |
| Best For: Bloggers using the block editor who want something fast and free |
画像比較ブロックは、ブロガーや中小企業サイトのための超シンプルなビフォーアフターWordPressプラグインです。あなたのウェブサイトの訪問者が水平または垂直レイアウトで2つの画像を比較することができます。
このプラグインはWordPressのテキストエディタ内で動作し、WordPressブロックを使ってウィジェットを設定することができます。
ブロックの設定には、スライダーの表示比率や向きを変更したり、スワイプ、クリック、ホバーでの移動から選択するオプションが含まれています。さらに、オーバーレイやテキストの色、ラベル、タイポグラフィなどを数回のクリックで変更できます。
特徴
- スライダーハンドルの動きをコントロール
- ビフォーアフター用カスタムラベル
- ラベルの位置とスタイルのオプション
- オーバーレイ機能
- ワードプレス専用ブロック
価格Image Comparison Blockは無料のWordPressプラグインで、プレミアムバージョンはありません。
Popular Use Cases for Before and After Plugins
You don’t need to be a designer or developer to use a before and after plugin. These tools are useful across all kinds of websites, especially when visuals tell a better story than words.
- Beauty and cosmetic websites: Show the results of skincare treatments, makeup looks, or procedures.
- Interior design or home renovation: Highlight changes to rooms, kitchens, or outdoor spaces.
- Landscaping and gardening services: Compare yards and gardens before and after work is done.
- Web design portfolios: Show client site transformations or theme redesigns in one view.
- Nonprofits and awareness campaigns: Share visual impact — like community cleanups, builds, or restoration projects.
- Fitness and wellness bloggers: Share progress photos to document physical changes over time.
If your work involves any kind of visual change, before and after sliders can help you prove results quickly and clearly.
FAQ: Before and After WordPress Plugins
Yes, some plugins like SeedProd and Image Comparison Block let you add before and after sliders directly in the WordPress block editor (Gutenberg). You don’t need to install a separate page builder.
BEAF and Twenty20 are both popular free plugins for adding before and after sliders in WordPress. They’re easy to use and work well with popular page builders.
You can use a drag-and-drop plugin like SeedProd to show before and after image comparisons without touching code. Just drag the slider block into place and upload your images.
Most before and after plugins are mobile responsive. SeedProd, BEAF, and Image Comparison Block all adapt to smaller screens so users can swipe or tap the slider on mobile devices.
どのBefore Afterプラグインがベストか？
私たちは、WordPressのための最高のビフォーアフタープラグインはSeedProdであると考えています。ビフォーアフターウィジェットに必要な全ての機能が含まれている一方で、コードなしでWordPressサイトのあらゆるエリアを編集することができます。
SeedProdは、高速で、軽量で、使いやすく、反応が速い。何を待っているのですか？
私たちは、この記事があなたのウェブサイトに最適なビフォーアフターのWordPressプラグインを見つけるのに役立ったことを願っています。ここにいる間、これらの他の比較も気に入るかもしれません：
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
