SWELL追従バナー・フローティングバナーの作り方5ステップ

SWELLでサイトを作っていて、「追従バナーやフローティングバナーを出したいけど、やり方が分からない…」と手が止まっていませんか。

このページでは、SWELLのフローティングバナーや追従バナーの基本と作り方を、できるだけかみ砕いてお話しします。

先に結論を言うと、SWELLの標準機能と少しのCSSがあれば、実用レベルの追従バナーやフローティングバナーは十分に作れます。難しいテクニックは最小限にしているので、順番に進めながら実装してみてください。

SWELLの追従バナー・フローティングバナーの基本

追従バナーとフローティングバナーの違い

どちらも「スクロールしても画面上に残り続ける案内やボタン」という意味では同じですが、イメージは少し違います。私なりに整理すると、次のような使い分けです。

種類	典型的な表示位置	主な用途	ユーザーからの見え方
追従バナー	右サイド・サイドバー・画面端	お問い合わせ・資料請求・予約ボタンなど	スクロールしても横にずっと付いてくる
フローティングバナー	画面下・画面の隅	クーポン・LINE登録・キャンペーン告知など	画面の上に「浮いている」ような印象
フローティングボタン	画面右下や左下の小さなボタン	ページトップ・チャット・1つの重要アクション	常に目に入るが、邪魔になりにくいボタン

SWELLでカスタマイズするときは、これらをまとめて「追従バナー」「フローティングバナー」と呼んでしまうことも多いです。名前にこだわりすぎるより、「どこに」「どんな目的で」置くかを考えるほうが大事だと感じています。

SWELLで追従バナーを使うメリット

SWELLで追従バナーやフローティングバナーを使うと、地味ですが効果の大きいメリットがあります。

• お問い合わせや予約、購入ページへの導線を、どこからでもすぐに用意できる
• 記事を読み進めているユーザーに、しつこくない距離感でアピールできる
• スマホユーザーの視線に近い位置にボタンを置けるので、タップされやすい
• 本格的なLPを作らなくても、既存のページにCTA（行動喚起）を足せる

特にスマホのアクセスが多いサイトでは、画面下にシンプルなフローティングバナーを置くだけで、問い合わせやクリックの数が目に見えて変わるケースもあります。派手なアニメーションより、シンプルでも「常に目に入る場所」にあることがポイントです。

SWELLで追従・フローティングバナーを作るときの前提

次に、SWELLで追従バナーやフローティングバナーを作るときの基本的な考え方をそろえておきます。細かい手順の前に、ざっくり全体像をつかんでおくと迷いにくくなります。

この4つの前提が頭に入っていれば、あとは「どのエリアに置くか」「どんな見た目にするか」を決めていくだけです。SWELL側で用意されているブロックやウィジェットを活かせば、コードを書く量もかなり減らせます。

SWELLで作れる追従バナー・フローティングバナーのパターン

よく使われる配置パターン一覧

制作や相談の現場でよく見かける配置を、表にまとめるとこんな感じです。

パターン	おすすめデバイス	典型的な用途	ユーザーへの印象
右サイドの縦長追従バナー	PC	資料請求・お問い合わせ・予約フォーム	会社・店舗サイトでよく見る、安心感のある導線
サイドバーの追従エリア	PC	目次＋CTA・関連記事への誘導	記事を読みながら、自然に目に入る補助情報
画面下固定のフローティングバナー	スマホ中心	申し込み・LINE登録・クーポン表示	親指の近くに常にある、押しやすいボタン
画面右下の小さなフローティングボタン	PC・スマホ両方	ページトップ・チャット・ひとつの重要アクション	邪魔になりにくく、必要な人だけが押す入口

同じ「追従バナー」でも、サイトの目的によって合うパターンは変わります。まずは、今の自分のサイトで一番押してほしい行動が何かを考えてみてください。

サイトの種類別・おすすめバナー例

サイトのタイプごとに、相性のいい追従バナー・フローティングバナーの組み合わせをまとめてみます。

