背景画像 + 文言 + ボタンの CTA
横長のバナー内に、見出し・補足文・ボタンを横一列に並べた行動喚起（CTA）セクションです。背景は linear-gradient による斜めのグラデーションで、角丸（ border-radius ）と内側の余白で「押せそうな一枚のカード」に見せています。
このパーツの使いどころと実装ポイント
横長のバナー内に、見出し・補足文・ボタンを横一列に並べた行動喚起（CTA）セクションです。背景は linear-gradient による斜めのグラデーションで、角丸（border-radius）と内側の余白で「押せそうな一枚のカード」に見せています。中身は display:flex + justify-content:space-between で、左にメッセージ、右にボタンを配置し、flex-wrap で狭い画面では自動的に折り返す作りです。
向いている場面
ページの締めや、セクションとセクションの間に挟む軽量な誘導に向きます。「初回相談は無料」「資料ダウンロード」「無料トライアル」など、ワンライナーで背中を押したい場面に最適です。BtoB の問い合わせ導線、サービスサイトの予約誘導、ECの会員登録案内など、用途は幅広く使えます。
カスタマイズの勘所
- 見出しは短く、1 つの行動に絞ります。複数の CTA を並べると迷いが生まれます。
- グラデーションの色は背景の文字（白）とのコントラストを確保します。薄い配色だと
color:#fffの文字が読みにくくなります。 - ボタンは
a要素にし、リンク先を明確にします。装飾だけの矢印に頼らず、ラベル自体で行動が伝わる文言にします。
レスポンシブでは flex-wrap によってボタンが下に回り込みますが、その際もボタン幅とタップ領域を十分に確保してください。背景画像を使う場合は文字の上にオーバーレイを重ね、可読性を保ちます。
よくある質問
1つのバナーに複数のボタンを置いてもよいですか。
おすすめしません。CTAバナーは1つの行動に集中させるほど成果が出やすく、ボタンが複数あると迷いが生まれて押されにくくなります。最も促したい行動に絞り、補助的な選択肢は別の場所に置くのがよいでしょう。
グラデーション背景の上の文字が読みにくくなります。
背景色と文字色のコントラストが不足している可能性があります。文字を白にするなら濃いめの配色を選び、背景に写真を使う場合は半透明の暗いオーバーレイを重ねると可読性が安定します。