メルマガ登録フッター
このフッターは、上段にメルマガ登録フォーム、下段に会社情報・サービスリンク・SNSをまとめた構成です。登録フォームのボタンとメール入力欄は display:flex で横並びにし、入力欄を flex:1 で伸ばすことで、幅が変わっても自然に収まるようにしています。
このパーツの使いどころと実装ポイント
このフッターは、上段にメルマガ登録フォーム、下段に会社情報・サービスリンク・SNSをまとめた構成です。登録フォームのボタンとメール入力欄は display:flex で横並びにし、入力欄を flex:1 で伸ばすことで、幅が変わっても自然に収まるようにしています。下段のリンク群は複数カラムで整理され、サイト全体の出口として機能します。
向いている場面
継続的に情報を届けたいサービスサイトに向きます。たとえばWeb制作会社、士業事務所、オンラインスクール、サブスク型サービスなど、見込み客のメールアドレスを資産として集めたい業種で活躍します。
カスタマイズの勘所
カラム数や見出し（サービス・会社情報・SNS）は自社の構成に合わせて増減できます。メルマガ部分の背景色を変えれば、登録欄だけを目立たせることも可能です。
inputにはtype="email"を使い、送信前に形式チェックが効くようにしています- 狭い画面では登録フォームの横並びが窮屈になりやすいので、縦積みに切り替える調整がおすすめです
- SNSアイコンは外部ロゴSVGを使い、リンク先を実アカウントに差し替えてください
よくある質問
メルマガ登録のメールは自動で送られますか？
このパーツはフォームの見た目部分です。登録されたメールアドレスを受け取って配信する仕組みは、メール配信サービスやサーバー側の処理と連携させる必要があります。form の送信先を自社の登録窓口に設定して使います。
カラムの数を減らしても崩れませんか？
崩れません。各カラムは独立したブロックなので、不要な列を削除したり追加したりしても、残りが自然に並び直します。会社情報だけの2カラム構成にするなど、サイトの規模に合わせて調整できます。