ハンバーガーメニュー

2021年10月6日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「ハンバーガーメニュー」について書きます。

ところでみなさんが好きなハンバーガーはなんですか？
私は「グラコロ」が好きです。期間限定ですが！

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

ハンバーガーメニューとは、ウェブサイト（特にスマホやタブレット時）のナビゲーションメニューに使われるデザイン手法のひとつです。
横線が三本並んだ≡がνガンダムハンバーガーに見えることからそう呼ばれるようです。

タップすると隠されているメニューが展開します。
メニュー展開時に≡が✕に変化する例をよく見かけますね。
引き出しのようにスライドするものは特に「ドロワーメニュー」と呼ばれます。

どこに配置するべきか

このサイトをスマホで見れば（PCの場合はウィンドウの横幅を小さくすれば）左上にあるのがわかりますね。

とあるサイトで、ハンバーガーメニューを画面のどこに配置するべきかを調査されていました。

参考：株式会社 アーティス｜【2021年版】ハンバーガーメニューはどの位置が最適？関東の大学を調べてみた！

>>左上の配置はデメリットが大きい

>>左上の配置はデメリットが大きい

>>左上の配置はデメリットが大きい

(　ﾟдﾟ) ・・・

(つд⊂)ｺﾞｼｺﾞｼ

(；ﾟдﾟ) ・・・

( ﾟдﾟ )

右手でスマホを持って片手で操作する場合左上は親指から最も遠いからですね。

私は右利きですが、スマホは左手派なのであまり気にしたことがなかったです。

右上にしよっかな...

賛否両論

ハンバーガーメニューについては、今なお賛否両論あるようです。

スマホの普及で、三本線がメニューであるという認識はかなり浸透してきているとは思います。

三本線に「メニュー」とか「MENU」の文字を添えるといいみたいです。

最近は「ボトムナビゲーション」も増えているようです。

Bootstrap4では...

<nav class="navber navbar-light">

 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu1" aria-controls="navmenu1" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
 </button>

 <div class="collapse navber-collapse" id="navmenu1">
  <div class="navbar-nav"></div>
   <a class="nav-item nav-link">メニュー1</a>
   <a class="nav-item nav-link">メニュー2</a>
   <a class="nav-item nav-link">メニュー3</a>
 </div>
 
</nav>

navbar-lightをnavbar-darkに変えれば黒い背景になります。

navbar-toggler-iconが三本線を表していますが、これは画像（SVG）を埋め込んでいるようです。

メニューが展開しても三本線のままだと、ちょっと物足りない気がしますね。

まとめ

・ハンバーガーメニューは三本線のアレ

・本来は右上に配置するのが望ましい

・三本線だけでなく文字も添えるとよい

次回は、ハンバーガーメニューをいろいろ改造していきたいと思います！