フッター手前 大型 CTA（ニュースレター）

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

このパーツは、フッターの直前に置く幅広の CTA バナーで、左にキャッチコピー、右にメール登録フォームを配した横並びレイアウトです。コンテナは display:grid の 1.2fr 1fr でテキスト側をやや広く取り、濃紺から紫がかった紺へのグラデーション背景（linear-gradient(135deg,#1a1a2e,#3a3a5e)）と大きめの角丸で、ページの締めとして目立つ存在感を持たせています。フォームは input と button を flex で横並びにし、type="email" と required で簡易な入力チェックも備えています。

向いている場面

メールマガジンや新着情報の登録を促したいメディア・ブログ、資料請求やニュースレター購読を最後に一押ししたいサービスサイトに向きます。本文を読み終えた利用者の視線が最後に止まる位置なので、行動を促す導線として効果的です。

カスタマイズの勘所

• コピーは h2 と p を書き換えるだけです。登録以外にも、資料ダウンロードや無料相談など別のアクションに転用できます。
• 背景のグラデーションを変えるとサイトのトーンに合わせられます。文字色は白固定なので、暗めの背景を選ぶとコントラストを保てます。

レスポンシブでは 760px 以下で 1 列縦積みになり、コピーの下にフォームが回り込みます。実運用では form の action に登録先を設定し、送信後の完了表示も用意してください。