SWELL追従ボタン・追従バナーの作り方5選【スマホ対応】

SWELLで追従ボタンや追従バナーを付けたいけれど、細かい設定やCSSでつまずいていないでしょうか。

SWELLの標準機能と最低限のCSSがあれば、PCもスマホもちゃんとした追従ボタン・追従バナーを作れます。

先に結論をいうと、SWELLの追従ボタンや追従バナーは「ブログパーツ＋ウィジェット＋ちょっとしたCSS」が基本セットです。ここからは、私が実際にサイト制作や自分のブログで試してきた流れをもとに、順番に解説していきます。

SWELLの追従ボタン・追従バナーとは何かざっくり整理しよう

追従ボタン・追従バナーの役割とメリット

SWELLの追従ボタンや追従バナーは、一言でいうと「スクロールしても画面の一定の位置に残り続けるリンクやバナー」です。読者が「問い合わせしたい」「予約したい」と思った瞬間に、すぐ押せる場所にいるのが強みです。

種類	主な表示位置	目的・メリットの例
追従ボタン	画面の下・右下など	お問い合わせや資料請求、LPへのリンクを常に表示できる
追従バナー	画面右端や画面下の帯	キャンペーンや予約ページへの導線を大きく見せられる
スマホ用追従バナー	スマホ画面の下固定	親指でタップしやすく、離脱前に行動を促しやすい

大事なのは、「一番押してほしい行動」を追従ボタンや追従バナーにまとめることです。いろいろ詰め込みすぎると、結局どれも押されなくなるので、優先度をしっかり決めておくと運用しやすくなります。

SWELLで追従させやすい場所を知っておこう

SWELLはもともと導線設計がしやすいテーマなので、追従ボタン・追従バナーと相性のいい場所がいくつか用意されています。

SWELLの追従ボタンや追従バナーは、こうした機能を組み合わせるイメージです。テーマに元からある機能を生かしつつ、足りないところだけCSSで補うと、あとからレイアウトを変えたくなったときも対応しやすくなります。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

SWELL追従ボタンの基本パターンと作り方

まず決めるべきは「どこで・何を押してほしいか」

ありがちな失敗が、「とりあえずカッコいいから追従ボタンを付けてみた」という状態です。これだと、ボタンがあっても成果につながりにくいです。作業を始める前に、次の3つだけは決めておくと迷いにくくなります。

決めること	考えるポイント	例
ゴール	ボタンを押したあとにしてほしい行動	お問い合わせ、予約、LINE追加、資料請求など
表示位置	どのページで、どのデバイスに出すか	全ページ、サービスページだけ、ブログ記事だけなど
文言	押したくなる一言になっているか	「無料で相談する」「30秒で予約する」など

この3つが決まっていると、「とりあえず追従させる」のではなく、「ここぞという場所にだけ出す」追従ボタンにできます。私の経験では、最初はお問い合わせか公式LINEのどちらか1つに絞ったほうが、運用もしやすく、分析もしやすいです。

記事下ボタン＋追従ボタンで二段構えにする

SWELLにはボタンブロックが用意されているので、まずは記事の一番下に通常のボタンを置き、同じ内容の追従ボタンを作るやり方がおすすめです。読者は「記事末尾のボタン」か「追従ボタン」の好きなほうから行動できます。

具体的な流れは次のとおりです。

• 記事の最後にボタンブロックで「お問い合わせはこちら」などのボタンを作る
• そのボタンを含むブロック全体をブログパーツとして登録する
• ブログパーツを、追尾サイドバーやフッター直前のウィジェットに呼び出す

こうしておくと、ボタンの色や文言を変えたいときに、ブログパーツを1か所修正するだけで、記事末尾と追従ボタンの両方に変更が反映されます。A/Bテスト的に文言を変えたいときも、管理がかなりラクになります。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐその秘密を見る

SWELL追従バナー（PC向け）の作り方

ブログパーツで追従バナーの「中身」を作る

追従バナーの中身は、ブログパーツとして作っておくと再利用しやすくなります。企業サイトや店舗サイトでよく見る「右端に縦長の予約バナー」なども、この方法で作れます。

構成のイメージを表にまとめます。

要素	内容の例	ポイント
アイコン	電話・チャット・LINEなどのシンプルなアイコン	ひと目で「相談」や「予約」と分かるものにする
見出しテキスト	「Web集客のご相談はこちら」など	何のバナーか1秒で伝わる言葉にする
補足テキスト	「相談無料」「かんたん入力だけ」など	行動のハードルを下げる一言を添える
ボタン	「フォームで問い合わせる」「予約フォームを開く」など	一番押してほしい行動に絞る

このブログパーツを1つ作っておけば、右サイドに出したり、ページ下に出したりと、配置だけを変えていくことができます。同じようなバナーを複数サイトで使い回したいときにも便利です。

ウィジェットとCSSで追従させる

