CTA バナーセクション（フルカラー帯）
ページ最後の決め手として、強いグラデーションの帯にコピーとボタンを横並びにした CTA セクションです。レイアウトは display:flex に justify-content:space-between と flex-wrap:wrap を組み合わせ、広い画面では左にコピー・右にボタン、狭い画面では自然に縦積み…
解説
ページ最後の決め手として、強いグラデーションの帯にコピーとボタンを横並びにした CTA セクションです。レイアウトは display:flex に justify-content:space-between と flex-wrap:wrap を組み合わせ、広い画面では左にコピー・右にボタン、狭い画面では自然に縦積みへ折り返します。背景は linear-gradient で塗り、ボタンは border-radius:999px の丸形にして白で抜くことで帯の中で最も目立たせています。ホバー時は transform:translateY(-2px) でわずかに浮かせる反応だけを付けています。JavaScript は使いません。
使う場面
- LP 末尾の「無料相談・お問い合わせ」誘導
- サービス紹介ページの申し込み導線
- 記事下の資料請求・登録を促す一手
コピーは短く 1〜2 行に絞ると行動に集中させられます。ボタンの文言は具体的な動作（無料相談を予約など）にすると押されやすくなります。背景グラデーションの 2 色とボタンの文字色を差し替えればブランドに馴染みます。ホバーで動きを付けていますが、控えめなので操作の邪魔になりません。動きを完全に止めたい利用者に配慮するなら prefers-reduced-motion で transform を無効化すると親切です。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
スマホではレイアウトがどうなりますか？
flex-wrap:wrap によって、横幅が足りなくなるとコピーとボタンが自動で縦積みに折り返します。メディアクエリを書かなくても狭い画面に対応するため、追加の調整は基本的に不要です。
ボタンの色を背景に合わせて変えたいです。
ボタンは背景の帯から浮かせるため、帯のグラデーションと反対の白を背景に、帯の主色を文字色にしています。ブランド色に変える際も、帯とボタンのコントラストを十分に保つと押しやすさが落ちません。