ナビが散らかる——ヘッダーとナビ設計

結論

ナビの散らかりは「項目を7個に削る」では直らない。プロは関連リンクを使用頻度順の意味あるカテゴリにチャンク化し、2層を超えたら素のドロップダウンを捨ててメガメニュー（左上に最重要・各選択肢は1回だけ）かルーティングページへ逃がす。仕上げにstickyヘッダーを約50pxへ縮め、剥がれた時だけ薄い影を出し、ホバーは0.5秒静止判定で誤発火を止める——これが「整っている」の正体だ。

01 — 項目数の上限ではなくチャンク化で整理する

「ナビは7項目まで」はMillerの7±2の誤用だ。メニューは選択肢が画面に見え続ける「認識(recognition)」タスクであって、暗記する「記憶(recall)」タスクではない。だから作業記憶の上限（Cowan 2001で約4）は当てはまらない。正解は項目を削ることではなく、12リンクを4カテゴリに束ねるようなチャンク化だ。トップは5〜7リンクが現実的な観測値だが、整理さえできていれば横7＋縦17カテゴリの複雑サイトも成立する。

blogYour menu doesn't need Miller's 7±2 rule — Stéphanie WalterblogHow can Miller's law make UX better? — LogRocket

02 — カテゴリ数は固定せず、使用頻度で並べる

カテゴリをいくつ作るかは「7」のような固定数ではなく、discoverability（見つけやすさ）で決める。グループ化も並び順も基準は使用頻度——最も多くの人が探すものを最短で出せる順に置く。五十音順／アルファベット順が効くのは20項目を超えるリストだけで、10未満では効果が薄いので頻度順のまま。メガメニューでは最重要グループを左上に置き、ラベルは情報量の多い語を先頭にする。

primaryTop 3 IA Questions about Navigation Menus — NN/g

03 — 2層を超えたらドロップダウンを捨てる

素のドロップダウンが有効なのは1層まで。2層で使いにくくなり、2層を超えると NN/g いわく highly inadvisable（強く非推奨）だ。深い入れ子はカーソルが端で外れて消え、操作が当てづらく、安っぽく壊れて見える。多階層は2〜3層を適切に扱えるメガメニューかルーティングページへ逃がす。ポイントは volume（量）そのものではなく、未整理の volume が致命的だということ。

primaryMenu-Design Checklist: 17 UX Guidelines — NN/gprimaryMega Menus Work Well for Site Navigation — NN/g

04 — メガメニューは「グループ化＋左上に最重要」で整える

volume は問題ない。未整理の volume が致命的だ。見出しもカラムもないリンクの羅列は、二次元パネルの「見て選ぶ」利点を殺し、ただ散らかって見える。プロは関連セットにグループ化し、中粒度・各選択肢は1回だけ表示する。最重要グループは order:-1 で左上へ。max-width で画面全体を覆わないようにし、日本語LPなら font-feature-settings:"palt" をルートに付けて約物を詰める。

primaryMega Menus Work Well for Site Navigation — NN/gsecondaryEfficiently Simplifying Navigation, Part 1: IA — Smashing

05 — ホバーメニューは0.5秒ディレイで誤発火を防ぐ

ディレイ0で即展開すると、マウスが横切っただけでメニューが暴発し、画面がチカチカして雑な印象になる。NN/g の処方は明確だ——ポインタが0.5秒静止してから表示（表示自体はその後0.1秒以内）、ナビ項目とドロップダウンの両方からポインタが離れて0.5秒後に非表示。CSS だけなら transition-delay と visibility の遅延解除で hover-intent を再現できる。下のデモは実際にホバーで挙動が変わる。

primaryMega Menus Work Well for Site Navigation — NN/g

06 — stickyヘッダーは約50pxに縮め、剥がれた時だけ影を出す

スクロール最上部から濃い影が出て分厚いヘッダーが居座ると、剥がれ感が出ず本文を圧迫する。プロの基準は約50px。影は常時ではなく、IntersectionObserver の番兵（sentinel）がヘッダーの剥がれ（stuck）を検知した時だけ薄く出す。下スクロールで隠し上スクロールで再表示する場合は 300〜400ms のスライドインで、項目は最大5。Chrome 133+ なら container-type:scroll-state で JS なしも可能だが、本番は IntersectionObserver フォールバック必須だ。

secondaryDesigning Sticky Menus — Smashing MagazineblogSticky Header Shadow on Scroll — Ryan Mulligan

07 — モバイルは重要3〜5項目を見せ、残りを隠す

