SWELLのスライダー設定マニュアル｜初心者がつまずく5ポイント

ブログやサイトにSWELLを入れたものの、「記事スライダーの設定で止まっている…」ということはありませんか。

どの記事を出せばいいのか、動きが速すぎて目が疲れる、スマホだとレイアウトが崩れる気がするなど、スライダーまわりの悩みは思った以上に多いです。

結論からいうと、swell スライダーは「なんとなく見た目を派手にするための飾り」ではなく、目的を決めて設計すれば、回遊率や成約率をじわっと上げてくれる頼もしいパーツになります。

swellsスライダーでできることをざっくり整理しよう

SWELLのスライダー機能は大きく3種類ある

SWELLには、公式の機能やブロックを組み合わせることで、次のようなスライダー的な見せ方ができます。

機能名	どこで使うか	主な用途	スライダーとの関係
記事スライダー	トップページ（カスタマイザー）	おすすめ記事や新着記事をスライド表示する	「swell スライダー」と検索されるとき、一番イメージされやすい主役機能。
リッチカラムの横スクロール	記事本文・固定ページ	画像やボックスを横に並べてスクロール表示する	記事内でスライダー風の見せ方をしたいときに使える。
テーブルを横スクロールで見せる工夫	記事本文・固定ページ	料金表や比較表を横スクロールで見せる	表を横にスライドさせるイメージで、スライダー的に見せられる。

多くの人が「swell スライダー」と言うときは、いちばん上の「記事スライダー」のことを想像していることが多いです。

ただ、実際にサイトを作っていくと、記事スライダーだけでなく、リッチカラムや横スクロールの表を組み合わせた方が、全体がグッと整って見えるケースが少なくありません。

この記事では、中心となる記事スライダーの設定と、補助的に使えるスライダー風レイアウトの作り方の両方を取り上げていきます。

スライダーを使うメリット・デメリットを軽く押さえる

swell スライダーをトップにドーンと置くと、それだけでサイトがそれっぽく見えるので、つい使いたくなります。

ただ、メリットだけを見ていると失敗しやすいので、デメリットもセットで理解しておきましょう。

まず、メリットからです。

• おすすめ記事をまとまったスペースで見せられるので、回遊の入口を作りやすい。
• 画像が自動で切り替わるので、静的なページよりも動きのあるファーストビューになる。
• デザインがテンプレート化されているので、初心者でも一定以上の見た目にしやすい。

一方で、デメリットもあります。

• 画像点数が増えるほど読み込みが重くなりやすい。
• 「ただ流れているだけ」で、ほとんどクリックされないスライダーになりがち。
• スマホで見ると文字が小さく、情報を詰め込みすぎると読みにくくなる。

私の経験上、「なんとなくカッコいいからスライダーを置く」という動機で入れると、ほぼ確実に微妙な仕上がりになります。

スライダーは「何を押し出すための場所か」「どんな人にクリックしてほしいか」を決めてから触った方が、結果的に短時間でいい形に落ち着きます。

swellsスライダーの基本設定【トップページの記事スライダー】

記事スライダーを表示するまでの手順

まずは、swell スライダー自体を表示させるところまでを押さえます。

操作は難しくありませんが、「そもそもどこに設定があるのか」で迷いがちなので、流れをざっくりまとめてみます。

ステップ	操作内容	補足
1	WordPress管理画面からカスタマイズ画面を開く。	管理画面の「外観」メニューの中にあるボタンから開きます。
2	トップページ関連の設定項目を開く。	「トップページ」や「フロントページ」など、それに近い名前の項目を探します。
3	記事スライダーの設定ブロックを見つける。	「記事スライダー」「ピックアップスライダー」といった名前になっていることが多いです。
4	「表示する」「設置する」といったチェックをオンにする。	ここをオンにすると、プレビュー画面にスライダーが現れます。
5	記事の絞り込みやデザインを調整して公開する。	設定を保存して公開すれば、トップページにスライダーが反映されます。

カスタマイザーの細かな文言は環境によって多少違う場合がありますが、基本的にはこの流れで操作できれば大丈夫です。

この段階では、まだ細かいデザインにはこだわらなくて構いません。まずは「出すか出さないか」と「どの位置に出すか」だけ決めておきましょう。

表示する記事の選び方（タグ・カテゴリー・固定表示）

次に、「どの記事をスライダーに出すか」を決めていきます。

