Date: 2019/01/25

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

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

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

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

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

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

menu

三本線で構成された「ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。です。またの名をハンバーガーアイコンアイコンとは、パソコンやスマホの操作画面でファイルの内容やソフトの機能などをイラストや図、記号などで表現したものである。 アイコンは、見た目で機能がわかりやすいように、機能や対象が何を表しているのか直感的に連想しやすいようにデザインされている。 また、最近ではSNSなどのプロフィール画面で使用する「プロフィール画像」のことを「アイコン」と呼ぶこともある。とも呼びますが、このシンプルな形状がハンバーガーだなんて!!!

hamburger2
最初に聞いたときは、人によってはこのスマートなカタチがハンバーガーに見えないし、わかりにくい名前を付けたもんだなと思っていましたが、数年たった今では随分浸透してきましたね。
ちなみに「ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。」とは、スマホやタブレットでwebサイトを閲覧するときやアプリ操作をするときに、指で押してナビゲーションメニューを表示するボタンのことです。
最近ではレスポンシブサイトレスポンシブサイトとは、PC、タブレット、スマートフォンなど複数の画面を基準にし、ページのレイアウトやデザインが崩れることなく、サイズの異なる画面に最適な表示ができるホームページのこと。特徴としては、専用サイトをそれぞれ用意する必要がなく、閲覧者にとって見やすく、閲覧者側は修正工数が減ることで更新、メンテナンスが容易になる。対して、デザイン性の高いサイトデザインの場合、複数画面に対応ができないケースもあり、内容によっては、スマホ閲覧時の表示速度が遅くなることが懸念される。 近年では、レスポンシブサイトでの構築が推奨され、検索エンジンからの評価が高くなる傾向が強い。の普及によりスマホやタブレットだけでなくPCサイトでも見る機会が非常に増えてきました。
hamburger3
名前が名前なので、大手ハンバーガー店のwebサイトで利用されているかを調べてみると、モスバーガー、マクドナルド、バーガーキング、ロッテリア、ウェンディーズさんのwebサイトでは立派なハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。を発見!ロッテリアさんにいたっては、なんとハンバーガーのイラストがメニューボタンとして鎮座していました!
「ここで使わないといつ使うんだ感」を感じずにはいられません。

多くのwebサイトで見かけるハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。は三本線のデザインが主流ですが、なかには四本、二本線で構成されたボタンもあります。線の本数に限らず、ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。の見せ方や表現手法は様々な広がりをみせてきています。

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

今回blogを書くにあたり、ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。を使用しているwebサイトを調べると、フルスクリーンナビゲーションの組み合わせが一番多く、他にも面白い見せ方をしているwebサイトがあったのでいくつかご紹介します。

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

画面全体を贅沢に使ったフルスクリーンナビゲーションは大胆なレイアウトができるうえに、PCとスマホにも流用できるのでレスポンシブサイトレスポンシブサイトとは、PC、タブレット、スマートフォンなど複数の画面を基準にし、ページのレイアウトやデザインが崩れることなく、サイズの異なる画面に最適な表示ができるホームページのこと。特徴としては、専用サイトをそれぞれ用意する必要がなく、閲覧者にとって見やすく、閲覧者側は修正工数が減ることで更新、メンテナンスが容易になる。対して、デザイン性の高いサイトデザインの場合、複数画面に対応ができないケースもあり、内容によっては、スマホ閲覧時の表示速度が遅くなることが懸念される。 近年では、レスポンシブサイトでの構築が推奨され、検索エンジンからの評価が高くなる傾向が強い。コーディングコーディングとは、HTMLやCSS等のプログラム言語を使って、ソースコードを記述すること。また、データを符号化することを意味する場合もある。 また、プログラムを作成せず、HTML等のプログラム言語を記述する人をコーダー呼ぶ場合もある。がよりスピーディになります。
hamburger4
もはやサイトマップサイトマップとは、Webサイトの構成を図にまとめたものである。ページ構成を視覚化することでページの重要度、制作ボリュームなどがわかり制作途中で変更があった場合でも情報を整理しやすくなる。その他にも、検索エンジン(クローラー)対策として、サイト上のページや画像などのファイル情報や、各ページの関係性を検索エンジンに伝えるファイルも同様にサイトマップと呼ばれる。と言っても過言ではない。見たいページが探しやすいだけでなく一番ユーザーを誘導したいメルマガの登録スペースもしっかり設置されています。
https://ontomo-mag.com/

hamburger5
あまりの存在感に一瞬ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。なのかどうかをためらいました。メニュー名も大きく、大胆なレイアウトが今っぽいwebサイトです。
一見何のwebサイトか分からなかったのですが、イケメン役者育成ゲームの特設サイトでした。個人的にはゲームにハマっている場合ではないので、アプリのインストールはやめておきます。
https://www.a3-liber.jp/act2/

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

ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。の挙動にアニメーションを取り入れた動きのあるメニューも増えてきました。実装するためにはSVGSVG(Scalable Vector Graphics)とは、よく見かけられるJPEGやPNGといった画像とは違い、点の座標とそれを結ぶ線などで構成された数値データをもとに表示される。写真のように細密な表現は難しいが、ファイルサイズが小さい上、加工がしやすい。また、拡大・縮小しても輪郭などが荒くならないといった特徴がある。やCANVAS要素が必要です。

hamburger7

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

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

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

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

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

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

hamburger9
メニューボタンをデザインの一部としてしっかり立たせて、しかもPCサイトではグローバルナビも並行して表示している珍しいタイプです。女子ウケしそうなパステル×ネオンカラーのカラーリングがとても鮮やかで印象的です。
ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。を使用する=スマートなデザインは、もはや少し前の考えなのかもしれませんね。
https://www.shiseido.co.jp/icecosme/

