2015.11.11
保存版！ページビュー数や直帰率に効果的なグローバルナビゲーションの作り方
あなたはグローバルナビゲーション(別名：グロナビ)がページビュー数や直帰率に大きく影響することをご存知ですか？ウェブデザイナーであれば、しっかり時間をかけてグロナビを設計をし、それぞれのウェブサイトに効果的なレイアウト・デザインをしなければなりません。
では一体、どのようにすれば「ページビュー数や直帰率に効果的なグローバルナビゲーション」が作れるのでしょうか？それは「使いやすく分かりやすいグロナビとは何か」を知ることが重要です。誰でも使いやすく、スムーズにコンテンツ間を遷移できるグロナビは必然的にページビュー数や直帰率に良い影響を及ぼすからです。
例えばこちらの記事にもあるように、あるECサイトのグロナビを改善しただけで売上が56%も向上した事実もあります。そこで今回は「ページビュー数や直帰率に効果的なグローバルナビゲーションの作り方」をご紹介します！
そもそもグローバルナビゲーションとは？
グローバルナビゲーションとは略してグロナビとも呼ばれ、ウェブサイトの一定位置(通常は上部や左側)に表示されるナビゲーションのことです。訪問者はこのグロナビを用いてページ間を遷移するので、ウェブサイトの土台と言っても過言ではありません。下記画像においては、上部に設置されているのがグローバルナビゲーションです。どのコンテンツを見ていても、必ず同じデザインで定位置にあります。
下記画像の赤線にあるように、グロナビは基本的にサイト構造における第二階層となるコンテンツやカテゴリへのリンクを設置します。
対して、第二階層コンテンツやカテゴリからのリンクを設置するナビゲーションを「ローカルナビゲーション」と呼びます。下記画像の赤線部分の導線です。例えばさらにその下の画像において、上部に設置されているのがグロナビで、右側に設置されているのがローカルナビゲーションです。
なぜグローバルナビゲーションが重要なのか？
それは「訪問者は基本的にグロナビを使用してページ間を移動するため」と「そもそも見たいコンテンツがあるかどうかを判断するための材料でもある」からです。ですから記事の冒頭でも取り上げたように、事実としてグロナビを改善するだけでページビュー数や直帰率に大きく影響します。ですからウェブデザイナーであれば、しっかり時間をかけてグロナビを設計をし、それぞれのウェブサイトに効果的なレイアウト・デザインをしなければならないのです。次にその具体的な方法をご紹介します！
効果的なグローバルナビゲーションの作り方
ずばり、グロナビを設計・デザインする際に意識しておきたいことは下記です。
- 多くの人にとって使いやすいか
- 目的地が分かりやすいか
- 現在地が分かりやすいか
- コンテンツに興味が持てそうか
そして、上記の条件を満たすグロナビを作るために下記の手順で設計・デザインするのがおすすめです。
- 第二階層コンテンツを洗い出す
- グロナビの種別を決める
- グロナビをデザインする
第二階層コンテンツを洗い出す
初めにウェブサイトの第二階層となるコンテンツやカテゴリを洗い出します。グロナビに設置する第二階層コンテンツを洗い出すことで、そのウェブサイトに効果的なグロナビの「種別」を決められるからです(種別については次でご紹介)。また予め洗い出しておくことで「このレイアウトでは収まりきらない！」といったミスを防ぐことができます。ですから事前にリンクさせるコンテンツをしっかり洗い出しておきましょう！
グロナビの種別を決める
続いて洗い出した第二階層コンテンツから、そのウェブサイトに効果的なグロナビの「種別」を決めます。種別は主に下記の3つに分けられます。
- 情報で分ける
- カテゴリで分ける
- 対象者や状況で分ける
情報で分ける
第二階層コンテンツを、情報で分けるパターンです。主にコーポレートサイトで用いられます。例えば洗い出したコンテンツが「会社概要・製品情報・採用情報」など訪問者を絞り込まないような(=訪問者全員に見てもらいたい)コンテンツである場合です。
下記画像のように横並びにするナビゲーションが良く用いられます。ウェブサイト内の上部にあるため、誰でもナビゲーションだと瞬時に分かりますし、項目が限られている場合とてもアクセシビリティが高いです。
もしくは下記画像のように縦並びにするパターンも見受けられます。縦並びにすることで「項目の増減に簡単に対応できる点」や「ワイド画面が主流の現代において横の空白スペースを有効活用できる」といったメリットがあります。
またタブレット等のUIは、左側にナビゲーションが設置されているのが一般的なのでモバイルでの閲覧にも最適ですし、右側のコンテンツ部はリキッドデザインで対応できるので、レスポンシブデザインの適応も比較的容易です。項目の増減があるECサイト等でもよく見受けられます。
第三階層以下のコンテンツボリュームが多い場合、下記画像のように「メガメニュー」と呼ばれるナビゲーションが用いられます。メガメニューを用いることで「第三階層以下のコンテンツにワンクリックでページ遷移できる」というメリットがあります。
コンテンツのボリュームが多い場合、各第二階層からローカルナビゲーションで導線を引くこともできますが、この場合だと第三階層までアクセスするのに2クリック必要になりますし、慣れていない訪問者にとって膨大なコンテンツから目的のページを探すのは意外と大変です。ですからコンテンツのボリュームが多い場合はメガメニューをぜひ活用しましょう！また、珍しいパターンですが、Amazonのように縦並びのメガメニューもあります。
対象者や状況で分ける
第二階層コンテンツを、対象者や状況で分けるパターンです。例えば銀行のウェブサイトは「個人のお客さま向け」と「法人のお客さま向け」に、大学のウェブサイトでは「受験生向け」や「在校生向け」、そして「保護者向け」など、コンテンツを情報やカテゴリではなく「対象者」で分けることができます。
こういったウェブサイトは下記画像のようなナビゲーションがよく用いられます。そうすることで様々な目的を持った訪問者に対して、スムーズに確実に目的のコンテンツを見てもらうことができます。
また下記画像のように、対象者で分けた上にコンテンツのボリュームが多い場合は、先ほどご紹介した「メガメニュー」を用いましょう！
グロナビをデザインする
最後にグロナビを実際にデザインをします。さきほども書きましたがグロナビを設計・デザインする際に意識しておきたいことは下記です。
- 多くの人にとって使いやすいか
- 目的地が分かりやすいか
- 現在地が分かりやすいか
しかしさきほどご紹介したコンテンツの洗い出しとグロナビの種別を決めた時点で、概ね上記の条件を満たしたグロナビが完成していると言っても過言ではありません。ウェブサイト制作も同様ですが、事前設計が非常に重要であり、デザインはそれに秩序を与えて分かりやすくするためのものだからです。とはいえ、やはりその「秩序」が分からないと上記の条件を満たしたグロナビは出来ないので、条件別にポイントをご紹介します。
多くの人にとって使いやすいか
多くの人にとって使いやすい、つまりユーザビリティやアクセシビリティが高いというのは、グロナビに関わらずウェブサイト全体に対しても重要なことです。パソコンやスマートフォンの操作に慣れていない方でも、そして初めてそのサイトを訪れた方に対しても、迷うことなくスムーズに使えるようにデザインしましょう。この項目に対して実践しておきたいことは下記です。
- クリックしやすい要素サイズにする
- マウスオーバー効果を明確にする
- タップする環境でも操作が分かるようにする
- メニュー数は7個程度まで
目的地が分かりやすいか
目的地が明確且つスムーズに遷移できるようにしておきましょう。例えば「プロダクト」や「リクルート」より、「製品情報」や「採用情報」など誰でも瞬時に理解できるような項目名にすることはとても効果的です。下記画像は膨大なコンテンツを分かりやすくまとめ、リンク先のコンテンツがイメージしやすいようになっています。
この項目に対して実践しておきたいことは下記です。
- 瞬時に理解できるような項目名にする
- 項目名のトーンを統一する
- ボリュームが多い場合はメガメニューを用いる
メガメニューを用いる際は、その見せ方も非常に重要です。ただリンクを羅列するのではなく、しっかりとカテゴリ分けをしたり、可能であれば画像付きでコンテンツがイメージしやすいようにしておきましょう。
グロナビにおいて「コンテンツに興味を持たせる」というのは非常に重要で、メガメニューはデザインの幅が広いので比較的容易にそれが実現できます。「おっ！これは分かりやすい！」と思ったメガメニュー内の見せ方をいくつかご紹介するのでぜひ参考にしてみてください。
文字情報のみで整列させるパターン
画像を中心としたパターン
画像と文字情報を組み合わせたパターン
第二階層に背景を付けて第三階層と差別化するパターン
現在地が分かりやすいか
グロナビにおいて現在地が明確になるようなデザインを施しましょう。例えば下記画像のように「カレント表示」を用いましょう。カレント表示を用いることで、「いま自分はどんな場所にいるのか」が明確になります。
まとめ
いかがでしたか？グローバルナビゲーションはいわばウェブサイトの土台です。徹底した事前設計とデザインが施されていなければ、ウェブサイト全体の質を落とすといっても過言ではありません。徹底した事前設計をし、誰でも使いやすく分かりやすいデザインを施し、ページビュー数や直帰率に効果的なグローバルナビゲーションを作りましょう！