スマホでよく見る３本線って何？ハンバーガーメニューを最適化するコツ

このページに辿り着いたあなたは、もしかしたら、こう考えているのかもしれません。

「スマホでよく見る３本線のアイコンってなんていうの？」

もしくはこのように考えていませんか？

「ハンバーガーメニューって本当に意味があるの？」

「ハンバーガーメニューの作成のコツってあるの？」

「ハンバーガーメニューの位置とデザインって何が最適なの？」

いざ、ホームページを作成しようとしたときいろんな疑問が浮かぶと思います。

特にスマートフォン向けのホームページを作るとき、デザインで悩みますよね。

実はハンバーガーメニューにはメリットもありますが同時にデメリットもあります。

今回の記事では、そんなハンバーガーメニューのメリットやデメリットをはじめ、ハンバーガーメニューを作成するコツ、最適な位置やデザインについて解説していきます。

この記事を一本読むだけでハンバーガーメニューについて、まるっと理解できる記事にしていきますので、あなたのホームページ作成の参考にしていただけたらと思います。

それではいきま〜す！

スマホでよく見る謎の３本線・・・それはハンバーガーメニュー

ハンバーガーメニューとは、スマホの画面で右上に表示される３本線のアイコン「≡」のことです。

アイコンの形がハンバーガーに似ていることから「ハンバーガーメニュー」と呼ばれています。

「メニュー」という名前の通り「ナビゲーションメニュー」の役割をしており、タップをすることで展開され、メニューが画面に表示されます。

ハンバーガーメニューの役割

スマホサイトは、パソコンで閲覧する環境と違い、画面に表示される領域が極端に狭いため、閲覧環境を邪魔しないように「ハンバーガーメニュー」として別途メニューを設置することが一般的です。

つまり、スマホでの閲覧環境を邪魔にしないようにメニューが必要な人にだけ表示させるようにするのです。

つまり、ハンバーガーメニューとしてナビゲーションメニューを表示させることでホームページにアクセスするユーザーの画面をスッキリさせ、閲覧環境を快適にすることを目的として設置されます。

ハンバーガーメニューを設置する４つのメリット

ハンバーガーメニューを設置することで４つのメリットが得られます。

アイコンでメニューの存在を伝えられる

３本線のアイコン「≡」でメニューの存在を伝えられる。これがハンバーガーメニューの最大のメリットです。

繰り返しになりますが、スマホの画面はパソコンでの閲覧環境と比べて狭いですから、アイコン自体が簡素化されると、画面の表示領域を有効的に使うことができるようになります。

ホームページにアクセスしてくれたユーザーに向けて、余計な情報を極力与えず、また必要のない情報は画面に表示させない閲覧環境を与え、サクサクとストレスのない環境で閲覧することができるようになります。

ファーストビューを印象的なものにできる

ハンバーガーメニューを設置すると、各コンテンツの「メインビジュアル」を大きく見せることができるので、画面に表示させたページの印象をより象徴的なものにすることができます。

ページにアクセスした際に、真っ先に画面に表示されるメインビジュアルは、アクセスしたページが何についてのページなのか？どんなページなのか？を伝えたり助けたりする役割を担っていますから、極力余計な情報を与えないことで、それを印象的なものにすることができるのです。

スマホ画面から伝わる情報量を意図的に抑える

スマホの画面はパソコンの閲覧環境と比べて画面に表示される領域が極端に狭いため、いかに余計な情報を与えないかがホームページにとってはとても大事なことになります。

そこで画面に表示される情報をおさえることで、作成者は伝えたいことを明確に伝えられるし、情報を受け取る側は余計な情報を受け取らない、そんな双方にとって最適な環境で閲覧できるようになります。

スマホという限られた画面表示領域の中、メニューの表示やそのありかを３本線のアイコン「≡」だけで済ませることで、スペースを奪い合うことがなくなりますし、製作者としてはメインビジュアルを大きく見せられるため、ユーザーにとってより象徴的なページにすることができるのです。

画面の表示をスッキリさせられる

ハンバーガーメニュー「≡」として画面に表示させることで、画面の印象が非常にスッキリします。

