ナビ・リスト操作
迷わせない案内と、気持ちいい一覧操作。
現在地を示す案内と、一覧を操作する部品のカテゴリ。タブ・パンくず・サイドバー・ページネーション・アプリバーのような案内の型と、即時フィルタ・ドラッグ並べ替え・スワイプ削除・無限スクロール・仮想スクロールのような一覧操作の型がある。原則はヤコブの法則。利用者は他のサイトで覚えた操作をそのまま持ち込むので、ナビゲーションは独自性より「見慣れた形で、現在地が一目で分かる」ことが先に来る。ページ間の移動で迷わせている、長い一覧の操作が重い、といった問題を直すときに引く。
使い分け同じ階層の切替は tabs-underline / segmented-control、階層の深さは breadcrumb、管理画面の常設ナビは sidebar-nav、モバイルは tab-bar / app-bar。一覧の量が多いなら pagination か infinite-scroll、1万件級なら virtual-scroll。並べ替えは drag-reorder。
まず見る3件
- クリック
下線スライドタブ解説あり
Animated Tabs
選択中タブの下に下線がスッと横移動するタブUI。現在地が直感的に伝わり、内容も切り替わる。
- 下線は選択中タブの offsetLeft／offsetWidth から置く。幅の違うタブへ移るとき伸縮しながら滑り、どこへ動いたかが目で追える
- 非選択パネルは opacity ではなく display:none。見えないパネルの中のリンクに Tab が入る事故を構造で防ぐ
- タブ列は Tab 1回で通り抜ける（選択中だけ tabindex=0）。タブ間の移動は ←→ に任せ、Home／End で両端へ
- JS
- クリック
サイドバーナビ解説あり
Sidebar Navigation
セクション見出し付きの縦型ナビ。折りたたみグループはクリックで開閉し、現在の項目は藍色でハイライトされる。管理画面やダッシュボードの定番。
- 開閉状態は aria-expanded だけを正とし、CSS が [aria-expanded="true"] + .sn-sub で拾う。class と属性の二重管理をしない
- 現在地はサブ項目にも aria-current=page を付ける。トップ項目だけだと、折りたたみの奥のページで現在地がどこにも出ない
- 見出しは 10 項目前後を 2〜3 群に分けるために置く。5 項目以下なら見出しのぶん縦が伸びるだけ
- JS
- クリック
ページネーション解説あり
Pagination
前へ／次へと番号ボタンで構成する定番ページャ。ページ数が多いときは「…」で省略し、現在のページを藍色で示す。クリックでページが切り替わる。
- 出す番号は「先頭・末尾・現在±1」の集合で作り、飛んだ区間だけ … にする。全ページを並べると 12 ページで 320px に収まらない
- 再描画で押したボタンが消えるので、新しい現在ページへ focus() を当て直す。放っておくとフォーカスが body へ落ち、次の Tab が先頭からになる
- 現在ページは押せないが Tab で止まる button のままにする。span にすると読み上げで「今何ページ目」が飛ばされる
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| 下線スライドタブ Animated Tabs | クリック | JS | 同列の内容を2〜5個で切り替える設定・詳細画面・何度も行き来するセクション切替 | default / active |
| アコーディオン Accordion | クリック | JS | FAQ・仕様一覧など見出しだけ先に見せたい一覧・縦の長さを抑えつつ本文を選んで読ませたい | default / active |
| ハンバーガーメニュー Hamburger Menu | クリック | JS | モバイル幅でヘッダーに収まらない4〜6項目のナビ・ロゴとボタンだけで狭い横幅を圧迫したくない | default / hover / active |
| 即時フィルタ Live Search Filter | 入力 | JS | 数十件の一覧から名前で即座に探す・都道府県・タグなど短い語の一覧 | default / hover / focus / empty |
| Topへ戻る Back to Top Button | スクロール | JS | 長い記事・一覧で先頭へ戻る導線が要るページ・フッターに戻るリンクが無い長尺ページ | default / hover |
| 縮小ヘッダー Shrinking Sticky Header | スクロール | JS | スクロールで本文を広く見せたいLP・記事・上部で存在感、読み進めると控えめにしたいヘッダー | default / active |
| 現在地ハイライト Scrollspy | スクロール | JS | 見出しが縦に続く長い仕様書・規約・レポート・目次を並べて現在地を示したい文書 | default / active |
| メガメニュー Mega Menu | ホバー | JS | ECのカテゴリなど下層が多いナビ・列に分けて一覧を一望させたいメニュー | default / hover / active |
| ステッパー Progress Stepper | クリック | JS | カート→配送→決済の順序固定の手続き・長いフォームを画面分割し残り工程を見せたい | default / hover / active / disabled / success |
| フローティングメニュー(FAB) FAB Speed Dial | クリック | JS | モバイルで主操作＋関連2〜3操作をまとめたい・画面右下に常駐させる作成・共有系の操作 | default / hover / active |
| スワイプ削除 Swipe to Delete | ドラッグ | JS | モバイルの通知・メール・注文の一覧・行ごとに1つの破壊的操作を隠したい | default / active |
| 無限スクロール Infinite Scroll | スクロール | JS | SNSタイムライン・通知など終わりを決めにくいフィード・件数が多く流し読みが主な一覧 | default / loading |
| マグニファイ・ドック Dock Magnification | ホバー | JS | 横並びのアイコンナビ・ツールバーをリッチに見せる・アイコン6個前後のランチャー | default / hover |
| グーイ・メタボールメニュー Gooey Menu | クリック | JS | 遊び心のあるFAB展開・ブランド演出としてのメニュー | default / active |
| セグメンテッドコントロール Segmented Control | クリック | JS | 今日／今週／今月など2〜5個の表示切替・iOS風の集計期間・表示モード切替 | default / focus / active |
| ドラッグ並べ替え Drag-to-Reorder List | ドラッグ | JS | ToDo・プレイリストなど順序が意味を持つ縦リスト・5〜20件程度を指で並べ替えたい | default / active |
| 引っ張って更新 Pull to Refresh | ドラッグ | JS | SNS・ニュースなど新着を先頭に差し込むフィード・モバイルで更新ボタンを置きたくない一覧 | default / active / loading |
| タブバー Tab Bar | クリック | JS | ホーム・検索・通知など4〜5個の主要画面切替・モバイルで常に手の届く位置に置くナビ | default / active |
| パンくずリスト Breadcrumb | 静的 | CSSのみ | 階層が3段以上ある商品・記事ページ・検索から直接着地した人に構造を示す | default / hover |
| サイドバーナビ Sidebar Navigation | クリック | JS | 管理画面・ダッシュボードの常設メニュー・見出しでグループ化した10項目前後のナビ | default / hover / active |
| ページネーション Pagination | クリック | JS | 検索結果・アーカイブなど特定ページへ飛びたい一覧・総件数と現在位置を把握させたい | default / hover / active / disabled |
| アプリバー App Bar | クリック | JS | モバイル画面上部の戻る＋タイトル＋操作・タイトルを中央に置く詳細画面 | default / hover / active |
| ツリービュー Tree View | クリック | JS | ファイル・フォルダなど入れ子の構造を見せる・階層を開閉しながら1件を選ぶエクスプローラ | default / hover / focus / active |
| 仮想スクロール Virtual Scroll | スクロール | JS | 数千〜数万件のログ・テーブル・履歴・全件DOM化で描画が重くなる一覧 | default / focus |
すべての見本（24件）
- クリック
下線スライドタブ解説あり
Animated Tabs
選択中タブの下に下線がスッと横移動するタブUI。現在地が直感的に伝わり、内容も切り替わる。
- JS
- クリック
アコーディオン解説あり
Accordion
クリックで項目が開閉し、アイコンが回転。一度に1つだけ開く排他制御で高さを抑える。
- JS
- クリック
ハンバーガーメニュー解説あり
Hamburger Menu
三本線アイコンが × に変形しながらメニューが横からスライドイン。iframe内対応のposition:absolute実装。
- JS
- 入力
即時フィルタ
Live Search Filter
検索ボックスに入力するとリストが即座に絞り込まれる。ページ遷移なしでさくさく探せる。
- JS
- スクロール
Topへ戻る解説あり
Back to Top Button
スクロールすると右下に「↑ Top」ボタンが浮かび上がり、押すと先頭へ滑らかに戻る。
- JS
- スクロール
縮小ヘッダー
Shrinking Sticky Header
スクロールするとヘッダーが縮み、背景と影が付く。上部に戻ると元のサイズに戻る。
- JS
- スクロール
現在地ハイライト解説あり
Scrollspy
縦に並ぶセクションをスクロールすると、サイドの目次の現在地が自動でハイライトされる。
- JS
- ホバー
メガメニュー
Mega Menu
ナビ項目にホバー/タップで複数列の大きなドロップダウンが開く。PCもスマホも対応。
- JS
- クリック
ステッパー解説あり
Progress Stepper
カート→配送→決済→完了など手順の進捗を示すインジケータ。次へ/戻るボタンで進められる。
- JS
- クリック
フローティングメニュー(FAB)
FAB Speed Dial
右下の+ボタンをタップすると複数アクションが縦に展開するスピードダイアル。
- JS
- ドラッグ
スワイプ削除
Swipe to Delete
リスト項目を左にスワイプすると赤い削除ボタンが現れ、さらに引っ張ると削除アニメ。PC（ドラッグ）もスマホ（スワイプ）も対応。元の位置にスナップバックも。
- JS
- スクロール
無限スクロール解説あり
Infinite Scroll
コンテナ内を下までスクロールすると自動でアイテムを追加読み込み。IntersectionObserverでsentinelを監視。
- JS
- ホバー
マグニファイ・ドック
Dock Magnification
macOS風のドック。カーソルに近いアイコンほど大きく持ち上がり、なめらかに波打つ。横並びナビやツールバーをリッチに。
- JS
- クリック
グーイ・メタボールメニュー
Gooey Menu
FABを押すと、子ボタンがぷるんと分裂して飛び出すメタボール演出。SVGフィルタ(ぼかし＋コントラスト)で液体のように繋がって見える。
- JS
- クリック
セグメンテッドコントロール
Segmented Control
選択中の背景ピルがスッと横移動するiOS風の切替。可変幅ラベルにも追従し、内容も切り替わる。矢印キー操作にも対応。
- JS
- ドラッグ
ドラッグ並べ替え
Drag-to-Reorder List
ハンドルをつまんで縦リストの順序を入れ替える。掴んだ項目に合わせて他の項目がスッと動いて場所を空ける（並べ替えの定番）。PC・スマホ両対応。
- JS
- ドラッグ
引っ張って更新
Pull to Refresh
リストを上端で下に引っ張るとインジケータが伸び、閾値を超えて離すと更新スピナーが回って新着が差し込まれる。SNS/ニュースアプリの定番ジェスチャー。
- JS
- クリック
タブバー解説あり
Tab Bar
画面下部に固定するモバイル定番のタブバー。アイコン＋ラベルの項目をタップすると選択が切り替わり、現在地が藍色で示される。
- JS
- 静的
パンくずリスト解説あり
Breadcrumb
「ホーム › カテゴリ › … › 現在地」と階層をたどれるパンくず。最後の項目は現在地として aria-current で示し、リンクにはしない。
- CSSのみ
- クリック
サイドバーナビ解説あり
Sidebar Navigation
セクション見出し付きの縦型ナビ。折りたたみグループはクリックで開閉し、現在の項目は藍色でハイライトされる。管理画面やダッシュボードの定番。
- JS
- クリック
ページネーション解説あり
Pagination
前へ／次へと番号ボタンで構成する定番ページャ。ページ数が多いときは「…」で省略し、現在のページを藍色で示す。クリックでページが切り替わる。
- JS
- クリック
アプリバー
App Bar
モバイル画面上部のアプリバー。左に戻る（またはメニュー）、中央にタイトル、右にアクションアイコンを置く。スクロールしても追従する想定のヘッダー。
- JS
- クリック
ツリービュー
Tree View
フォルダを開閉できるファイルツリー。クリックでフォルダが開き、キャレットが回転する。階層はインデントで表現し、キーボード（矢印キー）でも操作できる。
- JS
- スクロール
仮想スクロール解説あり
Virtual Scroll
1万件のリストでも、見えている範囲の行だけをDOMに描画する仮想スクロール。スクロールに応じて表示スライスを差し替え、総量ぶんの高さはスペーサーで確保する。
- JS