coastdigitalgroup/coastai-skills

ボトムナビゲーションシステム

目的

ボトムナビゲーションシステムは、モバイルWebインターフェースおよびプログレッシブウェブアプリ（PWA）向けの、標準化されたモバイルファーストの設計フレームワークを提供します。アスペクト比の大きい現代のモバイルデバイスでは、トップヘッダーが片手での快適なリーチ範囲（「サムゾーン」）から外れます。ボトムナビゲーションは、主要なアプリケーション遷移先と重要なコンバージョンアクションを、ユーザーの親指が自然に届く範囲内に固定します。

効果的なボトムナビゲーションシステムを設計するには、アイテム密度（3〜5個）、アクティブ/非アクティブ状態の視覚的階層、タッチターゲットサイズ、バッジインジケーターの配置、ビューポートセーフエリアインセット（env(safe-area-inset-bottom)）、フローティングアクションボタン（FAB）の統合、シームレスなデスクトップ適応ルールのバランスを取る必要があります。このスキルは、WCAG AAアクセシビリティ基準に厳密に準拠しながら、モバイルUXデザインと技術実装を橋渡しします。

ユースケース

• EコマースモバイルWebアプリ: ホーム、検索/ブラウズ、保存済みアイテム、ショッピングカート（アイテム数バッジ付き）、アカウントへの1タップでの親指アクセスを提供します。
• SaaSモバイルWebアプリケーション & PWA: モバイルプロダクティビティアプリ（例：今日のタスク、フィード、クイック追加[+]、メッセージ、設定）のプライマリナビゲーションを構造化します。
• ソーシャル & コンテンツプラットフォーム: ホームフィード、探索、作成/アップロード、アクティビティ通知、ユーザープロフィール間の高頻度な切り替えを管理します。
• オンデマンド & ロジスティクスWebサービス: アクティブな追跡中に、主要なステータスタブ（注文、配達中マップ、受信箱、プロフィール）をビューポート下部に永続的に保持します。
• 現場業務 & 点検フォーム: 長いモバイルフォームの下部に永続的なアクションボタン（下書き保存、写真アップロード、フォーム送信）を固定します。

使用すべきでない場合

• デスクトップファーストのエンタープライズWebアプリ: ワイドスクリーンレイアウト（>1024px）では、垂直サイドバーまたはトップヘッダーバーが優れた空間効率を提供するため、代わりに sidebar-navigation-system または site-navigation-system を使用します。
• ページ内コンテンツ切り替え: 特定のページセクションやカード内でビューやコンテンツをフィルタリングするには、tab-ui-system または segmented-control-system を使用します。
• コンテキストアクションシート & モーダル: ページコンテンツの上に一時的でタスク固有のオーバーレイパネルを表示する場合は、accessible-bottom-sheet-implementation または overlay-and-dialog-system を使用します。
• フローティングセカンダリアクショントリガー: 単一のフローティングヘルプボタン、トップへ戻るボタン、チャットバブルの場合は、sticky-and-floating-ui-system を使用します。

入力

1. 情報アーキテクチャ（IA）分類: 最上位の主要遷移先（最大3〜5個）とそのアイコン/ラベルメタデータのリスト。
2. 通知 & バッジ要件: 未読インジケーター（ドットバッジ vs 数値カウンターバッジ）の仕様。
3. プライマリアクションハイライト（オプション）: 中央のスロットに主要な作成アクション用の強調/フローティングアクションボタン（FAB）が必要かどうかの指定。
4. デザイントークン: カラーパレット、エレベーション/シャドウトークン、可変タイポグラフィ、アイコンセット、スペーシング変数（accessible-color-system、elevation-and-depth-system、iconography-system から）。
5. レスポンシブデスクトップ戦略: デスクトップ適応モード（デスクトップで非表示、サイドバーにドッキング、ヘッダーナビに変換）の選択。

出力

1. ボトムナビゲーションバーアナトミー仕様: アイテム幅、アイコンからラベルへの垂直スタッキング、タイポグラフィトークン、バッジ配置座標、セーフエリアパディングを含む高さ計算を定義する詳細なレイアウト設計図。
2. インタラクティブ状態トークンマップ: デフォルト/非アクティブ、アクティブ/選択、ホバー、フォーカス可視、無効の各アイテムのカラーコントラスト定義と視覚的状態。
3. サムゾーンアクセシビリティマッピング: 最も頻度の高いタブを中央の親指リーチゾーンに最適化する空間配置ルール。
4. セーフエリア & ビューポートインセットガイドライン: ボーダーレスモバイルディスプレイノッチ領域（iOSホームインジケーター & Androidジェスチャーバー）向けの env(safe-area-inset-bottom) を使用したCSS実装ルール。
5. レスポンシブブレークポイント & デスクトップ移行設計図: タブレットおよびデスクトップ画面で下部バーを非表示または移行するためのレスポンシブメディアクエリとレイアウトルール。

---

ワークフロー

1. アイテム数と空間グリッドの確立

ボトムナビゲーションバーは 3〜5個の最上位アイテム に制限します。

