追従ボタンとは？事例・実装・CVR改善のコツ

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！

LPや記事ページでCVR改善を考えるとき、候補に挙がりやすい施策のひとつが「追従ボタン」です。
スクロールしても画面に固定表示されるCTAは、ユーザーがどの位置でも申し込みに進める導線として有効とされる一方で、設置の仕方によってはかえってCVRを下げる事例も報告されています。

本記事では、追従ボタンの基本的な役割から、メリット・デメリット、CSSやプラグインを使った設置方法、CVR改善のために押さえておきたい設計のポイントまで、実際の事例を交えて解説します。これから追従ボタンを設置しようとしている方、すでに設置しているものの効果が見えていない方の判断材料としてご活用ください。

1. 追従ボタン（フローティングボタン）とは

追従ボタンとは、ユーザーがページをスクロールしても画面の特定位置に固定されたまま表示され続けるボタンのことです。

フローティングボタン、スティッキーボタン、追尾ボタンなどとも呼ばれます。
Webサイトの右下や画面下部に常時表示され、ユーザーがどこまでスクロールしても「お問い合わせ」「資料請求」「カートに入れる」といったアクションへすぐ移動できる導線として機能します。

スマートフォンではPCに比べて画面が小さく、長いLPや記事ページではユーザーがCVボタンの位置を見失いがちです。追従ボタンを設置することで、ページ内のどこからでも申し込みに進める状態をつくれます。BtoB・BtoCを問わず、LPやサービスサイトでよく使われている要素です。

▼スクロール量に応じて追従バナーが表示される動作例
（参考：追従バナーを設置する｜Squad beyond Knowledge）

2. 業種別の追従ボタン事例ギャラリー

業種・商材によって追従ボタンの設計は大きく変わります。代表的なパターンを紹介します。

2-1. EC（化粧品・健康食品）

• ボタン文言：「今すぐ購入」「30日間返金保証付きで試す」
• 配置：画面下部全幅、固定表示
• 特徴：価格・割引・返金保証など、購買判断の最後の押し上げになる情報をボタン直上に併記。スマホでは指の届きやすい画面下部固定が定番

2-2. BtoB SaaS

• ボタン文言：「無料デモを申し込む」「資料をダウンロード」
• 配置：右下、ボタン＋アイコン
• 特徴：意思決定者が複数いるBtoB商材では「即購入」より「資料請求／デモ依頼」のソフトCVが主流。ボタンサイズはECほど大きくしない

2-3. 人材・転職

• ボタン文言：「無料登録（30秒）」「キャリア相談を予約」
• 配置：画面下部全幅、登録ステップを併記
• 特徴：登録の心理的ハードルを下げるため、所要時間・無料・登録ステップ数を明示するパターンが多い

2-4. 不動産・住宅

• ボタン文言：「来場予約をする」「資料請求（無料）」
• 配置：右下〜下部、サブCTA（電話）併設
• 特徴：高単価商材のため即決を促さず、「来場予約」「資料請求」「電話相談」など複数の温度感に応じたCTAを並列配置

2-5. メディア・記事LP

• 特徴：記事の閲覧体験を阻害しないデザインが優先。読み終わりまでに自然に視界に入る位置で表示
• ボタン文言：「サービスを見る」「無料相談はこちら」
• 配置：本文を邪魔しないサイド／下部、半透明背景

3. CVRが上がる追従ボタン設計4原則

3-1. ファーストビューを邪魔しない

LPに到達した直後はユーザーがメインビジュアルとキャッチコピーを読みたいタイミングです。この段階で追従ボタンが画面を圧迫すると離脱率が上がります。スクロール量が一定（画面の30〜50%）を超えたタイミングで表示開始する設計が推奨されます。

3-2. 指タップ領域を確保する

モバイルでは、ボタン高さ48px以上（指の腹のサイズ）が基準です。これより小さいと誤タップ・タップ精度低下を招きます。ボタン同士の間隔も8px以上空け、誤クリックを防止します。

3-3. アイコンのみにしない／テキストを明示する

