シンプルだけどおもしろい！参考にしたいハンバーガーメニューデザイン

突然ですが、みなさん肉料理と聞いたら何を思い浮かべますか？

まずは王道の焼き肉、ステーキですよね！
この2大巨塔を食らうと「肉食べたい欲求」がしっかり満たされます。
ジューシーな唐揚げ、サクサクのとんかつ、炭火でじっくり焼いた焼き鳥、甘辛のたれを身にまとったすき焼き（生卵必須）、口にふくんだ瞬間ふわっと旨味が広がるしゃぶしゃぶ…

美味しい肉料理は果てしない。
料理名を読み返しただけでお腹が空いてきます。

今回のblogは炭水化物ダイエット遂行中の小松がお届けします。

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

三本線で構成された「ハンバーガーメニュー」です。またの名をハンバーガーアイコンとも呼びますが、このシンプルな形状がハンバーガーだなんて！！！


最初に聞いたときは、人によってはこのスマートなカタチがハンバーガーに見えないし、わかりにくい名前を付けたもんだなと思っていましたが、数年たった今では随分浸透してきましたね。
ちなみに「ハンバーガーメニュー」とは、スマホやタブレットでwebサイトを閲覧するときやアプリ操作をするときに、指で押してナビゲーションメニューを表示するボタンのことです。
最近ではレスポンシブサイトの普及によりスマホやタブレットだけでなくPCサイトでも見る機会が非常に増えてきました。

名前が名前なので、大手ハンバーガー店のwebサイトで利用されているかを調べてみると、モスバーガー、マクドナルド、バーガーキング、ロッテリア、ウェンディーズさんのwebサイトでは立派なハンバーガーメニューを発見！ロッテリアさんにいたっては、なんとハンバーガーのイラストがメニューボタンとして鎮座していました！
「ここで使わないといつ使うんだ感」を感じずにはいられません。

多くのwebサイトで見かけるハンバーガーメニューは三本線のデザインが主流ですが、なかには四本、二本線で構成されたボタンもあります。線の本数に限らず、ハンバーガーメニューの見せ方や表現手法は様々な広がりをみせてきています。

進化を遂げるハンバーガーメニュー

今回blogを書くにあたり、ハンバーガーメニューを使用しているwebサイトを調べると、フルスクリーンナビゲーションの組み合わせが一番多く、他にも面白い見せ方をしているwebサイトがあったのでいくつかご紹介します。

フルスクリーンナビゲーションでメニュー内容を贅沢に表示

画面全体を贅沢に使ったフルスクリーンナビゲーションは大胆なレイアウトができるうえに、PCとスマホにも流用できるのでレスポンシブサイトのコーディングがよりスピーディになります。

もはやサイトマップと言っても過言ではない。見たいページが探しやすいだけでなく一番ユーザーを誘導したいメルマガの登録スペースもしっかり設置されています。
https://ontomo-mag.com/

あまりの存在感に一瞬ハンバーガーメニューなのかどうかをためらいました。メニュー名も大きく、大胆なレイアウトが今っぽいwebサイトです。
一見何のwebサイトか分からなかったのですが、イケメン役者育成ゲームの特設サイトでした。個人的にはゲームにハマっている場合ではないので、アプリのインストールはやめておきます。
https://www.a3-liber.jp/act2/

アニメーションでwebサイトの世界観を伝える

ハンバーガーメニューの挙動にアニメーションを取り入れた動きのあるメニューも増えてきました。実装するためにはSVGやCANVAS要素が必要です。

お芋を連想させる鮮やかな紫のオブジェクトがボタンを押すとフルスクリーンナビゲーションに切り替わります。広がるときの動きがなめらかで気持ち良いです。きっとこのwebサイトで紹介されているお芋のスイーツは美味しいに違いない！と勝手な妄想がはじまります。
https://pogg-sweetpotatopie.com/


全体的にシンプルなデザインのこちらのwebサイトは、メニューボタンに限らず色々なコンテンツがカーソルをあわせると微妙に動きます。二重丸の赤ポッチをつい目で追ってしまいます。（PCサイトのみ）
https://themads.agency/

クリックすると音の出る音声つきグローバルナビゲーション

なくても良いのでは？なんて声も聞こえてきそうですが、webサイトの世界観をユーザーに伝えるための素晴らしいギミックだなぁと個人的には思います。
https://www.fhokestudio.com/

ハンバーガーメニュー×グローバルナビメニュー合わせ技

お！こんな使い方もあったのか〜と感心したwebサイトを2つご紹介します。

