【2024年】ディレクター必見!スマホ用グローバルナビゲーションのトレンド7選
近年、急速にスマートフォンの普及が進む中、PC版とは異なるUI・UXで、スマートフォン用に制作されたWebサイトが増えています。
これまでは「PC」が主体で制作されていたWebサイトですが、若い世代では"PCを所有していない人"も多く、スマートフォンだけで携帯電話とPC、双方を兼ねて使っているという人も少なくありません。
そのため、スマートフォンサイト(以下、スマホサイト)のUI・UXに関しても、より使いやすさというのが求められる時代になってきていて、必要とされるポイントとしては、画面が小さいため、視認性や可読性の高さ、タップのしやすさなどになります。
そこでユーザをストレスなく、目的とするページに遷移させるためにも重要となってくるのがグローバルナビゲーション(グローバルメニュー)の役割です。
今回は、実例をもとに、様々なスマホサイトのグローバルメニューをご紹介します。
各グローバルメニューのメリットとデメリット
スマホサイトで見られるグローバルメニューのインターフェイスは、次の8つが挙げられます。
それぞれのメリットやデメリットで用途が分かれますので、サイトの特色に合ったグローバルメニューを検討する材料にしてみてはいかがでしょうか。
1. ハンバーガー型
【メリット】
ハンバーガー型は、スマホサイト上で普及率やユーザの認知度が高い、最もポピュラーなグローバルメニュー形式の一つです。また、レスポンシブデザインでWebサイトを制作する際も、設計や構築手法が幅広く周知されている形式といえます。
【デメリット】
一見、メニュー表示がないため、"三本線のアイコン"をタップしなければサイトメニューが分からない点です。今でこそ浸透しているものの、"三本線のアイコン"そのものがメニューであることが分かりにくく、最近ではその点を考慮して、ハンバーガーメニューのアイコンの下に「メニュー(Menu)」と書かれているサイトも多く存在します。
2. ドロワー型(スライド型)
https://amb-uranai.ameba.jp/?auth
【メリット】
ドロワー型のグローバルメニューの魅力は、グローバルメニューがサイドから引き出せるという操作性です。
動的な動きをもたらすjQueryのコードやプラグインも多く配布されており、実装しやすいという点もデザイナーやマークアップエンジニアに好まれる理由といえます。
【デメリット】
ドロワー型は拡張性が高い点がプラス要素ではありますが、逆にデメリットでもあります。
次から次へと項目・ページを追加してしまい、不要なページの増加や階層が深くなりすぎてしまってユーザーにストレスを与えてしまう原因となってしまう可能性があります。あまり項目を細分化しすぎないようにすることで、小まめにサイト内を整理することで回避できる問題ではあります。
3. アコーディオン型
https://www.microsoft.com/ja-jp/
【メリット】
メニュー部分が折りたたみ式(開閉式)になっており、タップするとアコーディオンのようにメニューがスライドして開閉する並ぶような動作が特徴です。
こちらもドロワー型同様に実装までの時間がそれほどかからないため、採用しやすいメニュー形式といえます。
【デメリット】
アコーディオン型のデメリットは、ハンバーガー型と類似して、タップをしなければメニューが表示されない点です。
方向感覚を失わせたり、大量のスクロールを引き起こしてしまったりと、ユーザーにストレスを与える要因となり兼ねないので、サイト構築の際は頻度と使用目的を意識することが求められます。
4. ヘッダー・フッターメニュー型
https://www.the-seiyu.com/front/contents/top/
【メリット】
アイコンと併用して使われる場合が多く、視覚的にわかりやすいのが こちらのヘッダー・フッターメニュー型です。
この形式の場合、メニューがヘッダーないしフッターで固定されているケースが多いので、操作性もよく、ページをスクロールせずにメニュー選択できる点が便利です。
【デメリット】
メニュー位置が固定化されている点は強みですが、各ページや位置でのトンマナと一致しないことがあります。それに文字の大きさが比較的小さくなってしまいがちで、アイコンとセットで使用されていても読みづらさ、見づらさというのが出てしまいやすいところに注意が必要です。
5. スプリングボード型
【メリット】
スマートフォンのホーム画面のようなインターフェイスのため、視認性が高く、視覚的にもわかりやすい点が魅力です。
子どもや高齢者にとっても優しいインターフェイスで、メニューそのものの存在感も存分に出せる点が強みといえます。
【デメリット】
ボタンの視認性もさることながら、そのメニュー内容についても訴求しやすさ・見やすさという面では他の形式よりプラスといえるものの、画面全体の大部分がボタンになってしまう点がデメリットとなります。
画面の大部分をボタンが占めるため、サイトの全体像を理解するという面では厳しく、コンテンツや情報が多い場合は向かない形式といえそうです。
6. モーダルウインドウ型
【メリット】
PC版では一般的な表示形式です。画面全体にポップアップでメニューやボタンなどのナビゲーションが表示されるため、視覚的にわかりやすい形式といえます。
【デメリット】
この形式のデメリットは、グレーアウトされるとはいえ、画面全体が隠れてしまい、メニュー選択のたびに大きなウインドウを操作することがスムーズではない点です。
また、一般的なモーダルウィンドウは、コンテンツ内の右上などに設けられる「☓」印や背景画像にタップすることでクリアにできますが、スマートフォンの小さな画面では誤操作を起こしやすく、特に入力フォームページでは要注意したいところです。
7. アイコンメニュー型
http://www.jtb.co.jp/smartphone/
【メリット】
グローバルメニューのアイコンがボタンで表示されているため、視認性がよく、ボタン感覚でユーザーが選択できる点がメリットといえます。
実際にスマートフォンを使用するユーザも理解しやすいインターフェイスで、迷う事なく目的ページに遷移することが可能です。
【デメリット】
メニューが常に現れた状態となっており、画面の面積を比較的多く確保する必要があるため、見た目に洗練されたデザインとはなりにくいインターフェイスです。
定番のインターフェイスではありますが、見た目としてはやや古い印象を与えてしまいがちです。
まとめ
ハンバーガー型やアコーディオン型については、業種の隔たりなく、様々なスマートフォン用サイトで活用されています。
簡単に導入できるうえ、直感的に「メニュー」と認識やすいのが大きな理由でしょう。
そして近年、よく目にするようになったのがドロワー型とモーダルウインドウ型です。
徐々に人気が高まり、BtoB、BtoC企業問わず、最新のトレンドに敏感な企業が先駆けて採用している状況です。
スマートフォン用の自社サイトや運営サイトの見直しを検討されている方は、上記サイトを参考にデザインを検討してみてはいかがでしょうか。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- スマホサイト
- スマホサイトとは、スマートフォンからの閲覧に対応したホームページのことです。スマートフォンは、画面サイズや操作方法がパソコンとは異なります。そのため、訪問ユーザーが快適に閲覧できるよう、パソコン用のホームページとは異なるデザインのスマホサイトを用意するホームページが増えています。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- スマホサイト
- スマホサイトとは、スマートフォンからの閲覧に対応したホームページのことです。スマートフォンは、画面サイズや操作方法がパソコンとは異なります。そのため、訪問ユーザーが快適に閲覧できるよう、パソコン用のホームページとは異なるデザインのスマホサイトを用意するホームページが増えています。
- スマホサイト
- スマホサイトとは、スマートフォンからの閲覧に対応したホームページのことです。スマートフォンは、画面サイズや操作方法がパソコンとは異なります。そのため、訪問ユーザーが快適に閲覧できるよう、パソコン用のホームページとは異なるデザインのスマホサイトを用意するホームページが増えています。
- スマホサイト
- スマホサイトとは、スマートフォンからの閲覧に対応したホームページのことです。スマートフォンは、画面サイズや操作方法がパソコンとは異なります。そのため、訪問ユーザーが快適に閲覧できるよう、パソコン用のホームページとは異なるデザインのスマホサイトを用意するホームページが増えています。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- プラグイン
- プラグインは、本来あるソフトウェアに機能を拡張させるために追加するプログラムのことです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- トンマナ
- トンマナとは、「トーン&マナー」の略で、広告におけるデザインの一貫性を持たせることを指します。また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「トンマナ」は企業ブランディングにおいても重要です。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- ポップアップ
- ホームページにおいてポップアップとは、現在見ているホームページの上に、重なるような状態で、新たな画面が開き、その最前面面に表示されることを言います。より目立つ、注目を集めることが出来る反面、見ている画面を遮るように表示されるので、不快に受け取られる傾向があります。
- ナビゲーション
- ナビゲーションとは、もともと「目的地までの経路」や「道順案内」を意味する英単語です。しかし、インターネットの分野では、ホームページにある主要コンテンツをまとめたリンクを指します。これがあることで、ユーザーは目的のページがどこにあるかを短時間で見つけることができます。また、検索エンジンのクローラー(検索ロボット)に対して、効率的にサイト内を巡回させるという効果もあります。 ナビゲーションには「グローバルナビゲーション」と「ローカルナビゲーション」の二つがあります。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- フォーム
- フォームとは、もともと「形」「書式」「伝票」などの意味を持つ英単語です。インターネットの分野では、パソコンの操作画面におけるユーザーからの入力を受け付ける部分を指します。企業のホームページでは、入力フォームが設置されていることが多いようです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- BtoB
- BtoBとは、Business to Businessの略で、企業間での取引のことをいいます。
- BtoC
- BtoCとは、Business to Consumerの略で、企業と消費者間の取引のことを言います。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング