インライン登録ヒーロー

見出しのすぐ下にメール登録フォームを置き、第一画面で行動まで完結させるヒーロー。リード獲得を最優先するSaaSやニュースレターのトップに最適な、CV直結型の構成です。

#hero#title#form#signup

ライブデモ

使用例（お題: SaaS FlowDesk）

この技法を「SaaS FlowDesk」というテーマのダミーサイトで実際に使った例です。

HTML

<!-- FlowDesk：インライン登録ヒーロー（SaaSベータ） -->
<section class="thf">
  <div class="thf-inner">
    <p class="thf-kicker">EARLY ACCESS</p>
    <h1>段取りを、いちばんに。</h1>
    <p class="thf-sub">FlowDesk のベータ招待をお送りします。登録は30秒、解約はいつでも。</p>
    <form class="thf-form" onsubmit="return false">
      <input class="thf-input" type="email" placeholder="仕事用メールアドレス" aria-label="メールアドレス">
      <button class="thf-btn" type="submit">招待を受け取る</button>
    </form>
    <div class="thf-trust">
      <span class="thf-avatars"><i></i><i></i><i></i><i></i></span>
      <span class="thf-trust__txt">すでに <b>3,400+</b> チームが登録済み</span>
    </div>
  </div>
</section>

CSS

/* FlowDesk（SaaS）：インライン登録ヒーローの再スキン */
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }

.thf { width: 100%; min-height: 380px; display: grid; place-content: center; text-align: center; padding: 40px 26px;
  background: radial-gradient(110% 120% at 50% 0%, #eaeeff 0%, #f7f8fc 60%); color: #18204a; }
.thf-inner { max-width: 520px; }
.thf-kicker { margin: 0 0 14px; font-size: 11px; letter-spacing: .3em; color: #3b5bff; font-weight: 700; }
.thf h1 { margin: 0; font-size: 38px; font-weight: 900; letter-spacing: -.02em; }
.thf-sub { margin: 16px auto 24px; font-size: 14.5px; line-height: 1.75; color: #555a78; max-width: 380px; }
.thf-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 440px; margin: 0 auto; }
.thf-input { font: inherit; font-size: 14px; flex: 1; min-width: 200px; padding: 13px 16px; border-radius: 12px; border: 1px solid #ccd2ea; background: #fff; color: #18204a; outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.thf-input:focus { border-color: #3b5bff; box-shadow: 0 0 0 4px rgba(59,91,255,.16); }
.thf-input::placeholder { color: #9aa1b8; }
.thf-btn { font: inherit; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; border: none; padding: 13px 22px; border-radius: 12px; background: linear-gradient(135deg, #3b5bff, #6d28d9); transition: filter .15s ease, transform .15s ease; }
.thf-btn:hover { filter: brightness(1.07); transform: translateY(-2px); }
.thf-trust { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.thf-avatars { display: flex; }
.thf-avatars i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #f7f8fc; margin-left: -8px; }
.thf-avatars i:nth-child(1) { background: linear-gradient(135deg, #3b5bff, #818cf8); margin-left: 0; }
.thf-avatars i:nth-child(2) { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.thf-avatars i:nth-child(3) { background: linear-gradient(135deg, #10b981, #06b6d4); }
.thf-avatars i:nth-child(4) { background: linear-gradient(135deg, #6d28d9, #a855f7); }
.thf-trust__txt { font-size: 12.5px; color: #6a6f8e; }
.thf-trust__txt b { color: #18204a; }

@media (prefers-reduced-motion: reduce) { .thf-input, .thf-btn { transition: none; } }

実装ガイド

使いどころ

リード獲得を最優先するSaaSやニュースレターのトップに。見出し直下にメール登録フォームを置き、第一画面で行動まで完結させます。

実装時の注意点

見出し＋サブ＋インラインフォーム＋信頼ライン（アバター＋登録者数）の縦構成。入力欄はフォーカスリングを効かせ、狭幅では縦積みに折り返します。ダミーのため submit は抑止しています。

対応ブラウザ

flexbox・focus リング（box-shadow）は全モダンブラウザ対応。

よくある失敗

入力項目はメール1つに絞るほどCVが上がります。同意チェックやプライバシーリンクを近くに。送信後の成功/失敗フィードバックを必ず用意し、エラー時の文言も準備します。

応用例

送信後のサンクス表示、二段階（メール→詳細）化、SNSログイン併設、A/Bでの見出し出し分けなどに展開できます。

コード