ハンバーガーメニューって？
web業界の方はご存知の、主にスマートフォンやタブレットに対応したWebサイトで使われる三本線「≡」のナビゲーションメニューですよね。
名前の由来はその見た目のとおり、三本線がハンバーガーに見えるからです。
最初聞いたときはなんだそれって思ってましたが（笑）
あと、検索していて気がついたのですが三点「︙」アイコンバージョンもありましたね。
そもそもハンバーガーメニューっていつから普及しだしたのだろう…と思い、調べてみました。
スマートフォンが普及しはじめた2010年前後からハンバーガーメニューを使い始めたサイトが増えたみたいですね。
確かにPCとは違って狭いスペースの中で情報をぎゅっとまとめるには、方法が限られてしまいますよね。
ユーザビリティの低下に繋がる？
ハンバーガーメニューの懸念点として、個人的に一番気になるのは「ユーザビリティの低下」です。
若者や、スマホに慣れている人にとっては比較的認知度は高いかと思いますが、
不慣れな方にとってはただ三本線や三点アイコンが配置されているだけでメニューとは気づけません。
ということから、ユーザビリティの低下は免れないのかなと感じました。
これって、webサイトとしてなかなかの問題点ですよね…
よく見かけるハンバーガーメニューのデメリット
- メニューボタンだと認識しづらい
- ハンバーガーメニューを押さないとメニューの中身が分からない
- アイコンが小さいので押しづらい
より分かりやすくするためには
やはり、ただの三本線や三点アイコンだと「ナビゲーションメニュー」だと認識するのは難しいと感じます。
しかし、メニューのボリュームが多い場合は、ハンバーガーメニュー以外の方法を使うとなると場所をとるのは確かです。
となると現状ではハンバーガーメニューを使用するしかないのかなと感じました。
ハンバーガーメニューをより分かりやすくする工夫としては、この方法が一番場所をとらず、簡単で分かりやすいのかなと感じました。
- 三本線の下に「メニュー」「MENU」など表記する
スマホ向けのハンバガーメニュー以外のメニューならこんな方法がありました。
- タブメニュー（横にスクロールでき、タブの切替によってコンテンツの中身も切り替わるメニュー）
- ヘッダー・フッターメニュー（PCで見た時同様にメニューが固定されて表示されている状態）
まとめ
今回はハンバーガーメニューについて調べてみました。
webデザインに携わっていく中で、ハンバーガーメニュー以外にもっといい方法はないのだろうか…と感じていたのですが、実際はハンバーガーメニューから離れるのは難しいとも感じました。
それでもユーザービリティをあげる工夫をしていく努力は必要だと思います。
コメント