皆さんこんにちは。
アシスタントクリエイターの村本です。

ここ最近、個人的にはJavaScriptを勉強中です。（当社若手社員がJavaScriptについて学んだ事をアップしています。よろしければコチラも参考にしてください。「JavaScriptの情報共有」）
ですが、動的な部分ばかりに意識がいってデザインの基本をおろそかにしないようにしたいです。

ですので、このブログでは、
「Webサイトに置ける各コンテンツの役割、なぜそれが必要なのか？」
１つ１つ確認していきたいと思います。

今回は「グローバルナビゲーション」についてです。

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

「各ページに共通して設置されるサイト内の案内メニューのこと」
ページの一番上に設置されていることが多いです。

最近のスマホサイトでは、右上もしくは左上に設置されている
メニューボタンを押したときに表示される内容がこれにあたります。

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

ホームページ全体の構成（コンテンツ）を分かりやすくするための役割があります。
本や、雑誌で言うと目次のような役割をします。

また、Webサイトでは、いろんなリンクをたどって別ページへ移動しますよね？
そのときに「今、自がどのコンテンツページを読んでいるか」伝える役割もあります。

ホームページにグローバルナビゲーションがなぜ必要なの？

人は第一印象の数秒でそのサイトを読み進めるかどうか判断します。
そこに求める情報が無いと判断されると、すぐに離脱へと繋がります。

「数秒で判断されるから、第一印象が大切。」というのは、
Webサイトに限ったことではないと思います。
人との関係や、商品販売と同様です。

ですので、トップページの一番最初に目につくグローバルナビゲーションを見て
サイト全体が見渡せるということがとても大事になります。

基本的にユーザーは、何かしらの情報を求めてWebサイトにやってきます。
「どこをクリックすれば求める情報があるのか」サイトを訪れた時に、
すぐに判断できることが重要ということですね。

グローバルナビゲーションのデザインをするときの５つのポイント

上記の理由を踏まえ、ホームページのデザインをするときのポイントいくつか挙げられます。

　① 項目名を適切にすること

　→その先にどういう情報があるのか、誰でも想定できる項目名にしておくことが大切です。
　　欲しい情報がどこにあるのか、探し回らないといけないよなうな項目名では
　　ナビゲーションの役割を果たしません。

　② ナビゲーションの項目は、余白をとり見やすく５～７項目にすること

　→物を並べられたときに、人が１度に認識できるのは５～７項目が限度です。
　　８つ以上の項目を置いたとしても、見落とされる項目が出るため避けた方が良いです。
　　どうしても情報が多い場合は、階層を分けて整理するなどして対応しましょう。

　③ 位置を固定するなどして、スクロールしても常に見える場所に置いておくこと

　→グローバルナビ以外にも共通しますが、ユーザーがもっと知りたいと思ったときに
　　すぐにその情報が得られる環境が大事です。

　　人の目というのは、注視すると視野が狭くなり、そこから視線を大きく動かくすと、
　　どうしても一度集中力が切れてしまいます。

　　コンバージョンに繋がる思考を切らさないための対応としても大事なポイントです。
　　特に、お問い合わせへのリンクなど、コンバージョンに繋がるボタンの配置は
　　この点を意識したいです。　

　④ 項目の色を変えるなどして、今いる位置が分かるようすること

　→関連記事を読み進めているうちに、意図せず別ページに移動している経験はないでしょうか。
　　「さっき見た情報がもう一度見たい」「再び訪れたときに迷わず同じ情報を得たいけど、
　　　でもどこから行けば見られるのか分からない、毎回迷う。」

　　これでは、せっかく興味をもってくれたユーザーを逃してしまうことになってしまいます。
　　せっかくWebサイトを作ったのに、無駄な電話問い合わせが増えてしまうかもしれません。

　　そのサイトに関心のあるユーザーは必ず再訪します。
　　今見ているページが、目次で言うとどこなのか（どのナビゲーションと紐づいているのか）、
　　明確にしておくことで、常にストレスなく情報を与えることに繋がります。

　⑤ ローカルナビを置く場合は、メインコンテンツの左側に置くこと

　→メインコンテンツの右側は視認性が非常に低くなるため、
　　ナビゲーションを置く場所として適しません。
　　左から右という視線の動きで必ず目に入る左側に置いた方が良いです。

■今回のまとめ

言われると当たりまえと感じる点もありますが、
この基本がなければその先のデザインは考えられないと思います。
これらを踏まえて今後もデザインを進めていきたいと思います。

関連記事

Webサイトに置ける各コンテンツの役割と、なぜそれが必要なのか？

・「グローバルナビゲーション」の役割・見せ方
・「トップページ」の役割・見せ方_1/2
・「トップページ」の役割・見せ方_2/2
・「特徴／他社との違い／選ばれる理由」の役割・見せ方
・「実績／お客様の声」の役割・見せ方
・「サービス／商品の詳細情報（一覧）」の役割・見せ方
・「よくあるご質問」の役割・見せ方
・「お問合せ／予約／購入」ページの役割・見せ方
・「お知らせ／ブログ」ページの役割・見せ方
・「採用情報」ページ（サイト）の役割・見せ方