ナビゲーション
ナビの仕事は3つの問いに答えることです。いまどこにいるか、どこへ行けるか、どう戻るか。
図の中身を文字で読む
- グローバルナビ 全ページ共通。5〜7項目まで
- できること 料金 制作事例 会社について ご相談
- 最初と最後が記憶に残る。左端に主要導線、右端に行動導線。 現在地は色だけでなく形（下線）でも示し、aria-current="page" も付ける
- パンくず 3階層以上のサイトで、検索から直接来た人に位置を伝える
- ホーム › できること › ホームページ制作 現在のページはリンクにしない
- ページ送りと無限スクロール
- 前 2 3 4 次 全240件中 41〜60件を表示 無限スクロールはこの3つを失う
- 全体量が分かる／位置を共有できる／フッターに到達できる 探す一覧には向かない。眺める内容にだけ使う。
- 使うなら「もっと見る」ボタンを併存させ、制御を利用者に残す。
- モバイルでも、主要な行動導線はハンバーガーの中に畳まず外に出す。
ひと目で#
- グローバルナビ
- 全ページ共通の主な導線。5〜7項目まで
- パンくずリスト
- 階層の中の現在地。3階層以上のサイトで効く
- タブ
- 同じ領域を分け合う、並列の内容。どれか1つだけが見える
- ページネーション
- 全体の量が分かり、位置を共有できる
- 無限スクロール
- 全体の量、位置の共有、フッターへの到達を失う
- 検索フィールド
- 構造をたどらずに目的地へ着かせる
- フィルター
- 今ある一覧を絞り込む。件数を見せるのが要点
使い分け#
図の中身を文字で読む
- ページ送り 探して戻る一覧に 無限スクロール 眺めるフィードに
- 全 240 件中 41〜60 件を表示
- 1 2 3 4
- 読み込みは続き、終わりが見えない
- ○ 全体の量が分かる ✕ 全体の量が分からない
- ○ 「3ページ目」と位置を人に伝えられる ✕ 位置を共有できない
- ○ フッターに着く ✕ フッターに着けない
- 戻ってきたとき、さっき見ていた位置に帰れる。 採るなら「もっと見る」を併せ、フッターの中身は別の場所にも置く。
| こういうとき | 使うもの |
|---|---|
| 目当ての項目を探す一覧 | ページネーション |
| 眺めるだけのフィード | 無限スクロール。「もっと見る」も併せて置く |
| 並列の内容が3〜5区分 | タブ |
| 区分が多い。複数を見比べたい | アコーディオン |
| 情報量の多いサイト | 検索フィールドを目立つ位置に |
| 候補が数百件ある | フィルター。各選択肢に件数を表示する |
| モバイルで項目が収まらない | ハンバーガー。主な導線は外に残す |
間違えやすいところ#
- 現在地を示さない位置を見失う。色だけでなく形でも示し、
aria-current="page"を付ける - 社内用語や部署名で名付ける利用者には意味が通じない
- 項目を増やしすぎる導線ではなく、探す対象になる
<nav>を使わない支援技術が領域として認識できない- モバイルですべてをハンバーガーに畳む主な行動の導線は見える位置に残す
- hover だけでメニューを開くタッチ端末で操作できない
- パンくずをブラウザの履歴として作るパンくずは階層であって、来た道ではない
- フィルターの選択肢に件数を出さない0件になる条件を選んでしまう
現在地で比べる#
実物のヘッダーとパンくずを並べています。切り替えは現在地の表示だけで、消してみると、位置を教えてくれるものが画面に1つも残らないと分かります。
柊野本店の本文が始まる位置（見本）
- 現在地は色だけでなく形でも示す。この見本は太字と下の罫、加えて aria-current="page"
- パンくずは階層を表す。ブラウザの「戻る」の履歴ではない
- パンくずの最後は現在地なので、リンクにしない
- グローバルナビは5〜7項目まで。この見本は5項目
この切り替えは JavaScript で動きます。無効の場合は、下の実装とパターン集の完成コードを使ってください。
実装#
このコードで動いている見本です
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
小さな道具店のオンラインショップです。ヒーローの上ではナビを透明にして写真を生かしていますが、商品一覧を下までスクロールすると、ほかのページへ移る手段が消えます。カテゴリを変えるには、いちばん上まで戻るしかありません。
ヘッダーを上端に固定し、スクロール後は白地に切り替えます。境界は細い罫と薄い影で足ります。現在地の「商品一覧」は色と太さを変えたうえで aria-current="page" を付け、見た目と読み上げの両方に同じ答えを持たせます。
高さは抑えます。固定ヘッダーは便利さと引き換えに画面を常時削るので、スクロール後は1行に畳むくらいでちょうど釣り合います。
確認する#
- いま開いているページが、ナビの見た目と aria-current の両方で分かる
- ページのどこまでスクロールしても、主要な導線へ1操作で届く
- 一覧の下に全体の量と現在位置が出る。フッターに用があるページを無限スクロールにしていない
使えるパターン#
このページで扱う語#
このページで扱う語を並べる本文では太字7 語
語の名前から引くなら用語索引へ。
- ナビゲーション
- サイト内を移動するための導線の総称。現在地と行き先を示す役割を持つ。
- グローバルナビゲーション
- サイトのすべてのページに共通して表示される主要な導線。
- ハンバーガーメニュー
- 3本の横線のアイコンを押すとメニューが開く仕組み。モバイルのナビゲーションで広く使われる。
- メガメニュー
- ナビゲーション項目にカーソルを合わせると、大きな領域に下層項目を一覧表示する形式。
- サイドバー
- 主要な内容の横に置かれる補助的な領域。ナビゲーション、目次、関連情報などを収める。
- スキップリンク
- ページ先頭に置き、繰り返される部分を飛ばして本文へ移動できるようにするリンク。
- コマンドパレット
- キーボード操作で開き、機能名を入力して実行する検索型のメニュー。
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
同時に1つだけ見せたいならタブ、複数を開いて見比べたいならアコーディオン。
このコードで動いている見本です
階層が3段以上あるなら置く。1〜2段なら戻る導線で足りる。
このコードで動いている見本です
探して戻るならページ送り、眺めるだけなら無限スクロール。フッターに用があるなら無限にしない。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は部品を選ぶにまとめてある。逆引きには全188件。