ニュースレター登録 + 大型 CTA フッター

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

このパーツは、ニュースレターの登録フォームと大型 CTA、サイトナビをひとつにまとめたフッターです。上段はダークネイビー背景に中央寄せの見出しと説明文、そして input と button を border-radius:999px の細長い枠に収めた一体型の入力欄を配置します。下段はブランド名・キャッチコピー・ナビゲーション・コピーライトを並べ、サイトの締めくくりと回遊導線を同時に担う構成です。

向いている場面

• メールマガジンや新着通知を集めたい SaaS・メディアサイト
• コンテンツ更新が多く、再訪を促したいブログやオウンドメディア
• 問い合わせ前のリード獲得をフッターでも狙いたいサービスサイト

カスタマイズと実装の注意

入力欄とボタンが一体に見えるのは、親に overflow:hidden と角丸を当てているためで、配色を変えるだけでブランドに馴染みます。メール欄には type="email" が付いているので形式チェックが効きますが、ラベルが無いのでプレースホルダだけに頼らず aria-label を補うと読み上げ環境でも用途が伝わります。フォームの送信先（メール配信サービス）は form の action に設定してください。下段のナビは nav 要素で囲まれており、リンク先を実際のページへ結ぶことでサイト内回遊とクロールの両方に役立ちます。