SWELLを入れてみたものの、「プロモーションバナーってどこで出すの？」「サイドバーや記事下にどうやって置けばいいの？」と手が止まっていませんか。
結論からいうと、プロモーションバナーは「置き場所を決めて、読者に伝わるひと言をのせる」だけで、しっかり仕事をしてくれます。
ここからは、私がつまずいたポイントも含めて、順番にやさしく解説していきます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLプロモーションバナーで何ができる？まず全体像を整理しよう
最初に、SWELLのプロモーションバナーで何ができるのか、ざっくり全体像を押さえておきましょう。
SWELLのプロモーションバナーとは？
SWELLには「[SWELL] プロモーションバナー」という専用ウィジェットがあります。サイドバーやフッターなどのウィジェットエリアに入れるだけで、SWELL公式サイトへのリンクや、自分の紹介リンク付きのバナーを簡単に表示できる仕組みです。
| 項目 | 内容のイメージ |
|---|---|
| 表示できる場所 | 追尾サイドバー、PCフッター、記事下用のウィジェットエリアなど |
| 表示される要素 | SWELLのロゴ画像、簡単な紹介文、リンクボタン |
| リンク先 | リンク先URLを空にすると公式サイト、URLを入れるとそのリンクに飛ぶ |
| 設定に使う画面 | WordPress管理画面の「外観」→「ウィジェット」 |
| 想定している役割 | SWELLをおすすめするための常設の紹介枠 |
記事の中に広告を挿入する機能ではなく、「サイドバーやフッターなどに、いつも置いておく紹介スペース」として使うイメージを持つと分かりやすいです。
どんな人に向いている機能なのか
プロモーションバナーのウィジェットは、次のような人に相性がいいです。
- SWELLを使っていて、「このテーマいいよ」と読者にも紹介したいブロガー
- サイドバーやフッターに、シンプルなSWELLの紹介エリアを作りたい人
- 画像編集やHTMLはあまり得意ではないけれど、きちんとしたバナーを出したい人
- テキストリンクだけでなく、見た目でもSWELLをアピールしたい人
逆に、デザインにとことんこだわりたい人は、このウィジェットに加えて、後半で紹介する別のバナー機能やブログパーツも組み合わせると、より自由度が上がります。
この記事のゴールと前提
この記事のゴールは、読み終えたときに次の状態になっていることです。
- プロモーションバナーのイメージと役割が分かっている
- サイドバーかフッターか記事下のどこかに、自分のバナーを1つ置けている
- 「この位置のほうが読者に届きそうだな」と自分で判断できる
前提として、SWELLテーマ本体はすでに有効化されていること、そしてブロックエディターの基本操作はなんとなく分かる、というレベルを想定しています。
SWELLプロモーションバナーを使う前に整えておきたい準備
いきなりウィジェットを触り始める前に、最低限そろえておきたい準備を整理しておきます。
SWELL本体とライセンス周りの確認
まずは、SWELLのテーマがきちんと動いているかを確認します。ここがあやふやだと、「そもそもプロモーションバナーが出てこない」という状態になりがちです。
- 「外観」→「テーマ」で、SWELLかSWELLの子テーマが有効になっているか
- 親テーマとしてSWELL本体がインストールされているか
- SWELLのユーザー登録や認証が済んでいて、アップデートが反映されているか
他のテーマが有効になっていると、[SWELL] プロモーションバナーのウィジェット自体が表示されないので、ここは先にチェックしておきましょう。
SWELLを紹介するためのリンクを用意する
次に、「プロモーションバナーからどこに飛ばしたいか」を決めます。ここが決まっていないと、バナーを置いてもクリックの行き先があいまいになってしまいます。
- SWELLの公式サイトにそのまま飛ばす
- 自分のSWELLレビュー記事や解説記事を経由させる
- 自分の紹介リンク（アフィリエイトリンク）を使って、公式サイトへ案内する
ウィジェットの設定でリンク先URLを空のままにしておくと、自動的に公式サイトのURLが入る仕様になっています。SWELLを紹介するためのリンクを持っている場合は、そのURLを入力しておくと、そのまま収益につながる導線になります。
バナーに載せる画像と文章をざっくり決めておく
プロモーションバナーの設定自体はシンプルですが、「どんな言葉を載せるか」「どんな見せ方にするか」を事前に考えておくと作業がスムーズです。
- 使いたい画像（公式のバナー画像や、自作のヘッダー画像など）
- キャッチコピーの方向性（作業の楽さ、デザイン性、表示速度など）
- 短い説明文（自分が使ってみた感想や、どんな人に向いているか）
- ボタンのテキスト（例：「SWELL公式サイトを見る」「機能を詳しく見る」など）
メモ帳でもいいので、あらかじめ文章候補をざっと書き出しておくと、ウィジェットの入力欄にそのままコピペできて楽になります。
SWELLプロモーションバナーの主な設置場所と役割
ここからは、プロモーションバナーをどこに置くのが定番なのか、よく使われる3つの場所と役割を整理していきます。
サイドバーにSWELLプロモーションバナーを置く
もっとも王道なのがサイドバーです。追尾サイドバーに置いておくと、スクロールしても画面の横にずっとついてきてくれるので、目に触れる回数が増えます。
サイドバーへの設置の流れは、次のようになります。
| 手順 | 操作内容 |
|---|---|
| 1 | 管理画面で「外観」→「ウィジェット」を開く |
| 2 | 「共通サイドバー」や追尾サイドバーなど、表示させたいエリアを選ぶ |
| 3 | 利用できるウィジェットの中から「[SWELL] プロモーションバナー」をドラッグ＆ドロップ |
| 4 | タイトルやリンク先URLなどの項目を入力して保存 |
| 5 | ブログを開き、サイドバーに正しく表示されているか確認する |
サイドバーは、プロフィールや検索、人気記事などと並ぶ目立つエリアです。あれもこれも入れたくなりますが、「読者に特に見てほしいものは何か」を考えて、優先度の高いウィジェットの一つとしてプロモーションバナーを置いてあげると、スッキリした構成になります。
フッターにSWELLプロモーションバナーを置く
もう一つ定番なのがフッターです。PCフッターのカラムや、フッター内部のウィジェットエリアにプロモーションバナーを入れておくと、記事を読み終えたタイミングでじっくり見てもらえます。
フッターに置くメリットは次のとおりです。
- 記事やページを読み終えた後に、自然な流れでSWELLを紹介できる
- サイドバーのないシンプルなレイアウトでも、下部にしっかり紹介枠を作れる
- 全ページ共通のフッターに設定すれば、どのページからでもSWELLに案内できる
フッターは情報を詰め込みすぎると重たく感じてしまうので、プロモーションバナーのほかには、プロフィールや問い合わせなど、最低限のコンテンツに絞ると見やすくなります。
記事下にブログパーツを使って大きめのプロモーションを出す
SWELLの公式サイトのような、少し大きめの紹介エリアを記事下に出したいときは、ブログパーツを使うのがおすすめです。プロモーションバナーのウィジェットと組み合わせると、より柔軟な見せ方ができます。
大まかな流れは次のようになります。
- ブロックエディターで、画像＋テキスト＋ボタンを組み合わせて紹介エリアを作る
- そのブロック一式をブログパーツとして登録する
- 記事下用のウィジェットエリアに、ブログパーツのショートコードやカスタムHTMLを設置する
こうしておくと、「紹介文を少し変えたい」「ボタンの文言を変えたい」というときも、ブログパーツ側を1回編集するだけで、すべての記事下に変更が反映されるので管理がとても楽になります。
SWELLプロモーションバナーの作り方とデザイン例
【稼げるキーワード教えます】
▼ ▼ ▼
ここからは、SWELLのプロモーションバナーを実際に作るときの考え方と、クリックされやすくするためのコツをまとめていきます。
公式サイト風SWELLプロモーションバナーを再現する流れ
SWELL公式サイトのような、画像とテキストがまとまった紹介エリアは、ブロックエディターを組み合わせるとかなり近い形で再現できます。
作るときの流れは、おおよそこんな感じです。
- 使いたい画像をメディアライブラリにアップロードしておく
- 見出しブロックや段落ブロックで、キャッチコピーと短い説明文を書く
- ボタンブロックで「公式サイトを見る」などのボタンを追加し、リンク先を設定する
- 画像＋テキスト＋ボタンをグループブロックでまとめて、背景色や余白を整える
- 完成したグループをブログパーツに登録し、記事下やウィジェットから呼び出す
プロモーションバナーのウィジェットはシンプルな紹介枠として使い、より大きくじっくり見せたいときは、こういったブログパーツと組み合わせると、読者にとっても分かりやすい導線になります。
クリックされやすい文章とボタン文言のコツ
同じ場所にバナーを置いていても、テキストの違いでクリック率は大きく変わります。私が意識しているポイントをいくつか紹介します。
- キャッチコピーは「誰のどんな悩みに効くのか」が伝わるように書く
- 説明文では、「このブログでも使っている」と自分の利用状況を一言添える
- ボタンには「何が起きるか」が分かる具体的な動詞を入れる
例えば、「詳細はこちら」だけだと少しぼんやりしますが、「SWELLの機能を詳しく見る」「SWELLの特徴と料金をチェックする」といった文に変えるだけで、クリック後のイメージがはっきりします。
スマホで崩さないためのレイアウト調整
プロモーションバナーを作ったら、必ずスマホ表示でも確認しましょう。パソコンではちょうどよく見えても、スマホだと窮屈に感じることがあります。
- 画像サイズは、横長すぎず、テキストと一緒に見やすい幅に抑える
- 1つのブロックに文章を詰め込みすぎず、改行や段落で区切る
- 上下の余白を少し広めにとって、窮屈な印象を和らげる
- スマホプレビューで、スクロール量やバナーの長さを実際に確認する
SWELLはレスポンシブ対応がしっかりしているので、基本的には大きく崩れません。とはいえ、テキストを入れすぎるとどんなテーマでも読みにくくなってしまうので、「あと一文減らせないか？」くらいの気持ちで見直すと、スッと読みやすくなります。
SWELLのバナー機能4種とプロモーションバナーの使い分け
SWELLには、プロモーションバナー以外にも、いくつかのバナー機能があります。それぞれの役割を知っておくと、「どの機能を使えばいいか」で迷いにくくなります。
プロモーションバナーとバナーリンクの違い
まず、混同されやすいのがプロモーションバナーとバナーリンクです。役割のイメージを比べてみます。
| 機能名 | 主な用途 | 設置する場所 |
|---|---|---|
| プロモーションバナー | SWELLを紹介するための常設バナー | サイドバーやフッターなどのウィジェットエリア |
| バナーリンク | 特定の記事やページへ画像付きで誘導 | 記事本文の中や固定ページ |
プロモーションバナーは、基本的にSWELLを紹介するための専用枠として使い、バナーリンクは「おすすめ記事」「特集ページ」「キャンペーンページ」など、さまざまなページへの導線づくりに使う、という整理にしておくと迷いません。
カスタムバナー・ピックアップバナーとの比較
さらにSWELLには、ショートコードで作るカスタムバナーや、トップページ向けのピックアップバナーといった機能もあります。
| 機能名 | 役割のイメージ | 主な表示場所 |
|---|---|---|
| プロモーションバナー | SWELLをおすすめする紹介枠 | サイドバー・フッターなど |
| バナーリンク | 記事や特集ページへの画像付きリンク | 記事内・固定ページ |
| カスタムバナー | ショートコードで呼び出せるオリジナルバナー | 記事内やウィジェットなど柔軟に配置 |
| ピックアップバナー | 複数の記事を並べて目立たせるエリア | トップページのピックアップセクション |
プロモーションバナーはSWELLの紹介に特化させておき、その他のテーマやサービスを紹介したいときは、バナーリンクやカスタムバナーを使う、と役割を分けると、読者から見ても分かりやすくなります。
どの場面でどのバナーを選ぶべきか
実際にサイトを作るときに迷いやすいので、場面ごとに使い分け方をまとめておきます。
- 自分のブログで使っているメインテーマとしてSWELLを紹介したい
→ サイドバーやフッターにプロモーションバナー - 「この記事を読んだ人には、このまとめ記事も読んでほしい」と思う場合
→ 記事内にバナーリンク - 何度も使いまわしたいバナーを作りたい場合
→ カスタムバナーやブログパーツ - トップページで複数の記事を並べて見せたい場合
→ ピックアップバナー
こうやって役割を分けておくと、プロモーションバナーが何でも担当してしまうことを防げますし、読者も「ここはSWELLを紹介しているんだな」と直感的に理解しやすくなります。
SWELLプロモーションバナーでクリック率を上げるコツ
プロモーションバナーをただ置くだけで終わらせないための、ちょっとしたコツを紹介します。
設置位置ごとの役割を意識する
同じデザインのバナーでも、「どこに置くか」で果たす役割が変わります。ざっくり整理すると次のようなイメージです。
| 設置場所 | 役割のイメージ |
|---|---|
| サイドバー | サイトを回遊しているあいだ、いつでも目に入るおすすめ枠 |
| フッター | 記事を読み終えた人が、次に何をするか考えるタイミングで見せる場所 |
| 記事下 | 記事内容に納得した直後に、背中を押す役割のエリア |
例えば、記事下に置くプロモーションバナーには、その記事の内容にひと言だけ触れてからSWELLを紹介する文章を入れるなど、場所に合わせて少しメッセージを変えてあげると、読者の心に届きやすくなります。
テキストとデザインを少しずつ変えて試す
プロモーションバナーは、一度作って終わりではなく、少しずつ育てていく感覚で調整していくと伸びやすいです。
- ボタンの文言を変えてみる（例：「公式サイトへ」→「SWELLの特徴を見る」など）
- キャッチコピーの切り口を変える（作業の楽さ重視か、デザイン性重視かなど）
- 背景色とボタン色のコントラストを調整して、視線の流れをつくる
いきなりガラッと変えると、何が良かったのか悪かったのか分かりにくくなるので、1つずつ変えて様子を見るのがおすすめです。
クリック数をざっくりでも計測しておく
本格的な解析ツールを使わなくても、どの位置のバナーがよくクリックされているかを知っておくと、改善のヒントになります。
- サイドバー用・フッター用・記事下用で、それぞれリンク先を変えておく
- 解析ツールで、どのリンクがよくクリックされているかを確認する
- 反応が良い場所には、少し情報量を増やすなど、メリハリをつけてみる
数字を見ながら少しずつ調整していくと、「このブログでは、記事下のプロモーションバナーが一番反応が良い」といった傾向も分かってきます。
よくある質問（SWELL プロモーションバナー編）
最後に、SWELLのプロモーションバナーまわりで実際によく聞かれる質問をまとめておきます。
Q1. プロモーションバナーのウィジェットが見つかりません
A. 「外観」→「ウィジェット」を開いたときに、[SWELL] プロモーションバナーが表示されない場合は、テーマとしてSWELLが有効になっているかを確認してみてください。別のテーマが有効になっていると、SWELL専用のウィジェットは一覧に出てきません。
それでも見つからないときは、子テーマではなく親テーマ側の状態や、SWELLのアップデート状況も合わせてチェックしてみると原因が見つかることがあります。
Q2. プロモーションバナーのリンク先に自分の紹介リンクを使ってもいいですか？
A. リンク先URLに自分の紹介リンクを設定しても、基本的には問題ありません。リンク先URLを空にしておくと公式サイトに自動で飛ぶようになり、URLを入れるとそのリンクに飛ぶ仕様になっています。
ただし、紹介プログラムやSWELL側の利用規約がある場合は、そのルールに従うことが大前提です。紹介リンクやバナー素材の扱いについては、一度は必ず規約に目を通しておくと安心です。
Q3. 記事の途中にSWELLの紹介バナーを入れたいのですが、どうすればいいですか？
A. サイドバーやフッターではなく、記事内の途中にSWELLの紹介バナーを入れたい場合は、広告タグ機能やバナーリンク、カスタムバナーなどを組み合わせて使う方法があります。
プロモーションバナーのウィジェットはウィジェットエリア専用なので、記事の途中に出したいときは、記事内に挿入できる別の機能を使う、というイメージで覚えておくと分かりやすいです。
まとめ：SWELLプロモーションバナーで“推しテーマ”を育てよう
この記事のポイントをまとめます
- プロモーションバナーは、SWELLを紹介するための専用ウィジェットで、サイドバーやフッターに簡単に設置できる
- 設置前に、SWELL本体の状態と紹介用リンク、載せたい文章を用意しておくと作業がスムーズ
- サイドバー・フッター・記事下で役割を分けて考えると、読者目線の導線を作りやすい
- バナーリンクやカスタムバナー、ピックアップバナーと使い分けることで、サイト全体の流れが整理される
- テキストや色を少しずつ変えてクリックの様子を見ると、自分のブログに合ったプロモーションバナーに育っていく
今日やるべき最初の一歩は、「どこに最初のプロモーションバナーを置くか」を決めて、ウィジェットから1つ設置してみることです。
サイドバーでもフッターでもかまいません。1か所出してみると、「ここにもあったほうがいいな」「レビュー記事も用意しておこうかな」といった次のアイデアが自然と出てきます。
自分のブログの“推しテーマ”として、少しずつプロモーションバナーを育てていきましょう。
記事を読んだらコチラ
▼ ▼ ▼
