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

この記事を読むための時間：3分

サイトを開設する際にWeb用語として出てくるハンバーガーメニューというワードを知っていますか？Web用語とハンバーガーでは、結びつきがなさそうに感じますが、一体どのような役割のある用語なのでしょうか。

使い方や使用する上でのメリットについて紹介します。

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

ハンバーガーメニューとは、Webサイトの画面上、左右のどちらかにある3本ラインのメニューのことです。

この3本ラインの見た目が、パテを挟んだハンバーガーに見えるということから由来しており、サイト内のコンテンツやリンク先などが貼り付けてある一覧となっています。

ハンバーガーメニューをクリックするとコンテンツがズラリと並ぶようになっており、ハンバーガーメニューを見るだけで、サイト内の内容が大体わかるというシステムになっています。

ハンバーガーメニューとドロワーメニューとの違いって？

ハンバーガーメニューと検索すると「ドロワーメニュー」というワードも併せて出てくることがあります。

ドロワーメニューは、ハンバーガーメニューの以前の呼び方であることから、ハンバーガーメニューとドロワーメニューには、大きな違いはありません。

ドロワーメニューというワードが登場する際には、ハンバーガーメニューのことを指していると認識しておくと良いでしょう。

ハンバーガーメニューのメリット・デメリットって？

3本ラインのハンバーガーメニューをサイト内に使用する際には、どのようなメリットがあるのでしょうか。デメリットと併せて解説します。

ハンバーガーメニューのメリット

Webサイトは、パソコンで見るだけでなく、スマートフォンやタブレットなどさまざまなデバイスからアクセスします。

パソコンなどの画面が大きなものであれば、コンテンツ内のメニューを表示することもできますが、スマートフォンなどの小さな画面では、サイトのデザイン性や見栄えを考えると悩ましいところです。

そんな時に使えるのがハンバーガーメニュー。トップ画面にコンテンツ内を表示するのではなく、ハンバーガーメニューを活用することで、すっきりと見やすい画面に仕上がります。トップ画面をスッキリとスタイリッシュなデザインにしたい方にもおすすめです。

ハンバーガーメニューは、ユーザビリティの要素も入っているため、クリック一つでコンテンツ内の内容を把握することができます。

ハンバーガーメニューのデメリット

ハンバーガーメニューは、クリックするだけで、コンテンツの内容が一目でわかるため、一見とても便利なメニューではありますが、Webサイトをあまり見ないという方にとっては、ハンバーガーメニューをクリックする習慣がないため、内容を把握しきれずに離脱してしまう可能性があります。

ハンバーガーメニューは、あくまでも日頃からWebサイトを見ている方向けのユーザビリティな要素であり、初心者にとってはあまりユーザビリティに感じないこともあります。

ターゲットとするユーザー層にとっては、取り入れない方が良い場合もあることを覚えておくとよいでしょう。

ハンバーガーメニューの種類

ハンバーガーメニューには、主に2つの種類があります。それぞれの特徴について解説します。

3本線タイプのアイコン

一般的にハンバーガーメニューのアイコンとして使われることが多いのが、横に伸びる3本線タイプのアイコンです。3本線タイプのアイコンは、頭で考えることなく、コンテンツ内のことが書かれていることが一目でわかるため、取り入れる企業が多いアイコンです。

3点タイプのアイコン

ハンバーガーメニューには、3本線タイプの他に3点タイプのアイコンもあります。3本線タイプに比べて、スッキリとした見た目になるため、スタイリッシュにしたい場合や逆に目立たせたくない場合におすすめです。

一方で、3本線タイプのハンバーガーメニューに比べて知名度が低いため、ハンバーガーメニューと認識されない場合があることも抑えておく必要があります。

まとめ

ハンバーガーメニューは、サイト表示をスッキリとさせてくれる便利なアイコンですが、サイトの内容やターゲットユーザー層によっては、取り入れない方が良いこともあります。

メリットとデメリットそれぞれをチェックして、状況に併せた取り入れ方をしてみると良いでしょう。