コーストデジタルグループ/コーストAIスキル

サイドバーナビゲーションシステム

目的

サイドバーナビゲーションシステムは、永続的な垂直ナビゲーション構造を設計するための方法論を提供します。水平ヘッダーとは異なり、サイドバーは高密度な情報アーキテクチャに最適化されており、深いネスティング、二次ユーティリティアクション、ワークスペース切り替えをサポートします。このシステムにより、ユーザーは階層的な環境内で現在位置を明確に認識しながら、複雑なアプリケーションを最小限の認知負荷でナビゲートできます。

ユースケース

• SaaSダッシュボード： 複数のワークスペース、ツール、データビューの管理。
• 管理パネル： 広範な管理機能とシステム設定の整理。
• ドキュメントサイト： 記事、セクション、APIリファレンスの深い階層のナビゲート。
• 内部ツール： 複雑なワークフローとデータ入力モジュールの構造化。
• コンテンツ管理システム（CMS）： ページ編集、メディアライブラリ、ユーザー権限の切り替え。

使用すべきでないケース

• マーケティングランディングページ： コンバージョン重視のナビゲーションにはシンプルな水平ヘッダーが適切。
• シンプルなブログサイト： パンくずリストとトップレベルのリンクで十分な道案内が可能。
• モバイルファーストの消費者向けアプリ： プライマリサムゾーンの操作にはボトムタブバーが適している。
• 没入型ナラティブサイト： 永続的なUI要素がストーリーテリング体験を妨げる可能性がある。

入力

1. 情報アーキテクチャ（IA）： すべてのページとツールのマップ。機能的関係でグループ化されている。
2. ユーザーコンテキスト： 異なるユーザーロールと、彼らが実行する主要タスクの特定。
3. ワークスペースレベル： アプリが異なるアカウントやプロジェクト間の切り替えを必要とするかどうかの判断。
4. ブランドスタイルトークン： 既存のデザインシステムからの色、タイポグラフィ、スペーシング。
5. インタラクティブコンポーネントインベントリ： 標準化されたアイコン、バッジ（通知用）、ボタン。

出力

1. サイドバー解剖学仕様： 定義された領域（ブランディング、ワークスペーススイッチャー、プライマリナビ、セカンダリナビ、ユーザーフッター）。
2. インタラクションマトリックス： ホバー、フォーカス、アクティブ状態、ネスティング（展開/折りたたみ）の動作。
3. レスポンシブマッピング： サイドバーの変形ルール（例：固定 → 折りたたみレール → モバイルドロワー）。
4. 状態仕様： 異なるナビゲーションレベルと通知インジケーターの視覚的処理の定義。

ワークフロー

1. ナビゲーションレベルの定義

IAを垂直階層に整理する：

• レベル1（直接）： プライマリリストに常時表示されるコアセクション。
• レベル2（ネスト）： 展開またはドリルダウンで表示されるサブセクション。
• グローバルアクション： 「設定」「ヘルプ」「通知」などの二次ユーティリティ。通常は下部に配置。

2. 視覚的解剖学の確立

サイドバーを機能ゾーンに分割する：

• ヘッダー： ブランドロゴとワークスペース/アカウントスイッチャー。
• ボディ（スクロール可能）： プライマリナビゲーションリスト。
• フッター（固定）： ユーザープロフィール、システム設定、折りたたみ/展開トリガー。

3. ネスティングパターンの設計

深い階層の処理方法を選択する：

• アコーディオン： 展開すると他のアイテムを押し下げるセクション。2レベルに最適。
• フライアウト： ホバー/クリックでサイドバーの横に表示されるサブメニュー。狭い「レール」サイドバーに最適。
• ドリルダウン： サイドバービュー全体がサブレベルビューに入れ替わる。非常に深い構造に最適。

4. 状態マトリックスの作成

一貫した視覚的フィードバックを適用する（interactive-state-systemより）：

• アクティブ状態： 現在のページを示すためにハイコントラストのインジケーター（カラーバーや背景変化など）を使用。
• ホバー/フォーカス： インタラクティブ性を示す微妙な背景変化。
• 通知バッジ： badge-and-tag-systemを使用して未読アイテムやステータスを表示。