なんとなく最新記事を順番に表示するだけだと、あまりクリックされないことが多いので、目的に合わせて絞り込みをしておくのがおすすめです。

記事の選び方としては、だいたい次のようなパターンがあります。

• タグで絞り込む。
• カテゴリーで絞り込む。
• 特定の投稿や固定ページだけを選んで出す。

タグで絞る場合は、「pickup」「おすすめ」「注目」など、スライダー専用のタグをひとつ作っておくと管理がかなり楽になります。

記事を書くときにそのタグを付けるだけで、スライダーの対象に含められるので、更新のたびにカスタマイザーに入り直さなくて済みます。

カテゴリーで絞るなら、例えば次のようなイメージです。

• 初心者向けの入門記事だけをまとめてスライダーに出す。
• 収益性の高いレビュー記事やサービス紹介だけを集める。
• 投資・英語・ダイエットなど、ジャンルごとに看板記事を選んで並べる。

私がクライアント案件でよくやるのは、「収益記事だけを集めたスライダー」をトップに置くパターンです。

サイトの世界観が分かる読み物系の記事と、売りにつながる記事をきちんと分けておくと、運営側も整理しやすくなりますし、ユーザーにとっても分かりやすい導線になります。

スライドの枚数・速度・ナビゲーションを決めるコツ

次は、swell スライダーの「動き」の部分です。

ここをなんとなくの感覚で決めてしまうと、落ち着かないスライダーになってしまうので、目安を知っておくと迷いにくくなります。

決めるポイントは大きく3つです。

• 1画面に何枚並べるか。
• どれくらいの速さで自動スライドさせるか。
• 矢印やドット（ページネーション）を表示するか。

私が実際に使ってみて落ち着きやすいと感じた目安をまとめると、こんな感じです。

項目	おすすめの目安	理由
PCの表示枚数	2〜3枚	1枚だと単調で、4枚以上だと1枚あたりが小さくなりすぎるためです。
スマホの表示枚数	1枚	タイトルや文字をしっかり読めるバランスを取りやすい枚数です。
自動スライド間隔	4〜6秒程度	画像とタイトルを一度読み切れるくらいの時間を確保できます。
スライドのアニメーション速度	ややゆっくりめ	速すぎると目で追いにくく、落ち着かない印象になります。
矢印ナビ	PCはオン、スマホは好みで	PCではマウス操作が多いので矢印があると便利です。スマホはスワイプ中心でも問題ありません。
ドットナビ	基本オン	今何枚目を見ているのか分かるので、ユーザーにとって親切です。

もちろんサイトのデザインや対象読者によって最適な設定は変わりますが、「とりあえず初期値のまま」よりも、自分の目で見て納得できる数値にしておいた方が、完成度がぐっと変わります。

とくにスマホ表示では、一画面に情報が詰まりやすいので、「1枚表示＋ゆっくりめの自動スライド」をベースにして調整していくと失敗しづらいです。

SWELLスライダーのデザイン調整と見せ方のコツ

スライダーのデザイン項目をざっくり把握しよう

SWELLの記事スライダーには、見た目に関わる設定がいくつか用意されています。

ここでは、代表的な項目をざっくり整理しておきます。

項目	何を決めるか	デザインへの影響
タイトルの位置	画像の下に出すか、画像に重ねるかなど。	読みやすさと「それっぽい雰囲気」のバランスが変わります。
カテゴリーの表示位置	サムネイル左上などにカテゴリー名を出すかどうか。	どんなジャンルの記事なのか、ひと目で分かるかどうかに関わります。
日付・著者名	表示するかどうか。	新しさの印象や、顔出しの場合は信頼感にもつながります。
画像の縦横比	16:9、4:3、正方形など。	サイト全体の統一感に直結する重要な要素です。
カードの角丸や影	角を丸めるか、影を付けるかどうか。	やわらかい印象にするか、シャープに見せるかが変わります。
背景色や背景画像	スライダーの背面に色や画像を入れるかどうか。	サイトの世界観を強く出せますが、やりすぎると読みづらくなります。

全部の項目を完璧に調整しようとすると疲れてしまうので、最初は次の2つから触るのがおすすめです。

• タイトルとカテゴリーの位置。
• アイキャッチ画像の縦横比とサイズ。

この2つを整えるだけでも、「なんとなくバラバラなスライダー」から「ちゃんとデザインされたスライダー」にかなり近づきます。