ナビゲーションメニューがたくさん表示されると、ユーザーにとってはそれだけでストレスになります。だって毎回、どのページに行っても同じものを見せられるのですから、いちいちスクロールさせなければならなくなりますから。

それにごちゃごちゃしていて閲覧しにくくなってしまうんですね・・・情報過多になります。

ワンスクロールしなければ閲覧できないというのはユーザーにとってはストレスで、これはユーザビリティの面からしてもよろしくありません。

デザイン的にスタイリッシュになる

また３本線のアイコン「≡」でメニューの存在を伝えることでスタイリッシュな印象になります。

「メニュー」や「MENU」などと画面上に表示させると少しやぼったい印象になってしまいますが、アイコンで「≡」として済ませることでユーザーに対して感覚的かつ直感的にメニューの存在を示すことができるようになるのです。

結果としてホームページ運営者からすれば、伝えたいことを明確に伝えられますし、ホームページにアクセスしてくれるユーザーにとっての利便性も高めることができるのです。

更新しても画面の表示が崩れにくい

これはページ管理者としてのメリットですが、ページ更新の際にも他の要素に影響を与えにくいメリットもあります。

これはハンバーガーメニューは別の領域として独立して存在しており、ぺージ内の他の要素に表示が影響しない作りになっているからです。

ハンバーガーメニュとして独立させることで、ページを訪問した際にファーストビューとして表示される画面の調整が不要になるのです。

ハンバーガーメニューを使わずにメニュー内の表示を追加、削除する場合は、ヘッダー領域のパーツをいじる必要があったり、メインビジュアルとなる画面の表示を細かく調整しなければならなくなりますが、メニューそのものを切り離し独立させることでメインビジュアルに影響することなくメニューの更新を行えるようになります。

例えば、メニューの行数が増えた場合、ハンバーガーメニューがない場合は、ファーストビューとして表示されるメインビジュアルの画面領域が崩れてしまいます。

するとページで伝えたいことが伝えられなくなってしまい、結果、ホームページ内でユーザーが得られる体験を邪魔してしまったりユーザー体験を損なってしまうことがあります。

ハンバーガーメニューを設置するデメリット

もちろんハンバーガーメニューを設置することによるデメリットもあります。

代表的なデメリットは下記の通りです。

メニューアイコンだと気がつかないユーザーもいる

そもそも論になってしまうのですが「≡」をタップするとメニューが表示されることを知らないユーザーも中にはいます。

今は「≡」をタップするとメニューが表示されることは一般的にも認識されてきてはいますが（昔は認識されていなかったのでメニューナビゲーションがないと思われていた）、やはり、メニューだと気がつかないユーザーも一部います。

この辺りは、誰を相手にしたホームページなのかを考えて制作する必要がありますが、なかには「MENU」と表示したり「メニュー」と表示したほうがいいケースもあります。

アイコンを展開しないとメニューが見られない

ハンバーガーメニューのアイコン「≡」をタップしないとメニューの内容が表示されないというのもデメリットです。

画面に表示される情報を減らし、ユーザーの邪魔をしないことがメリットでもあるのですが、ユーザーによってはメニューが表示されない、されていないことがデメリットとなるケースもあります。

ユーザーにとって大事な情報があったとしてもメニューとして展開されなければ意味がありませんから、この辺りはターゲット次第と言えると思います。

ハンバーガーメニューを作成、最適化するコツ

それでは、ハンバーガーメニューはどのように作成し最適化していけば良いのでしょうか？

ここからは、ハンバーガーメニューの作成と最適化のコツについて解説していきます。

まずは作成のコツから見ていきます。

ハンバーガーメニューを作成するコツ

ハンバーガーメニューを作成するときのコツは下記の通りです。

ホームページを誰が閲覧するのか（ターゲットは誰か？）

まずホームページは「誰に向けたものなのか」に意識を向けてください。

例えば、デジタルネイティブと呼ばれるわりと若いユーザーを対象としている場合「≡」でもナビゲーションメニューだと認識されますが、世代によっては「≡」のアイコンの意味がわからない方もいます。

「≡」をタップすればメニューが展開されるというイメージを持てない世代もいますのでそれぞれの対象に合わせて表示方法を変えてください。

