アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
ピックアップバナーは、読者を重要な記事に効率的に誘導できる優秀な機能です。
適切に設定すれば、サイトの回遊率（※）向上や収益アップにも直結します。
回遊率とは、サイトに訪れた人が1回の訪問でいくつの記事を見て回ったかを表す数字です。
回遊率が高いと読者の満足度や滞在時間も伸びやすくなり、結果として検索エンジンにも良い印象を与えやすくなります。
本記事では、SWELL歴3年の筆者が、ピックアップバナーの基本設定から推奨画像サイズ（1200px×630px）、効果的なカスタマイズ方法まで、初心者でもわかりやすく解説します。
画像付きで手順を丁寧に説明しているので、この記事を読んで実践すれば、おしゃれで魅力的なピックアップバナーを作成できますよ。
さっそく始めていきましょう！
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。
SWELLのピックアップバナーとは
SWELLのピックアップバナーを使えば、ブログがより魅力的で見やすいサイトに変わります。
ブログ初心者の方でも簡単に設定できるので、詳しく解説していきます。
トップページに表示される画像リンク機能
ピックアップバナーとは、サイトのトップページで最も目立つ位置に表示される画像付きのリンク機能です。
書店で例えると、入口付近に並んでいる「今月のおすすめ本」のコーナーのような役割を果たします。
訪問者がブログを開いた瞬間に目に入る場所にあるため、特に読んでほしい記事やページへ効率よく誘導できます。
記事スライダーとの違い
ピックアップバナーと同じような機能に、記事スライダーがあります。
ピックアップバナーと記事スライダーには下表のとおり、それぞれ異なる特徴があります。
| 項目 | ピックアップバナー | 記事スライダー |
|---|---|---|
| 表示方法 | 固定表示 | 自動で切り替わる |
| 適した用途 | 特定記事の強調 | 複数記事の紹介 |
| 読み込み速度 | 速い | やや遅い |
| 向いているブログ | カテゴリーが多いブログ | 日記・トレンドブログ |
どちらを使うかは、ブログの目的や読者のニーズに合わせて決めましょう。
記事スライダーについては以下の記事で詳しく解説しています。参考にしてください。
SWELLピックアップバナーのメリット
それでは、ピックアップバナーを設置すると、どんなメリットがあるのでしょうか。
主なメリットは以下の通り。
- 画像付きリンクのため、テキストだけのリンクよりも読者の注意を引きやすい
- 記事の「一等地」に表示されるため、読者に伝えたい内容を確実にアピールできる
記事を読んでいて、「これ面白そう！」と思うバナーを見つけると、、ついクリックしてしまうことはありませんか？
のような読者心理を上手に活用できるのが、ピックアップバナーならではの大きな強みです。
アッフィーブログ運営でぜひとも活用したい機能ですね
SWELLピックアップバナーの設置方法
ピックアップバナーの設置は次の4つのステップで完了します。
初心者の方でも迷わずに進められるよう、画像を用いて詳しく解説していきます。
STEP1：新規メニューを作成する
WordPress管理画面の「外観」⇒「メニュー」の順にクリックしてメニュー編集画面を開きましょう。
初めてメニューを開いた場合は以下のような画面になります。
まだメニューが作成されていないので、「最初のメニューを以下で作成しましょう」と表示されています。
まずは、①メニュー名に「ピックアップバナー」など分かりやすい名前を入力してください。
メニュー名は自分が管理しやすい名前であれば何でも構いません。
入力が完了したら②「メニューを作成」ボタンをクリックして、ピックアップバナー専用のメニューを作成してください。
「新しいメニューを作成しましょう」をクリックしてください。
①メニュー名に「ピックアップバナー」など分かりやすい名前を入力します。
メニュー名は自分が管理しやすい名前であれば何でも構いません。
入力が完了したら②「メニューを作成」ボタンをクリックして、ピックアップバナー専用のメニューを作成してください。
STEP2：メニュー項目を追加する
次に画面左側の「メニュー項目を追加」エリアから、ピックアップバナーに表示したいコンテンツを選択します。
コンテンツは投稿記事、固定ページ、カテゴリー、カスタムリンクの中から選ぶことができます。
今回は、読んでほしい4つの投稿を選びます。
「メニュー項目を追加」から「投稿」を開き、①4つの投稿にチェックを入れ、②「メニューに追加」ボタンをクリックします。
「メニューに追加」をクリックすると、右側のメニュー構造に追加されます。
STEP3：ピックアップバナーに設定する
画面下部にある「メニュー設定」の「ピックアップバナー」にチェックを入れます。
チェックを入れないとピックアップバナーとして表示されませんので、注意してください。
メニュー項目の並び順を変更したい場合は、ドラッグ&ドロップで自由に変更できます。
左から表示したい順番に並べ替えたら「メニューを保存」をクリックして設定を完了させましょう。
STEP4：表示を確認する
設定が完了したら、実際にサイトのトップページを開いてピックアップバナーが正しく表示されているかを確認しましょう。
メインビジュアルの下にバナーが表示されていれば設定成功です。
スマートフォンでも表示を確認し、レスポンシブデザインが正常に機能していることも合わせてチェックしておきましょう。
SWELLピックアップバナーに適した画像サイズ
美しく表示されるピックアップバナーを作るには、適切な画像サイズを知ることが重要です。
そこで、ここでは最適なサイズと変更方法を解説します。
推奨サイズは横幅1200px×縦幅630px
ピックアップバナーには横幅1200px×縦幅630pxのサイズが最も適しています。
横幅1200px×縦幅630pxのサイズをお勧めする理由は、
・Googleが画像サイズの幅を1200px以上としている
・アイキャッチ画像の推奨サイズが横幅1200px×630pxである
からです。
アイキャッチ画像と同じサイズなので、一度作成した画像を使い回せる点も大きなメリットとなります。
画像サイズを変更する方法
既存の画像を推奨サイズに変更するには、無料のデザインツール「Canva」が最も簡単でおすすめです。
Canvaのカスタムサイズ機能で「1200×630」と入力し、画像をアップロードして範囲いっぱいまで調整するだけで完了します。
実際にやってみましょう。
①「幅」に1200、「高さ」に630と入力し、②「新しいデザインを作成」をクリックしましょう。
左のサイドバーにある「アップロード」をクリックし、「ファイルをアップロード」ボタンをクリックして画像をアップロードしてください。
アップロードした画像をクリックしてください。
キャンバスに画像が挿入されます。
キャンバスに挿入された画像をキャンバスいっぱいになるまで広げましょう。
画像によってはカットされる部分がでてきますので、位置を調整してください。
位置を修正したら、「共有」⇒「ダウンロード」の順にクリックします。
ファイルの種類を選択し（PNGを推奨）、「ダウンロード」ボタンをクリックしてください。
アッフィーこれで画像サイズの変更は完了です。
SWELLピックアップバナーのカスタマイズ方法
ピックアップバナーは、カスタマイザーを使ってカスタマイズできます。
カスタマイズの手順
カスタマイズの手順は次の通りです。
WordPress管理画面のメニューから「外観」⇒「カスタマイズ」と順番にクリックします。
表示された画面の左側のメニューの「トップページ」をクリックしてください。
左側メニューの「ピックアップバナー」をクリックしましょう。
①左側の項目に沿ってカスタマイズを行い、②「公開」をクリックすればカスタマイズは完了です。
カスタマイズできる項目は3つです。
それぞれ詳しく見ていきましょう。
バナーレイアウトの設定
ピックアップバナーの表示レイアウトは、PC版とスマートフォン版でそれぞれ異なる設定が可能です。
PC版では「固定幅4列」「固定幅3列」「固定幅2列」「フレックス」の4種類から選択できます。
スマートフォン版では「固定幅2列」「固定幅1列」「スライド」の3種類が用意されています。
バナーデザインの調整
バナーの見た目は「バナータイトルのデザイン」「内側に白線をつける」「バナー画像を少し暗くする」の3つの要素で調整できます。
アッフィー組み合わせ次第で、いろいろなデザインが作成できますよ
その他の設定
トップページ以外の下層ページにも表示する
「トップページ以外の下層ページにも表示する」にチェックを入れると、投稿ページや固定ページでもバナーが表示されます。
チェックを入れて、投稿ページを表示すると、記事の先頭にピックアップバナーが表示されます。
Lazyload（※）を強制オフにする
Webサイトを表示する際に画像や動画などの容量の大きいファイルを、ページを最初からすべて読み込まず、「必要なときだけ後から読み込む」技術や仕組みのことをいいます。
「Lazyloadを強制オフにする」にチェックをすると、画像の表示速度が速くなります。
サイト全体の表示速度が遅くなる可能性があるため、必要な場合のみチェックするようにしましょう。
SWELLピックアップバナーの画像を変更する方法
アイキャッチ画像とは別の画像をピックアップバナーに表示したい場合もありますよね。
そんな時は、画像URLを使えば簡単に変更できます。
手順は以下のとおりです。
画像URLを取得する
まず、ピックアップバナーに表示したい画像のURLを取得しましょう。
WordPress管理画面から「メディア」→「ライブラリ」の順にクリックします。
使用したい画像を選択します。
画像の詳細画面が開いたら、右側にある「URLをクリップボードにコピー」ボタンをクリックしてください。
これで画像のURLがコピーされ、次のステップで使用できる状態になりました。
メニューの説明欄に設定する
「外観」→「メニュー」からピックアップバナーのメニューを開きましょう。
画像を変更したい項目の下向き矢印をクリックして詳細設定を表示させます。
①「説明」欄に先ほどコピーした画像URLを貼り付けて、②「メニューを保存」をクリックすれば完了です。
もし「説明」欄が表示されていない場合は、画面右上の「表示オプション」をクリックして「説明」にチェックを入れると、「説明」欄が表示されるようになります。
SWELLピックアップバナーが表示されない場合の対処法
ピックアップバナーが表示されない場合は、いくつかの原因が考えられます。
最も多い3つの原因と解決方法を順番に確認していきましょう。
アイキャッチ画像が設定されているか確認する
ピックアップバナーが表示されない最も多い原因は、メニューに追加した記事やページにアイキャッチ画像が設定されていないことです。
各記事の編集画面を開き、サイドバーの「アイキャッチ画像」欄に画像が設定されているかを確認してください。
画像が設定されていない場合は、「アイキャッチ画像を設定」をクリックして適切な画像を選択しましょう。
メニューの位置設定を確認する
メニューを作成しても「メニューの位置」でピックアップバナーが選択されていなければ表示されません。
「外観」→「メニュー」から該当のメニューを開きます。
画面下部の「メニュー設定」で「ピックアップバナー」にチェックが入っているかを確認してください。
チェックが外れている場合はチェックを入れて「メニューを保存」をクリックしましょう。
キャッシュをクリアする
設定は正しくできているのに表示されない場合は、キャッシュ（サイトの表示を高速化するために保存されている古いデータ）が原因の可能性があります。
管理画面のSWELL設定画面からキャッシュをクリアしてください。
まず、WordPress管理画面の「SWELL設定」⇒「SWELL設定」の順にクリックします。
「リセット」タブをクリックしてください。
キャッシュのクリアの項目の「キャッシュを削除する」ボタンをクリックしましょう。
これで最新の設定が反映され、画像も表示されるはずです。
SWELLピックアップバナーを効果的に活用するコツ
ピックアップバナーを設置しただけでは、十分な効果は得られません。
より多くの読者にクリックしてもらうための3つのコツをご紹介します。
デザインの統一感を意識する
ピックアップバナー全体で色合い・フォント・画像のテイストを統一しましょう。
バラバラなデザインは「素人っぽい」印象を与え、サイトの信頼性を損なってしまいます。
【統一するポイント】
- 背景色を同じ系統でまとめる
- 文字のフォントを揃える
- 画像の明度・彩度を合わせる
統一されたデザインで、プロフェッショナルな印象を与え、他サイトと差別化しましょう。
クリックされやすい画像を選ぶ
ピックアップバナーには、鮮やかな色使いや表情豊かな人物の顔を使いましょう。
人間は無意識に人の顔に注目するため、自然と視線を集められるからです。
また、「5つのコツ」「30日で変化」など具体的な数字を画像内に配置すると、読者の興味をより引きつけられます。
定期的に内容を見直す
ピックアップバナーは「設置したら終わり」ではなく、月に1回程度は効果を検証して内容を見直すことが必要です。
アクセス解析ツールでクリック率を確認し、効果の低いバナーは別の記事やデザインに変更してみましょう。
季節に合わせた内容への更新や、新しく人気が出た記事への差し替えも効果的です。
定期的なメンテナンスで、常に読者にとって魅力的なコンテンツを提供しましょう。
まとめ｜SWELLピックアップバナーでサイトの魅力を向上させよう
今回は、SWELLでピックアップバナーの設置方法から活用コツまでを詳しく解説しました。
【本記事で解説したこと】
- ピックアップバナーとは？
- ピックアップバナーの設置方法
- 推奨画像サイズ（1200px×630px）での最適化
- カスタマイザーを使ったレイアウト・デザイン調整
- 画像URLを使った表示画像の変更方法
- ピックアップバナーが表示されない場合の対処法
- 効果的な活用コツ（デザイン統一・画像選び・定期見直し）
SWELLのピックアップバナーを使うと、サイトがグッとオシャレになります。
設定も簡単なので、ピックアップバナーを活用してブログをより魅力的にしていきましょう。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、直感的に操作できるSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
