下部固定 CTA バー
「下部固定 CTA バー」は、スクロールしても画面下に貼り付いたまま残る帯状の行動喚起です。 position:fixed と bottom:0 で常に最下部へ固定し、左にひと言メッセージ、右に申し込みボタンを display:flex で中央寄せに並べています。
このパーツの使いどころと実装ポイント
「下部固定 CTA バー」は、スクロールしても画面下に貼り付いたまま残る帯状の行動喚起です。position:fixed と bottom:0 で常に最下部へ固定し、左にひと言メッセージ、右に申し込みボタンを display:flex で中央寄せに並べています。本文を読み進めても CTA が視界から消えないため、申し込みの機会を逃しにくいのが特徴です。
向いている場面
無料相談や資料請求を促すサービス LP、キャンペーン特設ページ、スマホで長く読むコラム記事の末尾誘導などに向きます。常時表示のため、コンバージョン導線を 1 本に絞りたいページと相性が良いです。
カスタマイズと注意点
- ボタンの
aに申し込みフォームや電話発信のリンクを付けて、タップ後の行き先を明確にします。 - 常に下部を占有するので、ページ末尾のフッターやコンテンツが隠れないよう、本文側に下方向の余白を確保します。
- スマホでは横幅が狭くメッセージとボタンが詰まりがちです。文言を短くし、ボタンは指で押しやすい大きさを保つと操作性が上がります。閉じるボタンを足すと押し付けがましさを減らせます。
よくある質問
固定バーがフッターやコンテンツに重なってしまいます。
position:fixedのバーは高さ分の場所を取らないため、本文の一番下にバーの高さ程度のpadding-bottomを足すと、隠れていた部分が見えるようになります。
ユーザーがバーを閉じられるようにできますか？
バーに閉じるボタンを追加し、クリックでバーを非表示にする簡単なスクリプトを入れれば対応できます。常時表示が押し付けに感じられる場合に有効です。