サイトタイプ	合うバナー位置	バナーの中身の例	一言メモ
ブログ・アフィリエイトサイト	記事下／スマホ画面下	おすすめ商品・サービスのボタン	記事の結論とボタンの内容をそろえると強い
コーポレートサイト	右サイド追従・フローティングボタン	お問い合わせ・資料ダウンロード	迷ったらいつでも戻れる「逃げ道」のような役割
店舗・サロンサイト	画面下固定・右下ボタン	予約フォーム・電話・LINE予約	「今すぐ予約」など行動をはっきり書くと予約が入りやすい
オンラインスクール・講座	サイドバー追従・記事下	申込ページ・無料相談	コンテンツで信頼を積み上げつつ、いつでも申し込める状態に

自分のサイトに近いタイプをチェックして、「どの位置に」「どんなボタンを置くか」を決めていくとイメージしやすくなります。

SWELL追従バナーの作り方ステップ

STEP1：ブログパーツでバナーの中身を作る

最初にやるのは、バナーの「中身」だけを作ることです。この段階では、表示位置のことはいったん忘れて、見た目と文章に集中したほうがうまくいきます。

• WordPress管理画面の「ブログパーツ」から新規追加する
• SWELLのボタンブロックやボックスブロック、リッチカラムなどを組み合わせてレイアウトを作る
• スマホでも読みやすいように、テキストは短めのフレーズを意識する

構成例としては、次のようなシンプルな形が使いやすいです。

• 上：一言キャッチコピー（例：まずは無料相談）
• 中：補足説明文（1〜2行程度におさえる）
• 下：目立つ色のボタン（例：問い合わせフォームへ・予約状況を確認する など）

ブログパーツを保存すると、「[blog_parts id=”◯◯”]」のようなショートコードが発行されます。このコードをあとで使うので、メモしておきましょう。

STEP2：ウィジェットで設置場所を決める

次に、作ったバナーをサイト上のどこに出すかを決めます。SWELLには複数のウィジェットエリアが用意されているので、追従バナーに向いた場所を選んで配置していきます。

• 管理画面の「外観」→「ウィジェット」を開く
• 「サイドバー」「フッター」「追従用のエリア」など、使いたいエリアを選ぶ
• 「テキスト」や「カスタムHTML」ウィジェットを追加し、ブログパーツのショートコードを貼る

たとえば、PCの右側に追従バナーを出したいなら、サイドバーや追従用のエリアにウィジェットを追加します。スマホ画面下にフローティングバナーを出したい場合は、フッター付近のエリアや、テーマで用意されているフローティング用のウィジェットエリアを使うと管理しやすくなります。

STEP3：CSSで追従・フローティングさせる

最後に、CSSで「スクロールしてもついてくる」状態を作ります。ここが、追従バナーやフローティングバナーならではのポイントです。

追従やフローティングに関わる代表的なCSSプロパティをまとめると、次のようになります。

プロパティ	役割	ざっくりしたイメージ
position: fixed;	画面の特定位置に固定する	スクロールしても位置が変わらない
position: sticky;	スクロールに応じて途中から固定する	サイドバーの「途中から追いかけてくる」動き
bottom / top / left / right	画面のどこに固定するか指定する	「画面下から◯px」などを決める
z-index	要素同士の重なり順を決める	フッターやチャットボタンの上に出すかどうか
max-width / height	バナーのサイズを制御する	スマホで画面を占領しすぎないようにする

これらを組み合わせて、SWELLの「カスタマイズ」→「追加CSS」や子テーマのCSSファイルに記述していきます。CSSに不安がある場合は、既存のサンプルコードをベースに、自分のクラス名や色だけを変えていくと失敗しにくいです。

SWELLフローティングバナーをスマホ・PCで出し分ける方法

スマホ画面下に固定表示する考え方

スマホ向けの追従バナーやフローティングバナーは、「画面下に固定する」パターンが一番扱いやすいと感じています。指の近くにボタンがあるので、ユーザーにとっても押しやすいです。

ヘッダーも固定、フッターにも何か固定メニュー、さらに追従バナーも表示…という状態になると、本文のスペースがかなり狭くなります。スマホ実機やブラウザの検証ツールで、実際にスクロールしながらチェックしてみてください。

