creatersnest

【Webデザイン】グローバルナビゲーションが使いやすいスマホサイト30選


スマホのグローバルナビゲーションを作る時、
なんとなく自分の得意なメニューデザインでパターン化されていませんか。

 

スマホサイトは通信環境などが理由で
表示するのにPCサイト以上に時間がかかってしまうため、
ユーザーは使いにくさを感じると、ストレスを感じ離れてしまいます。

 

アクセスする人が、迷わずサクサク目的の情報に進めるナビゲーションを作るためには、
サイトにあったデザインのナビゲーションをつけなくてはいけません。

 

今回はデザイン別にわけてスマホサイトのグローバルナビゲーションが使いやすい
参考サイトを30選をご紹介します。

 

<スライド形式>

メニューマークをタッチすると上下、横からメニューが滑らかに現れる
流行りのUIです。
メニュー項目をたくさん載せたいサイトに向いています。

花王

花王サイト1 花王サイト2

http://www.kao.com/jp/

TOPにシャドウをつけてメニューと境界をつけています

 

マイレピ

マイレピサイト1 マイレピサイト1

https://www.myrepi.com/

メニューが出るとスライドしたTOPページ全体に影がつきます

 

アディダス

アディダスサイト1 アディダスサイト2

http://japan.adidas.com/

こちらもメニューが出るとスライドしたTOPページ全体に影がつきます

 

Dior

ディオールサイト1 ディオールサイト2

http://www.dior.com/beauty/ja_jp/home.html

メニューマークをタッチすると0.5秒程かけてTOPの全体に影がかかり、

その後スライドしてメニューが表示されます。

 

CONVERSE

コンバースサイト1 コンバースサイト2

http://www.converse.co.jp/

TOPは固定でメニューが上に被さるようにみせています。

 

ESTNATION

エストネーションサイト1 エストネーションサイト2

https://www.estnation.co.jp/

メニューの背景をグレーにして境界をつけています。
メニュー表示とともにTOPも左方向へ移動します。

 

OSCAR

オスカーサイト1オスカーサイト3オスカーサイト2

http://www.oscarpro.co.jp/

テキストのみのメニューが表示後1秒ほどすると、

一番上にあるメニューの内容がアイコンで表示します。

 

フジテレビ

フジテレビサイト1 フジテレビサイト2

http://www.fujitv.co.jp/index.html

メニューには見出しと短い説明をつけてあります。

 

CHANEL

シャネルサイト1 シャネルサイト2

https://www.chanel.com/ja_JP/

三角マークをタッチ、スワイプさせるとメニューが表示されます。
メニューに下部にタブ形式でSNSサイトやフッターの要素をいれ、
TOPはビジュアルのみの為、シンプルですがインパクトがあります。

 

楽天ゴールデンイーグルス公式サイト

楽天ゴールデンイーグルス公式サイト1 楽天ゴールデンイーグルス公式サイト2

http://www.rakuteneagles.jp/

メニューマークをタッチすると下からメニューが表示されます。

 

SABON

サボンサイト1 サボンサイト2

http://www.sabon.co.jp/

ヘッダー部分のイラストの下からメニューが表示します。

 

ELIXIR

ELIXIRサイト1 ELIXIRサイト2

http://www.shiseido.co.jp/elixir/index.html

メニュー背景が半透明で、ヘッダーとメニューの背景と文字の色が合わせられています。

 

<ドロップダウンメニュー形式>

PCサイトにもよく見られる、一番ポピュラーなスタイルです。
メニューマークをタッチすると一覧が表示されます。
スワイプメニューなど動きのあるものをメニュー内に加えても、
スッキリとした印象です。
また、メニュー項目をたくさん載せたいサイト向きです。

 

スターバックス

スターバックスサイト1 スターバックスサイト2

http://www.starbucks.co.jp/

メニュー上部にスワイプメニュー、下部にはテキストのみのメニューの二段構造です。

 

ローソン

ローソンサイト1 ローソンサイト2

http://www.lawson.co.jp/index.html

項目のボリュームの多さを感じさせない、最もシンプルなデザインです。

 

ADDICTION

ADDICTION1 ADDICTION2

