こんにちは、Akros Web & Business Design Academy 札幌校の三本です。

Webサイト界隈では、モバイルファーストやら、モバイルフレンドリーやら、スマホを意識したサイト開発が当たり前になって来ています。
スマホサイトをデザインする際に、最初に悩むところのひとつにグローバルナビゲーションがあると思います。
国内向けのサイトでよく利用されているハンバーガーメニューですが、個人的にはあまり好きではありません。

ハンバーガーショップのメニューは、いつも目移りしてなかなか決められませんが、それは別のお話です。

さて、ハンバーガーメニューをネット検索してみると、賛否が色々書かれていると思います。
今回は、賛否や好き嫌いは別にして、ハンバーガーメニューのメリット・デメリットを洗い出していきたいと思います。

ハンバーガーメニューとは？

そもそもハンバーガーメニューとは何でしょうか？

• チーズバーガー　380円
• テリヤキバーガー　480円
• フィッシュバーガー　480円
• チキンナゲット　320円
• フライドポテト　280円

スマホでWebサイトを閲覧していると、このようなメニューボタンを見たことは無いでしょうか？
3本線の部分がハンバーガーに似ていることから、ハンバーガーメニューと言われています。

なぜ日本人はハンバーガーメニューが好きなのか？

これはあくまでも推測ですが、日本人クリエイターがよくお世話になっている、AppleとAdobeの公式サイトに代表される大手企業がハンバーガーメニューを採用しているからだと個人的には思っています。
お手本にしたいサイトが採用していれば、おのずと制作するサイトも同じようにハンバーガーを採用することになるのではないでしょうか？
クリエイターがそう思っていなくても、クライアント様がこんな風にして欲しいと考えたら、採用する機会も多くなることでしょう。

メリット

スマホは画面が小さく縦長（横向きにすると横長ですが・・・）であるため、表示される領域には限られた情報しか一度に掲載出来ません。
そのため、PCサイトのようなグローバルナビをスマホで表示してしまうと、肝心のコンテンツが画面下に隠れてしまい、視認性が低下します。
そこで、メニューをボタンの中にしまう形にして格納し、ボタンをクリックすることでメニューを表示させる手法が取られるようになりました。
こうすることで、コンテンツを下に追いやることなくメニューを用意することができるのです。

デメリット

ボタンの中にメニューを仕舞い込んでしまうため、一見してどんなコンテンツが存在するのか分からなくなってしまいます。
更に、メニューを開くとコンテンツの上に重なるように表示されることが多いため、メニューを表示している間は、コンテンツの閲覧が出来ません。
また、大抵は画面の右上もしくは左上に配置されることが多いため、片手で操作する利便性も失われてしまいます。
（最近はスマホが大型化しているため、両手操作が基本のような気もしますが・・・）

ハンバーガーの代用品

代わりにシェイクやサラダは、いかがでしょうか？
皆さんは、スマホでは様々なアプリを使っていると思いますが、そのアプリをよく見てみて下さい。
あまりハンバーガーメニューは使われていないと思います。
代わりに、タブバーやタブメニューと呼ばれるものが使われていることが多いのではないでしょうか？
一般的にタブバーは画面の下に固定で表示されていることが多いのですが、これは、片手（親指の届く範囲）での操作を想定した配置になっています。
画面下に固定で配置することで、コンテンツの邪魔をすることなく、常にどのようなメニューが用意されているか分かるようになっています。
また、限られた領域にメニューを配置するため、ボタンはアイコンで表現されることが一般的となっているようです。

まとめ

少しずつ変わってきていると思いますが、まだまだハンバーガーメニューの需要はあるようです。
好き嫌いにかかわらず、ハンバーガーメニューが実装できるようにスキルは磨いておきましょう！！

ハンバーガーメニューの実装方法を学びたい方は、Akros　無料体験レッスンへ

ハンバーガーメニューは嫌いになっても、ハンバーガーは嫌いにならないで下さい・・・