はじめに
WordPressで構築したウェブサイトやブログのメインビジュアルやコンテンツの一部にスライダーを追加して、アピールしたいページに誘導したいことってありますよね？
今回は、手軽に設置することのできるスライダーや高機能なスライダーについて、私のおすすめするプラグインを3つ紹介していきます。
この記事を執筆・監修する人
浅賀 理生（あさか まさお）
株式会社インスパイアデザイン代表／ディレクター
Web制作に携わって15年以上
主にWordPressを用いて、お客様のWebサイト制作のプロジェクトを進めている立場から、記事を執筆していきます。
スライダーとは
スライダーは、ウェブサイトやブログに、画像やコンテンツをスライドショー形式で表示するためのツールで、ページ内のアピールしたいコンテンツ（最新の商品・サービス、キャンペーン、イベントなど）に誘導したい場合などに使用します。
主にトップページを開いた時に一番初めに表示されるファーストビューと呼ばれる箇所に設置することが多く、効果的にユーザーにアピールすることが可能です。
トップページのファーストビューだけでなく、通常のページやブログ記事の中でも使用され、コンテンツをより視覚的に魅力的に表示するために使用されます。
スライダーを追加できるプラグイン3選
WordPressにスライダーを追加する方法は、プラグイン以外でも存在しますが、今回はプラグインを用いた方法をご紹介していきます。
ちなみにWeb制作の現場では、独自にデザインを起こした企業サイトなどの場合、ほとんどのケースでプラグインは使用せず、javascriptなどで実装させることが多いです。
第一の理由としては、極力プラグインに頼らずWordPressを構築させることでリスクをなくしつつ、軽量なウェブサイトにしたいからです。
リスクとは、WordPress本体とプラグインの相性が悪くエラーが起きてしまったり、バージョンアップの際にうまくいかなかったりなどを指します。
バージョンアップのリスクについて正しく理解したい方は、こちらの記事にまとめていますので気になる方はご覧になってください。
1.MetaSlider（メタスライダー）
まず初めに紹介するプラグインは「MetaSlider（メタスライダー）」です。
プラグインをインストールして、作成画面から画像を選び、任意の場所にショートコードを設置するといった、3ステップでスライダーができてしまうのでめちゃくちゃ簡単です。
MetaSlider の特徴
- ユーザーフレンドリーなインターフェイスで、スライダーを作成・管理するための直感的でわかりやすく、技術的なスキルのないユーザーでも簡単に使用することができる
- レスポンシブデザインで、様々なスクリーンサイズに適応し、どのデバイスの訪問者にも良いUXとなっている
- カスタマイズオプションでは様々なトランジションエフェクト、ナビゲーションコントロール、スライドへのキャプションやリンクの追加などを提供している
- WordPressテーマと互換性があり、どのようなウェブサイトでも簡単に使用することが可能
- Meta Sliderでは、複数のスライダーを作成し、それぞれ独自の設定やカスタマイズを行い、Webサイトの任意のページや投稿に表示することが可能
ざっくりとした使い方の流れ
1.スライドを追加する
2.ショートコードを任意の場所にコピペする
たったこれだけで、こんな感じのスライダーができてしまいます。
2.VK Blocks
次に紹介するのが、ブロックエディタでスライダーを実装する方法です。
結構意外なやり方ですが、めちゃくちゃ手軽で分かりやすい方法なので紹介していきます。
Lightningという国産のテーマを提供している株式会社ベクトルという企業が、提供しているプラグインで、予めデザインされたブロックをボタン一つで簡単に追加できます。
追加したブロックは、設定やデザインなどをかんたんに変更でき、非常に便利です。
このプラグインをインストールすることで、スライダーだけでなく、吹き出し、アイコン、FAQなどのブロックが使用可能です。
VK Blocks の特徴
- 株式会社ベクトルという日本の企業が開発
- スライダーに特化したプラグインではなく、その他様々なブロックが利用可能
- 誰でも簡単に、直感的にスライダーを作成することができる
- カスタムCSSを利用して、コンテンツの見た目を簡単にカスタマイズすることができる
- レスポンシブデザインに対応しており、あらゆるデバイスでコンテンツを表示することが可能
ざっくりとした使い方の流れ
1.インストール
プラグインの新規追加より、「VK Block」と検索し、インストール後に有効化してください。
2.VK Blocksの「スライダー」ブロックを選択
投稿画面よりブロックを追加で、VK Blocksの中の「スライダー」を選択してください。
3.画像等のアイテムを追加する
以上の3ステップでスライダーを追加することができます。
VK Blocks を使ったスライダーでは、投稿の中にブロックを作るため、ショートコードのように使い回すことができませんので、注意が必要です。
3.Smart Slider 3
最後に紹介するのは、かなり高機能な Smart Slider 3 というプラグインです。
レイヤー機能により、1つのスライダーに対し、複数の要素を追加することができます。（背景画像の上に、キャッチコピー、サブコピー、文章、違う画像、ボタンなど）
また、有料版では、アニメーション機能も豊富に使用できるため、ウェブサイトやブログをリッチに見せることが可能です。
各コンテンツのブロックを Smart Slider 3 で作ってしまうようなこともできますので、単なるスライダーだけの使い方ではなく、工夫次第でかなり表現の幅が広がるでしょう。
Smart Slider 3 の特徴
- ドラッグ＆ドロップ式のインターフェースで、技術的スキルのないユーザーでも簡単にスライダーを作成、管理することができる
- トランジションエフェクト、ナビゲーションコントロール、スライドへのキャプション、リンク、その他の要素の追加など、幅広いカスタマイズオプションが用意されている
- レスポンシブデザインで、さまざまなスクリーンサイズに適応し、あらゆるデバイスに最適化される
- アニメーション機能があり、技術的なスキルを必要とせず、複雑で視覚的に美しいアニメーションを作成することが可能
Smart Slider 3 の使い方に関しては、初心者向けに別記事として書いていますので、下記を参考にしてください。
さいごに
今回3つのスライダープラグインをご紹介してきましたが、手軽にサクッとスライダーを追加したいのであれば、MetaSlider もしくは、VK Blocks（但しショートコードではないため使い回しできない）のいずれか、高機能なスライダーを追加したいのであれば、Smart Slider 3でしょう。
スライドアニメーションがあるだけでも目をひきますし、うまく使えばより成果につなげられるスライダーですので、今回ご紹介したプラグインを是非参考にしていただけると嬉しいです。