ナビゲーションデザインの基本｜種類6つと項目の決め方

サイトのメニュー、なんとなく思いついた項目を並べていませんか？

ナビゲーションは、見た目を整える前に項目を選ぶ作業です。ここが決まっていないと、どんなに配色や余白を整えても押されません。
やることは3つ。種類を知る、項目を絞る、今どのページにいるかを示す。この3つだけで、迷わないサイトになります。

このレッスンでは、ナビゲーションの6種類、グローバルナビの作り方、ハンバーガーメニューを使う条件の順で見ていきます。最後に3サイトを分類する観察の練習もあります。

ナビゲーションの役割は2つだけ

ナビゲーションは、サイトの中を移動するためのメニュー全般を指す言葉です。日本語では「案内表示」に近いですね。ナビゲーションメニューと呼ぶこともありますが、同じものです。

役割は2つに絞れます。

• 今どのページを見ているかを示す
• 次にどのページへ移動できるかを示す

後回しにされやすいのが1つ目です。項目を並べただけで現在地を示していないサイトは本当に多いです。今いる項目の色を変える、下線を引く。これだけで迷いが減ります。

ナビゲーションの6種類

置く場所と役割で呼び名が変わります。よく使う6つを見ておきましょう。

種類	置く場所	役割
グローバルナビゲーション	ヘッダー	全ページ共通の主要メニュー
ローカルナビゲーション	サイドバーや本文の上	そのカテゴリの中だけで使う
パンくずリスト	本文の上	今いる階層を示す
フッターナビゲーション	フッター	探しに来た人向けの一覧
ハンバーガーメニュー	ヘッダーの右上	狭い画面でメニューを畳む
ドロップダウン	グローバルナビの下	親項目の中身を開く

いくつか補足しますね。

グローバルナビゲーションは、全ページの同じ位置に出る主要メニューです。「グローバルナビ」「グロナビ」と略して呼ばれます。サイトの骨組みがそのまま出る場所なので、いちばん時間をかけて決めます。

パンくずリストは「ホーム > デザイン基礎 > 配色の基本」のように、階層を横一列で示すものです。検索から直接記事に来た人が、今どのあたりを読んでいるか分かります。階層（トップページから何段下か）が2段以上あるサイトなら入れてください。Amazonや楽天の商品ページで、商品名の上に並んでいるあの列です。

ドロップダウンは、親項目にカーソルを合わせると下に開く小さなメニューです。プルダウンとも呼びます。厳密には、勝手に開くのがドロップダウン、押して開くのがプルダウンと使い分ける現場もありますが、日本では同じ意味で使われることがほとんどです。

フッターナビゲーションの役割は、Amazonのページをいちばん下まで送ると分かります。項目がずらりと並んでいますよね。ヘッダーは絞る、フッターは探しに来た人のために広く出す。同じサイトでも役割が分かれています。

部品そのものの作り方に迷ったら、デジタル庁のデザインシステムを開いてください。パンくずリストやヘッダーの部品が並んでいて、使う場面まで日本語で読めます。

グローバルナビの作り方

ここがナビゲーションの本体です。4つの手順で決めます。

1. 項目を5〜7個に絞る

上の図のBeforeは9項目あって、2行に折り返しています。この状態だと、目が全部の項目を読んでから選ぶことになります。
5〜7個に収めてください。8個を超えたら、似た項目をまとめられないか考えます。「当社について」と「会社概要」のように、言い方が違うだけで同じ中身の項目は必ず出てきます。

ユニクロや無印良品のサイトを開いてみてください。扱う商品の数は多いのに、ヘッダーに並ぶ項目は指で数えられるくらいです。中身が多い会社ほど、入口を絞っています。

2. 言葉を短く、社内用語をやめる

項目名は2〜6字が読みやすいです。「制作実績」より「実績」、「私たちについて」より「運営者」。
気をつけたいのが社内でしか通じない言葉です。「ソリューション」「ワークス」のような言葉は、その業界の人にしか伝わりません。初めて来た人が知っている言葉を選んでください。

3. 順番を決める

左から順に、よく見られる項目を並べます。左端と右端は覚えられやすい位置なので、そこに主要なものを置きます。
問い合わせや申し込みは右端に置いて、ボタンの形にすると分かりやすくなります。

4. 現在地を示す

今開いているページの項目だけ、見た目を変えます。色を濃くする、下線を引く、太字にする。どれか1つで足ります。
この一手間があると、サイトの中で自分の位置が分かります。Afterの図で「実績」に下線が引いてあるのがそれです。

