検索・ナビゲーション（Search & Navigation）

§05-01

Command palette (Cmd+K)

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

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

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

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

詳細

§05-02

インスタント検索 / typeahead

入力するたびに候補や結果を即時に表示する。

検索ボタンを押す前に結果を見られ、語句を試しながら絞り込める。商品名や記事タイトルなど、候補から選ぶ検索に向く。

実装のポイント入力をデバウンスして候補を取得し、一致部分を mark で強調する。role=「combobox」と aria-activedescendant で矢印キー選択を支援技術に伝える。

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

詳細

§05-03

ファセット検索

属性ごとのチェックボックスで結果を絞り込む。

件数が多い一覧から条件を重ねて目的の項目に近づく。商品や記事のように属性が多く、検索語だけでは絞れないときに向く。

実装のポイント選択状態をカテゴリ別の配列で持ち、URL のクエリに反映して共有・戻るに対応する。各値に該当件数を表示し、0 件になる選択肢は無効化する。

状態管理
フォーム

詳細

§05-04

グローバル検索 + jump

種類の異なるコンテンツを横断して検索し移動する。

どこに何があるか覚えていなくても、名前の一部から目的の画面やデータに直接飛べる。機能や項目が多いアプリで導線を短縮する。

実装のポイント結果を種類ごとにグループ化して見出しを付け、矢印キーと Enter で該当画面へ移動できるようにする。0 件時は検索範囲の変更を提案する。

キーボード操作

詳細

§05-05

検索履歴 / 保存検索

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

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

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

状態管理

詳細

§05-06

現在地までの階層をリンクの列で示す。

深い階層の中で自分の位置を把握でき、上の階層へ一度で戻れる。カテゴリが多いドキュメントやストアで、迷子を防ぎたいときに使う。

実装のポイントnav に aria-label=「パンくず」、ol でリスト化し、現在地には aria-current=「page」を付ける。長い階層は中間を省略記号に畳む。

アクセシビリティ

詳細

§05-07

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

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

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

キーボード操作

詳細

§05-08

サイドバー nav

階層のあるページ構成をサイドバーのツリーで示す。

ドキュメントやプロジェクトの構造を常に見渡しながら移動できる。階層が深く、現在位置を把握しづらいアプリに向く。

実装のポイント再帰コンポーネントで各フォルダが開閉状態を持つ。role=「tree」と aria-expanded を付け、矢印キーで開閉と移動ができるようにする。

状態管理

詳細

§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

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

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

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

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

状態管理

詳細