「→」「▶」などアイコンのみのボタンは、ユーザーがクリック先を予測できずCVRが下がります。動詞＋ベネフィット（例：「無料で資料を見る」「30秒で登録する」）の形でテキストを必ず入れます。

3-4. 背景とのコントラストを確保する

ボタン色はLPの主要配色と対比のある色（補色／彩度差）を選びます。WCAGコントラスト比4.5:1以上が目安で、これを下回ると視認性が低下しCTRが落ちます。半透明背景や白背景の場合は、ボタン背景に影（box-shadow）を加えると浮き上がります。

4. 「追従ボタンを置いたらCVRが下がった」失敗事例と原因

追従ボタンは万能ではなく、設計を誤るとCVRがむしろ低下します。よくある失敗3パターンです。

4-1. メインCTAと食い合ってクリックが分散する

LP本文中のメインCTAと追従ボタンの遷移先が同じで、文言・色も同じ場合、ユーザーは「どちらを押せば良いか」迷い、結果的にどちらも押さなくなるケースがあります。追従ボタンは遷移先を統一しつつ、文言は本文CTAより簡潔にする（例：本文CTA「無料デモを申し込む（30分で完了）」／追従「無料デモ申込」）ことで役割を分けます。

4-2. LP訴求と追従ボタン文言が一致していない

LP冒頭で「資料請求」を訴求しているのに、追従ボタンが「今すぐ購入」では、ユーザーの心理状態と合いません。追従ボタンの文言はLPの主要訴求と一致させることが原則です。複数CVを取りたい場合は、ボタンを分割（メイン＋サブ）して並列表示します。

4-3. モバイルでの誤タップが直帰率を上げる

画面下部追従が大きすぎる／本文との余白がない場合、ユーザーが本文をスクロールしようとして誤タップし、意図しない遷移→直帰、というパターンが起こります。ボタン直下に8〜12pxの余白を確保し、誤タップ防止のため透明エリアを意図的に作ります。

5. 追従ボタンの設置方法

5-1. CSSで自作する場合

追従ボタンを最もシンプルに実装する方法はCSSのposition: fixed;を使う方法です。
WordPressのカスタムHTML／CSS編集機能でもそのまま貼り付けて使える形で紹介します。

HTML（ボタン本体）

<a href="/contact" class="floating-cta">無料相談はこちら</a>

リンク先（href）はCV先のページURLに差し替えてください。class="floating-cta"はCSSと紐付けるための識別名で、自由な名前に変更可能ですが、HTML・CSS両方で揃える必要があります。

CSS（デザイン・配置の指定）

.floating-cta {
  position: fixed;          /* 画面に固定表示 */
  bottom: 16px;             /* 画面下から16pxの位置 */
  right: 16px;              /* 画面右から16pxの位置 */
  z-index: 9999;            /* 他要素より前面に表示 */
  padding: 14px 24px;       /* ボタン内側の余白（上下14px・左右24px） */
  background: #ff5a36;      /* ボタン背景色（オレンジ系） */
  color: #fff;              /* テキスト色（白） */
  border-radius: 8px;       /* 角丸 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* 浮き上がりの影 */
  font-weight: bold;        /* テキスト太字 */
  text-decoration: none;    /* リンク下線を消す */
}

/* モバイル端末（画面幅768px以下）の表示調整 */
@media (max-width: 768px) {
  .floating-cta {
    bottom: 0;              /* 画面下端に固定 */
    right: 0;
    left: 0;                /* 左右端まで広げて全幅表示 */
    border-radius: 0;       /* 角丸を消してフラットに */
    text-align: center;     /* テキストを中央寄せ */
    padding: 16px;          /* 押しやすいサイズに調整 */
  }
}

ポイント：

• position: fixed;で画面固定
• z-index: 9999;で他要素より前面に
• モバイルは画面下部全幅で押しやすく
• スクロール検出で表示／非表示を切り替えたい場合はJavaScriptでwindow.scrollYを判定してopacityを変化させる

5-2. WordPressプラグインを使う場合

