浮いた主アクションのボトムナビ

5枠のボトムナビ。中央に浮いた「投稿」ボタンを置き、選んだタブの下でインジケータが滑る。通知タブには未読バッジ。タップで画面のタイトルが変わる。

ENGLISH

Bottom Navigation with Raised Action

約182行画面のかたち / モバイル・タッチ操作の一覧 →

プレビュー

クリック

操作クリック／タップで動きます。

仕様書

向く場面: 主要な到達先が 3〜5 個のモバイルアプリ
「作る・投稿する」主アクションを常に出したい画面
未読件数をタブに添えたい通知導線
避ける場面: 到達先が 6 個以上あるナビ
主アクションが無い閲覧専用の画面
PC 幅のサイト（下端固定の意味が薄い）
構成要素: タブ（アイコン＋ラベル）
アクティブインジケータ
中央の浮いた主ボタン
件数バッジ
画面タイトル
トースト
持っている状態: 通常
フォーカス
押下中
キーボード: Tab で各タブと中央ボタンへ順に移動、Enter／Space で選択・実行。矢印キーでのタブ移動は無い
支援技術: nav に aria-label、選択中は aria-current=page。件数は sr テキスト「未読3件」で読ませ、開いたらバッジと共に消す。FAB は aria-label「新しい投稿を作成」。トーストは role=status
動き: インジケータ 280ms ease-out で移動元から滑る・FAB 押下 150ms で 0.94 倍・トースト 200ms。reduced-motion で全停止

原則フィッツの法則・フォン・レストルフ効果（孤立効果）

目的移動させる

デザインの要点

5枠のうち中央1枠を主アクション専用にし、色と高さで格を分ける。ナビの中で唯一「押すと何かが作られる」ボタンにする
アクティブ表示は色の変化だけでなく、インジケータの移動で「どこからどこへ動いたか」を見せる
バッジは件数を出す。赤丸だけでは「何が何件あるか」が伝わらず、押すまで不安が残る
safe-area-inset-bottom をパディングに足し、ホームバーの上に指が届く高さを確保する

プロのサイトでの実例

Material Design 3別サイト ↗ナビゲーションバーの仕様で 3〜5 個の到達先とアクティブインジケータの動きを定めている

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

実装メモ

中央の 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" id="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>