画像・アイキャッチをそろえて、崩れにくいスライダーにする

swell スライダーでよく起こる崩れの原因が、「アイキャッチ画像のサイズや比率がバラバラ」なことです。

縦長の画像と横長の画像が混ざっていると、高さが揃わず、スライダー全体がガタガタして見えてしまいます。

理想は、アイキャッチの比率をサイト全体である程度そろえておくことです。

例えば、横長の16:9で統一しておくと、PCでもスマホでも安定して表示されやすくなります。

画像まわりで意識しておきたいポイントをまとめると、次のようになります。

とくにスマホで確認するときは、「片手で見て、一瞬でどんな記事か分かるか」を意識してみてください。

ここがクリアできていないと、どれだけ設定を細かく調整しても、スライダーからのクリックは増えにくいです。

PCとスマホで「見える情報量」を調整する

PCとスマホでは、swell スライダーの見え方がかなり違います。

PCでは2〜3枚が横に並び、文字もそこそこ大きく表示されますが、スマホでは縦長で1枚ずつ表示されることが多いです。

そのため、次のような調整を意識しておくと、どちらの環境でも見やすいスライダーになります。

私自身、スライダーを調整するときは、「PCでざっくり整える→スマホで微調整」が定番の流れになっています。

スマホのプレビューで、タイトルの折れ方やボタンの押しやすさを確認するだけでも、ユーザー体験はかなり変わります。

記事内や固定ページでswell スライダー風レイアウトを作る

リッチカラムの横スクロールでスライダーっぽく見せる

リッチカラムは、横にボックスを並べられるブロックです。

リッチカラムに「横スクロール」の設定を入れると、静的なスライダーのような見た目を作ることができます。

よくある使い方の例を挙げると、次のようなものがあります。

• サービスの特徴やメリットを3〜4個、横スクロールで見せる。
• 実績や導入事例を、画像とテキストを組み合わせて横に並べる。
• おすすめ記事へのリンクカードを並べて、カテゴリごとのリストにする。

1つのカラムに情報を詰め込みすぎないのがポイントです。

1カラムあたり、アイキャッチ画像かアイコン、短い見出し、1〜2文の説明くらいに抑えると、読みやすくてタップもしやすくなります。

テーブルスライダーで比較表をきれいに見せる

料金表や機能比較表など、横に項目が多い表は、そのまま表示するとスマホでギュッと潰れてしまいます。

そこで役に立つのが、横スクロールで表を見せる工夫です。

SWELLの表ブロックの設定やCSSを使って、実質的に「テーブルスライダー」のような見せ方にすることができます。

テーブルスライダー的な見せ方と相性がいいコンテンツ例を、整理しておきます。

コンテンツの種類	テーブルスライダーとの相性	使い方のイメージ
料金プランの比較	非常に良い	プランA・B・Cを横方向に並べて、料金・機能・サポート内容などを比べる。
スペック比較	良い	パソコンやガジェットのスペックを、項目ごとに横に並べて見せる。
スケジュール表	まあまあ	期間ごとの予定を横スクロールで見せる。
単純な2列の表	あまり必要ない	行数が少ない場合は普通の表で十分なことが多い。

記事スライダーと組み合わせると、トップページではスライダーでざっくり世界観や重要記事を見せて、記事内ではテーブルスライダー風の表で詳しい比較情報を見せる、といった構成が作れます。

サービス紹介や商品レビュー系のブログとは、とくに相性がいい組み合わせです。

任意の場所にSWELL記事スライダーを設置するアイデア

子テーマやショートコードで柔軟に使いたいときの考え方

記事スライダーは、基本的にはトップページ用として用意されている機能です。

そのため、固定ページや特定のカテゴリーアーカイブなど、別の場所に同じスライダーを出したい場合は、カスタマイズが必要になることがあります。

よくある方針としては、次のような流れです。

• 子テーマを用意して、記事スライダー部分のテンプレートをコピーする。
• 関数やショートコードとして切り出し、任意の場所から呼び出せるようにする。

ただ、この方法はPHPファイルを編集するので、ちょっと試したいだけの段階だとハードルが高めです。

バックアップを取らずに触ると、最悪の場合、画面が真っ白になってしまうリスクもあります。

私がクライアントに提案するときは、次のような二段構えにすることが多いです。

