【WEBデザイン】スマホ時のナビゲーションメニューのいろいろ

2021年8月2日2024年3月6日

スマホ時のナビゲーションメニューは三本線で表現するシンプルな
ハンバーガーメニューを採用しているサイトがほとんどだと思いますが、
そもそもナビゲーションの見せ方にはどんなものがあるか、
最近他にどのような見せ方があるか気になったので、調べてみました！

ナビゲーションメニューの種類

ハンバーガーメニュー

今となっては一番メジャーなナビゲーションメニューではないでしょうか。
このハンバーガーメニューは、1981年にゼロックスが発売した
「Xerox Star（ゼロックス・スター）」という商用のコンピュータで初めて搭載されたそうです。
その後はあまり普及せず、スマホが普及した2009年以降に、
再びよく利用されるようになったようです。

ハンバーガーメニューのメリット・デメリット

メリット
・画面の面積を広く使える。
・メニュー数に縛られることなく自由に見せられる。

デメリット
・気づかれにくい
・タップ数が増える

最近は三本線=ナビゲーションという認知度が高くなってきましたが、
それがメニューであるかをわかりやすくするために三本線+「メニュー」といったテキストを入れた見せ方をしているサイトも多いですね。
他にもユーザーがよく使うコンテンツは独立してハンバーガーメニューに並べるサイトも多いです。

参考サイト：
BEARHUG
丸亀製麺
 がんこクリニック

ハンバーガーメニューの位置は左上、右上どちらが正しいのか？
もともとは西欧ではユーザーがページを左から右に読むことから、左上に配置するのが推奨だったようですが、
最近ではスマホの画面サイズがどんどん大きくなり、左上だとよりタップしずらくなるため、
右上に配置しているサイトが多くなってきているようです。
(どちらが正解ということではない)

ヘッダーナビゲーション

ヘッダー部分にテキストでナビゲーションを並べる、
PCのナビゲーションと同じようなレイアウトパターンです。1行でおさまる程度のメニュー数なら
逆にタップ数が少なくなり、シンプルでわかりやすいです。

ヘッダーナビゲーションのメリット・デメリット

メリット
・一目でどんなメニュー項目があるかすぐわかる。
・タップ数が減る。

デメリット
・メニューが多い時など、情報量が多くなり画面を圧迫する

メニューが多い場合には、最近では横スクロールで表示させるパターンもあります。
この場合、横にメニューが続くことがわかるような工夫が必要です。

参考サイト:
任天堂
 静岡朝日テレビ採用サイト
 テレビ朝日

ボトムナビゲーション

画面の下部にメニューを固定する方法です。多くの場合は、ヘッダーにはハンバーガーメニューなどを置いて、さらにユーザーがよく使うメニューについて、ボトムナビゲーションとして配置している場合が多い気がします。この場合は、テキストだけだとわかりにくいため、アイコンとテキストセットで見せるのがほとんどです。InstagramやLINE・Facebookなどのアプリでもボトムナビゲーションが使用されていますね。

ボトムナビゲーションのメリット・デメリット

メリット
・タップしやすい位置にある。
・タップ数が減る。

デメリット
・アイコンとセットで配置しないと逆にわかりにくい、またヘッダーにもナビを置く場合画面の両端で多少幅をとる
・あまりたくさん並べるとわかりにくい

メニュー数が多くても横スクロールで並べるなどの工夫をしているサイトや、
ハンバーガメニューと併用することでうまくおさめている例もあります。