SWELLを使っていると、トップページに並んだおしゃれなピックアップバナーを見て「自分のサイトでもやってみたいな…」と思うことがあるはずです。
この記事では、SWELLのピックアップバナーの基本的な仕組みから、設定の流れまでひと通り分かるようにまとめています。
一言でまとめると、ピックアップバナーは「画像サイズを揃えること」と「どこに読者を案内したいか」を決めておけば、初心者でも十分使いこなせる強力な導線パーツです。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLのピックアップバナーとは？役割とメリット
まずは、SWELLのピックアップバナーがどんな機能なのかをざっくり共有しておきます。この章を押さえておくと、あとで設定するときも迷いにくくなります。
ピックアップバナーでできることをざっくり整理
SWELLのピックアップバナーで出来ることを、イメージしやすいように表にまとめます。
| できること | 内容 | こんなときに便利 |
|---|---|---|
| 目立つリンク集を作る | 記事・固定ページ・カテゴリーなどを画像付きで一覧表示できる | 「まずこれを読んでほしい」という記事に一気に誘導したい |
| 画像付きで訴求できる | アイキャッチ画像や任意の画像をバナーとして使える | 文字だけのリンクより印象に残る導線を作りたい |
| PC・スマホでレイアウトを変えられる | PCとスマホで列数やスライド表示を個別に設定できる | スマホでも見やすい並びにしたい |
| 下層ページにも表示できる | トップページ以外にもバナーを出すかどうか選べる | 常に誘導したいページがあるときに回遊性を上げられる |
一言でいうと、ピックアップバナーは「サイトの中で特に見てほしいところへ案内するショートカット集」です。
単なるデザインパーツというより、導線設計の中核に置けるパーツだと考えておくと運用しやすくなります。
SWELLのどこで設定する機能なのか
ピックアップバナーは、SWELLが提供している独自機能です。
WordPress標準のスライダーとは別物で、基本の設定は次の2か所で行います。
- 「外観＞メニュー」で、ピックアップバナー用のメニューを作る
- 「外観＞カスタマイズ＞トップページ＞ピックアップバナー」で見た目を整える
この「メニューで中身を決める → カスタマイザーで見た目を整える」という流れが分かっていれば、大きく迷うことはありません。
ピックアップバナーを設置するメリット
ピックアップバナーを置くことで、具体的にこんなメリットがあります。
- 初めて来た読者に「このサイトで何を読めばいいか」を一目で伝えられる
- 収益につながるレビュー記事やLPへの導線を増やせる
- プロフィールや自己紹介など、顔になるページを目立つ位置に置ける
- 世界観の揃った画像を並べることで、サイトの印象を整えやすくなる
私のサイトでもピックアップバナーを導入してから、プロフィールページや定番記事へのアクセスがじわっと増えました。
トップページから「どこに行けばいいか」を示してあげるだけでも、読者の動きが変わる感覚があります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
SWELLピックアップバナーの基本設定手順
ここからは、実際にピックアップバナーを表示させるまでの手順を、順番に見ていきます。SWELLを入れたばかりの方でも迷わないように、管理画面の動きに沿って解説します。
ステップ1：ピックアップバナー用メニューを作成
最初に、ピックアップバナーの中身をまとめる「専用メニュー」を作ります。
手順は次のとおりです。
- WordPress管理画面の「外観＞メニュー」を開く
- 「新しいメニューを作成」をクリックする
- 「メニュー名」を分かりやすく入力（例：ピックアップ、Pickupなど）
- メニューの位置で「ピックアップバナー」にチェックを入れる
- 「メニューを作成」をクリックする
ここでよくあるのが、「メニューの位置」のチェックを忘れて、いくら項目を追加してもピックアップバナーに何も出てこないパターンです。
うまく表示されないときは、まずここを見直すと解決することが多いです。
ステップ2：表示したい記事・ページ・カテゴリーを追加
メニューが作れたら、次はピックアップしたいリンク先をメニューに登録していきます。
- 左側の「投稿」「固定ページ」「カテゴリー」などから表示したいものにチェック
- 「メニューに追加」ボタンを押す
- 右側のメニュー構造に追加された項目をドラッグ＆ドロップで並び替え
- 最後に「メニューを保存」をクリックする
このとき登録するリンク先は、次のようなものを中心にすると、ピックアップバナーがよく働いてくれます。
- 絶対に読んでほしい定番記事
- 収益につながるレビュー・比較・ランキング記事
- プロフィールや自己紹介など、サイトの顔になるページ
- 特集したいカテゴリーの入り口
「このサイトで大事なのはここだよ」という看板を並べるイメージで選んでみてください。
ステップ3：アイキャッチ画像 or 任意画像を設定
ピックアップバナーに表示される画像は、基本的にリンク先のアイキャッチ画像がそのまま使われます。
なので、アイキャッチさえしっかり設定しておけば、そのままきれいに並んでくれます。
ただし、次のような場合は個別に画像を差し替えることもできます。
- アイキャッチ画像を設定していない記事をピックアップしたいとき
- アイキャッチとは別に、ピックアップバナー専用のデザインを使いたいとき
その場合は、あらかじめメディアにアップした画像のURLを控えておき、メニュー項目の編集画面から、専用の入力欄にURLを入れる形で表示画像を差し替えます。
テーマやバージョンによって細かなUIは多少変わるので、「ピックアップバナー用の画像URLを指定できる項目がないか」を一度確認してみてください。
ステップ4：レイアウトやデザインの設定場所（おさらい）
ここまでで「どのページをピックアップするか」は決まりました。
あとは、見た目を整えていきます。
ピックアップバナーのレイアウトやデザインは、SWELLカスタマイザーから設定します。
- WordPress管理画面の「外観＞カスタマイズ」を開く
- 「トップページ＞ピックアップバナー」を選ぶ
- レイアウト（列数やスライド）とデザイン（タイトルの位置など）を調整する
この場所さえ覚えておけば、あとから「ちょっと見え方を変えたいな」と思ったときも、すぐに微調整できて便利です。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
ピックアップバナーのレイアウトとデザイン設定
次に、ピックアップバナーの「見せ方」を決めるレイアウトとデザインの設定についてお話しします。PCとスマホで見え方が変わる部分なので、ここは軽くでもいいので触って慣れておくと安心です。
PC・スマホ別レイアウトの特徴
ピックアップバナーは、PCとスマホでレイアウトを別々に設定できます。
主なパターンを表にすると、こんなイメージです。
| デバイス | レイアウト例 | 特徴 | 向いているケース |
|---|---|---|---|
| PC | 固定幅 4列 | 横一列に4枚並ぶ | バナーを4枚作るときの定番パターン |
| PC | 固定幅 3列 | 横一列に3枚並ぶ | おすすめ記事を3つに絞りたいときにぴったり |
| PC | 固定幅 2列 | 大きめなバナーが2枚並ぶ | サービス紹介やLPへの導線をしっかり見せたいとき |
| SP | 固定幅 2列 | 2列×複数段でコンパクトに並ぶ | スマホでも一覧性を保ちたいとき |
| SP | 固定幅 1列 | 縦方向に1枚ずつ大きめに表示 | 画像をしっかり見せたいとき |
| SP | スライド | 横スワイプで切り替え | バナーの枚数が多いときや省スペースにしたいとき |
私がよく使う組み合わせは、
- PC：固定幅3〜4列
- SP：固定幅2列またはスライド
あたりです。
バナーの枚数や、画像にどれくらい文字を入れるかを見ながら、無理なく読めるレイアウトを選んでみてください。
バナータイトルのデザインをどう選ぶか
ピックアップバナーには、「タイトルの表示位置」などを調整できる項目があります。
代表的な選択肢は次のようなものです。
- タイトルを表示しない
- 左上に表示
- 右下に表示
- 中央にシンプルに表示
- 中央にボタン風で表示
- 下部分にワイド表示
私が使うことが多いのは、
- 画像の中にすでにテキストを書き込んでいる → 「タイトルを表示しない」
- 写真メインのシンプルな画像 → 「中央（ボタン風）」か「下にワイド表示」
です。
画像の中にも文字があって、バナータイトルでも文字を乗せると、ごちゃごちゃして読みにくくなりがちです。
その場合はどちらかに絞って、情報量を少し減らしてあげると、ぐっと読みやすく見せられます。
白線・明るさ調整で文字を読みやすくする
SWELLのピックアップバナーでは、
- バナー内側に白線を入れるかどうか
- バナー画像を少し暗く（または明るく）するか
といった細かい見た目の調整も可能です。
例えば、
- 画像が明るすぎて白文字が読みにくい → 画像を少し暗くしてコントラストを上げる
- 背景とバナーの境目が分かりづらい → 内側に白線を入れて輪郭をはっきりさせる
といった感じで変えてあげると、パッと見の印象がかなり変わります。
画像をPhotoshopやCanvaなどで完璧に作り込もうとするより、テーマ側の調整機能も遠慮なく使った方が、試行錯誤が楽でおすすめです。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
ピックアップバナー用の画像サイズと作り方
続いて、ピックアップバナーに使う画像のサイズや比率について整理します。ここが揃っていないと、どれだけレイアウトを工夫しても、どうしても「なんとなくガタついて見える」状態になってしまいます。
推奨されやすい比率は「16：9」
SWELLでは、アイキャッチ画像の推奨比率として「16：9」がよく紹介されています。
ピックアップバナーはアイキャッチをそのまま使うことが多いので、アイキャッチを16：9で揃えておくと、バナーもきれいに並びます。
ポイントは、
- アイキャッチ画像の比率を16：9で統一する
- バナー専用画像を作る場合も、同じ比率で揃える
この2つだけです。
【稼げるキーワード教えます】
▼ ▼ ▼
比率さえ統一されていれば、細かいピクセル数が多少違っていても、大きく崩れることはあまりありません。
具体的なピクセルサイズの目安
比率を16：9と決めたうえで、どれくらいのサイズにするかを考えていきます。
よく使われる目安を表にまとめると、こんなイメージです。
| 用途・考え方 | 例のサイズ | 特徴 |
|---|---|---|
| バランス重視で使いやすい | 横1200×縦675px前後 | アイキャッチやOGP画像とも相性がよく、汎用性が高い |
| 横幅を大きめに見せたい | 横1600×縦900px前後 | ワイド感を出したいときに向くが、容量が重くなりやすい |
| 表示速度を少し優先したい | 横900〜1000px程度の16：9 | ファイル容量を抑えやすく、軽さを意識したいときに便利 |
どのサイズを選んでも構いませんが、
- 全バナーで同じサイズに揃えること
- アップロード後のファイル容量が大きすぎないように圧縮すること
この2点を意識しておくだけで、見た目と表示速度のバランスがぐっと良くなります。
Canvaなどでテンプレを作ってしまうのが楽
毎回「サイズどうしようかな」と考えるのは、正直かなり面倒です。
そこでおすすめなのが、Canvaなどのデザインツールでテンプレートを作ってしまう方法です。
- 「SWELLピックアップバナー用 1200×675px」などのサイズでテンプレを作る
- 背景色やフォントをサイトの雰囲気に合わせて設定する
- あとはテキストだけ差し替えて使い回す
私は、
- 記事のアイキャッチ用テンプレ
- ピックアップバナー用テンプレ
を分けて作っておくことで、「どのサイズだったっけ？」と悩む時間がほぼゼロになりました。
デザインが苦手でも、一度型を作ってしまえば、あとは中身を入れ替えるだけでそれなりに整って見えるので、とても楽です。
サイトタイプ別：ピックアップバナーの活用パターン
ここからは、「どんなサイトで、どんなピックアップバナーを置くか」の具体例を見ていきます。何をピックアップしていいか分からないときは、この章をそのまま真似してもらって大丈夫です。
サイトのタイプ別おすすめ構成
よくあるサイトタイプ別に、どんなリンク先を置くと使いやすいかを表にまとめました。
| サイトタイプ | おすすめリンク先 | 枚数の目安 | コメント |
|---|---|---|---|
| 雑記ブログ | 人気記事・大事なカテゴリの入口・プロフィール | 4枚前後 | いろいろ書いている人ほど「入口」を整理すると読みやすくなる |
| 特化ブログ | 各カテゴリの代表記事・比較やランキング記事 | 3〜4枚 | 収益記事への導線を意識して選ぶ |
| サービスサイト | 料金ページ・実績紹介・お問い合わせ | 2〜3枚 | 重要な導線に絞ったほうが迷わせにくい |
| ポートフォリオ | 代表作品・プロフィール・問い合わせフォーム | 3枚前後 | 作品と自分の情報をセットで見せる構成がおすすめ |
| 教育系・ハウツー系 | 初心者向けのまとめ記事・ステップガイド・Q&A | 3〜4枚 | 初めて来た人が学ぶ順番を示してあげると親切 |
迷ったときは、
- 新規読者にまず読んでほしい記事
- サイトの「顔」になるページ
- 収益や問い合わせにつながるページ
この3種類から選ぶと、バランスのいいピックアップバナーになりやすいです。
バナーの枚数・並べ方の考え方
ピックアップバナーの枚数は、多ければいいというものではありません。
- 4枚：PCの4列レイアウトと相性がよく、安定した見た目になりやすい
- 3枚：PCで3列、スマホで1列やスライドにすると、ひとつひとつが目立つ
- 2枚：サービス紹介など、特に推したいものを大きく見せたいときに有効
私の感覚では、「とりあえず4枚」がもっとも扱いやすいです。
あとからバナーを増やしたくなったときも、4の倍数（4→8枚など）で増やすとレイアウトのバランスが崩れにくくなります。
記事スライダーとの役割分担
SWELLには、ピックアップバナー以外にも記事スライダーなど、目立つパーツがあります。
これらは役割を分けて使うと、トップページがすっきりします。
- ピックアップバナー：サイト全体の案内板（定番・入口になる記事やページ）
- 記事スライダー：今推したい特集記事やキャンペーンなどのショーケース
例えば、
- ピックアップバナーには、いつ見られても意味がある「常設の導線」を置く
- スライダーには、その時期に特に読んでほしい特集や期間限定コンテンツを置く
といったイメージで分けると、情報が整理されて見えるようになります。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
ピックアップバナーが表示されない・崩れるときのチェックリスト
ここでは、「設定したつもりなのに出ない」「なぜかレイアウトが崩れる」といった、よくあるお悩みをまとめておきます。トラブルが起きたときのチェックリストとして使ってください。
よくあるトラブルと原因
代表的なトラブルと、考えられる原因を整理してみます。
| 症状 | よくある原因 | チェックする場所 |
|---|---|---|
| ピックアップバナーがまったく表示されない | メニュー位置「ピックアップバナー」のチェック漏れ | 外観＞メニュー |
| 一部のバナーだけ画像が表示されない | 該当記事のアイキャッチ未設定、または画像の指定ミス | 各記事のアイキャッチ設定やメニュー項目の設定 |
| レイアウトがガタついて見える | 画像の比率やサイズがバラバラ | アップロードした画像サイズ |
| スマホだけ変な表示になる | PCとSPでのレイアウト指定が噛み合っていない | カスタマイザー＞トップページ＞ピックアップバナー |
| スクロールが重く感じる | 画像容量が大きすぎる、枚数が多すぎる | 画像のファイルサイズ、バナー枚数 |
多くの場合、「メニューの位置」と「画像サイズ」の2つを見直すだけでかなり改善します。
まず確認したい設定まわり
ピックアップバナーが表示されない、あるいは思った場所に出てこないときは、次のポイントを順番に確認してみてください。
- 外観＞メニューで、メニューの位置「ピックアップバナー」にチェックが入っているか
- ピックアップ用メニューに1つ以上の項目が登録されているか
- カスタマイザー＞トップページ＞ピックアップバナーで表示が有効になっているか
- 個別記事の設定で「このページではピックアップバナーを非表示」にしていないか
特に、記事ごとの設定でピックアップバナーをオフにできることを知らないと、「このページだけ出ない…」と悩んでしまいがちです。
そういうときは、記事編集画面のSWELL設定の項目も合わせて確認してみてください。
画像まわりの見直しポイント
レイアウトが崩れたり、なんとなく見づらいと感じるときは、画像側の見直しも大切です。
- 全バナーの画像が同じサイズ・同じ比率になっているか
- 画像の中に文字を詰め込みすぎていないか
- 暗い画像に黒文字、明るい画像に白文字のような読みにくい組み合わせになっていないか
- 1枚あたりのファイル容量が必要以上に大きくないか
画像サイズの統一と、SWELL側の「画像を少し暗く／明るくする」設定を組み合わせるだけでも、印象はかなり変わります。
SEOと表示速度を意識したピックアップバナー運用
最後に、ピックアップバナーをSEOや表示速度の面から見たときに、意識しておきたいポイントをまとめます。少し意識するだけで、長く安心して使えるデザインになります。
内部リンク設計としてのピックアップバナー
ピックアップバナーは、単なる「目立つ画像付きリンク」以上の役割があります。
サイト内の内部リンクを整理するハブとしても使えるからです。
- 関連する記事同士をまとめて見せる
- カテゴリーの入り口として機能させる
- プロフィールや自己紹介への導線を増やす
私がよく使うパターンは、
- ピックアップバナーから「まとめ・案内記事」へ案内する
- まとめ記事の中から、個別の詳細記事へリンクする
という二段構成です。
これだけでも、読者にとってサイトの構造が分かりやすくなり、結果として滞在時間や回遊性のアップにつながりやすくなります。
Core Web Vitalsを意識した画像の軽量化
ピックアップバナーは、ページの上のほうに表示されることが多く、ページの読み込み速度に与える影響も無視できません。
特に、画像が重すぎると、体感として「ちょっと重いサイトだな」と感じられてしまうこともあります。
次のような点を意識しておくと安心です。
- 画像はアップロード前に圧縮ツールなどで軽くしておく
- 可能ならWebP形式を使うか、JPEGで容量を抑える
- 必要以上に大きなサイズでアップロードしない
- ピックアップバナーの枚数を増やしすぎない
SWELL側でも、画像の読み込みに関する設定を調整できます。
もし表示が明らかに重いと感じたら、テーマの高速化設定や画像の読み込み方法もあわせて見直してみてください。
スマホファーストで考えるレイアウト
実際のアクセスの多くは、スマホから来ることが多いはずです。
そのため、レイアウトはPCではなくスマホを基準に考えるくらいがちょうどいいです。
- スマホで2列表示にしたときに、文字が潰れていないか
- スライド表示にした場合、スワイプできることが直感的に分かるか
- ファーストビューに何枚くらいバナーが見えているか
PCで完璧に見えても、スマホで見ると「文字が小さすぎて読めない」「情報が多すぎてごちゃつく」ということはよくあります。
必ずスマホサイズのプレビューや実機での見え方をチェックして、スマホでの体験を優先して調整してみてください。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問（FAQ）
最後に、SWELLのピックアップバナーに関して、よく聞かれる質問をQ&A形式でまとめておきます。
Q1：ピックアップバナーの画像サイズは必ず16：9にしないとダメですか？
A：絶対に16：9でないとダメというわけではありません。
ただ、比率がバラバラだとレイアウトが崩れて見えやすいので、「全バナーで同じ比率に揃える」ことはかなり重要です。
SWELLでは16：9が扱いやすく、アイキャッチやOGP画像とも相性がよいので、迷ったら16：9に統一するのがおすすめです。
Q2：ピックアップバナーを設置するとサイトが重くなりませんか？
A：画像の枚数や容量によっては重くなる可能性がありますが、きちんと軽量化すれば問題なく運用できます。
- 画像サイズを適切な大きさにする
- 圧縮ツールで容量を減らす
- 必要以上にバナーの枚数を増やしすぎない
こうした工夫をしておけば、ピックアップバナーを使いながらでも表示速度とのバランスを取りやすくなります。
Q3：ピックアップバナーと記事スライダー、両方使っても大丈夫ですか？
A：両方使っても大丈夫ですが、その場合は役割をはっきり分けることをおすすめします。
- ピックアップバナー：サイト全体の案内や定番の導線
- 記事スライダー：目新しい特集記事やキャンペーンのお知らせ
このように、SWELLのピックアップバナーとスライダーの役割を意識して配置すれば、情報過多にならずに、メリハリのあるトップページを作れます。
まとめ：今日からできるSWELLピックアップバナー改善ステップ
この記事の内容を整理します
- ピックアップバナーは、SWELLが用意している「トップページの案内板」のような機能
- 設定は「外観＞メニュー」で中身を決めて、「カスタマイザー＞トップページ＞ピックアップバナー」で見た目を整える、という2ステップ
- 画像は16：9でサイズを揃え、できればCanvaなどでテンプレート化しておくと運用が楽になる
- サイトタイプに合わせて「入口になる記事やページ」をピックアップし、内部リンクのハブとして活用する
- 表示されないときは、メニュー位置のチェックと画像サイズまわりを最優先で見直す
そして、今日から読者の方にやってほしい最初の一歩は、
「ピックアップバナーに載せたいページを3〜4つメモに書き出し、そのページのアイキャッチ画像を同じ比率・似たテイストに揃えること」です。
この準備さえできていれば、あとはこの記事の手順のとおりに設定していくだけで、SWELLのピックアップバナーを十分に活かしたトップページが作れます。
少しずつ調整しながら、自分のサイトらしいピックアップバナーの配置を育てていきましょう。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
