登録フォーム内蔵ヒーロー
登録フォーム内蔵ヒーローは、ファーストビューの中央にメール登録フォーム（ .hero-nl__form ）を置いた「登録誘導型」の構成です。フォームは display:flex で入力欄と送信ボタンを横並びにし、 border-radius:999px の丸いピル型ケースに収めています。
解説
登録フォーム内蔵ヒーローは、ファーストビューの中央にメール登録フォーム（.hero-nl__form）を置いた「登録誘導型」の構成です。フォームは display:flex で入力欄と送信ボタンを横並びにし、border-radius:999px の丸いピル型ケースに収めています。上部には svg アイコン付きの「Beta 募集中」バッジを配置し、待ちリストやベータ募集の文脈を補強しています。紫系グラデーション背景で視線をフォームに集める設計です。
適した用途
- SaaS の待ちリスト・ベータ登録ページ
- メールリストを構築したいニュースレター LP
- 限定先行案内の事前登録キャンペーン
入力欄とボタンは flex 配置なので、ラベルを書き換えるだけで用途を変えられます。フォームを実際に機能させるには form 要素に action や送信処理を追加してください。アクセシビリティ面では、入力欄に placeholder だけでなく対応する label（必要なら視覚的に隠す）を付けると、スクリーンリーダー利用者にも入力内容が伝わります。背景色は linear-gradient の 2 色で調整できます。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
このフォームは実際にメールを送信できますか？
見た目のみの実装です。実際に登録を受け付けるには、form 要素に action と method を設定するか、JavaScript で送信処理やメール配信サービスとの連携を追加する必要があります。
入力欄とボタンを縦並びにできますか？
できます。.hero-nl__form の flex-direction を column に変えると縦並びになります。モバイルで横幅が足りないときは縦に切り替えると押しやすくなります。