Design Pattern

ナビゲーションバー

ナビゲーションバーは、サイト全体の主要な移動導線をまとめる UI です。ロゴ、リンク、アクティブ状態、補助アクションを整理しつつ、キーボード操作と現在地の把握を壊さない設計が必要です。

難易度: 中級カテゴリ: ナビゲーション

いつ使う / 使わない

使うべきとき

サイト全体の主要ページへの導線を常時見せたい場合
ロゴ、主要リンク、CTA を同じヘッダーにまとめたい場合
デスクトップ中心の情報設計で、上部に水平ナビを置くのが自然な場合

使わないべきとき

リンク数が多すぎて横並びに収まらない場合
階層的な管理画面の主ナビとして使いたい場合 → サイドナビの方が適する
ページ内コンテンツ切り替えが主目的の場合 → タブを使う

構造（Anatomy）

1 ナビゲーションコンテナ（nav 要素）

2 ロゴ / ブランド名

3 ナビゲーションリンク（ul/li/a）

4 アクティブ状態インジケーター

5 アクションエリア（CTA ボタンなど）

nav — グローバル導線のランドマーク。必要に応じて aria-label を付ける
ロゴ — ブランド認知とホームへの導線を兼ねる
リンク群 — 主な移動先をリスト構造で整理する
アクティブ状態 — 現在地を視覚的にも支援技術にも示す
アクションエリア — ログインや主要 CTA を配置する補助領域

HTML 構造

重要なポイント

<nav> を使ってナビゲーションランドマークを提供する
リンクは <ul> / <li> で構造化する
現在のページには aria-current="page" を付ける
ドロップダウンを含む場合も、キーボードで開閉できる構造にする

CSS 実装

スタイル設計のポイント

Flexbox でロゴ、リンク、アクションを横並びに整理する
アクティブ状態は色だけでなく下線や太字でも示す
:focus-visible でフォーカスリングを明確に出す
レスポンシブ時には折り返しやモバイルナビへの切り替えも考慮する

キーボード操作

Tab で各リンクにフォーカス移動
Enter でリンク先に遷移
Enter / Space でドロップダウンを開閉
Escape でドロップダウンを閉じる

ライブデモ

基本ナビバー

ロゴと主要リンクを横並びにしたベーシックな構成です。

ドロップダウン付き

details / summary を使って補助メニューを持たせた例です。

アクションボタン付き

CTA と補助操作を右側にまとめたヘッダーです。

よくある間違い

div でナビゲーションを作る

nav 要素を使わないと、ランドマークとして認識されず移動導線の発見性が下がります。

スキップリンクを考慮しない

ヘッダーが毎ページ共通なら、メインコンテンツへ飛ぶ導線もあわせて用意するべきです。

ドロップダウンが hover 前提

マウス専用の開閉にすると、キーボード利用者やタッチ環境で操作できません。

現在のページを示さない

どこにいるか分からないナビゲーションは、サイト全体の理解を妨げます。