グローバルナビゲーションとは?Webサイトのユーザビリティを左右

グローバルナビゲーションとは?Webサイトのユーザビリティを左右

グローバルナビゲーションの出来不出来によってwebサイトのユーザビリティは大きく変わります。デザインの雰囲気にも大きく関わるグローバルナビゲーションの配置にはこだわりたいものです。

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

グローバルナビゲーションとは、webサイト内の各ページに移動できるメニューのことです。PC表示だと、主にWebページの上部についていますよね。企業のホームページなら「home」「News」「製品」「採用」「企業情報」などのメニューがありますが、それの表示形式のことをグローバルナビゲーションと言います。

グローバルナビゲーションの目的

グローバルナビゲーションはサイト訪問者が探している情報の載っているページに導く役割と、ユーザーが今いるページがどこかを明確にする目的があります。

また、グローバルナビゲーションのデザインを工夫することでサイト内の主要なコンテンツをユーザーにわかりやすくアピールすることができます。

グローバルナビゲーション以外のナビゲーション

グローバルナビゲーションが最も基本的なナビゲーションではありますが、そのほかにもいくつか主要なナビゲーションはあります。

パンくずナビゲーションは有名です。今いるページがどのようなアクセス方法でたどり着いたかがわかるようになっています。例えばアパレルの通販サイトであるメンズジャケットを購入しようと考えている場合、そのページにたどり着くまでに辿ったページが表示されています。

他には関連ナビゲーションも主要なナビゲーションです。ニュースサイトなどではページ下部にそのページのニュースに関連した内容だったり、直近で更新されたニュース一覧のリンクが表示されていますが、これは関連ナビゲーションです。

グローバルナビゲーションの形は様々!

グローバルナビゲーションは様々なデザインがあり時代や業種などによっても採用される構成が変わります。ホームページの雰囲気を決定する重要な要素なので慎重に選ぶ必要があります。

1. ページ上部に横並び

企業のホームページでよく見られる最も一般的な形のグローバルナビゲーションです。使い勝手は最もよく、下部までページをスクロールした際にもメニューが消えないため他のページに飛ぶ際に不便がありません。他の表示位置のグローバルナビゲーションと併用される場合も多いです。

上部に表示されたグローバルナビゲーションにカーソルを当てるとドロップダウンメニューが表示されるというデザインも一般的です。

2. ページの左右に縦表示

エンタメ系のwebサイトやメニュー数が細かくて多い場合、また高いデザイン性を要するアパレルやヘアサロンなどのwebサイトはページの左右にグローバルメニューが表示される場合があります。スタイリッシュなデザインになり、トップページいっぱいに大きく画像を表示したい場合も使われます。

デメリットとしてはどこにメニューがあるのかわかりづらくなりがちな点とです。ページをスクロールした際にも、常にグローバルナビゲーションが美しく表示されるように心がけて設計する必要があります。

3. ハンバーガーメニューで収納

スマホ用のグローバルナビゲーションとして一般的になったハンバーガーメニューは、PC版でも活用されています。

ハンバーガーメニューとはメニューがハンバーガーのように一つに畳まれて収納されているタイプのグローバルナビゲーションです。三本線のようなデザインで表現されることが多いです。

ハンバーガーメニューを使えばサイトのデザインを損ねずにグローバルナビゲーションを設置することができます。ハンバーガーメニューをクリックした時にだけメニューが表示されるからです。

デメリットとしては普段PCやスマホなどをいじり慣れていない人にとっては少々難易度が高い可能性があります。

4.その他の表示方法

最近ではwebサイトがレスポンシブ対応になっており、PC版でもスマホ版のように縦長のスクロール形式のwebサイトが増えています。

そんな場合によくあるのは複数のグローバルメニューの併用です。例えばサイトの最上部は画像やメッセージを大きく表示し、グローバルナビゲーションはハンバーガーメニューに収納します。

下部にスクロールしていくと横並びのグローバルナビゲーションがグラフィックを邪魔しない程度の大きさで画面下部に現れ、最下部まで行くと固定のグローバルナビゲーションが大きく表示されるというものがあります。

グローバルナビゲーションの項目の決め方

グローバルナビゲーションに設置する項目はサイトの使い勝手を直接左右するので重要です。しかし、何でもかんでもメニューに詰め込んだのではどれが重要なメニューなのかわかりづらいサイトになってしまいます。どのような点を念頭に項目を決めればいいのでしょうか。

マジックナンバー7の法則

グローバルナビゲーションのメニュー数を決める上でよく言われるのがマジックナンバー7の法則です。これは、人間が普段あまり見ない言葉を記憶できるのは7の±2個までという研究をもとにされています。ただ、無理に7にこだわらず少なければ少ないほうがいいかもしれません。メニューが多ければ多いほど、全体的にごちゃっとした雰囲気のホームページにはなります。

あくまで主要なメニューに絞ること

ですので4つでも5つでもメニューを絞れるならその方がいいですし、メニューの並び順も意識する必要があります。一番アクセスしてほしいメニューは左端に設置、問い合わせなどのメニューは親近効果のある右側に設置、というようなセオリーもあります。

また、ユーザーを混乱させるようなメニューの作りも避けるべきです。遊び心というのはグローバルナビゲーションにとってはあまり必要とされていません。あくまで信頼できる道しるべとしての役割を果たすことが第一です。

グローバルナビゲーションをデザインするには?

グローバルナビゲーションが適切に設置されたwebサイトをデザインするにはWebデザイナーが必要です。どのように募集したら良いのでしょうか。

求人広告でwebデザイナーを募集する

求人広告でWebデザイナーを募集する場合、比較的候補者は集まりやすいかもしれません。

ただし、レベルがピンキリなのと、入社してから担当するのはWebサイトのデザインだけとは限らないため、他に何ができるか見極める必要があります。人を雇うほどではないという場合には当然向いていません。

人材紹介会社に依頼する

人材紹介会社に依頼した場合も当然雇用になりますから、案件が終わったからバイバイというわけにはいかないでしょう。またWebサイトのデザイン程度の案件だと、人材紹介会社が現場未経験の初心者を送り込んでくる可能性があります。

外部のwebデザイン会社に外注する

外部のデザイン会社にWebサイトのデザインを丸投げするというのは楽ですが、費用が多目にかかります。とはいえ、1案件ごとに終了というのは魅力的です。

クラウドソーシングでwebデザイナーとマッチングする

クラウドソーシングなら外注した場合のコストを下げることができます。フリーのWebデザイナーと直接案件に関する打ち合わせができますし、会社に頼むよりも予算は安くすみます。

グローバルバビゲーションのデザインならクラウドソーシングで依頼!

Webデザイナーを募集するなら、クラウドソーシングサービスがオススメです。1案件単位での契約になるため雇用にはなりません。

また、フリーランスのwebデザイナーは経験技術が豊富な人材が多く、直接案件について打ち合わせできればスムーズに進む可能性があります。案件が正式にスタートするまでは何人と交渉しても料金は発生しません。