「行動しようと思ったとき」にすぐ行動できる設計
訪問者がページを読んでいて「よし、問い合わせよう」と決断するタイミングはページの途中であることが多いです。しかし問い合わせボタンがページ最下部にしかない場合、「ページを最後まで戻って見つけて、クリックする」という手間が発生し、決断の勢いが冷めてしまうことがあります。
固定CTA（スティッキーCTA）は、ページをスクロールしても常に画面の一定位置に表示され続けるボタンやバーです。訪問者がどの位置を読んでいても、問い合わせ・電話・予約へのアクションを即座にとれる状態を保てます。
課題の背景：スティッキーCTAがないことによる機会損失
長いページを持つサイト（サービスページ・事例ページ・コラム記事など）では、コンテンツを最後まで読まずに問い合わせしたくなるユーザーが一定数います。しかしCTAがページ末尾にしかない場合、そのユーザーは「どこに問い合わせボタンがあるかわからない」という状態になり、結果として離脱します。
ヒートマップで分析すると、多くのサイトでページ中盤に「クリック意欲の高いゾーン」があるのに、CTAが配置されていないために機会を逃しているケースが確認されます。
解決策：スティッキーCTAの設計パターン
パターン1：画面下部の固定バー
最も一般的なスティッキーCTAです。画面の下端に横幅いっぱいのバーを固定表示し、「お問い合わせ」「電話する」「予約する」などのボタンを配置します。
設計のポイント
- 高さは48〜60px程度（コンテンツを隠さないよう最小限）
- ボタンは2つまで（「電話する」と「メールで問い合わせる」など）
- スクロール開始後に表示し、スクロール前（ファーストビュー）は非表示にするとすっきりする
- フォームページではスティッキーバーを非表示にする（二重表示の混乱を避けるため）
パターン2：右下に浮かぶフローティングボタン
画面右下に固定で浮かぶ丸型ボタンです。電話アイコン・チャットアイコン・LINEアイコンなどをシンプルに配置します。コンテンツと重なりにくく、スマートフォンでも邪魔になりにくいデザインです。
設計のポイント
- サイズは56〜64px（タップしやすいサイズ）
- アイコンは一目で機能がわかるものを使用
- ホバー時に「無料相談」のようなラベルを表示するとわかりやすい
- 複数設置する場合はスタック（縦に重ねる）形式で整理する
パターン3：固定ヘッダーへのCTA統合
ページをスクロールするとヘッダーが固定表示になる設計に、CTAボタンを組み込む方法です。「ロゴ＋主要ナビ＋お問い合わせボタン」という構成で、最も違和感が少なく使いやすいパターンです。
設計時の注意点
コンテンツを隠さない
スティッキーCTAがコンテンツの重要な部分を隠すと、ユーザーのストレスになります。下部バーの場合は本文とスティッキーバーの間に十分な余白（padding-bottom）を設けることで、最後のコンテンツが隠れないようにします。
閉じる機能を提供する
「このバナーが邪魔だ」と感じるユーザーのために、スティッキーCTAを閉じられる機能を設けることが丁寧な設計です。一度閉じたら同一セッションでは再表示しない制御を加えると、ユーザー体験が向上します。
フォームページや完了ページでは非表示に
既に問い合わせフォームがあるページや完了ページでスティッキーCTAが表示されると、二重表示になって混乱を招きます。特定のページでは非表示にするコントロールを実装しましょう。
スクロール量に応じて表示・非表示を切り替える
ファーストビューにすでにCTAがある場合、スクロール前からスティッキーCTAが表示されると重複感が出ます。スクロール量が100〜200px以上になってから表示するように設定することで、自然な誘導になります。
業種別アドバイス
飲食店
「今すぐ予約する（空き状況を確認）」のスティッキーボタンは、飲食店で特に効果的です。外部予約サービス（ホットペッパー・食べログ）への直接リンクを設置することで、サイトを見たままシームレスに予約に進めます。
美容室・エステ
「LINE で予約する」のボタンをフローティング形式で右下に常時設置することで、スマートフォンユーザーがどのページを見ていても予約への導線を確保できます。LINEの公式カラー（緑）を使うことで直感的に認識されます。
士業（税理士・行政書士）
「今すぐ電話する（無料）」と「メールで相談する」の2ボタンを下部バーに設置することで、電話派・メール派それぞれの顧客を逃しません。電話番号に直接発信できるリンクを設けることを忘れずに。
EC・物販
商品詳細ページでは「カートに入れる」ボタンをページ上部に固定することが購入率に直結します。特にスマートフォンでは、ページをスクロールしても「カートに入れる」ボタンが常に画面上部に見える状態を保つと購入完了率が向上します。
ビフォーアフター事例：神戸市須磨区のリフォーム会社
Before
- CTAはページ最下部のみ
- ヒートマップで確認するとCTAへの到達率は14%
After（スティッキーCTAを導入）
- 画面下部に「お見積もり（無料）」「電話で相談」の2ボタン固定バーを設置
- スクロール150px以降に表示開始
- フォームページでは非表示に設定
- CTAへのタッチ・クリック率：14%→38%
- 月間問い合わせ：6件→14件（2.3倍）
「行動できる状態を常に保つ」だけで、問い合わせが2倍以上になりました。
まとめ
スティッキーCTAは「行動する意欲が高まったときに、すぐ行動できる環境を提供する」ための設計です。コンテンツの質を上げることと並行して、「問い合わせへのアクセスしやすさ」を高めることが問い合わせ数向上の近道です。
実装の優先順位：
- まずヒートマップでCTAクリック率を確認する
- CTAへのクリック率が低い場合、スティッキーCTAの導入を検討
- 下部固定バーまたは固定ヘッダーに統合するパターンから始める
- 導入後にクリック率・問い合わせ数の変化を計測して改善を続ける
スティッキーCTAは数時間のコーディング作業で実装でき、費用対効果が高い改善施策です。ぜひ取り組んでみてください。