老若男女を相手にするご商売をされている方の場合、ハンバーガーメニューとして表示するよりも「MENU」や「メニュー」とわかりやすく表示したほうが効果的な場合もあるからです。

ですからあらゆる人が閲覧する可能性のあるサイトは「MENU」や「メニュー」と表示したほうがユーザーから見た場合の使い勝手は良くなります（デザイン性は犠牲になります。そもそもホームページは、デザイン性を高めれば高めるほど、使い勝手は悪くなってしまう傾向にあります）。

また、そうは言いつつも、スタイリッシュに表示したい場合は「≡」のアイコンの下に「メニュー」と表示しておくとデザイン的にちょうど中間に位置する程よい塩梅の印象にすることができます。

なお、ハンバーガーメニューを展開させた時に表示させる基本的な内容は、特別な理由がない限りパソコンの環境で閲覧できるグローバルナビゲーションと同様で構いません。

デザインや世界観を重視しているか？

例えばブランドサイトやサービスサイトなどで洗練されたデザインのホームページを作成しようとした場合は、ミニマムな表現を心がけると良いので「≡」が答えとなります。

アップルのホームページ（サービスサイト）を見てみると「≡」が「=」と表示されており、なんと３本線が２本線ですから（笑）

この辺りはさすがアップルと言ったところなのでしょうが、ちょっとわかりづらいです。わからない方にはわからないアイコンとなっています（個人的に思うことは、そのうち「一本線」の「-」になってしまうのではないかと思っています（笑））

（ちなみにアップルのサービスサイトの場合は、展開すると・・・

と言ったように、とってもシンプルでスッキリとまとまっております（笑）

ある意味すごいなぁと思います。もちろんアップルの場合は、ブランドが広く認識されており、どのようなサービスや商品を取り扱っている企業であるのかが世界的に認知されていますから、こんなことができちゃうわけです。

アコーディオンメニューさえありませんから（ただしそれぞれのカテゴリをタップすると詳細について表示されます）。

またAppleのように「メニューアイコンとしてハンバーガーメニュー以外の表示はないの？」と思われている方もいらっしゃると思いますが、いくつか代表的なものをこの後の記事後半のセクションでピックアップして紹介させていただきます。

結局は自社が何を重視するのかやホームページの目的によって、ハンバーガーメニューをどうするのかを検討していくといいと思います。

ちなみに公的なサイトの場合は「≡」のアイコンの下にカタカナで「メニュー」と表示されていることが多いです。

これは老若男女いろんな方がホームページを訪れることによる配慮だと思います。

ハンバーガーメニューの展開方法には種類がある

なかにはハンバーガーメニューをタップすると、さまざまなギミックで表示されるケースもあります。

いくつかよくみるメニューの展開方法を以下に記していきます。

どれも面白いですが、メニューのタップ率や、展開後の別ページへの遷移率にはあまり変わりはありません。つまり、ここにこだわっても、数字的にはあまり意味はありません。

もちろんこだわった作りにすると、そのブランドを形作るものの一部としてブランドの世界観を形作ることができますが、一般的なホームページであればここにこだわる必要はありません（お金がかかりますから、無駄にお金をかける必要はありません）。

上からメニューが降りてくるタイプ

3本線をタップすると画面「上」から画面「下」にメニューが展開するパターンですがこのタイプのハンバーガーメニューです。

横からメニューがスライドするタイプ

メニューをタップすると画面「横」からにゅるっとスライドして出てくるメニューです、

フェードインで表示されるタイプ

フワッとした柔らかい形で画面に押し出されるようにメニューが表示されるメニューがこのタイプのものです。

特殊なアニメーションを含むタイプ

最後特殊なアニメーションを含むタイプもあります。

このタイプではメニュー展開後も動きがあるメニューになっていることが多いです。

ハンバーガーメニューの効果的な表示位置

ハンバーガーメニューは画面「右上」に表示することが一般的だと思ってください。

メニューの位置の基本は「右上」です。

一般的にはサイト名が左上、もしくは中央、右上に「メニュー」とされています（もちろん決まりはありませんが、一般的にはそうなっています）。

ブランドサイトによっては、メニューが「右下」にあるものや「左上」に表示されているケースもありますが、基本は「右上」だし、一般的には「右上」にあるものと認識されているので「右上」にあるだけでタップされやすくなります。