• まずはリッチカラムなどを使って「なんちゃってスライダー」を作り、コードなしでできる範囲を最大限活用する。
• どうしてもトップページ以外に記事スライダーそのものを出したい場合は、制作会社や開発経験のある人に相談する。

スライダーを増やす前に、「本当に記事スライダーの形である必要があるのか」を一度立ち止まって考えてみると、無理のない選択がしやすくなります。

コードを書かずに「それっぽい」スライダーを増やす裏ワザ

実は、記事スライダーそのものを増やさなくても、「それっぽい動き」を増やす方法はいくつかあります。

たとえば、次のような使い方です。

こうした「なんちゃってスライダー」をうまく散りばめると、サイト全体が一段階リッチに見えます。

しかも、ブロックエディタの操作だけで完結するので、運営しながら自分で調整しやすいのも大きなメリットです。

swell スライダーでよくある失敗とトラブル対策

スライダーが表示されない・崩れるときのチェックリスト

「設定したはずなのに、swell スライダーが出てこない」「スマホだけデザインが崩れる」という相談は、本当によくあります。

よくある原因と対処法を、ざっくり表に整理してみました。

症状	よくある原因	チェック・対処のポイント
スライダーがまったく表示されない	カスタマイザーの表示設定がオフのまま、または対象記事が1件もない。	表示のオンオフを確認しつつ、対象のタグやカテゴリーに記事が入っているかも確認する。
一部のスライドだけ画像が変に切れる	アイキャッチ画像の比率やサイズがバラバラになっている。	問題のある記事の画像だけでも、他と同じ比率に差し替えてみる。
スマホだけデザインが崩れる	スマホ向けの設定や、追加CSSの影響が出ている。	スマホプレビューで確認しながら、心当たりのCSSやプラグインを一度オフにしてテストする。
スライドが途中で止まる・動きがカクカクする	プラグインとの競合、画像が重すぎるなど。	キャッシュ系やアニメーション系など、影響がありそうなプラグインを一旦無効化してみる。

トラブルシューティングの基本は、次の2つです。

• いきなり難しい原因を疑うのではなく、「設定」「画像」「プラグイン」の順に確認する。
• 必ずPCとスマホの両方で動きをチェックする。

私も以前、スライダーが動かず「テーマ側の問題だ」と思い込んでいたのですが、よく調べたら自分で入れたキャッシュプラグインの設定が原因だったことがありました。

難しそうなところから疑うと、かえって遠回りになるので注意です。

クリックされないスライダーを改善する方法

見た目はそれなりに整っているのに、スライダーからのクリックが少ないというケースもよくあります。

この場合は、設定の問題よりも「出している記事」と「並び順」の問題であることが多いです。

改善のポイントを挙げてみます。

レビュー系の記事であれば、タイトルに数字やベネフィット、対象読者を一言入れてあげると、スライダー上でもクリックされやすくなります。

例としては、「3分で分かる」「比較して分かった」「初心者向け」など、一目でメリットが伝わる言葉を足してあげるイメージです。

表示速度・読み込みのストレスを抑える

スライダーの弱点は、画像の枚数が増えるほど読み込みが重くなりやすい点です。

ページの表示が遅いと、それだけで離脱する人も増えてしまいます。

表示速度をできるだけ保つために、次のような対策を意識してみてください。

swell スライダーは目立つ位置に置かれやすいパーツなので、ここで重くなるとサイト全体の印象にもつながります。

「とりあえず派手に」より、「きちんと軽くて使いやすいか」を意識した方が、長い目で見ると確実にプラスです。

SEOとユーザー体験から見たswell スライダー活用

ファーストビューで何を伝えるかを決める

トップページにswell スライダーを置くとき、いちばん大事なのは「ファーストビューで何を伝えたいのか」を決めることです。

スライダーの存在感が強すぎて、サイトの価値が逆に伝わりづらくなっているケースもよく見かけます。

意識しておきたいのは、次の3点です。

• このサイトは誰に向けたサイトなのか。
• どんなテーマの記事が読めるのか。
• 読者にとって、どんな得があるのか。

これらが、スライドに並べた記事から自然と伝わるように、出す記事を選んであげると、初めて来た人にもサイトの全体像が伝わりやすくなります。

例えば、次のような並びが考えやすいです。

• 1枚目に「プロフィール」や「このサイトについて」など、サイトの方向性が分かる記事。
• 2枚目・3枚目に、人気のハウツー記事や収益につながる記事。
• その後に、特定ジャンルのおすすめ記事。

