対象者で分岐するヒーロー
ヒーロー直下に「法人のお客さま／個人事業主・副業のお客さま」の2つの入口を置き、誰向けかで迷わせません。ホバーで持ち上がり、選ぶと案内が切り替わります。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- ナビは構造の目次ではなく、訪問者の語彙で分岐する案内。「法人／個人事業主」は相手が自分を呼ぶ言葉で書く
- 入口は2つまで。3つ以上になったら「〜向け」タグ付きのカード（別パーツ）に切り替える
- 各入口に「何が起きるか」の一行（決算・請求・経費精算をひとつに）。ラベルだけだと押す前に判断できない
- 選択後の案内は入口の直下に出す。ページ遷移させずに料金の目安まで見せると、次の一歩が軽くなる
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
実装メモ
実ページでは button を a（法人向け／個人向けの LP へのリンク）にし、選択後の案内は遷移先で出す。この見本はページ内で切り替える版。
コード（コピーして使えます）
<div class="abh">
<div class="abh-hero">
<p class="abh-eyebrow">クラウド会計 Tsumugi</p>
<h1 class="abh-title">帳簿づけから申告まで、<br>迷わず終わる。</h1>
<p class="abh-lead">銀行明細を自動で取り込み、仕訳は選ぶだけ。決算書も確定申告書もそのまま出力できます。</p>
</div>
<div class="abh-branch" role="group" aria-label="お客さまの種類を選ぶ">
<button class="abh-card" type="button" data-target="corp" aria-pressed="false">
<span class="abh-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 28 28" fill="none"><rect x="4" y="6" width="20" height="18" rx="2" stroke="currentColor" stroke-width="2"/><path d="M9 11h3M16 11h3M9 15h3M16 15h3M9 19h3M16 19h3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M4 6h20" stroke="currentColor" stroke-width="2"/></svg></span>
<span class="abh-tag">法人のお客さま</span>
<strong class="abh-desc">決算・請求・経費精算をひとつに</strong>
<span class="abh-arrow" aria-hidden="true">→</span>
</button>
<button class="abh-card" type="button" data-target="solo" aria-pressed="false">
<span class="abh-icon" aria-hidden="true"><svg width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5" stroke="currentColor" stroke-width="2"/><path d="M5 24c1.5-5 5-7 9-7s7.5 2 9 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<span class="abh-tag">個人事業主・副業のお客さま</span>
<strong class="abh-desc">確定申告を、はじめてでもひとりで</strong>
<span class="abh-arrow" aria-hidden="true">→</span>
</button>
</div>
<p class="abh-status" aria-live="polite">どちらか選ぶと、対象の料金と機能の案内に切り替わります。</p>
</div>