画面下フローティング CTA

このパーツの使いどころと実装ポイント

このパーツは、画面下に position:fixed;bottom:0 で固定され、スクロールしても常に視界に残るフローティング CTA バーです。ダークネイビーの帯（#1a1a2e）にキャッチコピー・補足文・ボタン・閉じるボタンを横並び（display:flex）で配置し、is-hidden クラスを付けると transform:translateY(100%) で画面外へスライドして隠れます。スクロール量を検知して途中から出す、閉じたら再表示しない、といった制御を JavaScript で足せます。

向いている場面

記事を読み進める読者に最後まで申し込み導線を見せ続けたいメディア、無料相談や資料請求を促すサービスサイト、期間限定キャンペーンの告知など、本文を邪魔せずコンバージョンを後押ししたい場面に向きます。本文側は padding-bottom:120px でバーと重ならないよう余白を確保しています。

カスタマイズの勘所

• スクロールが一定量を超えたら is-hidden を外して出現させる演出を加える
• 閉じるボタン（cf-cta__x）の状態を保存し、再訪時に再表示しない配慮を入れる
• キャッチ・補足・ボタン文言は訴求に合わせて差し替える

実装上の注意として、固定バーが本文やフッターを覆い隠さないよう本文側の下余白を必ず確保します。閉じるボタンには aria-label を付け、ボタンはキーボードでも操作できるようにします。スマホでは横並びが窮屈になりやすいので、補足文を省くかボタンを下段に回す配置調整を推奨します。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。