近年、急速にスマートフォンの普及が進む中、PC版とは異なるUIUXで、スマートフォン用に制作されたWebサイトが増えています。
これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。

そのため、スマートフォンサイト(以下、スマホサイト)のUIUXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。

そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション(グローバルメニュー)の役割です。
今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。

各グローバルメニューのメリットとデメリット

スマホサイトで見られるグローバルメニューのインターフェイスは、次の8つが挙げられます。
それぞれのメリットやデメリットで用途が分かれますので、サイトの特色に合ったグローバルメニューを検討する材料にしてみてはいかがでしょうか。

1. ハンバーガー型

01_グローバルナビゲーションTrend01.PNG
http://www.lipton.jp/

02_グローバルナビゲーションTrend01.PNG
http://www.kao.com/jp/

【メリット】
ハンバーガー型は、スマホサイト上で普及率やユーザの認知度が高い、最もポピュラーなグローバルメニュー形式の一つです。また、レスポンシブデザインでWebサイトを制作する際も、設計や構築手法が幅広く周知されている形式といえます。

【デメリット】
一見、メニュー表示がないため、"三本線のアイコン"をタップしなければサイトメニューが分からない点です。今でこそ浸透しているものの、"三本線のアイコン"そのものがメニューであることが分かりにくく、最近ではその点を考慮して、ハンバーガーメニューのアイコンの下に「メニュー(Menu)」と書かれているサイトも多く存在します。

2. ドロワー型(スライド型)

03_グローバルナビゲーションTrend01.PNG
04_グローバルナビゲーションTrend01.PNG
https://amb-uranai.ameba.jp/?auth

【メリット】 
ドロワー型のグローバルメニューの魅力は、グローバルメニューがサイドから引き出せるという操作性です。
動的な動きをもたらすjQueryのコードやプラグインも多く配布されており、実装しやすいという点もデザイナーやマークアップエンジニアに好まれる理由といえます。

【デメリット】
ドロワー型は拡張性が高い点がプラス要素ではありますが、逆にデメリットでもあります。
次から次へと項目・ページを追加してしまい、不要なページの増加や階層が深くなりすぎてしまってユーザーにストレスを与えてしまう原因となってしまう可能性があります。あまり項目を細分化しすぎないようにすることで、小まめにサイト内を整理することで回避できる問題ではあります。

3. アコーディオン型

05_グローバルナビゲーションTrend01.PNG
https://www.adk.jp/sp/

06_グローバルナビゲーションTrend01.PNG
https://www.microsoft.com/ja-jp/

【メリット】
メニュー部分が折りたたみ式(開閉式)になっており、タップするとアコーディオンのようにメニューがスライドして開閉する並ぶような動作が特徴です。
こちらもドロワー型同様に実装までの時間がそれほどかからないため、採用しやすいメニュー形式といえます。

【デメリット】
アコーディオン型のデメリットは、ハンバーガー型と類似して、タップをしなければメニューが表示されない点です。
方向感覚を失わせたり、大量のスクロールを引き起こしてしまったりと、ユーザーにストレスを与える要因となり兼ねないので、サイト構築の際は頻度と使用目的を意識することが求められます。

4. ドロップダウン型

07_グローバルナビゲーションTrend01.PNG
17_グローバルナビゲーションTrend01.PNG
http://www.rehouse.co.jp/smp/

【メリット】
メニュー階層が比較的何層にもなるような場合に採用すると、見た目もスッキリし、操作性もスムーズになる便利なメニュー形式といえます。
不動産サイトなどで物件を沿線から選す場合などに用いられている形式で、こちらもよく目にするメニュー形式の一つです。

【デメリット】
ドロップダウン型の懸念点は、階層が深りがちだということです。階層が深くなればなる程、操作性に影響し、ユーザーの離脱につながってしまう場合があります。

5. ヘッダー・フッターメニュー型

09_グローバルナビゲーションTrend01.PNG
https://www.nissin.com/jp/

10_グローバルナビゲーションTrend01.PNG
https://www.the-seiyu.com/front/contents/top/

【メリット】
アイコンと併用して使われる場合が多く、視覚的にわかりやすいのが こちらのヘッダー・フッターメニュー型です。
この形式の場合、メニューがヘッダーないしフッターで固定されているケースが多いので、操作性もよく、ページをスクロールせずにメニュー選択できる点が便利です。

【デメリット】
メニュー位置が固定化されている点は強みですが、各ページや位置でのトンマナと一致しないことがあります。それに文字の大きさが比較的小さくなってしまいがちで、アイコンとセットで使用されていても読みづらさ、見づらさというのが出てしまいやすいところに注意が必要です。

6. スプリングボード型

11_グローバルナビゲーションTrend01.PNG
http://www.morinaga.co.jp/

12_グローバルナビゲーションTrend01.PNG
https://www.cocos-jpn.co.jp/sp/index.html

【メリット】
スマートフォンのホーム画面のようなインターフェイスのため、視認性が高く、視覚的にもわかりやすい点が魅力です。
子どもや高齢者にとっても優しいインターフェイスで、メニューそのものの存在感も存分に出せる点が強みといえます。

【デメリット】
ボタンの視認性もさることながら、そのメニュー内容についても訴求しやすさ・見やすさという面では他の形式よりプラスといえるものの、画面全体の大部分がボタンになってしまう点がデメリットとなります。
画面の大部分をボタンが占めるため、サイトの全体像を理解するという面では厳しく、コンテンツや情報が多い場合は向かない形式といえそうです。

7. モーダルウインドウ型

13_グローバルナビゲーションTrend01.PNG
http://www.starbucks.co.jp/

14_グローバルナビゲーションTrend01_(2).PNG
http://www.haagen-dazs.co.jp/smp/index.html

【メリット】
PC版では一般的な表示形式です。画面全体にポップアップでメニューやボタンなどのナビゲーションが表示されるため、視覚的にわかりやすい形式といえます。

【デメリット】
この形式のデメリットは、グレーアウトされるとはいえ、画面全体が隠れてしまい、メニュー選択のたびに大きなウインドウを操作することがスムーズではない点です。
また、一般的なモーダルウィンドウは、コンテンツ内の右上などに設けられる「☓」印や背景画像にタップすることでクリアにできますが、スマートフォンの小さな画面では誤操作を起こしやすく、特に入力フォームページでは要注意したいところです。

8. アイコンメニュー型

15_グローバルナビゲーションTrend01.PNG
http://www.jtb.co.jp/smartphone/

【メリット】
グローバルメニューのアイコンがボタンで表示されているため、視認性がよく、ボタン感覚でユーザーが選択できる点がメリットといえます。
実際にスマートフォンを使用するユーザも理解しやすいインターフェイスで、迷う事なく目的ページに遷移することが可能です。

【デメリット】
メニューが常に現れた状態となっており、画面の面積を比較的多く確保する必要があるため、見た目に洗練されたデザインとはなりにくいインターフェイスです。
定番のインターフェイスではありますが、見た目としてはやや古い印象を与えてしまいがちです。

まとめ

ハンバーガー型やアコーディオン型については、業種の隔たりなく、様々なスマートフォン用サイトで活用されています。
簡単に導入できるうえ、直感的に「メニュー」と認識やすいのが大きな理由でしょう。

そして近年、よく目にするようになったのがドロワー型とモーダルウインドウ型です。
徐々に人気が高まり、BtoBBtoC企業問わず、最新のトレンドに敏感な企業が先駆けて採用している状況です。

スマートフォン用の自社サイトや運営サイトの見直しを検討されている方は、上記サイトを参考にデザインを検討してみてはいかがでしょうか。