https://www.addiction-beauty.com/

メニューがページの邪魔をしないので、
メニューを開いていてもユーザーがメニュー以外の部分も同時に見ることができます。

 

 

<タブ形式>

一目で何の項目か理解できるため、サイトの遷移が迷いにくくスムーズに行われます。
ただし、メニューを多く載せてしまうと見にくくなるので、
シンプルに少ないメニューで構成するサイト向きです。

AKB48オフィシャルサイト

AKB48サイト

http://www.akb48.co.jp/

 

AU

auサイト1 auサイト2

http://www.au.kddi.com/

 

東京ディズニーリゾート

ディズニーサイト1

http://www.tokyodisneyresort.jp/top.html

 

<スプリングボード形式>

画面全体に並べるスタイルで、一番ユーザーが認識しやすいスタイルです。
こちらも多くのメニューを載せると見にくくなてしまうので、
最小限のメニューを載せます。
スプリングボード形式にする場合は、スマホが横向きに回転した時の表示を考慮して作成します。

ココス

ココスサイト

https://www.cocos-jpn.co.jp/index.html

スマホのスプリングボードに似せたメニューです。
ボタンの間に固定のイメージを交えたデザインです。

 

東京スカイツリー

東京スカイタワーサイト

http://www.tokyo-skytree.jp/

ボタンを丸く配置したおもしろいデザインです。

 

<ドリルダウン形式>

最も情報量の多いサイト向きです。
アクセスした人が段階をおって目的の情報にたどり着くようなスタイルです。
住宅サイトなどに多くつかわれています。

JR東日本

ドリルダウン1

http://www.jreast.co.jp/

シンプルですが情報の多さを感じさせず、デザインに統一感があります。

 

富士フイルム

フジフイルムサイト1 フジフイルムサイト2

http://fujifilm.jp/

タッチするとボタンの色が変わります。

 

<フッター&ヘッター形式>

PCサイトで多いスタイルです。
ドロップダウンボタンなどを入れることで多くのメニューを載せることが出来ます。
視認性の高さを兼ねているスタイルです。

ナイキ

ナイキサイト1 ナイキサイト2

http://www.nike.com/jp/ja_jp/

ヘッターにドロップダウンボタンが入れられています。

 

ソフトバンク

フッター&ヘッターメニューバー2

http://www.softbank.jp/mobile/

シンプルなアイコンで構成されたヘッターです。
メニューボタンをタップすると下からメニューがスライドしてきます。

 

ドコモ

ドコモサイト

https://www.nttdocomo.co.jp/

こちらもシンプルなアイコンで表示されていますが、
検索ボタンを上部に置き、サイト内検索が出来るようになっています。

 

<その他>

Apple

Appleサイト1

https://www.apple.com/jp/

メニューアイコンが上部に横並びにスワイプで表示されます。

 

CA4LA

カシラサイト1 カシラサイト2

http://www.ca4la.com/

メニュー内容がTOPページ内にすでに表示されており、メニューマークをタップすると、
移動して表示します。

 

DIESEL

ディーゼルサイト1 ディーゼルサイト1

http://www.diesel.co.jp/

メニューが画面全体に表示されます。
背景が半透明なのでTOPが透けてカッコいいです。

 

TBC

TBCサイト1  TBCサイト2

http://www.tbc.co.jp/

TOPの上に被せるようにメニューが見やすく表示されます。
他の動作をさえぎるので、次の行動に進むことを目的としているサイト向きです。

 

シュウウエムラ

シュウウエムラサイト1  シュウウエムラサイト2

http://www.shuuemura.jp/

こちらも画面全体にメニューを表示。
シンプルにメニュー操作のみを目的としています。

 

 

まとめ

いかがでしたか。

どんなに素敵なデザインのナビゲーションがついたサイトでも、
スマホを利用していて、見たい情報までなかなかたどりつけないと
見ることすら辞めてしまった経験は皆さんありますよね。

サイト利用者にとって、早く見やすくストレスなく目的の情報にたどり着くために、
どんなナビゲーションが最適なのか、参考にしてみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleリキッドレイアウトのWebサイトをレスポンシブにするときのポイント10個