PC向けの追従バナーは、ウィジェットエリアにブログパーツを呼び出し、CSSで固定するパターンが定番です。SWELLの追尾サイドバーやフッター直前ウィジェットをうまく活用しましょう。

ざっくりした手順は次のとおりです。

• ウィジェットエリアにブログパーツを追加する
• そのウィジェット全体にクラス名（例：pc-follow-banner）を付ける
• 追加CSSや子テーマのstyleファイルで、そのクラスを固定配置にする

CSSのイメージはこんな感じです。

.pc-follow-banner { position: fixed; right: 20px; bottom: 20px; }

実際にはサイトのデザインや他のウィジェットとの兼ね合いで数値調整が必要ですが、やっていることは「特定のボックスにposition: fixedを指定する」だけです。PCだけに表示したい場合は、メディアクエリでスマホでは非表示にする設定をしておくと安心です。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

SWELL追従バナーのスマホ対応の基本

固定フッターメニューでスマホ追従ボタンを作る

SWELLには「固定フッターメニュー（SP）」という機能があり、メニューと連動させるだけで、スマホ画面の下にボタンを並べられます。コードを書かなくても、いわゆるスマホの追従ボタンを作れるイメージです。

固定フッターメニューに入れる項目の例はこんな感じです。

メニュー名	リンク先	アイコンの例	向いているサイト
ホーム	トップページ	家のアイコン	ブログ・メディア全般
記事一覧	投稿一覧やカテゴリーページ	リストのアイコン	記事数が多いブログ
問い合わせ	お問い合わせフォーム	手紙やチャットのアイコン	サービスサイト、制作会社など
予約する	予約フォームや外部予約サービス	カレンダーアイコン	サロン、クリニック、教室など

メニューを作成し、表示位置に「固定フッターメニュー（SP）」を指定すれば、SWELLがスマホ画面下に追従メニューを出してくれます。特に店舗サイトやサービスサイトでは、「問い合わせ」「予約」「電話」あたりを入れておくと、スマホからの行動がぐっと増えやすくなります。

ブログパーツ＋CSSでオリジナルスマホ追従バナー

「固定フッターメニューだと項目が多くなりすぎる」「1つのボタンをとにかく目立たせたい」という場合は、ブログパーツとCSSを組み合わせて、オリジナルのスマホ追従バナーを作る方法もあります。

基本的な流れはPC版の追従バナーと同じで、スマホだけに表示するように調整します。

• ブログパーツで、画面下に出したい横長バナーを作る
• バナー全体にクラス名（例：sp-fixed-banner）を付ける
• メディアクエリ付きのCSSで、スマホ画面の下に固定表示する

スマホ用の追従バナーのパターンを表にまとめると、こんなイメージです。

パターン	文言の例	特徴	向いているサイト
シンプルボタン型	「無料で相談する」ボタン1つ	邪魔になりにくく目的がはっきりする	コンサル、士業、個人事業主など
2分割ボタン型	「LINEで相談」「フォームで相談」	選択肢を2つに絞りつつ、好みで選べる	店舗サイト、サロン系など
画像＋ボタン型	写真＋「今すぐ予約」ボタン	画像で雰囲気を見せつつボタンで誘導できる	クリニック、エステ、物販LPなど

スマホ追従バナーで意識したいのは、「親指で押しやすい大きさ」と「本文をつぶさない高さ」です。バナーの高さを大きくしすぎると、読者が本文を読む前に閉じたくなってしまうので、最初は控えめなサイズから試すと様子を見やすいです。

サイトの種類別：SWELL追従ボタン・バナー設計のコツ

サイトタイプ別に優先する導線を決める

まずは「このサイトで一番してほしいことは何か」をはっきりさせます。追従ボタンや追従バナーは、そのゴールに合わせて配置を考えていくと迷いません。

サイトタイプ	優先したいゴール	相性のいい追従ボタン・バナー
ブログ・アフィリエイト	関連記事へ誘導・商品購入	記事下ボタン＋関連記事や特集ページへの追従リンク
コーポレートサイト	問い合わせ・資料請求	右サイドの追従バナー＋スマホ下部の問い合わせボタン
店舗サイト	予約・電話・地図の閲覧	スマホ画面下に「予約」「電話」「地図」の固定メニュー
LP（ランディングページ）	申し込み・資料請求	ページ下部の固定追従バナー＋最下部の申し込みボタン

ブログであれば、読者に「この記事の次に読んでほしい1記事」へのリンクを追従ボタンにしておくのも手です。逆に、店舗サイトなら、とにかく「予約」や「電話」が最優先なので、スマホ版の追従バナーの重要度がかなり高くなります。

邪魔にならない表示のルールを決めておく

追従ボタンや追従バナーは便利ですが、押しつけがましく感じられてしまうと逆効果です。SWELLで設定するときも、あらかじめ「出し方のルール」を決めておくと安心です。

SWELLの追従ボタンや追従バナーは、「常に売り込み続けるためのもの」ではなく、「行動したくなった瞬間にすぐ押せるショートカット」として考えると、読者との距離感がちょうどよくなります。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

