左右分割 CTA バンド

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

左にキャッチコピー、右にボタン群を配置した横長の CTA バンドです。display:flex に justify-content:space-between を組み合わせ、コピーとボタンを両端へ振り分けています。背景は濃紺から紫がかった色へのグラデーションで、白文字を載せて行動を促す導線を強調。ボタンは塗りの主ボタンと枠線のサブボタンの 2 種類があり、優先度の差が一目でわかる作りです。

向いている場面

サービスサイトの登録誘導、セクションの区切りに置く資料ダウンロード、料金ページ末尾の申し込み導線などに向きます。「無料で試す」「クレジットカード不要」といった一押しの文言と相性が良いパーツです。

カスタマイズの勘所

• 主ボタンとサブボタンの 2 段構成は、最優先の行動を 1 つに絞ると効果が高まります
• 背景グラデーションをブランドカラーに変えるだけでも印象が大きく変わります
• コピーは h2 と補足の p の 2 行構成なので、要点を短くまとめると読みやすくなります

レスポンシブは flex-wrap:wrap が効いているため、横幅が足りなくなるとボタン群が自動で下へ回り込み、スマートフォンでも破綻しません。リンクは a 要素なので、実装時は遷移先の href を必ず指定し、ボタンの文言だけで行き先が伝わるようにしてください。