ハンバーガーは発見性が低い。主要導線（CVボタンや「料金」）まで全部隠すと、見えない＝押されない機会損失になる。高パフォーマンスなのは重要な3〜5項目を可視のまま見せ、副次リンクだけハンバーガーに隠すハイブリッド方式だ。ブレークポイントは 1080px 単点で切り替える。

primaryMobile Subnavigation — NN/g

実装スニペット

stuck 状態を JS なしで検知して縮小・影付けする（Chrome 133+、要フォールバック）。

/* stuck状態をJSなしで検知 (Chrome 133+) */
.site-header {
  position: sticky;
  top: 0;
  height: 120px;
  container-type: scroll-state;
  transition: height .3s ease, box-shadow .3s ease;
}
@container scroll-state(stuck: top) {
  .site-header {
    height: 70px; /* 縮小 */
    box-shadow: 0 2px 8px rgba(0,0,0,.12); /* 剥がれた時だけ影 */
  }
}
.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
}

全ブラウザ対応の堅実版。番兵が画面外に出た＝剥がれた、で影をトグルする（高さ50px＝NN/g推奨）。

.header-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }
.site-header {
  position: sticky; top: 0; height: 50px;
  transition: box-shadow .3s ease;
}
.site-header.is-stuck {
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
/* JS: 番兵を監視して is-stuck をトグル
   new IntersectionObserver(([e]) =>
     header.classList.toggle('is-stuck', !e.isIntersecting),
   { threshold: [0] }).observe(sentinel); */

ホバーメニューの0.5sディレイ。transition-delay で表示を遅らせ、visibility の遅延解除で離脱後0.5秒で隠す。focus-within でキーボードも担保。

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .1s ease, visibility 0s linear .5s; /* 離脱後0.5sで隠す */
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible;
  transition-delay: .5s, .5s; /* 0.5s静止してから表示 */
}

メガメニューのグループ化グリッド。order:-1 で最重要を左上へ、max-width で画面占有を防ぎ、palt で日本語の約物を詰める。

.mega-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 24px 32px;
  padding: 24px;
  max-width: 960px; /* 画面全体を覆わない */
  font-feature-settings: "palt"; /* 日本語の約物詰め */
}
.mega-menu__group:first-child { order: -1; } /* 最重要を左上へ */
.mega-menu__heading {
  font-size: 13px; font-weight: 700;
  color: #888; margin-bottom: 8px;
}
.mega-menu__link { display: block; padding: 6px 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 1080px) { .mega-menu { display: none; } } /* モバイルはハンバーガーへ */

チェックリスト

• トップが8項目を超えそうなら、削る前に関連リンクをグループ化できないか先に検討した
• カテゴリの並び順を使用頻度で決め、最重要を左上／先頭に置いた（五十音順は20+項目のみ）
• 2層を超える階層を素のドロップダウンで出していない（メガメニューかルーティングページへ逃がした）
• メガメニューは見出しでグループ化し、各選択肢を1回だけ表示・max-widthで画面を覆わない
• ホバー展開は0.5秒静止で表示・離脱0.5秒後に非表示し、focus-withinでキーボード対応した
• stickyヘッダーは約50pxで、影は剥がれた(stuck)時だけ出している（常時の濃い影をやめた）
• scroll-stateを使う場合、IntersectionObserverのフォールバックを併用した
• モバイルは重要3〜5項目を可視に残し、副次リンクだけハンバーガーへ隠した（1080px単点）
• サブメニューを出す／出さないを全トップ項目で統一した（一部だけの不整合をなくした）

限界 / 出典

primaryTop 3 IA Questions about Navigation Menus — NN/g

primaryMega Menus Work Well for Site Navigation — NN/g

primaryMenu-Design Checklist: 17 UX Guidelines — NN/g

primaryMobile Subnavigation — NN/g

primaryDropdowns: Design Guidelines — NN/g

blogYour menu doesn't need Miller's 7±2 rule — Stéphanie Walter

secondaryMyth #23: Choices should always be limited to 7±2 — UX Myths

blogHow can Miller's law make UX better? — LogRocket

secondaryDesigning Sticky Menus — Smashing Magazine

secondaryShrinking Header Without JavaScript — CSS-Tricks

blogSticky Header Shadow on Scroll — Ryan Mulligan

secondaryEfficiently Simplifying Navigation, Part 1: IA — Smashing Magazine

blogThe menu structure of your website: best practices — Bright Digital

secondaryHick's Law — Laws of UX