グローバルナビゲーションとは 制作のポイントやスマホの表示について

グローバルナビゲーションとは 制作のポイントやスマホの表示について

グローバルナビゲーションという言葉を聞いたことはありますか?Web制作やSEOといった検索エンジン最適化に詳しい方は聴き馴染みのある言葉だと思います。
今回はグローバルナビゲーションの説明や制作でのポイント等について説明します。

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

グローバルナビゲーションとは
グローバルナビゲーションとは、Webサイト内のページに設置されている、各ページに飛べるボタンのことを指します。
Webを閲覧していて、コンテンツが多く見たいページがなかなか見つからなかったりして不便を感じたときはありませんか。見たいページが見つからないというのはWebサイト閲覧のストレスになり、ブラウザバックされてしまうことに繋がります。

グローバルナビゲーションをしっかり設置しておくことで、アクセスしたユーザーが迷いなく目的のページを見つけることができます。

最新情報をいち早くお届け!

無料会員登録していただくと、
会員限定の特別コンテンツ記事を最後まで
読むことができます!
その他、更新情報・イベント情報を
お届けいたします。

グローバルナビゲーションの役割

グローバルナビゲーションの役割
グローバルナビゲーションの役割は、主要なページを見つけやすくさせたり、自分がどのページを見ているかを一目でわかりやすくさせたりすることです。

また、グローバルナビゲーションは検索エンジンにとって重要な要素とされています。Googleの品質評価ガイドラインによると、ページ間のナビゲーションのわかりやすさや使い勝手の良さを評価しており、ユーザーにとってもSEOにとってもグローバルナビゲーションは大きな役割を担っていることがわかります。

グローバルナビゲーションの制作ポイント

グローバルナビゲーションの制作ポイント
グローバルナビゲーションは、ただ単にサイトにあるページを全部入れ込めばいいというわけではありません。アクセスさせるページがアクセスしたユーザーにとって欲しい情報である必要があります。ナビを設置するサイトへ来るユーザーは何を目的にきているか考えてデザインしましょう。
それではグローバルナビゲーションを作る際のポイントを説明します。

表示するボタンの数は5,6個がベスト

グローバルナビゲーションの作成は、主要なページのみを絞って設置します。ボタンの数は5,6個程がベストです。何個もボタンを設置し、ナビを多く増やしてしまうと見かけも悪くなり、かえって見づらいページになってしまいます。

また、ユーザーにとって見たいページを設定しましょう。修理会社のホームページなのに、修理するプランや料金のページへの行き方がわからないと「電話で聞くのも手間だし、他の業者に頼もう」と違うサイトに移動されてしまいます。

グローバルナビゲーションは見やすい位置に

グローバルナビゲーションの設置位置は、訪問した際にすぐにわかるところに設置されているほうが望ましいでしょう。大抵ヘッダー内やサイドバーに設置されることがほとんどです。

また、グローバルナビゲーションの設置位置はサイト内でバラバラにならないように気を付けてください。トップページではヘッダー部分にナビが設置されているのに、ほかのページではフッターに設置されていたりすると、ユーザーは混乱します。ユーザーは必ずしもトップページからアクセスするわけではないので、どのページからも移動しやすい様に全ページに設置して、ユーザーの立場になってわかりやすくデザインすることが大切です。

階層構造が分かるようにする

グローバルナビゲーションでは、階層構造がわかるようにデザインします。ページの多いサイトでは、内容によってカテゴリで分けることで目的のページを探しやすくなります。ボタンが多くならないように、すべてのページを親として表示させるのではなく、カテゴリで分けた親のボタンにカーソルを合わせると関連したページのリンクが出るようにするとわかりやすいナビゲーションになるかもしれません。

まずはグローバルナビゲーションを設置するサイトを理解した上で設置することをお勧めします。

目的のページまでのクリック数は少なくさせる

Web移動の理想では、目的のページまでにユーザーがクリックする数は3クリック以内とされています。それ以上クリックが必要とされるサイトでは、ユーザーが迷子になりやすく、別のページに移動する可能性が高くなります。

なるべくユーザーのクリック数は少なくさせるように設計した方が、ユーザーにとっても開発者にとってもわかりやすいサイトになります。

スマートフォン用のグローバルナビゲーション

スマートフォン用のグローバルナビゲーション
さて、グローバルナビゲーションについて説明してきましたが、スマートフォンの場合はパソコンと同じようなメニューではなく、ハンバーガーメニューというものを使用するサイトが多く見られます。ハンバーガーメニューとは、三本線「≡」のアイコンがあり、アイコンを押すとプルダウンでメニューが下りてきたり、ポップアップが展開されるというものです。

それではハンバーガーメニューについて、いいところよくないところを説明します。

ハンバーガーメニューのいいところ

スマートフォンでは画面の表示領域が小さく情報が少なくなってしまうため、メニューを省スペース化できるハンバーガーメニューはデザイナーにとって有難い存在です。商品を扱っているサイトでは、ファーストビューに商品の情報やセールの情報を大きく表示させられるためハンバーガーメニューを採用しているページが多いのではないでしょうか。ハンバーガーメニューを開いたときの動きなどが独特であったりすると、おもしろいと思ってもらえたり、楽しくデザインされたサイトだという好印象を持ってもらえます。

ハンバーガーメニューのよくないところ

2010年前後からスマートフォンが普及し始め、三本線のアイコンを使ったハンバーガーメニューのデザインが数多く見られますが、三本線のアイコンがメニューボタンだとわからない人もいると思います。ハンバーガーメニューはタップしない限り開くことはないので、違った表現が必要となるかもしれません。

他にも、サイトに合わせてデザインしたハンバーガーメニューだと、何のアクションができるのかわからないという点に繋がります。また、ハンバーガーメニューは大体ページのトップにメニューがあるため、ページを下まで見た人は上まで戻る必要があります。いつでもメニューを開けるよう追従に設定するためにも、その分作成に手間がかかります。

見やすいグローバルナビゲーションを設置しよう

グローバルナビゲーションについて少しでもご理解いただけたでしょうか。
Webサイトではユーザーの見やすさ、動きを考えてデザインする必要があり、一部では「ハンバーガーメニューは古い」と言っている人もいるみたいです。Webデザインのトレンドを常に確認しながら、ユーザーにとって見やすいサイトを作りましょう!

制作でお悩みでしたら、
Bigmacにお任せください。

バナー制作
バナーlefty
バナー制作
バナー総合
バナー制作
バナー総合
LINEで送る
Pocket

  • この記事を書いた人
  • 最新記事