【2024年】ディレクター必見！スマホ用グローバルナビゲーションのトレンド7選

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

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

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

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

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

1. ハンバーガー型

http://www.lipton.jp/

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

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

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

2. ドロワー型（スライド型）

https://amb-uranai.ameba.jp/?auth

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

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

3. アコーディオン型

https://www.adk.jp/sp/

https://www.microsoft.com/ja-jp/

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

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

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

https://www.nissin.com/jp/

https://www.the-seiyu.com/front/contents/top/

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

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

5. スプリングボード型

http://www.morinaga.co.jp/

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

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

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

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

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

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

7. アイコンメニュー型

http://www.jtb.co.jp/smartphone/

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

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