パソコンでYouTubeを開くと、左のメニューで今いる項目だけ背景の色が変わります。探さなくても現在地が分かる作りです。自分のサイトでも、同じことを1か所やれば足ります。

押せる場所を、押せると分かる見た目にしてください。文字の色を本文と同じにすると、リンクだと気づかれません。カーソルを重ねたときに色が変わる作りも入れておきます。

ハンバーガーメニューを使う条件

三本線のアイコンを押すとメニューが開く形を、ハンバーガーメニューと呼びます。線が3本重なった見た目からその名前が付きました。パソコンでYouTubeを開くと左上に三本線のボタンがあって、押すと左のメニューが畳まれます。

便利ですが、条件があります。横幅が足りないときだけ使ってください。

畳んだメニューは、押さない限り中身が見えません。押す手間が1回増えるので、そのぶん見られる回数が減ります。スマホは横に5項目を並べる幅がないので畳む価値がありますが、パソコンは幅が余っています。余っているのに畳むと、手間だけが増えます。

2つ目は見落とされがちです。三本線だけだと、メニューだと気づかない人がいます。文字を添えるだけで押される回数が変わりますよ◎

やってしまいがちな失敗

階層を深くしすぎる

ドロップダウンの中にさらにドロップダウンを入れると、カーソルを外しただけで閉じてしまいます。
直し方は、階層を2段までにする。3段目が必要になったら、それは1ページにまとめたほうが読みやすい内容です。

アイコンだけで項目を表す

家のアイコンがホーム、虫めがねが検索。ここまでは通じますが、それ以外はほぼ伝わりません。
直し方は、アイコンに文字を添える。スペースが足りないなら、アイコンをやめて文字だけにしてください。

ページごとにメニューが変わる

トップページだけ項目が多い、下層ページでは並び順が違う。こうなると、読む人は毎回さがし直します。
直し方は、グローバルナビは全ページで同じにする。ページ固有のリンクは、本文の中かローカルナビに置きます。

ミニ実践：3サイトのナビを分類する

10分の観察練習です。紙とペンだけで進められます。

6番目が面白いところです。だいたい横幅900〜1000pxあたりで切り替わるサイトが多いはずです。作る側が「ここから先は並べきれない」と判断した幅ですね💡

3サイトを見比べると、項目名の付け方の違いも見えてきます。同じ内容なのに「会社概要」「運営者情報」「わたしたちについて」と書き方が分かれます。どれがいちばん分かりやすかったか、自分の感想をメモしておいてください。

よくある質問

ナビゲーションデザインとは何ですか？

サイトの中を移動するためのメニューを設計する作業です。見た目を整えるより先に、項目を何個にするか、何と呼ぶか、どの順に並べるかを決めます。
色や形を決めるのは最後です。項目が決まっていないうちに装飾を始めると、あとで作り直すことになります。

メニューの項目は何個までが目安ですか？

5〜7個です。8個を超えると、選ぶ前に読む作業が発生します。
減らせないときは、似た項目を1つにまとめてドロップダウンで中身を分けるか、フッターナビゲーションに移してください。フッターは項目数が多くても問題ありません。

パソコンでもハンバーガーメニューにしていいですか？

おすすめしません。横幅が余っているのに畳むと、押す手間が1回増えて、そのぶんメニューが見られなくなります。
デザインの雰囲気を優先して畳む作り方もありますが、その場合は、いちばん見てほしいページへのボタンを別に1つ置いておいてください。

ナビゲーションの流行を追ったほうがいいですか？

追わなくて大丈夫です。ナビゲーションは、見慣れた形がいちばん押されます。
画面いっぱいに開くメニューや、動きのある演出は目を引きますが、迷う人も増えます。凝るなら、まず基本の形で作ってから足してください。

次に学ぶこと

このレッスンの要点をまとめます。

• ナビゲーションの役割は、現在地を示すことと、移動先を示すこと
• 種類は6つ。グローバル・ローカル・パンくずリスト・フッター・ハンバーガー・ドロップダウン
• グローバルナビは5〜7項目。言葉は短く、初めての人が知っている言葉で
• 今いるページの項目は、色や下線で変える
• ハンバーガーメニューは、横幅が足りないときだけ

ナビゲーションを置く場所そのものはWebページの構成で扱っています。ヘッダーとフッターの役割を先に押さえておくと、項目の振り分けが決めやすくなります。
次はUIパーツの名前と役割です。今回出てきたドロップダウンやタブなど、画面の部品を名前で呼べるようになります。

ほかのレッスンはデザインの基本コース目次から選べます。順番に進めても、気になるところだけ読んでも大丈夫です。