Design Pattern
サイドナビゲーション
サイドナビゲーションは、ページの左右に垂直配置して多数のリンクを整理する UI パターンです。管理画面やドキュメントのように情報量が多い画面で有効ですが、現在地と階層の見せ方が重要です。
いつ使う / 使わない
使うべきとき
- 管理画面やダッシュボードのようにセクション数が多い場合
- 水平ナビバーに収まらない量のリンクがある場合
- カテゴリや階層をグループ化して見せたい場合
使わないべきとき
- リンク数が 3〜5 個程度で少ない場合
- モバイルで常時表示すると本文領域を圧迫する場合
- 同一ページ内のコンテンツ切り替えが主目的の場合 → タブを検討する
構造（Anatomy）
1 ナビゲーションコンテナ（nav 要素）
2 ナビゲーションリスト（ul/li）
3 ナビリンク（アイコン + テキスト）
4 アクティブ状態インジケーター（左ボーダー）
5 グループヘッダー / 折りたたみトリガー
- ナビゲーションコンテナ —
<nav>とラベルで目的を明示する - ナビリスト — リスト構造で項目数やまとまりを伝える
- ナビリンク — アイコンとテキストで視認性を高める
- アクティブ状態 — 現在のページを視覚的にも支援技術にも示す
- グループ / 折りたたみ — セクションを見出しや details で整理する
HTML 構造
重要なポイント
<nav>を使い、aria-label で他のナビと区別できるようにする- リンクは
<ul>/<li>で構造化する - 現在のページには
aria-current="page"を付与する - 折りたたみは
<details>/<summary>で素直に実装できる
CSS 実装
スタイル設計のポイント
- 固定幅を持たせ、本文とのレイアウト関係を安定させる
- アクティブ状態は左ボーダーや背景色で明確に示す
- グループ見出しはリンクと視覚的に区別する
- 折りたたみアイコンの回転など、状態変化をアニメーションで補助する
アクセシビリティ
WCAG 2.4.5 複数の手段
サイドナビは到達手段の 1 つとして機能し、他の導線と補完関係にあります。
WCAG 2.4.8 現在位置
現在地を見失わないよう、視覚表現と aria-current を併用します。
WCAG 2.1.1 キーボード
リンクも折りたたみトリガーも、キーボードだけで操作できる必要があります。
キーボード操作
- Tab でリンクや折りたたみヘッダーにフォーカス移動
- Enter でリンク先に遷移
- Enter / Space で折りたたみを開閉
ライブデモ
基本サイドナビ
アクティブ状態を持つ基本的な垂直ナビゲーションです。
グループ化
カテゴリ単位でリンクを整理した管理画面向けのパターンです。
折りたたみ
details / summary でセクションを開閉できるバリエーションです。
よくある間違い
ネストが深すぎる
3 階層以上に増えると、リンク探索と現在地把握が急激に難しくなります。
現在のページを示さない
リンク数が多いほど、現在位置の視覚的・意味的な表示が重要になります。
HTML / CSS で済むのに JavaScript を増やす
details に置き換えられる折りたたみまで JS で持つと、保守性が下がります。
モバイル配慮がない
画面幅が狭い環境では、ドロワーやオフキャンバスへの切り替えも必要です。