スマホ表示したときのハンバーガーメニューが苦手、分かりにくい！

いまや多くのサイトで採用されているスマホ表示で使われているハンバーガーメニュー。

それ以外の方法を模索している方に、スマホサイズでも使えるドロップダウンメニューを提案します。

1. ハンバーガーメニュー、分かりにくくないですか？

現在のトレンドハンバーガーメニュー

ブログ記事が増えてくると、カテゴリーを増やす必要がでてきます。

カテゴリーが増えるという事は、メニューを増やす必要がありますよね。。

PCサイズで表示する際はどのサイトもほぼメニューバーを使っていますが、スマホメニューになると、サイズの問題があり、 ハンバーガーメニューでメニューの内容を"折りたたむ"という手法を使っているサイトが大多数です。

ハンバーガーメニューはユーザビリティ低い？

でも、このハンバーガーメニュー、正直分かりにくくないですか？

ゲームや、画像ツール等の専門性の高いアプリは、おおくの情報を格納する為に、ある特定の場所に情報を入れ込むのは良いと思いますが、 ブログやWebsiteなど、様々な人が閲覧するようなページに、情報収納用の専用ボタンを用意するのは、ちょっと違うような感じがします。

という事で、本サイト"低ストレスライフ"では、文字数や、サイズを調整して、ドロップダウンできるメニューバーをスマホサイズで表示するようにしました。

現在のトレンドと外れていますが、同じ事を考えている、どなたかの助けになると幸いです。

2.タブメニューを採用する際の注意点

タブメニューの数に制限があります。

タブの数は６つが限界だと感じました。ただしタブメニューの数が６の場合は、文字数が３が限界です。

それ以上になると、スマホサイズに縮小すると文字がぐしゃっとつぶれてしまったり、つぶさない為に文字の大きさを小さくすると見えにくくなったりと問題が多発しました。

タブメニュー内の文字を増やしたければ、メニューを減らす必要あり。

文字数が増えると端が見切れます。

メニューバー内のメニューの数が５だと、5文字が限界でした。

メニューバー内のメニューの数を４にすると7文字でも崩れませんでしたので、メニューに何を入れたいかを考えながら構築する必要があります。

3.　コーディング例

本サイトで使用しているコードです。

様々なサイトで公開されているものをつぎはぎして、作成しました。

HTML:メニューが５つですので、入力できるのは5文字です。（折りたたまれているものは一部オーバーしているものがあります）

CSS（メニューの数が4つであれば、menu > liの幅を25％にしたり調整してください）

4.　まとめ：スマホサイズのタブメニューどうですか？

スマホ画面のハンバーガーメニューが見にくいと感じたら、一度PC用のメニューバーを縮小出来ないか模索してみてはどうでしょうか？

もっと他にも良い情報格納方法があるはずですので、自分の感覚にあったデザインを導入しましょう！