Webサイトのメニューを作ろうとして、グローバルナビやパンくずリストなど似たような名前がたくさんあり、それぞれ何が違うのか、どこに何を置けばいいのかと迷ったことはありませんか。
ナビゲーションは、見る人がサイトの中で迷わずに目的のページへたどり着くための「道案内」の部品で、種類ごとに役割が違います。
この記事では、ナビゲーションUIとは何か、グローバルナビ・ローカルナビ・パンくずリスト・タブバー・フッターナビの種類と役割、そして「今どこにいるか」を伝える現在地の示し方を、見本を使って初心者向けに解説します。
この記事の見本は、サイトの配色ではなく、架空のサービスの配色(青系)で描いています。見本の部品は押しても動きません。
ナビゲーションUIの基本
まずは、ナビゲーションUIとは何か、そしてどんな種類があるのかを押さえましょう。
ナビゲーションUIとは
ナビゲーションUIとは、サイトやアプリの中で、見る人がほかのページへ移動したり、今いる場所を確かめたりするための部品のことです。
UI(ユーザーインターフェース)は、画面の中で人が見たり操作したりする部分のことで、ナビゲーションはその中でも「道案内」を受け持つ部品です。
ナビゲーションの役割は、見る人の次の3つの疑問に答えることだと考えると分かりやすくなります。
- 今どこにいるのか
サイトの中のどのページ、どの分類にいるのかが分かる。 - どこへ行けるのか
ほかにどんなページがあり、どこから移動できるのかが分かる。 - どうやって戻るのか
1つ上の分類やトップページへ戻る道が分かる。
検索結果からいきなりサイトの奥のページにたどり着く人も多いので、どのページから見始めてもこの3つが分かるようにしておくことが大切です。
ナビゲーションの主な種類
ナビゲーションには、置く場所と役割の違う、いくつかの種類があります。
| 種類 | 役割 | よく置かれる場所 |
|---|---|---|
| グローバルナビ | サイト全体の主要なページへの入り口。どのページでも同じ内容 | ヘッダー(ページの一番上) |
| ローカルナビ | 今いる分類の中のページへの入り口。分類ごとに内容が変わる | サイドバー、本文の上や下 |
| パンくずリスト | トップページから今のページまでの階層を示し、上の階層へ戻れる | ヘッダーの下、ページタイトルの上 |
| タブバー(ボトムナビゲーション) | アプリの主要な画面を切り替える | スマートフォンの画面の一番下 |
| フッターナビ | サイト内の多くのページや、会社情報・規約などへのリンクをまとめる | フッター(ページの一番下) |
これらを1つのページの中で組み合わせると、次の見本のようになります。
見本では、グローバルナビの「サービス」、ローカルナビの「Web制作」、パンくずリストの最後の「Web制作」がそれぞれ今いる場所を示していて、どのナビゲーションを見ても現在地が分かるようになっています。
なお、ヘッダーの中でロゴやグローバルナビをどう並べるか、スマートフォンでメニューを三本線のボタン(ハンバーガーメニュー)にまとめる方法は、ヘッダーのレイアウトの記事で解説しているので、この記事ではナビゲーションの種類と現在地の示し方を中心に見ていきます。
ナビゲーションUIのデザインのコツ
ここからは、ナビゲーションの種類ごとに、デザインするときのポイントを見ていきます。
どの種類にも共通するのは、「いつも同じ場所・同じ順番に置く」ことと「今いる場所をはっきり示す」ことです。
グローバルナビはどのページでも同じ順番に置く
グローバルナビは、どのページを開いても、同じ場所に同じ項目が同じ順番で並ぶようにします。
見る人は一度メニューの場所と並びを覚えると、次からは読まずに位置で探すので、ページごとに順番が変わると毎回探し直すことになるからです。
Webサイト向けの国際的なガイドラインWCAG 2.2でも、複数のページでくり返し表示されるナビゲーションは、同じ順番で表示することが求められています(WCAG 2.2 達成基準3.2.3 一貫したナビゲーション・WAIC日本語訳)。
項目の名前は、「サービス」「料金」のように、見る人が探す言葉で短く付けましょう(社内でしか通じない言葉や、しゃれた造語は避けます)。
現在地は色だけに頼らず示す
グローバルナビやローカルナビでは、今見ているページ(またはそのページが属する分類)の項目を、ほかの項目と見た目で区別します(記事一覧の何ページ目を見ているかを示すページネーションでも、同じように現在のページを区別します。詳しくはページネーションとは?で解説しています)。
現在地が分かると、見る人は「今ここにいて、隣にはこんなページがある」と、サイトの中での自分の位置をつかめるからです。
このとき、文字の色を変えるだけでは、色の見え方が人と違う人には区別がつかないことがあります。
太字・下線・背景色・縦の線など、色以外の違いも組み合わせて示しましょう(詳しくは色だけに頼らないデザインの記事で解説しています)。
NGの見本では、「サービス」の文字色がほかとほとんど同じなので、どの項目が現在地なのかを見分けられません。
OKの見本では、太字と下線という色以外の違いがあるため、ひと目で「今はサービスのページにいる」と分かります。
現在地の下線は、背景とはっきり見分けられる濃さの色にしましょう。
下線のような「状態を伝える線や形」は、WCAG 2.2で、隣り合う色とのコントラスト比(2つの色の明るさの差を表す数値)を3:1以上にすることが求められています(WCAG 2.2 達成基準1.4.11 非テキストのコントラスト・WAIC日本語訳)。
要するに、白い背景に薄い灰色や薄い水色の下線を引くと、視力の弱い人や、明るい屋外でスマートフォンを見ている人には線が見えにくく、今どのページにいるかが分からなくなる、ということです。
色を決めたら、コントラストチェッカーで数値を確かめておくと安心です(コントラスト比の考え方はコントラスト比とは?で、確かめ方は色のアクセシビリティとは?で解説しています)。
WCAG 2.2には、ページの集まりの中で利用者の現在位置が分かるようにする、という達成基準もあります(WCAG 2.2 達成基準2.4.8 現在位置・WAIC日本語訳)。
この基準は3段階のうち最も高いレベル(AAA)なので必須ではありませんが、パンくずリストや現在地の表示は、そのための代表的な方法です。
ローカルナビで分類の中を見渡せるようにする
ローカルナビには、今いるページと同じ分類に属するページを並べ、今のページの項目を目立たせます。
同じ分類のページが一覧になっていると、見る人は「この分類にはほかにこんなページがある」と分かり、関係するページへ続けて移動しやすくなるからです。
デパートにたとえると、どの階のエレベーター前にもある「1階 食品・2階 婦人服・3階 紳士服」という全館の案内がグローバルナビ、婦人服の階に着いてから見る「コート・ニット・バッグ」という売り場の案内がローカルナビです。
最初の見本でも、グローバルナビの「サービス」の中にあるページだから、ローカルナビには「Web制作・アプリ開発・保守・運用」というサービスの中のページだけが並んでいます。
Nielsen Norman Groupは、ローカルナビは今のページの分類を示すことで、地図の「現在地」の印のような役割を果たすと説明しています(Local Navigation Is a Valuable Orientation and Wayfinding Aid(英語))。
パソコンではサイドバー(本文の横の細い列)に縦に並べることが多く、最初の見本でもローカルナビの今のページの項目に背景色と線を付けて目立たせています。
パンくずリストは「階層」を示し、最後を現在のページにする
パンくずリストとは、「ホーム > サービス > Web制作」のように、トップページから今のページまでの階層を順番に並べたナビゲーションのことです。
童話『ヘンゼルとグレーテル』で、帰り道が分かるようにパンくずを落としていった話が名前の由来です。
ただし、パンくずリストに並べるのは、見る人がたどってきたページの履歴ではなく、サイトの階層(どの分類の中にどのページがあるか)です。
検索結果から直接そのページに来た人にも、「このページはサイトのどこにあるのか」を伝えるのがパンくずリストの役割だからです。
住所にたとえると分かりやすくなります。「〇〇県 > 〇〇市 > 〇〇町」という住所は、どの道を通って来たかに関係なく同じで、その場所が地図のどこにあるかを示します。
パンくずリストも同じで、どのページを経由して来た人にも、そのページの「サイトの中の住所」を見せるものです(たどってきた道を戻りたいときに使うのは、ブラウザの「戻る」ボタンです)。
Nielsen Norman Groupは、パンくずリストについて次のようなポイントを挙げています(Breadcrumbs: 11 Design Guidelines for Desktop and Mobile(英語))。
- グローバルナビの代わりにはしない
パンくずリストは補助のナビゲーションで、ほかのナビゲーションと組み合わせて使います。 - 最後に現在のページを置き、リンクにしない
今いるページへのリンクは押しても同じページが開くだけなので、リンクにせず、ほかの項目と見た目で区別します。 - 区切りには「>」を使う
「>」は「この中にある」という階層の向きが伝わりやすい記号で、「/」も使われます。 - 階層が浅いサイトでは無理に置かない
トップページとその下の1階層だけのような小さなサイトでは、パンくずリストがなくても迷いにくいためです。
NGの見本では、3つの項目がすべて同じリンクの見た目で、区切りも「・」なので、ただの単語の並びに見えてしまいます。
OKの見本では、「>」で「ホームの中のサービスの中のWeb制作」という階層が伝わり、最後の「Web制作」がリンクではない現在のページだとすぐに分かります。
スマートフォンでは、階層が深いとパンくずリストが何行にも折り返してしまいます。
デジタル庁デザインシステムでは、狭い画面では折り返して表示するか、横にスクロールして見る形にし、横スクロールにした場合はページの下部にも折り返し表示のパンくずリストを置く、という方法を示しています(パンくずナビゲーション 使い方 – デジタル庁デザインシステム)。
タブバーは移動専用にし、項目を絞る
タブバーとは、スマートフォンのアプリの画面の一番下に、アイコンと短い文字を横に並べたナビゲーションのことで、Googleのデザインシステム「Material Design」の現在の版では「ナビゲーションバー」(以前の版では「ボトムナビゲーション」)と呼ばれています。
タブバーは、アプリの主要な画面へ移動するためだけに使い、「投稿する」「削除する」のような操作のボタンは置きません。
移動の項目と操作のボタンが混ざると、押したときに画面が切り替わるのか、何かが実行されるのかが分からなくなるからです。
AppleのデザインガイドラインHuman Interface Guidelinesでも、タブバーは移動のために使い、操作のためには使わないよう書かれています(Tab bars – Human Interface Guidelines(英語))。
Material Designでは、ナビゲーションバーに置く項目は3〜5個とされ、それより多い場合は別のナビゲーションを使うよう案内されています(Navigation bar – Material Design 3(英語))。
NGの見本は、7つの項目を詰め込んだため文字が小さく、指で押し分けるのも難しくなっています。
OKの見本は、項目を4つに絞り、アイコンには必ず文字を添え、選択中の項目をアイコンの背景と太字の2つの違いで示しています。
なお、タブバーは主にスマートフォンのアプリで使われる部品です。
デジタル庁デザインシステムでは、Webサイトで画面の下にナビゲーションを固定するボトムナビゲーションを非推奨にしています(ボトムナビゲーション – デジタル庁デザインシステム)。
理由の1つは、スマートフォンのブラウザ自体が画面の下のほうを使っていることです。
たとえばiPhoneのSafariでは、アドレスバーや戻るボタンが画面の下に表示されることがあり、画面の下の端を上に払うとホーム画面に戻るといった、画面の端を使う操作もあります。
そこにサイトのメニューを固定すると、メニューを押したつもりがブラウザのボタンを押していたり、ホーム画面に戻ってしまったりと、思わぬ操作が起きやすくなります。
アプリは画面全体を自分で使えますが、Webサイトはブラウザという入れ物の中で表示されるので、画面の端の使い勝手がアプリとは違うのです。
また、画面の下に固定するメニューはHTMLの最後のほうに書かれることが多く、キーボードで操作する人はページの最後まで移動しないとたどり着けず、画面の読み上げソフトを使う人もメニューを見つけにくくなります。
Webサイトでは、ページの上部のメニューを基本にし、画面の下に固定する場合は、この弱点を理解したうえで使いましょう。
フッターナビは「探しても見つからない人」の受け皿にする
フッターナビは、ページの一番下に、サイトの主なページや会社情報・規約などへのリンクをまとめたナビゲーションです。
ページを最後まで読んだ人や、グローバルナビで目的のページが見つからなかった人が、次に進む場所を探すときの受け皿になります。
グローバルナビには入りきらない細かいページへのリンクも置けますが、ページの一番下まで来ないと見えないので、大事な入り口はフッターだけに置かないようにしましょう。
コーディングするときのHTML要素
ここからは、Webサイトを自分でコーディングする(HTMLなどのコードを書いて形にする)人向けの補足です。
コードを書かない人は、この節は読み飛ばしても構いません。
デザインツールだけで作る場合は、「どの項目が現在地か」をデザインの段階で決めて、開発する人に伝えることを意識しておけば十分です。
HTMLでは、ナビゲーションのリンクのまとまりを<nav>要素で囲み、現在のページを表す項目にaria-current="page"を付けます。
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/service/">サービス</a></li>
<li><span aria-current="page">Web制作</span></li>
</ol>
</nav><nav>はナビゲーションのまとまりを表す要素で、aria-currentは見た目で示している「現在地」を、画面の読み上げソフトなどにも伝えるための属性です(MDN: <nav>、MDN: aria-current)。
パンくずリストの書き方は、W3Cの資料「WAI-ARIA Authoring Practices Guide」でも紹介されています(Breadcrumb Pattern – APG(英語))。
実践のポイント
ナビゲーションUIで陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- ページによってグローバルナビの項目や順番が変わってしまうことがあります。
見る人が迷う原因になるので、どのページでも同じ項目・同じ順番にそろえましょう。 - 現在地をまったく示していない、または色の違いだけで示していることがあります。
太字や下線、背景色などを組み合わせて、今いる場所が分かるようにしましょう。 - パンくずリストに、たどってきたページの履歴を並べてしまうことがあります。
パンくずリストはサイトの階層を示すものなので、どこから来た人にも同じ並びを見せましょう。 - ページの中で内容を切り替えるタブと、別のページへ移動するナビゲーションを同じ見た目にしてしまうことがあります。
押したあとに起きることが違うので、見た目でも区別しましょう。 - 問い合わせ先のような大事なページへのリンクを、フッターナビにしか置いていないことがあります。
大事な入り口は、グローバルナビなどページの上のほうからもたどれるようにしましょう。
よくある質問
- Q. グローバルナビとローカルナビの違いは?
A. グローバルナビはサイト全体の主要なページへの入り口で、どのページでも同じ内容です。
ローカルナビは今いる分類の中のページへの入り口で、分類が変わると内容も変わります。
「サイト全体の地図」と「今いる地区の案内板」のような関係だと考えると分かりやすいでしょう。 - Q. パンくずリストは、どのサイトにも必要?
A. 必ず必要なわけではありません。
ページの数が多く、分類が何段にも分かれているサイト(ネットショップや大きな企業サイトなど)では特に役立ちます。
数ページだけの小さなサイトや、階層が1段しかないサイトでは、なくても迷いにくいので省いても構いません。 - Q. 現在地の項目は、押せないようにしたほうがいい?
A. パンくずリストの最後の項目(今のページ)はリンクにしないのが一般的です。
グローバルナビやローカルナビでは、現在地の項目をリンクのまま残すサイトも多くありますが、その場合も見た目でははっきり区別しましょう。
まとめ
ナビゲーションUIとは、見る人がサイトやアプリの中で移動したり、今いる場所を確かめたりするための部品で、グローバルナビ・ローカルナビ・パンくずリスト・タブバー・フッターナビといった種類があり、それぞれ役割が違います。
どのページでも同じ場所・同じ順番に置き、現在地を色だけに頼らず示し、パンくずリストは階層を、タブバーは移動先だけを少なく並べることがポイントです。
まずはよく使うWebサイトを開き、今いるページがグローバルナビやパンくずリストでどう示されているかを確かめてみてください。
