サイトアイコン writers way

グローバルナビゲーションとは?効果的なUIデザインにしよう!

グローバルナビゲーションは、ほとんどのWebサイトに設定されています。ところで、通称グロナビと呼ばれることもある、グローバルナビゲーションについてどこまで理解していますか。なんとなく、よくあるサイトの真似をして設定していませんか? ユーザー目線で本当に使いやすいグローバルナビゲーションを設置するためにどんな方法が取れるのかまとめてみました。

グローバルナビゲーションとは?定義と使われ方をご紹介!

グローバルナビゲーションとは、そのWebサイト上のどのページにも設定される共通のメニューのことです。このグローバルナビゲーションを設置する意味と果たす役割はなんでしょうか? あるのが当たり前と思っているこのメニューについて考えてみましょう。

グローバルナビゲーションはWeb上で最もよく使われるメニュー

色々なWebサイトを見れば大抵一番上にサイト内の他のページに移動できるメニューと、3本線のアイコンで表示されるハンバーガーメニューなどのドロワーメニューが並ぶ形で設置されています。左サイドや、右サイド、ページの最下部に表示される場合もあります。

Webデザインで最もよく使用されているメニュー方式です。サイト内の移動にとても便利ですが、たまに移動した際のページに設置されていなくて戻れなくなったりすることもあります。

常に同じ位置に表示することでユーザーを迷子にしない

前段で、たまにないページに飛んでしまうと戻れなくなると書きましたが、それこそがこのグローバルナビゲーションの存在意義を示していると思います。

Webサイトは様々なページから構成されています。リンクを追っていくと、どんどん深いページに入り込んでしまい、元のページに戻りたくても戻るボタンを何度も押さないと戻れなくなってしまいます。

また、リンクの途中でチラッと見るだけで飛ばしたページを表示させたいと思っても、どこにあるかわからないという状態に陥りがちです。

広いサイトはページ数も多く、ユーザーは入り込んでいくうちに迷子になってしまいます。ユーザーを迷子にさせないために重要な役割を果たすのが、全ページ同じ位置にあるグローバルナビゲーションです。

外部サイトからのリンクを辿ってサイトに移動してきた場合、トップページではなく階層の奥のほうのページにいきなりアクセスすることもあります。そんな時も、グローバルナビゲーションにより、サイト内に他にどんな情報があるのかを知ることができます。

せっかくのナビゲーションがページを移動するたびに違う場所に表示されるのでは、ユーザーに安心感を与えられません。同じ位置に常にあることこそ重要なのです。

その他の代表的なナビゲーションとは

グローバルナビゲーション以外に用いられる代表的なナビゲーションの中から3点を選んで簡単にご説明します。

ローカルナビゲーション

グローバルナビゲーションを使用して移動したカテゴリーページで、同一カテゴリー内を移動するためのナビゲーションです。

パンくずナビゲーション

移動したページのグローバルナビゲーションの下、本文の上に設置される階層を示すナビゲーションです。

現在位置:ホーム>会社概要>スタッフ紹介

のような形で表示され、例えば「会社概要」をクリックすることで、会社概要カテゴリーの戦闘ページに移動できます。

ページネーション

カテゴリー内の情報が複数ページにまたがる場合、ページ間を移動するために設置されるナビゲーションです。ページ番号で移動できる場合、「前ページ」・「次ページ」などの形で表示する場合、両方並列で設置する場合があります。

グローバルナビゲーションをデザインする上での3つのポイント

効率的なグローバルナビゲーションをデザインするためには、どんなことを心がければよいでしょうか?ポイントを3つにまとめてみました。

ポイント1. 項目選びがポイント!サイトの全体像を理解してもらえる

ユーザーが使いやすいページにするために、グローバルナビゲーションの項目はサイトの全体像を理解しやすいよう選びます。項目を選定する考え方としては以下のようなものがあります。

これらの項目はどれか一つの決め方でというわけではなく織り交ぜて使うこともあります。

ポイント2. サイト全体のデザインの邪魔にならない

選択できる項目数が多くて、複数段にわたって設置され、ページ内の多くのスペースを閉めているようなメニューも時折見かけます。サイトを開いた時、全体のデザインを損ねますし、選ぶのが煩わしくなります。

パッと見て人が認識できる項目数はせいぜい5〜7個だとか3〜5個などと言われています。どのページにも表示するものなので、シンプルで違和感のないサイズとデザインを選びましょう。

ポイント3. 表示文字は文字数を抑えつつ的確に伝える必要がある

メニューボタンに表示する文字はなるべく文字数を抑えたほうが、配置した時全体がすっきりとします。

しかし、ユーザーに内容を理解してもらえなければ、ナビゲーションの役割を果たしません。長くても10文字以内で、言葉選びにもユーザーの立場から気を配って選定することが大切です。

サイト設計からプロに任せて最適なグローバルナビゲーションを!

わかりやすいグローバルナビゲーションを設定するためには、Webサイト設計段階からカテゴライズしてページの構成を検討しておくのが一番です。自

社内にWeb制作のプロがいるのならともかく、通常はどのように作るのが効果的なのかの判断はなかなか難しいのが現実です。

集客力アップを狙うのなら、Web制作やデザインのプロの手を借りるのがおすすめです。

サイト設計からWeb制作会社に依頼する

これからWebサイトを立ち上げる、あるいはサイトのリニューアルを検討しているのなら、サイト設計の段階からWeb制作会社に依頼するというのが最初の選択肢です。

効率的に考えられたサイトマップがあり、グローバルナビゲーションを活用して適切なリンクを張り巡らせることはSEO対策の観点からも大きな効果が見込めます。

専門の会社ならばその辺のノウハウは充分持ち合わせた上で、Web構築をしてくれるので安心です。

クラウドソーシングでプロにサイト設計から開発まで依頼する

サイトの規模によっては制作会社に依頼するのを躊躇するかもしれません。そんな時はフリーランスのWeb制作のプロに依頼するという方法もあります。設計から開発まで一貫して、面倒を見てもらえます。

Webサイトは常に更新リニューアルするものなので、これで完成ということはありません。SEO対策も常に効果を見ながら対策を練る必要があります。

安心できるプロと出会うことで定期不定期含めたページの見直しも安心です。
任せて安心できるフリーランスのWeb製作者とはどうすれば出会えるのでしょうか?

迷った時は、仕事を依頼したい企業と仕事をしたい人をマッチングするクラウドソーシングサービスの利用がおすすめです。

グローバルナビゲーションを含めた効果的なサイト設計はプロにお任せ

グローバルナビゲーションはサイトに訪れたユーザーを迷子にしないため重要なことはお分りいただけたと思います。効果的なナビゲーションを設置するためには、サイトのデザインやマップの設計段階から意識することが重要です。

トータルなサイトの見直しはもちろん、グローバルナビゲーションのデザインのみ発注したいというような場合でも、個人のフリーランスなら柔軟に対応してもらえます。

モバイルバージョンを終了