スライドメニュー・ドロワーメニュー・ハンバーガーメニューの違いとは

その呼び方はいくつもあってたびたび混乱することがあるため、今回はスライドメニュー・ドロワーメニュー・ハンバーガーメニューの違いについて調べました。

スライドメニュー

スライドメニューとは、「画面外からスライドさせるように表示させるメニュー」のこと。

こちら文字通りの意味なのですが、そもそもの話をすると今回調べた3つのメニューは「画面外から出現させるメニュー」であるという点において共通であり、基本的に同じメニューのことを指していることがわかりました。

ただ、ちょっとしたメニューの表示の仕方や方法の違いによって同じようなメニューであっても呼び名が変わることがあるということがポイントだと思います。

スライドメニューの場合、本来の意味としては「画面全体がスライドする」というニュアンスを持ち、オーバーレイして表示されるメニュー（後述のドロワーメニュー）は厳密には画面全体が横にスライドしないのでスライドメニューではない！と言いたいところではありますが、画面全体がスライドしようがしまいが画面外から出てくるメニューを「スライドメニュー」と呼んでいるのが実状というわけです。

（厳密な意味での）スライドメニューを採用しているサイトとしては「LOHACO」などがあげられます。

参考　LOHACO（https://lohaco.jp/）

ドロワーメニュー

ドロワーメニューとは、「画面外からドロワー（引き出し）のようにさせるに表示させるメニュー」のこと。

引き出しのようにってどのようなことかと最初は思いましたが、オーバーレイさせて表示させるメニューのことと聞くとなるほど、引き出しを開けてもその下に空間はあるからドロワーなのかと割とあっさり腑に落ちました。

今ではスライドメニューと同じようなニュアンスで使われることが多く、むしろスライドメニューといえばドロワーメニューを指していることのほうが多い印象すらありますが、あえてスライドメニューと差別化するのであれば「メニューの表示の際に画面全体もスライドする」メニューがスライドメニューであり、「オーバーレイする（画面全体はスライドしない）メニュー」がドロワーメニューと言えるでしょう。

ドロワーメニューを採用しているサイトは「amazon」など一般的なサイトで数多く取り入れられています。

参考　Amazon（https://www.amazon.co.jp/）

ハンバーガーメニュー

ハンバーガーメニューとは、「三本線のアイコンを押して、画面外から表示させるメニュー」のこと。

スマートフォンでよく見かけますが、最近はPCでも一般的に使われるようになってきたハンバーガーのように見える三本線のアイコンを押すことで、画面外から出てくるメニューです。
スマートフォンであれば上から降りてきたり、PCでは横から出てくることが多いかなと思います。

スライドメニュー・ドロワーメニューと同様に、「画面外から出現させるメニュー」ではあるものの、ハンバーガーのように見える三本線のアイコンを押すという見た目の違いによって呼び名がつけられることもあるということなのです。

個人的な感覚としてはスマートフォンではスライドメニュー・ドロワーメニューという言葉は使わずにハンバーガーメニューという言葉は使われることが多いですが、PCでもハンバーガー（三本線）のアイコンが使われているからハンバーガーメニューと呼ぶこともあります。

要するにハンバーガー（三本線）のアイコンが使われているスライドメニュー・ドロワーメニューをハンバーガーメニューと呼んでいるということになりますね。

今回はスライドメニュー・ドロワーメニュー・ハンバーガーメニューの違いについて調べましたが、それ以外にも「画面外から出現させるメニュー」には別の呼び方があるかもしれません。

Web制作の世界には様々な用語があり、それを一つ一つの正確な定義に理解する必要はないかもしれませんが、知っておくことで「クライアントさんはスライドメニューって言ってるけどのドロワーメニューことだよね、だからデザイナーさんにここはドロワーメニューでとお願いしよう」みたいになればよいのかなと思い、これからもデザイン制作における様々な用語について調べていこうと思っています。

ここまで読んでいただきありがとうございました。