2018年7月10日

デザイン

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

目次

  1. はじめに
  2. ローカルナビの現状
  3. 有名サイトのローカルナビ
  4. まとめ

はじめに

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

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

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

ローカルナビの現状

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

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

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

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

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

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

有名企業のローカルナビ

LINE

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

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


KDDI

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

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

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

au

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

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

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

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

トヨタ

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

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

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

Google

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

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

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

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

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

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

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

まとめ

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

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

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

1

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP