浮いた主アクションのボトムナビ
5枠のボトムナビ。中央に浮いた「投稿」ボタンを置き、選んだタブの下でインジケータが滑る。通知タブには未読バッジ。タップで画面のタイトルが変わる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 5枠のうち中央1枠を主アクション専用にし、色と高さで格を分ける。ナビの中で唯一「押すと何かが作られる」ボタンにする
- アクティブ表示は色の変化だけでなく、インジケータの移動で「どこからどこへ動いたか」を見せる
- バッジは件数を出す。赤丸だけでは「何が何件あるか」が伝わらず、押すまで不安が残る
- safe-area-inset-bottom をパディングに足し、ホームバーの上に指が届く高さを確保する
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
実装メモ
中央の FAB はグリッドの 3 枠目を空けて absolute で重ねています。実ページで下端固定にするときは .bnr-nav を position:fixed; bottom:0 にし、本文に padding-bottom（ナビ高さ＋FAB のはみ出し分）を確保してください。
コード（コピーして使えます）
<div class="bnr-phone">
<div class="bnr-screen">
<h2 class="bnr-page" id="bnr-page">ホーム</h2>
<p class="bnr-sub" id="bnr-sub">今日の新着 12 件</p>
<div class="bnr-card"></div>
<div class="bnr-card bnr-card-short"></div>
<p class="bnr-toast" id="bnr-toast" role="status" aria-live="polite"></p>
</div>
<nav class="bnr-nav" aria-label="メインナビゲーション">
<span class="bnr-indicator" aria-hidden="true"></span>
<button class="bnr-tab is-active" type="button" data-index="0" data-page="ホーム" data-sub="今日の新着 12 件" aria-current="page">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20h14V9.5"/></svg>
<span>ホーム</span>
</button>
<button class="bnr-tab" type="button" data-index="1" data-page="さがす" data-sub="キーワードやタグで探す" >
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m16.5 16.5 4.5 4.5"/></svg>
<span>さがす</span>
</button>
<span class="bnr-spacer" aria-hidden="true"></span>
<button class="bnr-tab" type="button" data-index="3" data-page="通知" data-sub="未読 3 件">
<span class="bnr-badge-wrap">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8a6 6 0 0 0-12 0c0 6-3 7-3 7h18s-3-1-3-7"/><path d="M13.5 21a2 2 0 0 1-3 0"/></svg>
<span class="bnr-badge" id="bnr-badge">3</span>
</span>
<span>通知<span class="bnr-sr">、未読3件</span></span>
</button>
<button class="bnr-tab" type="button" data-index="4" data-page="マイページ" data-sub="投稿 48 ・ フォロワー 1,204">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.5-6 8-6s8 2 8 6"/></svg>
<span>マイページ</span>
</button>
<button class="bnr-fab" type="button" id="bnr-fab" aria-label="新しい投稿を作成">
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
</button>
</nav>
</div>