SWELLで複数の画像を横に動かしたいとき、すぐにプラグインを追加する必要があるとは限りません。トップページのメインビジュアルや記事の紹介にはSWELLの標準機能があり、画像を並べて横へスクロールさせるだけならリッチカラムも使えます。
一方、作品写真をサムネイル付きで見せたい、画像ごとにリンクや説明を設定したい、切り替え効果を細かく調整したいという場合は、画像スライダー用プラグインが便利です。目的を決めずに導入すると、似た機能が重なったり、設定画面が増えて管理しにくくなったりするかもしれません。
この記事では、SWELLで画像スライダーを作る方法を、標準機能とプラグインに分けて整理します。初めてサイトを整える方でも選びやすいように、判断手順、代表的な候補、設定時の注意点まで順番に見ていきましょう。
SWELLの画像スライダーはプラグインなしでも作れる
最初に確認したいのは、スライダーを置く場所と中に表示する内容です。SWELLにはトップページ用の機能と記事内で使えるブロックがあるため、簡単な画像表示や記事紹介なら、追加プラグインを入れずに対応できる場合があります。
トップページの画像ならメインビジュアルを使う
サイトを開いた直後に表示される大きな画像を切り替えたい場合は、SWELLのメインビジュアル機能が第一候補です。管理画面の「外観」から「カスタマイズ」、「トップページ」、「メインビジュアル」と進み、表示内容として画像を選びます。複数の画像を登録すると、トップページ上部に画像スライダーとして表示できます。
SWELL公式マニュアルでは、メインビジュアルに最大5枚まで画像を設定できると案内されています。画像ごとに表示するテキストやリンク先を変えられるため、「サービス紹介」「無料相談」「新しい記事」のように、訪問者に見てほしい内容を順番に案内するときにも使いやすいでしょう。
ただし、メインビジュアルはトップページの印象を決める大きな領域です。画像を増やしすぎると、読んでほしい情報が伝わる前に切り替わってしまいます。初めは2〜3枚ほどで試し、スマートフォンで文字が隠れないか、ボタンを押しやすいかを確認してみてください。
投稿記事の紹介なら記事スライダーを使う
新着記事やおすすめ記事を横に並べたい場合は、SWELLの記事スライダーが合います。画像そのものを登録するメインビジュアルとは異なり、投稿のアイキャッチ画像、タイトル、カテゴリーなどを利用して記事を紹介する仕組みです。記事を追加すると表示内容も更新しやすいため、ブログ型サイトに向いています。
表示する記事はカテゴリーやタグで絞り込めます。例えば、スライダーに載せたい記事だけに「pickup」というタグを付け、そのタグを指定しておけば、通常の記事一覧とは分けて管理できます。公開日や更新日、人気順などで並べ方を調整できる場合もあるので、サイトの目的に合わせて選ぶとよいでしょう。
商品写真や制作事例の画像だけを連続表示したい用途には、記事スライダーは向きません。投稿ページへの案内を目的とする機能だからです。「画像を見せたい」のか、「画像を入口に記事を読んでもらいたい」のかを分けると、選択しやすくなります。
記事内の画像ならリッチカラムも選択肢になる
投稿や固定ページの途中で複数の画像を横に並べたい場合は、SWELLのリッチカラムを試せます。リッチカラムを挿入し、各カラムに画像を配置して横スクロール表示を有効にすると、スマートフォンでも指で横へ送れるレイアウトを作れます。
例えば「制作前」「修正中」「完成後」の3枚を並べる場面や、商品の色違いを見せる場面に便利です。画像だけでなく、見出し、短い説明文、ボタンなどもカラム内に配置できるため、単純な写真スライドより情報量を持たせられます。
一方、自動再生、フェード切り替え、サムネイルナビゲーションなどを細かく指定したい場合は、リッチカラムだけでは希望どおりにならないことがあります。まずは横スクロールで十分かを確認し、不足する機能が明確になってからプラグインを検討すると管理が複雑になりにくいでしょう。
| 表示したい内容 | 最初に試す方法 | 向いている場所 |
|---|---|---|
| 複数の大きな画像 | メインビジュアル | トップページ上部 |
| おすすめ投稿 | 記事スライダー | トップページ |
| 画像と説明文 | リッチカラム | 投稿・固定ページ |
| 細かな切り替え演出 | 専用プラグイン | 投稿・固定ページ・LP |
具体例として、ハンドメイド作品の紹介ページを作る場合を考えてみましょう。トップページで代表作品を3点見せるならメインビジュアル、作品ごとの詳しい記事へ案内するなら記事スライダー、1つの作品を異なる角度から見せるならリッチカラムまたは専用プラグインという分け方ができます。
- トップページの大きな画像はメインビジュアルを先に試す
- 投稿を紹介する目的なら記事スライダーを使う
- 記事内の簡単な横並びはリッチカラムで対応できる
- 自動再生やサムネイル表示が必要なときにプラグインを検討する
SWELLで使う画像スライダープラグインの選び方
標準機能で対応できる範囲がわかったところで、次はプラグインが必要な場面を整理します。機能の多さだけで選ぶのではなく、作りたい表示、編集のしやすさ、スマートフォン対応、更新状況を順番に確認すると判断しやすくなります。
最初にスライダーの目的を一つに絞る
プラグインを探す前に、「何を見せて、次に何をしてほしいか」を一文にしてみてください。例えば「制作事例の写真を見せて問い合わせページへ案内する」「講座内容を3枚で説明する」「商品の色違いを比較してもらう」という形です。目的が決まると、必要な機能も自然に絞れます。
写真を見るだけなら、画像、矢印、ドット表示があれば十分です。画像ごとに別ページへ誘導したい場合はリンク設定、説明を重ねたい場合はキャプション、順番を自由に変えたい場合はドラッグ操作があると便利です。動画や複雑なアニメーションは魅力的ですが、使わない機能まで増やす必要はありません。
特に個人ブログや小規模サイトでは、担当者が変わっても更新できるシンプルさが大切です。法人サイトの場合は、担当者ごとの権限、複数ページへの再利用、公開前の確認手順も含めて選ぶとよいでしょう。
ブロックエディターで挿入できるか確認する
SWELLはブロックエディターを中心に記事を作りやすいテーマです。そのため、プラグイン側にも専用ブロックが用意されていると、完成したスライダーを記事へ挿入しやすくなります。ショートコードだけでも表示できますが、初めての方には挿入場所や記号の管理が少し分かりにくいかもしれません。
MetaSliderのWordPress.org公式ページでは、Gutenberg用ブロック、ショートコード、ウィジェットによる埋め込みが案内されています。このように複数の挿入方法があるプラグインは、投稿本文、固定ページ、ウィジェットなど用途が変わっても対応しやすい傾向があります。
インストール前には、プラグインの説明欄やスクリーンショットで編集画面を見てください。「新しいスライダーを作成」「画像を追加」「保存」「ブロックから呼び出す」という流れが想像できるものなら、運用を続けやすいでしょう。
スマートフォン表示と操作性を優先する
画像スライダーは、パソコンで整っていてもスマートフォンで見切れることがあります。縦長画像と横長画像を混ぜると高さが大きく変わったり、画像内に入れた文字が小さくなったりするためです。導入後は管理画面のプレビューだけでなく、実際のスマートフォンでも確認してください。
矢印が小さすぎないか、指で左右に動かせるか、現在位置を示すドットが見えるかも確認点です。自動再生だけに頼ると、読み終える前に次の画像へ移動する場合があります。停止、前へ、次へといった操作を利用者が選べる構成にすると安心です。
画像内へ長い文章を直接入れるより、画像の下や横にHTMLのテキストとして説明を置く方が読みやすくなります。検索エンジンや読み上げ機能にも内容が伝わりやすくなるため、画像は視覚的な補助、文章は本文という役割分担を意識してみてください。
更新状況とSWELLとの機能重複を見る
プラグインの公式ページでは、最終更新日、対応するWordPressのバージョン、変更履歴、サポート状況を確認できます。更新が止まっているように見える場合は、現在のWordPressやPHP環境で問題なく使えるかを慎重に判断してください。仕様は変わるため、導入時点のWordPress.org公式ページを見ることが大切です。
同時に、SWELL側ですでに有効になっている機能との重複も確認します。例えば、トップページの画像切り替えだけが目的なのに別のスライダープラグインを追加すると、画像読み込み用のCSSやJavaScriptが増える場合があります。必要な場所でだけ読み込まれる設計かも、表示速度を重視するサイトでは確認したい点です。
導入後に表示が崩れたときは、プラグインを一度無効化して変化を見ると原因を切り分けやすくなります。本番サイトへ直接追加する前にバックアップを取り、可能であればテスト環境で確認してみてください。
ブロックエディター対応、スマートフォン操作、更新状況を確認します。
SWELL標準機能と重複する場合は、追加しない選択も検討しましょう。
例えば「固定ページに5枚の施工写真を置き、画像を押すと詳細ページへ移動させたい」という場合は、画像リンクとブロック挿入に対応するプラグインが候補です。一方、「トップページで3枚の告知画像を切り替えたい」だけなら、SWELLのメインビジュアルを先に試す方が設定をまとめやすいでしょう。
- 目的を一文にして必要な機能を絞る
- ブロックエディターから挿入できるかを見る
- スマートフォンで画像と操作ボタンを確認する
- 公式ページの更新情報と対応環境を確認する
- SWELL標準機能と役割が重ならないようにする
候補になるMetaSliderとXO Sliderを比較する
選び方を押さえたら、SWELLの記事内で使いやすい代表的な候補を見ていきましょう。MetaSliderとXO Sliderは、どちらもWordPress.orgで配布されている画像スライダー系プラグインですが、機能の広さや管理画面の考え方に違いがあります。
MetaSliderは挿入方法と拡張性を重視する人向け
MetaSliderは、画像スライダー、スライドショー、カルーセル、ギャラリーなどを作成できるプラグインです。WordPressのメディアライブラリから画像を選び、並び順、キャプション、リンク、切り替え方法などを設定して使います。専用ブロックやショートコードで呼び出せるため、SWELLの記事内にも配置しやすいでしょう。
無料版で画像スライダーを作り、より複雑な動画、投稿フィード、レイヤー表現などが必要になった段階で有料機能を検討する考え方ができます。ただし、無料版と有料版で使える機能は変更される場合があります。導入前にはWordPress.orgとMetaSlider公式サイトの機能表を確認してください。
設定項目が多い分、初めは迷うこともあります。最初のスライダーでは画像サイズ、切り替え間隔、矢印、ドット、リンクだけを設定し、装飾は後から整えると進めやすくなります。多くのページで再利用したい方や、将来表示方法を広げたい方に向く候補です。
XO Sliderはシンプルな画像スライドを作りたい人向け
XO Sliderは、WordPressの管理画面から画像スライダーを作成して呼び出せるプラグインです。国内の記事でも、画像を選び、種類を設定し、リンクを付けられる候補として紹介されています。日本語環境でシンプルに作業したい方は、実際の編集画面を確認して比較するとよいでしょう。
例えば、教室の雰囲気、施術スペース、制作作品、店舗内観など、画像を中心に順番に見せる用途と相性があります。多機能なページビルダーのような操作を求めず、「画像を登録してスライド表示する」という目的に絞りたい場合に検討しやすい選択肢です。
ただし、希望する切り替え効果、リンク、レスポンシブ表示、ブロックへの挿入方法が現在のバージョンで利用できるかは公式ページで確認してください。プラグイン名が似た製品もあるため、管理画面から検索するときは作者名や公式ページの説明まで照合すると安心です。
標準機能を選ぶ方がよいケースもある
MetaSliderやXO Sliderが便利でも、すべてのサイトに必要とは限りません。トップページに数枚の画像を表示する、投稿記事を横に並べる、記事内の画像を指で送れるようにするという目的なら、SWELL標準機能だけで完了する可能性があります。
標準機能を使う利点は、設定場所をSWELLのカスタマイザーやブロックエディターにまとめやすい点です。テーマのアップデートに合わせて調整される機能も多く、別プラグインの画面を覚える負担も抑えられます。サイトを始めたばかりの方は、標準機能で小さく作ってから不足点を探す方法が取り組みやすいでしょう。
反対に、固定ページの途中へ複数の独立したスライダーを置きたい、画像ごとに細かな説明やリンクを管理したい、サムネイル付きの作品ギャラリーを作りたい場合は専用プラグインが役立ちます。導入するかどうかは、標準機能ではできない要件が一つ以上あるかで判断してみてください。
コードによるカスタマイズは保守まで考える
SWELLのリッチカラムやギャラリーブロックへCSSやJavaScriptを追加し、独自のスライダーを作る方法もあります。無限ループや特殊な動きを実現しやすい一方、テーマ、WordPress、外部ライブラリの更新後に表示確認が必要です。コードを貼り付けた時点で終わりではなく、保守も作業に含まれます。
個人・小規模サイトでコード管理に不安がある場合は、標準機能か管理画面で完結するプラグインを選ぶ方が運用しやすいでしょう。法人サイトで制作会社や担当エンジニアが管理する場合は、読み込むライブラリ、記述場所、更新手順、削除方法を記録しておくと引き継ぎがスムーズです。
追加CSSやコードスニペットを使う場合も、作業前のバックアップが欠かせません。表示が崩れたときに元へ戻せるよう、追加した日付と目的をメモし、コードを一度に大量追加せず少しずつ確認してください。
| 方法 | 向いている人 | 確認したい点 |
|---|---|---|
| SWELL標準機能 | 設定を増やしたくない人 | 希望する表示場所に対応するか |
| MetaSlider | 機能と挿入方法を広く選びたい人 | 無料版と有料版の機能差 |
| XO Slider | 画像中心のシンプルな運用をしたい人 | 現在の対応環境と設定項目 |
| 独自コード | 特殊な動きと保守に対応できる人 | 更新後の動作確認と管理方法 |
Q. 初心者はどの方法から試すとよいですか。A. トップページならSWELLのメインビジュアルまたは記事スライダー、記事内ならリッチカラムから試すとよいでしょう。不足する機能が明確になった段階でプラグインを追加します。
Q. MetaSliderとXO Sliderを同時に入れてもよいですか。A. 技術的に導入できても、同じ目的のプラグインを複数使うと管理や不具合の切り分けが難しくなります。テスト後に一つへ絞り、不要な方は削除すると整理しやすくなります。
- MetaSliderは挿入方法と機能の広さを求める場合に検討する
- XO Sliderは画像中心のシンプルな用途で比較する
- 標準機能で足りるならプラグインを増やさない
- コードを使う場合は更新後の確認方法まで決める
画像スライダーを設置するときの実践手順と注意点
候補が絞れたら、いきなり本番ページへ設置するのではなく、画像準備、テスト作成、端末確認の順で進めます。見た目だけでなく読み込み速度、代替テキスト、リンク先、操作性まで確認すると、公開後の修正を減らせます。
画像サイズと縦横比をそろえる
最初に、スライダーへ入れる画像の縦横比をそろえます。横長と縦長の写真をそのまま混ぜると、切り替わるたびに表示領域の高さが変わったり、意図しない位置で切り取られたりします。例えば横長の作品写真を並べるなら、すべて同じ比率でトリミングしておくと整いやすくなります。
画像の大きさは、表示幅に対して必要以上に大きくしないことも大切です。高解像度の写真を何枚も読み込むと、ページを開くまでの時間が長くなる場合があります。画像編集ツールやWordPressの画像最適化機能を使い、画質を確認しながらファイル容量を抑えてください。
文字入り画像を使う場合は、スマートフォンで縮小されたときにも読めるかを確認します。文字が小さくなる場合は、画像内へ詰め込まず、スライダー外の見出しや説明文へ分ける方が伝わりやすくなります。
代替テキストとリンク先を画像ごとに設定する
画像には、内容を簡潔に説明する代替テキストを設定します。「画像1」「スライド写真」のような曖昧な表現ではなく、「白い机でノートパソコンを操作する様子」「青い布で作ったハンドメイドバッグ」のように、画像を見なくても内容が分かる文にするとよいでしょう。
画像の近くに同じ説明が書かれている場合や、純粋な飾りとして置く場合は、読み上げ内容が重複しないよう調整が必要です。プラグイン独自のSEO欄や代替テキスト欄がある場合は、WordPressのメディア設定とどちらが出力されるかをテストページで確認してください。
画像にリンクを付ける場合は、押した先が予想できる説明も添えます。例えば「サービス詳細を見る」「作品の制作過程を見る」のようなボタンやキャプションがあると、画像だけをリンクにするより目的が伝わりやすくなります。
自動再生は速くしすぎず操作方法を残す
動きのあるスライダーは目を引きますが、切り替えが速すぎると文章を読み終える前に次へ進んでしまいます。初期設定の数値をそのまま信頼するのではなく、各画像に載せる情報量を基準に調整してください。長い説明を載せる場合は、自動再生を使わない選択もあります。
矢印やページネーションを表示すると、訪問者が自分のタイミングで前後へ移動できます。画像が何枚あるかも分かりやすくなるため、特に説明順序があるスライダーでは操作方法を残すとよいでしょう。
強い点滅や激しい移動効果は避け、サイト全体の雰囲気に合う穏やかな切り替えを選びます。目立たせることより、内容を読んで次の行動へ進めることを優先してみてください。
公開前にキャッシュと競合を確認する
設定を変更したのに表示へ反映されない場合は、SWELLのキャッシュ、キャッシュ系プラグイン、ブラウザキャッシュなどが影響していることがあります。保存後に別のブラウザやシークレットウィンドウで開き、必要に応じてキャッシュを削除して確認します。
レイアウトが崩れる、矢印が動かない、画像が表示されない場合は、追加したプラグインを一度無効化して変化を見ます。ほかの装飾プラグインや最適化機能を一つずつ停止すると、競合している機能を切り分けやすくなります。
本番公開前には、パソコンとスマートフォンの両方で、最初の画像、最後の画像、矢印、指での操作、リンク、画像の読み込みを確認してください。法人の場合は確認担当者と端末を分け、個人・小規模の場合は家族や知人の端末で見てもらう方法もあります。
パソコンだけでなく、実際のスマートフォンでも操作してください。
不具合が出たら追加した機能を一つずつ停止して原因を切り分けます。
具体的には、まず非公開の固定ページを1つ作り、使用予定の画像を3枚だけ登録します。表示幅、切り替え、矢印、スマートフォン操作を確認し、問題がなければ本番ページへ同じ設定を反映してください。最初から10枚以上を登録するより、原因を見つけやすくなります。
- 画像の縦横比と容量をそろえてから登録する
- 画像ごとに内容が伝わる代替テキストを付ける
- 自動再生を速くしすぎず手動操作を残す
- 非公開ページで少ない枚数からテストする
- キャッシュとプラグイン競合を順番に確認する
まとめ
SWELLの画像スライダーは、トップページや簡単な横スクロールなら標準機能を先に試し、足りない機能がある場合にプラグインを追加する方法が整理しやすい選択です。
まず「どこに何を表示したいか」を一文にし、メインビジュアル、記事スライダー、リッチカラムの順で目的に合うものを確認してください。画像ごとのリンクや高度な切り替えが必要なら、MetaSliderやXO Sliderをテストページで比較するとよいでしょう。
機能を増やすことより、訪問者が画像を見て内容を理解し、迷わず次のページへ進めることが大切です。少ない枚数から試し、スマートフォンで確かめながら、あなたのサイトに合う見せ方を整えてみてください。
本記事は一般的な情報提供を目的としており、起業・副業による収益や成果を保証するものではありません。税務・法務に関する判断は、国税庁や税理士など専門家・公的機関の情報を必ずご確認ください。