• 3アイテム: 等幅フレックス配分（width: 33.33%）。明確なコアビューを持つコンパクトなWebアプリに最適です。
• 4アイテム: 等幅フレックス配分（width: 25%）。EコマースやSaaSモバイルアプリに理想的なバランスです。
• 5アイテム: 等幅フレックス配分（width: 20%）。モバイル画面幅（320px〜430px）での推奨最大値です。
• 5のルール: 5アイテムを超えてはいけません。6つ以上の遷移先がある場合は、セカンダリページを「もっと見る」または「アカウント」メニュータブにグループ化するか、優先度の低いリンクをサイドドロワーに移動します。

2. 垂直アナトミーと高さトークンの定義

ビューポートの下部に固定された下部コンテナを構築します。

• コンテナの配置: position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; を使用します。
• 基本高さ: 標準的なタブバーには 56px〜64px の基本コンテンツ高さを設定し、さらに padding-bottom: env(safe-area-inset-bottom, 0px) を追加して、iOSホームインジケーターやAndroidジェスチャーハンドルによるタッチの隠蔽を防ぎます。
• アイテムスタッキングレイアウト:
  • アイコンサイズ: 24x24px のSVGアイコンに標準化します（iconography-system）。
  • ラベルタイポグラフィ: 11px〜12px のフォントサイズを使用します（font-size: 0.75rem; font-weight: 500; line-height: 1.2）。
  • 垂直スペーシング: アイコンを上部に配置（上部パディング4px）、アイコンとラベルの間に2pxのギャップ、下部パディング4px。
  • タッチターゲットフロア: 各タブアイテムがフルハイト、フルワイズのタッチ領域を提供することを確認します（min-height: 48px、min-width: 48px）。

3. アクティブ状態と非アクティブ状態の階層の確立

アクティブタブと非アクティブタブの間に強い視覚的コントラストを適用します。