hamburger10
角の丸い3本線の間隔をゆったりとったメニューボタンがwebサイトのゆるさにマッチしています。PCサイトではコンテンツ幅を狭くすることでできた左右の余白のおかげで、ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。なのに開きっぱなしでのスクロールクロールとは、ソフトウェアが自動的にインターネット上のサイトを1つ1つ巡回し、Webページの内容や情報を収集・保存していく処理をクロールという。また、このような作業を行うソフトウェアを「クローラー」、「ボット」、「スパイダー」などと呼ばれる。自身のWebサイトやブログがクローラによってクロールされることは、検索上位に表示させることに非常に重要なことである。が可能な珍しい仕様です。もはや、ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。風なのかもしれません。
ページを下にスクロールクロールとは、ソフトウェアが自動的にインターネット上のサイトを1つ1つ巡回し、Webページの内容や情報を収集・保存していく処理をクロールという。また、このような作業を行うソフトウェアを「クローラー」、「ボット」、「スパイダー」などと呼ばれる。自身のWebサイトやブログがクローラによってクロールされることは、検索上位に表示させることに非常に重要なことである。していくと画面左からこれでもかと言わんばかりにいろんなものが飛んできます。記事の内容はさておき、今度は何が横切るんだろうという期待感が高まりました。
https://steveinc.jp/

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

ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。について今回調べている中で面白い情報を得たので併せてご紹介します。
このボタンもハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。だろうと思いきや、少しカタチが変わると一部では別の名前で呼ばれることもあるそうです。ただし、一般的にはハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。と認識されていることが多いようなので「小ネタ」くらいに思っていただけると幸いです。

まずはこちら。

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

続いてこちら。

hamburger16

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

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

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

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






hamburger17

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

「Meatboll Menu(ミートボールメニュー)」と呼ぶだなんて私にはまったく検討がつきませんでした。ただ、じっと見つめているとコロンと丸いミートボールに餡が絡まった様を想像できるから不思議です。
ちなみに、天六にあるAND SPACEAND SPACEとは大阪と東京を中心に活動する広告デザイン会社 株式会社AND SPACE(アンドスペース)のこと。 グラフィック・ウェブ・システムを中心として、空間や映像のデザインなども手掛けている。 ベネフィットは元気さ。のご近所にも昨年ミートボールの専門店がOPENしました!じわじわと押し寄せるミートボール熱が気になります。

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

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

例えばこちらのwebサイト

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

hamburger11
hamburger19
ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。に比べるとボタンであることの認知がまだ低い弁当メニューですが、テキストで「Navigation」と表示されているのでユーザーが迷いにくいデザインです。背景色の切り替わりのアニメーションも独特です。
https://www.proj-e.com/

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

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

ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。をwebサイトデザインに取り入れる利点は、画面サイズの小さなスマホでも表示したいコンテンツを邪魔せずにメニューをすっきりと格納できることです。そして、そのボタンがメニューボタンであることをシンプルに伝えることができるので、一般的なwebリテラシーリテラシーとは、主に特定の分野における知識や理解度をあらわす言葉である。元々は英語のliteracyからきており、「読んだり書いたりする能力」という意味が応用され使われている。使い方としてはリテラシーが高いor低いと表現され、組み合わせた言葉として「情報リテラシー」「メディアリテラシー」「ITリテラシー」「Webリテラシー」などがある。があればメニューをはじめとした重要な情報にダイレクトアクセスができます。また、ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。がメニューボタンだという認知度の向上により、極端に小さくしたり、デザインの一部として大きく扱うことも可能になってきました。但し、自由に扱うことでのデメリットもあります。
例えば、はじめてスマホを持つようなwebリテラシーリテラシーとは、主に特定の分野における知識や理解度をあらわす言葉である。元々は英語のliteracyからきており、「読んだり書いたりする能力」という意味が応用され使われている。使い方としてはリテラシーが高いor低いと表現され、組み合わせた言葉として「情報リテラシー」「メディアリテラシー」「ITリテラシー」「Webリテラシー」などがある。の低いユーザーには、メニューボタンだと気づかれずにwebサイトから離脱される可能性があるということです。

さらに、ページ数の少ないwebサイトの場合のメニューは格納せず最初からヘッダーメニューなどで表示したほうがページ推移しやすいので、ハンバーガーメニューハンバーガーメニューとは、主にスマートフォンやタブレットに対応したWebサイトで見かける三本線「≡」のアイコンを使ったナビゲーションメニューのことである。クリック・タップすることでメニューが表示されたり、折りたたまれたりするため、「折り畳みメニュー」と呼ぶこともある。スマートフォンなどの小さい画面で多くのメニューを表示すると煩雑に見えてしまうが、ハンバーガーメニューを使うことでメニューを省スペース化できることが最大のメリットである。これによって、別のコンテンツ表示領域を広く確保することが可能だ。は内容にあわせてご利用ください。

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

小松

この記事を書いた人

高知出身のAND SPACEAND SPACEとは大阪と東京を中心に活動する広告デザイン会社 株式会社AND SPACE(アンドスペース)のこと。 グラフィック・ウェブ・システムを中心として、空間や映像のデザインなども手掛けている。 ベネフィットは元気さ。のオカン的存在。生来、絵を描くことが大好きで、壁に描いては親から目玉を喰らっていたほど。専門学校卒業後は印刷会社・広告代理店で10年以上デザイナーを務める。高知県美術展覧会グラフィック部門で最高権威の「特選」を受賞するなど、商業デザインとは違ったベクトルの作品づくりも活動中。紙からWebまで、クラシック・流行りのテイスト、デザインなら何でもござれで幅広く活躍中。