本文へ移動

§05

検索・ナビゲーション

Search & Navigation

Patterns
15
Demos
15

§05-01

Command palette (Cmd+K)

キー操作で開く検索窓からあらゆる機能へ飛ぶ。

メニューを辿らずに名前で機能やページを呼び出せる。機能が多く階層が深いツールで、慣れた人の操作速度を上げる。

実装のポイントCmd+K と Ctrl+K を keydown で拾って開き、入力でコマンドをあいまい検索する。矢印キーで移動し Enter で実行、Esc で閉じる。

  • キーボード操作
  • アクセシビリティ
詳細

§05-05

検索履歴 / 保存検索

最近の検索と保存した検索条件を呼び出せる。

同じ検索を繰り返す人が条件を打ち直さずに再実行できる。複雑な絞り込みを使う管理画面や検索中心のサービスに向く。

実装のポイント履歴は localStorage に件数上限付きで保存し、保存済み検索は上部に固定する。個別削除と全削除の両方を用意する。

  • 状態管理
詳細

§05-07

メガメニュー

複数列に項目を並べた大型のドロップダウンを開く。

階層の深いサイトで下位の項目まで一度に見せる。カテゴリ数が多く、通常のメニューでは階層を何度も開かせてしまうときに向く。

実装のポイントホバーで開く場合は閉じる前に短い遅延を入れ、斜め移動でメニューが消えないようにする。クリックと Esc にも対応し、aria-expanded を付ける。

  • キーボード操作
詳細
残り 7 件のパターンbottom nav / drawer / sidesheet / tab bar …

§05-09

bottom nav

モバイル画面の下部に主要な移動先を並べる。

親指で届く位置に主要な画面への移動を置き、片手で行き先を切り替えられる。利用頻度の高い画面が数個に絞れるモバイルアプリに向く。

実装のポイント項目は 3〜5 個に絞り、アイコンとラベルを併記する。現在地には aria-current を付け、iOS では env(safe-area-inset-bottom) で下端の余白を確保する。

  • アクセシビリティ
詳細

§05-10

drawer / sidesheet

画面の端から重ねて現れるパネルを開く。

一覧の文脈を保ったまま詳細や設定を見せられる。モバイルのナビゲーションや、ページ遷移させたくない補助的な編集に向く。

実装のポイント開いている間は背景のスクロールを止め、フォーカスをドロワー内に閉じ込める。閉じたらトリガーにフォーカスを戻す。

  • アクセシビリティ
  • アニメーション
詳細

§05-11

tab bar

横並びのタブで表示内容を切り替える。

同じ対象の異なる側面を一画面内で切り替えて見せる。設定や詳細ページで情報を分けつつ、移動の感覚を軽くしたいときに使う。

実装のポイントrole=「tablist」と aria-selected を付け、左右キーでタブ間を移動するロービングフォーカスにする。選択中のタブは URL に反映すると共有できる。

  • キーボード操作
  • アクセシビリティ
詳細

§05-12

stepped wizard nav

複数ステップの手続きを順に案内する。

長い入力を小分けにして、残りの手順と現在位置を示す。初期設定や申込など、一度に見せると圧倒される手続きに効く。

実装のポイント現在のステップに aria-current=「step」を付け、完了済みはチェックで示す。各ステップの入力は検証してから進め、戻っても値を保持する。

  • 状態管理
詳細

§05-13

anchor TOC (sticky)

ページ脇に追従する目次から見出しへ移動する。

長い文書の構成を常に見せ、読みたい節へ直接飛べる。今どこを読んでいるかも示すので、長文のドキュメントや記事で迷子を防ぐ。

実装のポイント見出しを IntersectionObserver で監視し、画面内にある節を目次で強調する。目次は position: sticky で追従させ、リンクは #id のアンカーにする。

  • ブラウザ API
詳細

§05-14

jump-to-section チップ

ページ内の見出しへ飛ぶチップを横に並べる。

長いページでも目的の節にすぐ移動できる。メニューの分類やカテゴリ別の一覧など、縦に長いコンテンツの上部に置くと効く。

実装のポイントoverflow-x-auto の横スクロールにし、選択されたチップを scrollIntoView で表示領域に入れる。端にフェードを付けると続きがあることが伝わる。

  • CSS のみ
詳細

§05-15

ピン留め / お気に入りビュー

よく使うビューをピン留めして上部に固定する。

保存した絞り込みや表示設定の中からよく使うものを手早く呼び出す。ビューが増えて目的のものを探すのに時間がかかるときに効く。

実装のポイントピン状態をビュー単位で保存し、ピン留めは一覧上部に並べる。並び順はドラッグで変えられるようにすると定着する。

  • 状態管理
詳細