5. レスポンシブ適応の計画

ブレークポイント全体でのサイドバーの動作をマッピングする：

• デスクトップ（>1200px）： 固定、ワイドサイドバー（240px-280px）。
• タブレット（768px-1200px）： アイコンのみ表示の折りたたみ「レール」。ホバー/クリックで展開。
• モバイル（<768px）： デフォルトで非表示。ハンバーガーアイコンでトリガーされる全画面ドロワーとして表示。ドロワーが開いている間はメインコンテンツにinert属性（または同等のもの）を適用し、キーボードとスクリーンリーダーのユーザーが背後に隠れたコンテンツにタブ移動できないようにする。

決定ルール

• 「7アイテム」ルール： トップレベルのグループは7つ以下に制限し、スクロールなしで簡単にスキャンできるようにする。
• アイコン必須要件： レベル1のアイテムには常にアイコンを使用する。アイコンは認識を助ける視覚的アンカーを提供し、特に折りたたみ状態で効果的。
• ラベル永続性： ユーザーが明示的にサイドバーを折りたたまない限り、デスクトップビューでラベルを非表示にしてはならない。
• 視覚的区別： レベル2のアイテムはレベル1と視覚的に区別できるようにする（例：インデント、小さいフォントサイズ、ミュートされた色）。
• アクティブページの可視性： アクティブページインジケーターはサイドバー内で最も目立つ視覚状態でなければならない。

制約

• アクセシビリティ： サイドバーは一意のaria-labelを持つ<nav>でラップする必要がある。ネストされたアイテムにはaria-expandedを使用する。サイドバーまたはそのフライアウトがコンテンツをオーバーレイする場合、現在フォーカスされているアイテムが別のレイヤーの背後に完全に隠れないようにする（WCAG 2.2、2.4.11 フォーカスが隠れない）。
• レスポンシブ性： デスクトップではサイドバーがコンテンツに重なってはならない。メインコンテンツエリアを押し出すか、縮小する必要がある。
• 視覚的階層： ブランディングとワークスペーススイッチャーは上部に、ユーザー設定とヘルプは下部になければならない。
• タッチターゲット： すべてのリンクと展開トリガーはWCAG 2.2の最小ターゲットサイズ24x24px（2.5.8）を満たす必要がある。プライマリナビゲーションアイテムは頻繁に使用されるため、44x44pxが推奨される。

よくある失敗パターン

• スクロール内スクロール： スクロール可能なサイドバーとスクロール可能なコンテンツエリアがユーザーのフォーカスを競い合い、「スクロールハイジャック」感を引き起こす。
• 「見えないアクティブ」状態： 現在のページインジケーターが非常に微妙で、ユーザーが現在位置を見失う。
• 過度なネスティング： 3レベルを超える深さになり、ナビゲーションがアプリケーションではなくファイルシステムのように感じられる。
• 隠れた折りたたみトリガー： 「閉じる」または「折りたたむ」ボタンをユーザーが見つけられない場所に隠す。
• ラベルのないアイコン： プライマリビューでテキストラベルなしのアイコンを使用し、「謎の肉」ナビゲーションに依存する。

検証基準

• サイドバーが明確なゾーン（ヘッダー、ボディ、フッター）に構造化されている。
• アクティブ状態がホバー状態およびデフォルト状態と明確に区別されている。
• すべてのレベル1アイテムに一意で認識可能なアイコンがある。
• ネストされたアイテムが視覚的に親アイテムに従属している。
• サイドバーが完全にキーボードでナビゲート可能である（Tabキーと矢印キー）。
• モバイルおよびタブレットのレスポンシブ状態が定義され、機能している。
• ARIAランドマークと状態が正しく実装されている。
• テキストとインジケーターのコントラスト比がWCAG AA（4.5:1）を満たしている。
• タッチターゲットが少なくともWCAG 2.2の24x24pxの最小サイズを満たしている。
• モバイルドロワーが開いている間、背景コンテンツにinert（または同等のもの）が適用されている。