最初の3枚くらいで、「このサイトはだいたいこんなことを書いている」「自分に関係ありそうだ」と感じてもらえるかどうかが、大事なポイントです。

回遊率アップを狙ったスライダーの配置

swell スライダーを「サイトの顔」として使うだけでなく、「回遊のハブ」として活用する考え方もあります。

回遊率アップを狙うときに意識したいのは、「どこからどこへ動いてほしいのか」を先に決めることです。

目的	スライダーの配置例	出す記事のタイプ
新規ユーザーに世界観を伝えたい	トップページのファーストビュー付近に配置する。	サイトのコンセプトが伝わる記事や、入門記事。
収益ページへの導線を増やしたい	トップページ中段や、カテゴリーページ上部に配置する。	成約につながりやすいレビュー記事や比較記事。
リピーターに更新情報を届けたい	ブログ一覧ページの上部や、サイドバーに小さめのスライダーを置く。	更新頻度の高いコンテンツや連載記事。

同じswell スライダーでも、「新規ユーザー向けなのか」「リピーター向けなのか」で、適した位置や中身が変わってきます。

目的を決めてからスライダーを配置すると、コンテンツの選び方も自然と絞られていきます。

アクセシビリティと使いやすさへの配慮

最後に、アクセシビリティと使いやすさの視点も少しだけ触れておきます。

スライダーは動きのあるパーツなので、人によっては「落ち着かない」「目が疲れる」と感じることもあります。

できるだけ多くの人にとって使いやすいスライダーにするために、次の点を意識してみてください。

とくにスマホでは、指で押しやすい位置とサイズかどうかが、使いやすさに直結します。

プレビューを見ながら、「自分がユーザーだったらここを押したくなるか」という目線で調整してみると、細かな改善ポイントが見えてきます。

よくある質問

Q1. swell スライダーは、ブログ初心者でも使いこなせますか？

A. 使いこなせます。

swell スライダーの基本的な設定は、カスタマイザー上でチェックを入れて数値を決めるだけなので、コードの知識がなくても十分扱えます。

この記事で紹介したように、表示する記事をタグやカテゴリーで分ける、枚数や速度をシンプルに決める、アイキャッチ画像の比率をそろえる、といったポイントさえ押さえておけば、初心者でも「見た目が整ったスライダー」を作ることができます。

Q2. swell スライダーを入れると、サイトが重くなりませんか？

A. 画像点数が多いと多少は重くなりますが、工夫次第で十分軽く保てます。

スライダーが重く感じる原因の多くは、画像のファイルサイズが大きすぎる、スライダーに出している記事数が多すぎる、といったシンプルなものです。

画像を圧縮したり、スライダーの枚数を絞ったりするだけでも、体感速度はかなり改善します。

不安な場合は、swell スライダーに出す記事数を少なめにして、人気記事一覧やカテゴリーごとのブロックなど、他の導線と組み合わせるとバランスが取りやすいです。

Q3. swell スライダーと、記事内の横スクロールはどう使い分ければいいですか？

A. ざっくり言うと、「トップページの顔」がswell スライダー、「記事の読みやすさを補強する」のが記事内の横スクロールです。

トップページでは、記事スライダーを使って世界観やおすすめ記事をまとめて見せる役割を持たせると、初めて来た人にもサイトの全体像が伝わります。

一方、記事内では、リッチカラムの横スクロールでメリットや特徴を並べる、横にスクロールできる表で比較情報をすっきり見せる、といった使い方が向いています。

「入り口としてのswell スライダー」と「読みやすさを支える横スクロール」というイメージで分けておくと、役割がぶれにくくなります。

まとめ：swell スライダーを使いこなしてサイトの顔を整えよう

この記事のポイントを振り返っておきます

今日からできる最初の一歩としては、まず今のトップページを開いて、次の3つだけやってみてください。

• スライダーに出している記事を、「本当に読んでほしい記事」だけに絞り込む。
• PCだけでなくスマホでもプレビューして、タイトルの折れ方や画像の切れ方をチェックする。
• スライドの枚数と自動スライドの間隔を、自分の目で見て「これなら読みやすい」と感じるところまで調整する。

この3つをやるだけでも、今のswell スライダーは一段階レベルアップします。

少しずつ手を動かしながら、自分のサイトに合ったスライダーの形を一緒に作っていきましょう。