PCだけ／スマホだけにSWELL追従バナーを出す

「PCでは右サイドに追従バナーを出したいけれど、スマホでは見せたくない」というように、デバイスごとにバナーの有無を変えたいことも多いです。その場合は、CSSのメディアクエリなどを使って画面幅に応じて表示・非表示を切り替えます。

ざっくりした考え方を表にまとめると、次のようになります。

やりたいこと	方法のイメージ	注意ポイント
PCだけに追従バナーを表示したい	一定幅以上の画面でのみ、追従バナー用クラスを表示する	サイドバーのないレイアウトでは表示されないことがある
スマホだけにフローティングバナーを表示したい	一定幅以下の画面でのみ、画面下固定のバナーを表示する	既存のフッターメニューやボタンと重ならないか確認する
PCとスマホで中身を変えたい	同じ位置に2つのブログパーツを置き、CSSで片方ずつ表示する	内容変更時に両方を更新する必要があるので、管理ルールを決める

テーマの機能でデバイスごとの表示切り替えができるブロックもありますが、追従バナーはCSS側で制御しておいたほうが、挙動を把握しやすいと感じています。

ユーザーの邪魔にならない表示ルール

追従バナーやフローティングバナーは目立つ分、やり過ぎると「押し売り感」が出てしまいます。個人的に意識しているのは、次のようなルールです。

• ページを開いてすぐではなく、少しスクロールしてから表示する
• フォーム入力中や決済ページなど、集中してほしい場面では出さない
• 1画面にフローティングする要素は、できるだけ2つ以内におさえる
• タップしやすいボタンサイズを確保しつつ、本文が読めるスペースを残す

このあたりをあらかじめ決めておくと、「とりあえず目立たせたけど、読みにくくなってしまったバナー」を防ぎやすくなります。

クリックされるSWELL追従バナーのデザインと文章

デザインの基本ルール

まずはデザインの基本からです。細かな装飾より、次のようなシンプルなルールを守るほうが、結果的に分かりやすく仕上がります。

要素	意識したいポイント	NGに近い例
色	サイトのテーマカラー＋アクセントカラー1色程度におさえる	虹色に近いカラフルさで、内容が頭に入ってこない
文字サイズ	キャッチコピー > 説明文 > ボタンの順でメリハリをつける	全部同じサイズで、何が大事なのか分からない
余白	バナー内の上下左右に、少しゆとりを持たせる	文字やボタンがギチギチで、窮屈な印象になる
アイコン	ボタンの左に小さく添える程度におさえる	アイコンだらけで、テキストが読みづらくなる

SWELLのボタンブロックやボックスブロックを使えば、CSSを書かなくてもある程度整ったデザインになります。まずは標準のスタイルで試し、どうしても気になる部分だけ追加CSSで手を加えると、作業量を抑えつつ見た目も整いやすいです。

文言のテンプレ例

フローティングバナーの文言は、「短く」「具体的に」「押したあとをイメージできること」がポイントです。いくつか使いやすい例を挙げておきます。

お問い合わせ系

• 「無料で相談してみる」
• 「◯◯について相談する」

予約・申込み系

• 「空き状況を確認する」
• 「◯◯の予約を申し込む」

資料・ダウンロード系

• 「資料をダウンロードする」
• 「サービスの詳細資料を見る」

LINE・SNS登録系

• 「LINEでお知らせを受け取る」
• 「お得な情報を受け取る」

ボタンの文言を決めるときは、「このボタンを押したあと、ユーザーが何をするのか」が一瞬で伝わるかどうかをチェックしてみてください。曖昧な言葉より、具体的な行動が浮かぶ言葉のほうが、クリックされやすくなります。

プラグイン vs カスタマイズ、どちらでSWELL追従バナーを作るか

プラグインで作る場合の特徴

プラグインで追従バナーやフローティングバナーを作る場合、おおまかに次のような特徴があります。

