「お客様から『こんな動きのあるトップページにしたい』とデザインデータをもらったけど、SWELLだけではうまく再現できない…」
WordPressテーマSWELLを使ってサイト制作をしているWEBデザイナーやコーダーの方なら、一度はこんな悩みにぶつかったことがあるのではないでしょうか。SWELLは扱いやすく美しいデザインが作れるテーマですが、標準機能だけでは表現しきれない、こだわりのスライダー演出を求められる場面も少なくありません。
そんなときに頼りになるのが、プラグイン「Smart Slider」です。この記事では、SWELLでお客様の要望デザインを実現するために、Smart Sliderの基本的な使い方から実装のコツまで、初心者の方にもわかりやすく解説していきます。
「Smart Slider」を使用した弊社の制作実績はこちら。
SWELLでスライダーを実装する前に知っておきたいこと
まずは、SWELLでスライダーを実装する前に押さえておきたい基礎知識から見ていきましょう。
SWELLの標準スライダー機能でできること・できないこと
SWELLにはブロックエディタ上で使えるスライダー機能が用意されており、シンプルな画像の切り替えであれば標準機能だけで十分対応できます。ただし、以下のような要望には対応が難しい場合があります。
- ⚫︎ 画像内の文字やボタンを自由なタイミングでアニメーションさせたい
- ⚫︎ スライドごとに凝ったエフェクト(フェード、ズームなど)を細かく変えたい
- ⚫︎ レイヤーを重ねて動画のような演出を作りたい
こうした「凝った動き」を求められたときは、専用プラグインの活用をオススメします。
スライダー実装プラグインSmart Sliderが選ばれる理由
Smart Sliderは、直感的な操作画面で細かなアニメーションやレイアウトを設定できるスライダープラグインです。
デザイナー・コーダーの視点で見ると、次のようなメリットがあります。
- ⚫︎ コードを書かなくてもマウス操作だけで実装できる
- ⚫︎ レイヤーごとに表示位置やアニメーションを個別調整できる
- ⚫︎ テンプレートが用意されており、ゼロから作らなくてもよい
「動きのあるデザインを再現したいけれど、開発コストはあまりかけたくない」というときに、非常に頼れる選択肢です。
導入前に確認すべき動作環境・注意点
プラグインを追加する際は、以下の点を事前に確認しておくと安心です。
- ⚫︎ WordPressおよびSWELLのバージョンが最新の状態になっているか
- ⚫︎ 他に導入しているプラグインとの競合が起きないか
- ⚫︎ 本番環境に反映する前に、テスト環境で動作確認を行っているか
特にサイトの改修案件では、既存プラグインとの相性トラブルが起きやすいため、事前確認を丁寧に行うことをおすすめします。
Smart Sliderの基本的な使い方
ここからは、実際にSmart Sliderを使ってスライダーを作成し、ページに設置するまでの流れを紹介します。
Smart Sliderのインストール
まずはプラグインを導入します。
- 1. WordPress管理画面の「プラグイン」→「新規追加」を開く
- 2. 「Smart Slider」を検索してインストール・有効化する
- 3. 管理メニューに追加された「Smart Slider」から設定画面を開く
スライダーの作成方法(画像・テキスト・エフェクト設定)
スライダー本体の編集画面では、次のような設定が可能です。
- ⚫︎ スライドの追加・削除、画像のアップロード
- ⚫︎ テキストやボタンをレイヤーとして自由に配置
- ⚫︎ 各レイヤーごとのアニメーション(表示タイミング・動き方)の設定
- ⚫︎ スライド切り替え時のエフェクト選択
SWELLの固定ページ・投稿へのスライダー埋め込みについて
作成したスライダーは、以下のいずれかの方法でSWELLのページに設置できます。
- ⚫︎ Smart Slider側で発行されるショートコードをコピーして、ブロックエディタの「ショートコード」ブロックに貼り付ける
- ⚫︎ 固定ページ(投稿ページ)の編集画面にある「SmartSlider」をクリック、スライダーを選択します。※テキストエディタ、ブロックエディタどちらにもあります。
設置後は、必ずプレビューで表示崩れがないかを確認しましょう。
オリジナルデザインをSWELL×Smart Sliderで実現するコツ
最後に、実務でよくある要望パターンをふまえた実装のコツをご紹介します。
レスポンシブ対応でスマホ・PC両方で崩れないデザインにする方法
スライダーはPCでは綺麗に見えても、スマホで崩れてしまうケースが少なくありません。次の点を意識すると安心です。
- ⚫︎ デバイスごとにレイヤーの表示・非表示を切り替えられる設定を活用する
- ⚫︎ 文字サイズや余白は、実機に近いプレビューで必ず確認する
- ⚫︎ 画像は端末サイズに応じて最適なものが表示されるよう設定する
よくあるデザイン要望別・実装テクニック集
お客様からのご要望として多いパターンと、その考え方をまとめました。
- ⚫︎ フルスクリーン表示にしたい：スライダーの表示エリアを画面幅いっぱいに広げる設定を活用する
- ⚫︎ 動画を背景に使いたい：動画レイヤーを使い、テキストやボタンを上に重ねて配置する
- ⚫︎ 文字を段階的にふわっと表示させたい：レイヤーごとにアニメーションの開始タイミングをずらして設定する
いずれも、レイヤーの重なりと設定調整がデザイン再現のカギになります。
表示速度・SEOへの影響と対策
動きのあるスライダーは魅力的な反面、画像や動画の容量によっては表示速度に影響を与えることがあります。
制作時には以下を意識しましょう。
- ⚫︎ 使用する画像はできるだけ軽量化してから設置する
- ⚫︎ 不要なスライドやエフェクトを増やしすぎない
- ⚫︎ 表示速度に関する各種チェックツールで、公開前に確認する
サイトの見た目だけでなく、快適に閲覧できるかどうかも、お客様満足度を左右する大切なポイントです。
まとめ
SWELLの標準機能だけでは表現しきれない、こだわりのスライダー演出も、Smart Sliderを活用すれば実現しやすくなります。
今回ご紹介した手順やコツを参考に、お客様の要望にしっかり応えられるWEBサイト制作にぜひ役立ててください。
LINEでのお問い合わせ