スマホは右手で操作している人が多いため、右上にメニューを置いたほうがタップしやすいのです。

もちろん左利きの方がみるサイトであった場合は「左上」にメニューを表示するとタップしやすくなりユーザビリティを高めることができると思いますが、あくまで一般的には右利きの方がメインです。

だから難しいことは考えずに「右上」に設置します。

「右下」に設置してもいいのですが、「右下」はユーザーにとってよく目にする位置になるのでメニューが閲覧の邪魔になってしまうこともあります。

また右下にメニューを表示させるとスクロール時に当たってしまい、開きたくないのにメニューが展開されてしまうといったことが起きストレスになります。

ユーザビリティの観点から言ってよくなく使い勝手が悪くなってしまうのです。

だから基本的には「右上」に設置するものだと思ってください。

ハンバーガーメニューを最適化するコツ

ハンバーガーメニューを最適化するコツは下記の通りです。

テストを繰り返す

元も子もない話と言われてしまえば、それまでなのですが、迷った場合は、もうテストを繰り返すしかないです。

ホームページにアクセスしてくれるユーザーに答えを委ねてしまうのです。

代表的なのはABテストを行うことです。

ハンバーガーメニューとそうでないもの、２つを用意して、クリック率を確かめていきます。

そしてより反応が高いものを選択する。これを定期的に２週間から１ヶ月単位で繰り返して都度決めていく。

それしかないと思います。

なぜ２週間から１ヶ月必要なのかというと、十分なデータを取るためです。

それよりも短いと十分なデータを得ることができません。

あとデータを取るときの注意点なのですが、特定の箇所のテストをしたい場合、例えば「ハンバーガーメニュー」か「そうでないか」をテストしたい場合は、必ずその部分だけをテストしてください。

一度に複数箇所のテストをしないでください。

違う要素の部分、例えば、「メニューを設置する位置」と一緒に、ハンバーガーメニューを設置したほうがいいのか、否かをテストをする形にしてしまうと、正確なデータをとることができません。

判断を間違えないためにも、テストをするときは一つの要素同士に絞ってテストをしてください（これはマーケティングの基本です）

ハンバーガーメニュー以外のメニューアイコンについて

アイコンの形がハンバーガーに似ていることから「≡」はハンバーガーアイコンと言われます。

実はメニューアイコンには、他にも代表的なアイコンがいくつかあり、企業イメージや企業が求めるブランドの世界観によって一風変わったメニューアイコンを採用しているホームページもあります。

ハンバーガーメニュー以外でよく見かける代表的なメニューアイコンは下記の通りです。

どれも食べ物であることが面白いでしょ？（笑）

ミートボールメニュー

ミートボールメニューとは「●」が横に３つ並んだナビゲーションメニューのことです。

おそらく、3本線のハンバーガーメニューの次に最もよく見かけるメニューだと思います。

ミートボールメニューもハンバーガーメニューと同様にミートボールに似ていることから付けられています。

ケバブメニュー

次にケバブメニュー。これは「●」が縦に３つ並んだナビゲーションメニューのことです。

こちらも良く見かけるメニューだと思います。

ドネルメニュー

ドネルメニューは、ハンバーガーメニューのように3本線のアイコンなのですが、上から下に向かって線の長さが短くなっているメニューのことを指します。

弁当メニュー

最後、弁当メニューと呼ばれるアイコンですが「■」が３×３で並んだメニューのことを指します。

こちらもお弁当に似ていることから、弁当メニューと呼ばれています。

ハンバーガーメニューの目的＝閲覧環境を整えることを忘れない

いずれのメニューを使うにしてもブランドの方向性、価値観、そして忘れていけないのはターゲットを十分に定めてナビゲーションメニューを選んでください。

ナビゲーションメニューがわかりづらい場合は、ユーザーにとってストレスになってしまいますから、一部の業種や会社以外はユーザーにとってわかりやすいものを選ぶようにしてください。

まとめ

今回の記事ではナビゲーションメニューであるハンバーガーメニューについて基礎的なことから設置に際してのコツに至るまで解説してきました。

以上、ホームページを作成するときの参考にしていただければと思います。

最後まで読んでいただきありがとうございました！