ハンバーガーメニューのお話


スマホサイトを作成している時に悩むポイントの一つである

ナビゲーションメニューの配置。

PCサイトではヘッダーに記載されていることが基本ですが、

スマホサイトの場合はスペースが狭いため、

どうにか工夫をしなければいけません。


一般的にはハンバーガーメニューというものを用いる事が多いのですが、

ハンバーガーメニューにも賛否両論有るみたいです。

今丁度スマホサイトでハンバーガーメニューをデザインしています。

また最近ではハンバーガーに変わるナビも出てきているみたいなのでまとめておきます。


実際どうなの?


ハンバーガーメニューのデメリットとしてあげられているのが、


・3本線がなにをあらわしているのかそもそもわからない

・タップしてみないと中身がわからないためページ遷移が非効率


メリットととしては、

・少ないスペースでメニュー表示エリアを確保できる


です。



UX的にはあまりよくないといわれていますが、

私はそんなに面倒に感じたことがないのであまりわかりませんでした。


そのサイトに訪れるユーザーはどんなユーザーなのか、

そのサイトに合っているかをみることがたいせるなんだろうなあ・・と。


最近では

「タブ型ナビゲーション」と言うものがきているらしい。

メニューの量が多い場合はつかえないですが、

機能が限られたサイトやアプリでつかわれてきているそう。

Instagramとかはこれにあたりますね。



あとは重要なメニューは表示して、

サブ的なメニューを「もっとみる」などでまとめてしまう方法。

facebookなどがそうですね。


メニュー一つ取ってもいろんな工夫が加えられて出来ているわけです。

サイトデザインは考えることがいっぱいです。