ニュースレター登録 CTA セクション
ページ末尾でメルマガ登録を促す、全幅の CTA セクションです。見出しは clamp(22px,4vw,30px) で画面幅に応じて伸縮し、入力欄とボタンは display:flex と gap で横並びにしています。
解説
ページ末尾でメルマガ登録を促す、全幅の CTA セクションです。見出しは clamp(22px,4vw,30px) で画面幅に応じて伸縮し、入力欄とボタンは display:flex と gap で横並びにしています。入力欄に flex:1 を持たせることで、ボタンの幅を保ちつつ残りを埋めるレスポンシブな比率になります。input は type="email" なので、ブラウザ標準の形式チェックや適切なキーボードが効きます。:focus でボーダー色が変わり、入力中であることが視覚的に伝わります。CSS のみで動き、JavaScript は不要です。
使う場面
- 記事やオウンドメディアの末尾に置く購読導線
- サービス LP の離脱前コンバージョン施策
- セミナー・資料ダウンロード後のフォロー登録
狭い画面で横並びが窮屈なら、sc-nl__form に flex-wrap:wrap を足してボタンを下に落とすと押しやすくなります。実装では form に action と送信先を設定し、配信ツールの埋め込みと接続します。アクセシビリティ面では label を付けるか aria-label で入力欄の用途を明示すると、より安心して使えるフォームになります。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
実際にメールを受け取るには何が必要ですか。
このサンプルは見た目だけです。formにactionとmethodを設定し、配信サービス（メール配信ツールやフォームサービス）の送信先につなぐとメールアドレスを収集できます。完了後に表示するサンクスメッセージも用意すると親切です。
スマホで入力欄とボタンを縦に並べたいです。
sc-nl__formにflex-wrap:wrapを足し、必要ならボタンとinputをwidth:100%にすると縦積みになります。指が当たりやすくなり、狭い画面での誤タップを減らせます。