• 管理画面からの操作だけで設定できるものが多く、CSSに慣れていなくても扱いやすい
• A/Bテスト機能や、表示条件（特定ページだけ・スクロール率◯％以上など）が充実したものもある
• テーマを変更したときにも、設定を引き継ぎやすい

その一方で、プラグイン側のデザインに寄せられてしまうため、SWELLの雰囲気と少しズレることもあります。気になる場合は、プラグイン導入前にデモ画面やサンプルを確認し、サイト全体のトーンと合うかどうかをチェックしておくと安心です。

ブログパーツ＋CSSで自作する場合の特徴

次に、SWELLのブログパーツとCSSを組み合わせて自作する場合の特徴を、プラグイン使用時と比較してみます。

項目	プラグイン使用	自作（ブログパーツ＋CSS）
導入の手軽さ	高い：インストールして設定するだけ	中：CSSのコピペや微調整が必要
デザインの自由度	プラグイン側のテンプレに依存	SWELLのブロックを使ってかなり自由に作れる
サイトの軽さ	プラグインによっては読み込みが増える	必要最低限のコードだけにしやすい
テーマとの一体感	うまくハマれば問題ないが、ズレることも	SWELLのデザインと統一しやすい
メンテナンス性	プラグインの更新状況に左右される	自分でコードを管理する必要はあるが、仕組みを把握しやすい

個人的には、「まずはSWELL標準機能＋CSSでシンプルな追従バナーをひとつ作る → 物足りなくなったらプラグインも検討する」という流れがおすすめです。いきなり多機能なプラグインを入れるより、自分のサイトに本当に必要な機能が何なのかをはっきりさせてから選ぶほうが、長い目で見ると運用しやすくなります。

SWELL追従バナー・フローティングバナーのよくある質問

Q1. SWELL追従バナーを入れると、サイトが重くなりませんか？

A. バナー自体が原因で極端に重くなることは少ないですが、作り方によっては表示が遅く感じられることがあります。特に大きな画像をそのまま使ったり、複雑なアニメーションを多用したりすると、読み込みに時間がかかりやすいです。画像はきちんと圧縮し、動きは本当に必要な部分だけに絞るのがおすすめです。基本的には、シンプルな構造とCSSだけで実装したほうが、SWELLの追従バナーとしては扱いやすくなります。

Q2. SWELLフローティングバナーは、全ページに出したほうがいいですか？

A. 何も考えず全ページにフローティングバナーを出してしまうと、「どのページでも同じ案内が出てきて鬱陶しい」と感じられることがあります。おすすめは、次のようなページを中心に表示することです。

• サービス説明ページや商品ページ
• ブログ記事の中でも、バナー内容と関連性が高い記事
• トップページや主要なカテゴリーページ

逆に、申し込み完了ページやお問い合わせ完了ページなど、すでに行動が終わったページでは非表示にしておくと親切です。ユーザーの流れをイメージしながら、「今このバナーが出ていて心地いいか」を考えてみてください。

Q3. CSSが苦手ですが、それでもSWELL追従バナーを作れますか？

A. 完全にゼロからCSSを書くのはたしかにハードルが高いのですが、既存のサンプルコードをベースに、自分のサイト用に少しだけ書き換える形なら十分に現実的です。たとえば、「このクラス名を自分のバナーのクラスに変える」「色コードだけ変える」といったレベルでも、一つの追従バナーは作れます。SWELLの追従バナー用にCSSのひな型をひとつ用意しておき、「基本的にはここだけ触ればOK」という状態にしておくと、CSSが得意でなくても運用しやすくなります。

SWELL追従バナー・フローティングバナーのまとめ

この記事の内容を振り返ります

今日からの最初の一歩としては、「ブログパーツでバナーの中身だけを先に作ってみること」をおすすめします。どこに出すか、どんな動きを付けるかは後からでも調整できます。まずは伝えたいメッセージとボタンの文言を決めて、小さくひとつ追従バナーやフローティングバナーを試してみてください。

そこから実際のクリック状況を見ながら、位置やデザインを少しずつ育てていけば、自分のサイトにしっくりくる形が自然と見つかっていきます。