• 非アクティブ状態:
  • アイコンフィル/ストローク: 控えめなセカンダリカラー（例：var(--text-tertiary, #6B7280)）。
  • ラベルカラー: セカンダリテキストカラー（var(--text-secondary, #4B5563)）。
  • フォントウェイト: Regular または Medium（400 または 500）。
• アクティブ / 選択状態:
  • アイコンフィル/ストローク: ブランドプライマリまたはハイコントラストアクセント（var(--brand-primary, #2563EB)）。可能であれば塗りつぶしアイコンバリアントを使用します。
  • ラベルカラー: プライマリテキストまたはブランドカラー（var(--text-primary, #111827) または var(--brand-primary)）。
  • フォントウェイト: セミボールド（600）。
  • アクティブインジケーター（オプション）: 3pxの上部ボーダーまたはピルインジケーター（background: var(--brand-primary)）、または控えめな背景カプセル塗りつぶし（var(--brand-subtle, #EFF6FF)）。
• コントラスト要件: 非アクティブテキストとアクティブテキストの両方が、バーの背景色に対してWCAG AA最小コントラスト比（4.5:1）を満たしていることを確認します。

4. バッジと通知インジケーターの統合

バッジは、未読メッセージ、保留中のアクション、カートのアイテム数量をユーザーに通知します。

• バッジの配置: タブの24x24pxアイコンコンテナの右上隅を基準にバッジを配置します（position: absolute; top: -2px; right: -6px;）。
• ドットバッジ（未読インジケーター）: 8x8px の塗りつぶし円ドット（background: var(--badge-danger, #EF4444)）。
• 数値バッジ（カウントインジケーター）: ピルバッジ（height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--badge-danger);）。99を超えるカウントは 99+ に切り詰めます。
• アクセシブルテキスト: バッジの内部または隣に、スクリーンリーダーのみが読み取れるアクセシブルテキストを常に含めます（<span class="sr-only">3件の未読通知</span>）。

5. ビューポートセーフエリアとサーフェススタイリングの処理

スクロールコンテンツ上でボトムナビゲーションサーフェスが読みやすい状態を保つようにします。

• 背景ぼかし & 半透明: バックドロップフィルタリングを伴う半透明のサーフェス背景を適用します（background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #E5E7EB);）。ダークモードの場合は（background: rgba(17, 24, 39, 0.85)）を使用します。
• セーフエリアインセットルール: CSSを使用します。

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
  }
  

• ページ下部クリアランス: メインのスクロール可能なボディコンテナに、下部バーの高さ + セーフエリアインセットに等しい下部パディングを追加します（padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))）。これにより、固定バーの後ろでコンテンツが切り詰められるのを防ぎます。

6. レスポンシブデスクトップ適応の実装

ボトムナビゲーションバーはタッチスクリーンに最適化されており、ワイドなデスクトップビューポート（>1024px）に引き伸ばされると不自然に見えます。

• ブレークポイント戦略:
  • モバイル（<768px）: 固定ボトムナビゲーションバーをレンダリングします。
  • タブレット（768px - 1023px）: 下部バーを中央に配置/制約するか（max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;）、トップヘッダーに変換します。
  • デスクトップ（≥1024px）: ボトムナビゲーションバーを非表示にします（display: none）。主要な遷移先は、トップヘッダー（site-navigation-system）または垂直サイドバー（sidebar-navigation-system）に移行します。

---

決定ルール

ボトムバーレイアウトパターンの選択

パターン	アイテム構造	理想的なユースケース	主要なインタラクション
標準タブバー	アイコン＋テキストラベルを持つ3〜5個の等幅アイテム。	Eコマース、SaaSナビゲーション、コンテンツポータル。	1タップで即座にビューを切り替え。
中央FABドック	4つのタブ + 1つの強調された中央アクションボタン（例：「+ 作成」）。	ソーシャル投稿、タスク追跡、メディア作成アプリ。	中央ボタンで作成モーダル/シートを開く。外側のタブでビューを切り替える。
ラベル付きアイコンバー	永続的なアイコンと可視の11pxテキストラベルを持つ4〜5個のアイテム。	ほとんどのモバイルWebアプリのデフォルト。最も高いユーザビリティと明確さを提供。	アイコンの推測なしで即座に認識可能。
アイコンのみコンパクトバー	アイコンのみ（ラベルはaria-labelに表示）を持つ4〜5個のアイテム。	親しみやすいコンシューマーアプリ（例：Instagramのようなインターフェース）。	注意して使用: アイコンが普遍的に認識されている場合にのみ使用。

バッジスタイリングの選択

• ドットバッジ（赤/アクセントドット）: 「新しいアクティビティがある」ことをユーザーが知る必要があるが、正確な数は重要でない場合に使用します（例：新しいブログ記事の公開、システムアップデート）。
• 数値バッジ（カウント）: 正確なアイテム数がユーザーのアクションに直接影響する場合に使用します（例：「カートに3個のアイテム」、「5件の未読メッセージ」）。

---

制約

• アクセシビリティ（WCAG 2.1 / 2.2 AA）:
  • SC 2.1.1 キーボードアクセシビリティ: ボトムナビゲーションタブは、TabキーまたはArrowキーでナビゲート可能な、標準の<nav>とセマンティックな<a>リンクまたは<button role="tab">コントロールを使用して実装する必要があります。
  • SC 2.4.7 フォーカス可視: フォーカスされたボトムナビゲーションアイテムは、背景に対して最低3:1のコントラスト比を持つ、クリップされていないフォーカスリングを表示する必要があります。
  • SC 2.5.8 ターゲットサイズ（最小）: タッチターゲットは、少なくとも48x48px（または、周囲のスペーシングにより48pxのタッチゾーンが確保された24x24px）である必要があります。
  • SC 1.4.3 視覚的コントラスト: 非アクティブなタブラベルとアイコンは、背景の塗りつぶしに対して少なくとも4.5:1のコントラストを維持する必要があります。
• スクロール動作: ボトムナビゲーションバーは、タッチによる慣性スクロール中に、ちらつきや垂直方向のジッターなく、確実に固定（position: fixed）されたままである必要があります。
• セーフエリアインセット: ジェスチャーベースのモバイルビューポートでハードウェアのホームインジケーターと重ならないように、env(safe-area-inset-bottom) を含める必要があります。

---

よくある失敗パターン

• セーフエリアギャップの欠落: env(safe-area-inset-bottom) を適用しないため、ボトムナブラベルがiOSジェスチャーバーや画面の切り欠きと重なってしまう。
• 過剰なアイテム密度: 6〜7個のアイテムをボトムバーに詰め込み、タッチターゲットが40px未満に圧縮され、頻繁な誤タップを引き起こす。
• 引き伸ばされたデスクトップバー: 4アイテムのボトムバーをデスクトップモニタで1920pxの幅に引き伸ばし、アイコン間に大きな空きギャップが生じる。
• ラベルのない謎のアイコン: あいまいなアイコンにテキストラベルを付け忘れる（例：「お気に入り」、「レビュー」、「報酬」のいずれを意味するのかラベルがない星アイコンを使用する）。
• 固定ナビ後ろのコンテンツの切り詰め: ページコンテナに padding-bottom を追加し忘れ、フッターコンテンツや主要なフォーム送信ボタンが固定されたボトムバーの後ろに永続的に隠れてしまう。

---

検証基準

• ボトムナビゲーションには3〜5個の主要な遷移先が含まれている。
• 各タブは、48x48px以上のタッチターゲット領域を提供している。
• アクティブ状態と非アクティブ状態が視覚的に区別でき、WCAG AA 4.5:1のコントラスト要件を満たしている。
• CSSにセーフエリアインセットサポートのための padding-bottom: env(safe-area-inset-bottom) が含まれている。
• メインページコンテンツコンテナに下部パディングが含まれており、ページコンテンツが固定バーの後ろに隠れることがない。
• バッジには、アクセシブルなスクリーンリーダーのみが読み取れるテキスト（例：sr-only）が含まれている。
• ナビゲーションは、明確な :focus-visible インジケーターとともに、キーボード（Tab および Shift+Tab または Arrow キー）で完全に到達可能である。
• ビューポートが≥1024pxの場合、下部バーはデスクトップヘッダーまたはサイドバーにきれいに非表示または移行する。