グローバルナビゲーションのデザインで悩んだWEB担当者の方へ… スマートフォンサイトのグローバルナビゲーション種類を徹底リサーチ

前回記事ナビゲーションの基本と主な種類、活用のコツまとめ,ではPCの代表的なナビゲーションの種類や特徴、使い方のコツを紹介させていただきました。

前回の内容を踏まえた上で、今回はスマートフォン用のグローバルナビゲーションの代表的なナビゲーションの種類やメリット、デメリットを紹介をさせていただきます。

代表的なスマートフォン用のナビゲーションとその特徴

『ハンバーガー型』

※kaoから引用

※liptonから引用

メリット

ハンバーガー型は、スマートフォン用のサイトでの広がりやユーザーの知っている割合が多く、非常に親しまれているグローバルナビゲーションの１つです。さらに、レスポンシブデザインでWebサイトをクリエイトする際も、構築や設計テクニックが広範で馴染みのあるスタイルとも言えます。

デメリット

見かけ上、グローバルナビゲーションの表示がないため、”上部の三本線アイコン”を押さなければスマートフォン用のグローバルナビゲーションの見当がつかないところです。
現在でこそ馴染みがありますが、”上部の三本線アイコン”そのものがグローバルナビゲーションであることに見当がつきにくく、現在ではその点では配意をして、ハンバー型メニューのアイコンの下に「メニュー(Menu)」と表記されているWebサイトも多く存在します。

『ドロワー型(スライド型)』

※Ameba占い館SATORIから引用

メリット

ドロワー型のグローバルナビゲーションの魅力は、グローバルナビゲーションがサイドから引き出しがコントロールできることが特性です。
動的なアクションをもたらすJQueryのコードやプラグインも多く普及しているので、実装しやすいという点もデザイナーやマークアップエンジニアに親しまれている理由といえます。

デメリット

ドロワー型は拡張可能であることがプラス要素ではありますが、反対にデメリットがあります。
次から次へと項目・ページを追加してしまい、不必要なページの増加や階層が深くなりすぎてしまい、ユーザーに不快感を与えてしまう原因となってしまう恐れがあります。
あまりにメニュー項目を細かくしすぎないようにすることで、こまめにサイト内を整理することで避けられる問題ではあります。

『アコーディオン型』

※Microsoftから引用

※ADKから引用

メリット

グローバルナビゲーション部分が折りたたみ式(開閉式)になっており、指先で軽く画面にタッチするとアコーディオンのように、グローバルナビゲーションがスライドして開けたり閉めたりして並ぶような動作が特徴です。
アコーディオン型のグローバルナビゲーションもドロワー同様に実装しやすいために、採用しやすいグローバルナビゲーションの形式です。

デメリット

アコーディオン型のデメリットは、ハンバーガー型のグローバルナビゲーションと類似性があり、指先で軽く画面にタッチしなければグローバルナビゲーションが表示されない点です。
方向感覚を失わせたり、大量のスクロールを生じさせてしまったりと、ユーザーに不快感を与える原因なり兼ねないので、サイト構築の際の頻度と使用目的を意識することが求められます。

『ドロップダウン型』

※三井リハウスから引用

メリット

グローバルナビゲーションの階層が相対的に何層のもなるケースに採用すると、見た目もサッパリし、ユーザー側のコントロールも円滑になり、利便性の高いグローバルナビゲーションの形式です。

デメリット

ドロップダウン型のグローバルナビゲーションの気がかりな点は、階層が深いりがちだということです。階層が深くなればなる程、ユーザー側のコントロールに影響し、ユーザーの離脱を引き起こしてしまうケースがあります。

『ヘッダー・フッターメニュー型』

※西友 – ネットスーパー | SEIYUドットコムから引用

※NISSINから引用

メリット

アイコンと併用して用いられるケースが多く、視覚的にわかりやすいのがヘッダー・フッターメニュー型です。
ヘッダー・フッターメニュー型のケースでは、グローバルナビゲーションがヘッダーないしフッターで固定されている場合が多いので、ユーザー側のコントロールがしやすく、ページをスクロールせずにグローバルナビゲーションが選択できるので利便性が良いです。

デメリット

グローバルナビゲーションが固定化されている点は強みですが、各ページや位置でのデザインに一貫性を持たせなければならないことがあります。
それに文字のサイズが相対的に小さくなってしまいがちで、アイコンと組み合わして使用していてもユーザーに読みづらさ、見づらさといった不快感を与えてしまうことに注意が必要です。

『スクリプトボード型』

※[COCO’S] ココスから引用

※森永製菓株式会社から引用

メリット

スマートフォンのホーム画面のようなインターフェイスのため、ユーザーに非常に親しまれていて、認知しやすい点が魅力的です。
子供や高齢者ユーザーにとってもわかりやすいインターフェイスで、グローバルナビゲーションそのものが強い印象が出せる点が強みともいえます。

デメリット

アイコンの認知度の高さもさることながら、グローバルナビゲーションの内容についても訴求のしやすさ、見やすさという面では他のグローバルナビゲーション形式よりメリットが多いとはいえるものの、Webサイト全体の大部分がグローバルナビゲーションになってしまう点がデメリットとなります。
Webサイト全体の大部分がグローバルナビゲーションになってしまうので、サイト全体像をユーザーが理解するという面では厳しく、コンテンンツや情報が多いケースは向かないグローバルナビゲーションの形式だといえそうです。

『モールダウン型』

※Haagen-Dazsから引用

※Starbucksから引用

メリット

PC版では世間一般的なグローバルナビゲーションの表示形式です。サイト全体に現在見ているホームページの上に、重なるような状態で、新たな画面が開き、その最前面面に表示されるため、視覚的にわかりやすいグローバルナビゲーションの形式になります。

デメリット

モールダウン型のグローバルナビゲーションの形式のデメリットは、入力や選択ができない項目がユーザーの操作対象から外れるとはいえ、画面全体がグローバルナビゲーションで隠れてしまい、メニュー選択のたびにウインドウを操作することが円滑ではない点です。

『アイコンメニュー型』

※JTBから引用

メリット

グローバルナビゲーションのアイコンボタンが表示されているための、視認性がよく、ボタン感覚でユーザーが選びやすい点がメリットといえます。
実際にスマートフォンを利用しているユーザーも分かりやすいインターフェイスで、迷う事なく目的ページに移行することが可能です。

デメリット

グローバルメニューが常に表示された状態となっているため、画面の面積を相対的多くとらなければならないため、見た目に魅力的なデザインとはなりにくいインターフェイスです。
ポピュラーなインターフェイスではありますが、見た目としてはやや古臭いイメージをユーザーに与えてしまいがちです。

まとめ

スマートフォン用グローバルナビゲーションの代表的なナビゲーションについてまとめてみました。
世間一般的には『ドロップダウン型』が多くスマートフォン用サイトに採用されているケースが多いです。
それぞれのナビゲーションの特徴を活かし、デメリット、メリットを踏まえた上でユーザが使いやすいナビゲーションを選択して、成果の上がるWebサイトを製作していただければと思います。