有名サイトのローカルナビゲーション、デザイン事例まとめ

はじめに

デザインをする時、どうしてもグローバルナビゲーションに目がいきがちですが、私の最近の流行りはいろんなサイトのローカルナビゲーションを見ることです。

どんな時にどのローカルナビゲーションを使えばいいのか、どのローカルナビゲーションを設置すれば理想のユーザー体験を作れるのか、調査するのが趣味になっています。

今日はそんな私がすごい！と思ったローカルナビをまとめてご紹介します！

ローカルナビの現状

ナビ、というとやはり真っ先に思い浮かぶのはグローバルナビですよね。

最近では、スマホの時のグローバルナビの形も、ハンバーガー形式だけでなく、ミートボール系式やワッフル/弁当系式などのネーミングも話題に上がりました。

そんな中、ローカルナビゲーションにはあまり陽が当たってないように思います。

ただ、最近、ますますスマホ対応が浸透して来て、縦長なサイトが増えている中、グローバルナビと同じくらい、長いページの中でどのように自分が行きたい部分に簡単に遷移できるか、というのは大事な要素になりつつあると思います。

また、大規模なサイトになれば、下層ページ間の移動も大事になって来ます。

今回は、有名企業のサイトを例に出しつつ、ローカルナビの事例をいくつかまとめてご紹介します。

有名企業のローカルナビ

LINE

まずはLINEのローカルナビを見てみます。
Gナビの下にあるグレーの一帯がローカルナビに当たります。

ローカルナビ、というとオーソドックスなものとしては、左もしくは右サイドにある形を想像します。

KDDI

しかし、ローカルナビの別の形として、縦に組んであるのではなく、横に組んである形もあります。

LINEのローカルナビはクリックするとページ遷移するようになっています。スクロールするとローカルナビは消え、グローバルナビのみが残ります。

また、スマホ時もローカルナビは表示されていないです。

au

LINEと似たような事例として、auがあります。

こちらはPC時にスクロールしても追従する作りとなっているのが違います。

さらに興味深いのが、スマホ時の挙動です。

スマホ時、グローバルナビはハンバーガーに集約され、ローカルナビは現在のページのみ表示され、プルダウン式に選べるようになっています。

トヨタ

トヨタですが、企業情報ページではこのようにオーソドックスなローカルナビを使っています。

しかし、CROWNの方では、LINE, au同様の横形式を使用しているようです。

スマホ時はこんな感じです。

Google

最後にGoogleを見ていきます。

一見ローカルナビがないように見えますが、スクロールすると…先ほどまでページ下部にあったナビが上に上がって来て、それがそのままページ上に固定されます。

また、現在のスクロール位置に合わせて、ローカルナビのハイライトが変わります。

さらに下にスクロールするとローカルナビが、上にスクロールするとグローバルナビが出るようになっています！

これは下にスクロールしている間は、ユーザーが現在読んでいる情報をさらに詳しく知りたいと思っている、逆にユーザーが上にスクロールしているときは、別の情報を探し始めたという仮定のもとに作られているんでしょうか。

スマホ時も基本的には同じ挙動ですが、ローカルナビが２つほどした画面におさまらないです。

スマホ時はLINE, auのようにプルダウン形式の方が使いやすいかもしれないですね。

まとめ

以上、今日は様々な有名企業のサイトのローカルナビをまとめてご紹介しました！

やはり、大規模なサイトに多く使われているローカルナビですが、
縦型のタイプのものから、横型のタイプのもの、スマホ時には消えるものから色々ありますね。

少しでも皆さんの参考になれば幸いです！