メニューボタンをデザインの一部としてしっかり立たせて、しかもPCサイトではグローバルナビも並行して表示している珍しいタイプです。女子ウケしそうなパステル×ネオンカラーのカラーリングがとても鮮やかで印象的です。
ハンバーガーメニューを使用する＝スマートなデザインは、もはや少し前の考えなのかもしれませんね。
https://www.shiseido.co.jp/icecosme/

角の丸い3本線の間隔をゆったりとったメニューボタンがwebサイトのゆるさにマッチしています。PCサイトではコンテンツ幅を狭くすることでできた左右の余白のおかげで、ハンバーガーメニューなのに開きっぱなしでのスクロールが可能な珍しい仕様です。もはや、ハンバーガーメニュー風なのかもしれません。
ページを下にスクロールしていくと画面左からこれでもかと言わんばかりにいろんなものが飛んできます。記事の内容はさておき、今度は何が横切るんだろうという期待感が高まりました。
https://steveinc.jp/

わたしをハンバーガーと呼ばないで！

ハンバーガーメニューについて今回調べている中で面白い情報を得たので併せてご紹介します。
このボタンもハンバーガーメニューだろうと思いきや、少しカタチが変わると一部では別の名前で呼ばれることもあるそうです。ただし、一般的にはハンバーガーメニューと認識されていることが多いようなので「小ネタ」くらいに思っていただけると幸いです。

まずはこちら。


一見ハンバーガーですが下にいくについれて短くなってますね。実はこちら「Doner Menu（ドネルメニュー）」と呼ぶそうでモチーフは、トルコ料理でおなじみのケバブです。
くるくる回りながら焼かれるドネルケバブは下の方から削ぎ落とされるので確かにこういう形状のものをみることが多いですよね。

続いてこちら。

縦に小さな丸が並んだこちらは「Kebab Menu（ケバブメニュー）」です。ケバブといってもモチーフは串に刺して焼いたお肉です。私たちがケバブと認識しているものは「Doner Menu」と呼び、串に刺して焼いたお肉のことをケバブと呼ぶなんて正直驚きました。ちょっとややこしいですね。

さて突然ですがここでクイズです！
横に小さい丸が3個連なるこちらは何の肉料理名が付けられているでしょうか。


肉料理でこれが出てくるのはレアなので、少しヒントを。

1.ひき肉料理
2.特に子供は大好き
3.お弁当のおかずとしても重宝される

正解はまさかのミートボールです。

「Meatboll Menu（ミートボールメニュー）」と呼ぶだなんて私にはまったく検討がつきませんでした。ただ、じっと見つめているとコロンと丸いミートボールに餡が絡まった様を想像できるから不思議です。
ちなみに、天六にあるAND SPACEのご近所にも昨年ミートボールの専門店がOPENしました！じわじわと押し寄せるミートボール熱が気になります。

最後に紹介するのは「Bento Menu」です。


小さな四角が9つ並んだこちらは、箱の中におかずを詰め込んだお弁当がモチーフです。
こちらの「Bento Menu（弁当メニュー）」も最近よく見かけるようになりました。

例えばこちらのwebサイト

細やかなデザインで細部にこだわりを感じるwebサイトです。流動的に動くアニメーションを見ているだけで癒やされます。
9つの四角が集まった弁当メニューを押すと四角が5つに減りcloseを意味する「×」にも見えるところがニクイです。
https://moment-zero.com/

ハンバーガーメニューに比べるとボタンであることの認知がまだ低い弁当メニューですが、テキストで「Navigation」と表示されているのでユーザーが迷いにくいデザインです。背景色の切り替わりのアニメーションも独特です。
https://www.proj-e.com/

ハンバーガーしかり、肉の可能性はとどまるところを知りません！

ハンバーガーメニューの美味しいところ

ハンバーガーメニューをwebサイトデザインに取り入れる利点は、画面サイズの小さなスマホでも表示したいコンテンツを邪魔せずにメニューをすっきりと格納できることです。そして、そのボタンがメニューボタンであることをシンプルに伝えることができるので、一般的なwebリテラシーがあればメニューをはじめとした重要な情報にダイレクトアクセスができます。また、ハンバーガーメニューがメニューボタンだという認知度の向上により、極端に小さくしたり、デザインの一部として大きく扱うことも可能になってきました。但し、自由に扱うことでのデメリットもあります。
例えば、はじめてスマホを持つようなwebリテラシーの低いユーザーには、メニューボタンだと気づかれずにwebサイトから離脱される可能性があるということです。

さらに、ページ数の少ないwebサイトの場合のメニューは格納せず最初からヘッダーメニューなどで表示したほうがページ推移しやすいので、ハンバーガーメニューは内容にあわせてご利用ください。

こちらの記事もおすすめ！ 「スマホでの操作に強いボトムナビゲーションの魅力を探ろう！」