グローバルナビとローカルナビとエクストラナビ

「グローバルナビゲーションという言葉は知っているけど、ローカルナビゲーションって何？」とおっしゃる方もいらっしゃるのではないでしょうか。グローバルナビゲーション(略称：グローバルナビ、グロナビ、Gナビ等)とは、Webサイトの全ページを横串に設置したナビゲーションとなるリンクでして、主要なカテゴリや基準に合わせて構築されるものです。では、ローカルナビゲーションとエクストラナビゲーションとは何なのか…について軽く、軽～くお話しておきたいと思います。

ローカルナビゲーションとエクストラナビゲーション

まず、ローカルナビゲーション(略称：ローカルナビ)ですが、これはグローバルナビで選択した各メニュー内のナビゲーションというような、いわゆるサブメニューとしてのナビゲーションとなります。大メニューの中の小メニューといったイメージですね。例えばファッション系ECサイト内で[トップス][ボトムス][腕時計][アクセサリー][他]というグローバルナビがあって、その中の[腕時計]を選択した時、その中で[ロレックス][ウブロ][カルティエ][オーデマ：ピゲ][フランクミューラー]等とブランド別に展開している場合、そのブランド別のメニューをローカルナビとして展開するケースは多いです。そして、このローカルナビは原則グローバルナビ同様、常時ユーザーが俯瞰視して選択できやすいようにUIデザインを考えて配置することが重要になります。

次にエクストラナビゲーションですが、これはグローバルナビゲーションから選考漏れしたメニューを対象とするケースが多く、サブナビゲーションや補足ナビゲーション等と呼ぶ人もいます。また、このエクストラナビゲーションの解釈は様々で、[利用規約][個人情報保護方針][会社案内][採用情報]等の約款系やtoB向けの要素をエクストラナビゲーションとして捉える人もいますし、お申し込み手順や買い物かご、マイページ、(サブドメイン等で展開するような)特設サイトへの案内、申込ボタン等、様々な要素をエクストラナビゲーションの中のひとつとして捉える人もいます。いずれにしましても、グローバルナビゲーションの延長上に(もしくは補欠として)存在するメニューとしての位置付けですので、サイト毎に解釈は様々だと思います。

各ナビゲーションのUIデザインは難しい

これらのナビゲーションの設置を考えた時、主に考えられるのはデスクトップではヘッダーやサイドバー、ハンバーガーメニューをどう使うか。モバイルではヘッダーとハンバーガーメニューを使ってどうUIを考えるか、です。これが非常に難しい(笑)。ヤコブの法則(ユーザーは潜在的に、初めてのコンテンツに対しても、従来からあるその他多くのコンテンツと同じ動作体験を好むという法則)を考えると突飛なUIは避けた方が良いですし、何よりヘッダーやハンバーガーではスペースもデザインも限られます。何より検索エンジンクローラーはモバイルファーストでランキングシステムを構成しているため、いよいよヘッダーとハンバーガーの可能性をとことん追求しなければなりません。

例えば以下はトヨタ自動車(https://toyota.jp/)のサイトです。

エクストラナビゲーションは私の自己解釈でマークしていますので、トヨタ自動車側の意向とは違うかもしれません。ただ、ハンバーガーメニュー内にはグローバルナビもありますので、エクストラっぽいですよね。

そしてこのトヨタ自動車のサイトでは、スクロールするとローカルナビだけが追従してきます。グローバルナビやハンバーガー(メニュー)アイコンは追従しません。ロゴやサイト名も追従しないのでローカルナビだけをフルで追従させることはできますが、それでもメニュー文字数とスペースの関係で、ローカルナビ内の各メニューは横スクロールさせることで見えない部分を補っています。複雑な立体的ナビゲーション構造を見事にUI化したと思う一方で、ネットリテラシーの低い人には使いこなすまで時間を要すUIでもあるなと思います。

最近、私がサイト制作を行う上での各ナビゲーション配置の流行としては、デスクトップではグローバルナビをヘッダーにして、サイドバーにローカルナビとグローバルナビを設置すること。モバイルではグローバルナビをヘッダーにして、ハンバーガーメニューにローカルナビとグローバルナビを設置すること、です。つまり、デスクトップではデフォルトでサイドバーが開いている状態にし、そのサイドバーがモバイルではハンバーガー化するイメージです。ただし、昨今のUIとしてはデスクトップでのワンカラムが流行っていますので、サイドバー設置による2カラムを嫌がる人に対しては、デスクトップでもハンバーガー設置にしてサイドバーを避ける仕様にしたりします。

このような感じで、メニューや切り口の多い比較的大型なサイトをリデザインする際は是非色々と試行されてみてはいかがでしょうか。