WordPressサイトであれば、プラグインを使えばコードを書かずに追従ボタンを設置できます。
デザインや表示位置を管理画面から指定でき、PC・スマホで表示を出し分けることも可能です。実装スピードを優先するならプラグインが向いています。

5-3. Squad beyondのウィジェットレシピでノーコード設置する場合

LPの制作と検証をまとめて進めたい場合は、Squad beyondのウィジェット機能を使う方法もあります。
Squad beyondには「Widgetレシピ」と呼ばれる用途別のパーツ集が用意されており、D2C向け・リード獲得向けなど目的に合わせて選べる構成になっています。追従ボタンの場合は、「追従バナー（スクロール量で表示切替）」というウィジェットを管理画面から追加することで、コードを書かずに設置できます。

ノーコードで設定できる主な項目は次のとおりです。

• リンククリック後の遷移先URLまたは電話番号
• 表示アニメーションと表示の長さ
• スクロール量に応じた出現タイミング
• 画面上での表示位置
• スマホ・タブレット・PCごとのサイズ指定

「ファーストビュー通過後に表示する」「特定の位置で出す」といった出し方も、設定画面から指定するだけで切り替えられます。さらに有料のポップアップ機能では「追従型」のポップアップが用意されており、離脱防止ポップアップとの同時表示にも対応しています。

エンジニアの実装を待たずに、追従ボタンの有無・文言・出現タイミングを当日のうちに検証したい場合に向いた構成です。

6. ABテストで効果を検証する手順

追従ボタンを設置したら、必ずABテストで効果を検証します。「設置したつもり」でCVRが下がっているケースも多いため、定量検証が前提です。

1. 仮説を明文化する

「追従ボタンを設置すれば本文CTAを見逃したユーザーのCVRが上がる」など、検証したい仮説を1つに絞ります。
複数要素を同時にテストすると、何が効いたか分からなくなります。

2. テストパターンを準備する

最小構成は「A：追従ボタンなし」「B：追従ボタンあり」の2パターンです。
デザインや文言の比較をしたい場合は、ボタンありを前提に「文言A／文言B」の比較に進みます。

3. 配信を均等分割する

訪問ユーザーをランダムに50/50で振り分け、同一期間配信します。
曜日・時間帯による偏りを避けるため、最低7日、理想は14日間の配信が望まれます。

4. 評価指標を確定する

主指標はCVR、副指標として直帰率・スクロール深度・追従ボタンCTRを見ます。
CVRだけでなく、副指標を見ることで「ボタンが原因で離脱が増えていないか」も同時に検証できます。

5. 統計的有意性を確認する

各パターン100CV以上、または有意水準95%を満たした段階で判定します。
CV数が少ないまま結論を出すと、偶然のばらつきを成果と誤判定するリスクがあります。

CVRの改善方法やABテストのやり方について詳しく解説している記事もございますので、あわせてご参考ください。

• CVRの改善方法7選｜具体的な5ステップと失敗パターン・成功事例を紹介
• ABテストとは？成果につながるやり方やおすすめのツール・成功事例を紹介

7. 追従ボタンについてよくある質問（FAQ）

8. まとめ

追従ボタンは、ユーザーがどの位置からでもCVに進めるようにする導線として、特にスマホで効果を発揮しやすい要素です。一方で、コンテンツや入力フォームと重なるとかえってCVRを下げる事例もあり、設置の判断と設計はサイトごとに検証する必要があります。

設置のポイントは次の3つに整理できます。

• 重要コンテンツと重ならない位置に置く
• 文言は「押した先で何が起こるか」が分かるように具体化する
• A/Bテストとヒートマップで効果を確認する

「とりあえず設置する」ではなく、自社サイトの構造とユーザー行動を踏まえて検証することで、追従ボタンは初めて成果につながる要素になります。

Squad beyondのようなLP制作とLPOを一気通貫で扱えるツールを使えば、追従ボタンの設置・検証・改善を短いサイクルで回すこともできます。自社のLPやサービスサイトで導線に課題を感じている場合は、まずは小さく検証することから始めてみてください。

　

｜広告運用ノウハウ公開中！

より詳しく知りたい方は資料をダウンロード！