グローバルナビゲーションとは？使いやすいWebサイトの作り方【図解たっぷり】

使いづらいサイトってありませんか？
「たくさんあるよ！」って思いますよね。それはきっとナビゲーションが上手く行っていないサイトなんだと思います。

サイト内で「あれ、私は今どこにいるんだろう？？」となったサイトは要注意！ナビゲーションが上手くいっていません。今回はナビゲーションの中でも王様？であるグローバルナビゲーションについて図解たっぷりで解説します。

ここをしっかりと使いやすいように作ってあげるとサイトの利便性が上がり、Googleからも評価の高いサイトになります。

今回は使いやすいグローバルナビゲーションをどうやって作ればよいかを図解たっぷりで解説します。駆け出しのWebデザイナーやエンジニアにはぜひ読んでもらい、使いやすいグローバルナビゲーションを作れるようになってもらいたいと思っています。

• グローバルナビゲーションとは
• グローバルナビゲーションの設計例
• まとめ

グローバルナビゲーションとは

グローバルナビゲーションとはサイト内のどのページでも表示するリンク(メニュー)です。

グローバルナビゲーションの設計において重要なポイントを押さえていきましょう。

1.ナビゲーションは目立つ位置に配置する

サイト内で迷った時などもすぐに戻れるよう、また目的のページへ簡単にたどり着けるよう目立つ位置に配置しましょう。前回のレッスンでヘッダーの主要構成要素として紹介したように、一般的には画面上部（ヘッダー）に配置されていることが多いです。

2.一目でサイト内にどのような情報があるか分かるようにする

料金が知りたくてサイトを訪れた人がいた場合を例とします。その時、グローバルナビゲーションに「料金」や「PRICE」などのメニューがあればすぐにそのサイトで調べることが出来るとわかりますね。以下は美容室か「EARTH」です。グローバルナビゲーションの項目が分かりやすく分けられています。

http://hairmake-earth.com/salon/area/13/

3.メニュー数を増やしすぎない

ナビゲーションにメニュー項目が沢山ありすぎると、複雑化し見にくくなってしまいます。そうするとユーザは不便さを感じてしまうでしょう。

ではこれらのポイントをおさえながら設計について詳しく見ていきましょう。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

グローバルナビゲーションの設計例

コンテンツの振り分けやどのメニューをどこに配置するかなどを考慮しながら設計を行っていきます。実際の例を参考にし学んでいきましょう。

階層型構造

サイトストラクチャの項目で階層型構造を取り上げました。このような階層の上の階層部分をメニューとしていく方法です。

基本的には重要な情報は左側、お問い合わせや予約などの項目は右側に配置します。これは人間の視線が左上から右下に向かって移動していくためです。

以下は先ほども取り上げた美容室「EARTH」です。
左側からニュース・サロン検索…と並べられています。そして右側に予約ボタンが配置されています。このボタンは配色なども目立つよう作られています。

http://hairmake-earth.com/salon/area/13/

カテゴリ別ナビゲーション

カテゴリ別にメニューを作成する方法です。
一目で取扱商品を伝えることが出来ますね。

カテゴリーが何階層にも分かれている場合は、ドロップダウンメニューを使って第３階層以下にもリンクを作ることもあります。

ドロップダウンメニューとは

グローバルナビゲーションのーつにマウスオーバーもしくはクリックすることで、下層の選択肢が表示されるものをド口ップダウンメニューと呼びます。
上の図のようなものが一般的ですね。

グローバルナビゲーションでド口ップダウンメニュー（特にクリックで開くタイプのもの）がある場合は、下向き矢印アイコンを付けるなどして、更に下の階層を選べるということをユーザーに伝えましょう。

ノートPCなどスクリーンの縦幅が狭い環境についても考慮が必要です。ドロップダウン表示させる要素数を増やしすぎず、縦幅をコンパクトにした方が使いやすくなります。

http://www.bellemaison.jp/

上図は「ベルメゾンネット」の通販サイトです。
ファッションやインテリア・雑貨とカテゴリ分けがされており、マウスオーバーでドロップダウンメニューが展開する仕組みになっています。

対象者別ナビゲーション

有料会員向けメニューと会員登録していない人向けメニューを分けたり、複数の目的別メニューという分け方をする方法です。

以下は「みずほ銀行」のサイトです。個人か法人かでメニューが分かれていますね。このように分けることで迷うことなく目的のページへたどり着けるでしょう。

https://www.mizuhobank.co.jp/index.html

まとめ

グローバルナビゲーションとはサイト内のどのページでも表示するリンク(メニュー)です。人間の視線は左上からアルファベットの「Z」のように動いていきます。

ユーザーにとって重要である情報は左側に、印象に残したいものは右側に配置しましょう。