クリックされるデザインと文言のポイント

色・サイズ・文言のバランス

SWELLはサイト全体のメインカラーを決めておけるので、追従ボタンや追従バナーも、そのテーマカラーをベースにすると統一感が出ます。そのうえで、次のようなポイントを意識してみてください。

項目	コツ	避けたい例
色	テーマカラーより少し濃い色でボタンを作る	本文と同じグレーにして目立たなくなる
サイズ	スマホでは親指で押しやすい縦幅をしっかり確保する	細すぎてタップしづらい横長ボタン
文言	押したあとの行動がイメージできる言葉にする	「クリック」「詳細はこちら」など漠然としすぎる

例えば「お問い合わせ」だけより、「無料で相談する」「料金の目安を聞いてみる」といった表現のほうが、クリックしたあとのイメージがはっきりします。特にスマホの追従ボタンは文字数が限られるので、短くても意味が伝わる言葉を意識すると良いです。

アクセシビリティと使いやすさの視点

少し地味に感じるかもしれませんが、SWELLの追従ボタン作りで差が出やすいのがアクセシビリティです。ここまで配慮できると、ちょっと上級者っぽい仕上がりになります。

特に、スマホ版の追従バナーは画面下に常に表示されるので、サイズや配置のストレスが出やすい部分です。自分のスマホで実際に何度か押してみて、「小さすぎないか」「別のボタンを誤タップしないか」を確かめておくと安心です。

トラブル対策と運用のポイント

表示されない・表示がおかしいときのチェックポイント

まずは、次のような基本的な点から確認してみてください。

症状	ありがちな原因	確認したいポイント
まったく表示されない	表示条件やウィジェットの場所が合っていない	表示するページやデバイスを制限していないか
PCでは出るがスマホで出ない	メディアクエリやスマホ非表示の指定	スマホサイズでdisplay: noneが当たっていないか
変な位置に表示される	positionや高さの指定ミス	bottomやright、leftの値が極端になっていないか

PCとスマホで同じクラス名を使っていると、意図せず同じCSSが当たってしまうことがあります。PC用は.pc-follow-banner、スマホ用は.sp-fixed-bannerのように、クラス名を分けて管理しておくと、トラブルを減らしやすいです。

表示速度やレイアウト崩れを防ぐコツ

追従バナーや追従ボタンは、入れすぎると表示速度やレイアウトにも影響します。SWELLで安全に運用するためには、次のような点も意識しておきたいところです。

私自身は、「まずはSWELLの標準機能＋追加CSSで組み立ててみて、それでも足りないところだけJSを使う」という順番で組むことが多いです。このやり方でも、SWELLの追従ボタンや追従バナーでやりたいことの多くは実現できます。

 

---

★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

よくある質問

Q1.SWELLの追従ボタンはプラグインなしでも作れますか

A.はい、基本的な追従ボタンであればプラグインなしで十分作れます。ボタンブロックとブログパーツ、追尾サイドバーやフッター直前のウィジェットを組み合わせれば、PC向けの追従ボタンはほとんどカバーできます。

スマホ用も、固定フッターメニュー機能を使ったり、ブログパーツ＋CSSで追従バナーを作ったりする形で対応できます。まずはSWELLの機能でどこまでできるか試してみるのがおすすめです。

Q2.SWELLのスマホ用追従バナーが邪魔にならないか心配です

A.一番のポイントは「高さを取りすぎないこと」と「ゴールを1〜2個までに絞ること」です。スマホ用の追従バナーを作るときは、ボタンを欲張ってたくさん並べず、読者にとって本当に便利なものだけに厳選しましょう。

また、全ページに表示するのではなく、サービスページやLPだけに出す形にすれば、通常の記事を読むときの邪魔にもなりにくいです。どうしても気になる場合は、一度友人や身近な人に見てもらって正直な感想を聞いてみるのもおすすめです。

Q3.SWELLの追従バナーと通常の広告は一緒に使っても大丈夫ですか

A.併用はできますが、「広告だらけ」に見えると離脱の原因になります。記事中の広告はそのままにして、追従バナーは「お問い合わせ」や「公式LINE」など自分のサービスへの導線に絞る、といった役割分担を意識すると、全体がごちゃごちゃしにくいです。

SWELLの追従ボタンや追従バナーは、読者にとって便利なショートカットです。広告でもありつつ「困ったときの窓口」を目立たせるイメージで設計すると、イヤな押し売り感が出にくくなります。

まとめ

最後に要点をまとめておきます

今日からできる最初の一歩は、「このサイトで一番してほしい行動を1つだけ書き出すこと」です。その行動をゴールにした追従ボタンを1つだけ作り、まずはスマホの固定フッターメニューか、PCの追尾サイドバーに設置してみてください。

実際にどれくらい押されるのかを見ながら、少しずつ文言や色、配置を調整していけば、SWELLの追従ボタンや追従バナーが、しっかり成果につながる導線になっていきます。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