ハンバーガーメニューとは何か
まず最初に、そもそもハンバーガーメニューとは何かを解説します。
3本線のアイコンがよく使われるメニュー
ネットなどでサイトにアクセスすると、端の方に横3本線が入ってるのを見かけませんか？それが『ハンバーガーメニュー』です。3本の線が、ハンバーガーのように見えるからこの名が付きました。
この機能が生まれたのは、スマホサイトが普及し始めてからです。PCサイトの大画面と違い、スマホ画面の小さいスペースでは、画面全体をメニューに占領されてしまうため、このメニューを隠す機能が求められ、開発に至りました。
このハンバーガーメニューをクリックすると、メニューが出てくるようになっており、そこから見たいものを選んでクリックすると、そのサイトにジャンプできる仕組みです。
ハンバーガーメニューという名前は知らなくても、ほとんどの人がこの機能を利用しているのではないでしょうか？
スマホなど狭い画面もスッキリ
ハンバーガーメニューは、3本線の中にプルダウンメニューを隠せる仕組みで、この機能を使うことで、サイト案内などの文字を隠せるようになりました。
たくさんの文字を隠せるので、PCサイト並みの情報量をスマホサイトに入れやすくなるハンバーガーメニューは多くのサイトで採用されるようになりました。見た目にも全体的にスッキリした印象になり、上手に使えば洗練された印象も与えられるのです。
しかしこのハンバーガーメニューにはデメリットもあります。まず3本線だけでは、何を表しているのか、いまいちわかりにくいという点です。
実際見ていると、ハンバーガーメニューをクリックしてみないと内容がわからないので、クリックしたときに自分の目的に合わないメニューが出てくると少し手間になります。
またクリックしたときにあまりたくさんのメニューが出てくると、見づらくなりそのサイトを見るのに嫌気が差してしまうこともあるのです。
そこで最近は、スマホサイトでもハンバーガーメニューに頼り過ぎず、アクセスの多いメニューはアイコンで表示するなど、それぞれのサイトで工夫されるようになっています。
メニューのデザインはさまざま
一言でハンバーガーメニューと言っても、そのデザインは様々です。そこでここからは、ハンバーガーメニューの様々なデザインを見ていきましょう。
ドロップダウン、ドロワー
まずはハンバーガーメニューのデザインの主流であるドロップダウンと、ドロワーの2つから解説します。
ドロップダウンは、クリックするとメニューが上から下に降りてくるデザインです。とてもシンプルで、ハンバーガーメニューの中でも比較的ストレスがかからない表示方法です。
ドロップダウンはどんなサイトでも使える万能なデザインですが、内容が予測しずらいため、ユーザーを別メニューに大きく飛ばしたいときには不向きなデザインでもあります。
次のドロワーは、クリックすると横からメニューが出てくるデザインです。このドロワーはメニューが多く、ドロップダウンにしてしまうと、画面全体を隠してしまうほど情報量が多いサイトで利用されています。
しかしメニューが少ないサイトでドロワーを使うと、無駄に空白が生まれてしまうデザインでもあるのです。そしてドロワーもドロップダウンと同じように、メニューの推測が難しいというデメリットがあります。
モーダル
モーダルはハンバーガーメニューをクリックすると、画面いっぱいに表示される様式です。インパクトがあり、メニュー画面でしっかり検討してもらいたいときに向いていますが、次の行動を縛られてしまうため、ページの移動が面倒になる傾向があります。
ハンバーガーメニューの注意点
ハンバーガーメニューには、メリットとデメリットがあることを、さきほどから少しづつ解説していましたが、ここで今一度、ハンバーガーメニューを利用するに当たっての注意点を解説します。
ユーザーに手間をかけてしまう
ハンバーガーメニューは、そもそもデザイナーのためのものであって、ユーザ目線に立ったデザインではない、という指摘が以前からありました。
実際ハンバーガーメニューは、ただの3本線で表現されているため、デザイナーにとっては楽ですが、ユーザーにとっては内容がわかりずらく、必ずしも便利な機能ではありません。
PCサイトならば、一つの画面でメニューを一気に見れますが、スマホサイトの場合は、サイトを移動するたびにハンバーガーメニューを一回クリックする手間が出るので、どうしても効率が悪くなってしまうのです。
メニューに気が付かないユーザーも
ハンバーガーメニューは、シンプルなデザインですので、ユーザーが気が付かないこともあります。
またクリックしないとわからないので、クリックそのものを辞めてしまうユーザーもいます。
現代のスマホユーザーは、少しでも操作性に不便を感じるとすぐサイトを離脱してしまう傾向があるので、わかりやすさは非常に重要ですが、ハンバーガーメニューはサイトをわかりずらくしてしまうリスクがあるのです。
過剰なアニメーション、デザイン
ハンバーガーメニューは、ほぼ無限にメニューを作れるので、過剰に情報を詰め込み過ぎて、ますます見づらくなるという悪循環に陥ってしまうこともあります。
ハンバーガーメニューを使う時は、アクセスのしやすさを考慮し、ハンバーガーメニューだけではなくタブバーなども並行してうなどの工夫をしましょう。
またハンバーガーメニューを使ったサイトは、ユーザーからすると現在位置がわかりづらいため、自分が今どのメニューにいるのかがわかりやすくなるような工夫も必要です。
工夫を凝らしてユーザーに使いやすく
今まで見てきたように、ハンバーガーメニューには批判も少なからず存在しています。ユーザーにとって不便とされてしまいがちなハンバーガーメニューですが、工夫を凝らすことでユーザーの負担をへらすことが可能です。
そこでここからは、ハンバーガーメニューを作る際に、どのような工夫をすればユーザーにとって使いやすくなるのか、解説します。
サイズは大きすぎず、小さすぎず
まずこだわりたいのが、3本線のサイズです。3本線のサイズは、大きすぎても邪魔ですが、小さすぎてもクリックしづらくなってしまうので、適度なサイズを選ぶ必要があります。
一般的には、クリックしやすくするためには最低35px以上にするとよいとされています。実際大手のショッピングサイトなどのハンバーガーメニューのサイズを確認すると34～38pxぐらいのサイズで表示されるものが多く、それ以下のサイズを採用しているサイトはすくない傾向にあるようです。
ただ大きめの40px以上のものは、クリックしやすさから、それなりに評判が良いようで、このサイズを採用しているサイトは一定数見られます。
アイコンにMENUの文字を表示
ハンバーガーメニューの3本線だけですと、なんの線だかわからないことも多いため、最近では3本線のそばに『MENU』の文字が表示されているサイトも増えています。
この文字を付けるだけでも、わかりやすさは飛躍的に向上するので、サイトの離脱を減らせるようになるのです。
また3本線に囲いを付けて、よりボタンらしいデザインにしているサイトも見られます。こうするだけでも、クリック率が上がるので、ハンバーガーメニューを作る際は意識してみてください。
アクティブ時は閉じるボタンに変える
ハンバーガーメニューを開いている時は、3本線を閉じるボタンに変えることも大切です。こうすることで、ユーザーがハンバーガーメニューを開いていることがわかりやすくなるでしょう。
なお閉じるボタンはほとんどのサイトで『×』のデザインが採用されています。
位置を右上にする
スマホの操作は基本右手で行うため、ハンバーガーメニューの位置は右上にあると、使いやすく感じます。実際多くのスマホサイトで採用されているので、右上にあるものだと自動的に考えている人も多いのではないでしょうか？
しかしさらに使いやすくするために、親指の位置に合わせて下側に設置するのもおすすめです。
下側にハンバーガーメニューがあるサイトは、まだあまり見かけないかもしれませんが、特に右手でスマホを持って右手で操作する場合には、右上よりも、下側の方が親指を伸ばさずにメニューアイコンをクリックできるので、一層操作しやすくなるでしょう。
さらに左手で持って操作する場合でも、右手の親指のすぐ近くにハンバーガーメニューがあることで、親指の動きを最低限に抑えられ、ユーザーのストレスを減らせます。
ただまだ下側に設置しているサイトは少なく、下側だと戸惑いを感じるユーザーもいるかもしれないので、設置場所に関してはまだ考察の余地があるでしょう。
ハンバーガーメニューは簡単に作れる？
さきほどはHTMLとCSSによる作りかたを紹介しましたが、実はハンバーガーメニューを作るには様々な方法があります。そこでここからはいろいろなハンバーガーメニューの作り方を紹介します。
CSSとJavaScriptで実装
さきほど紹介したCSSに、JavaScriptを実装させることでハンバーガーメニューを作ることも可能です。
JavaScriptはユーザーの様々なアクションをサポートする補助のような役割を果たせるため、ウェブサイト上ではJavaScriptが多く活用されているのです。そんなJavaScriptは、具体的には以下のような場面で動作しています。
- ユーザーがメールアドレスをきちんと入力できたかチェックする
- クリックすれば画像が入れ替わる
- Googleのトップページに行くと、自動的に検索画面が表示される
- アニメーションを動かす
このように、ユーザーの反応に合わせてサイトをより動的にしたい場合に、JavaScriptが使われることが多いのです。ですのでハンバーガーメニューにJavaScriptを実装すれば、よりオリジナリティが出せます。
便利なToggle
JavaScriptやjQueryを利用する時には、Toggleを使うと一層簡単にハンバーガーメニューを実装出来ます。このToggleには3つのパターンがあり、これを使ってよりわかりやすいハンバーガーメニューを作れます。
- slideToggle：押すと降りてくる形式のメニュー
- fadeToggle：タブでメニューを切り替える
- toggleClass：ONとOFFを切り替える
メニューのデザインは柔軟に考えよう
横3本線で表現されるハンバーガーメニューは、シンプルなデザインなだけに、固定的なデザインになりがちです。しかしこの3本線をいかに表現するかは、アイデア次第でいろいろ工夫できるのです。
分かりやすさ重視のデザインを
ハンバーガーメニューを使う際は、どうやったら開いて、どうやったら閉じるのか、というのが一目でわかるようなデザインが理想です。
例えばハンバーガーメニューを開いたら、3本線が×に変化したり、3本線が『×close』に変化するなどの工夫があると、サイトを見ている人は、このメニューをどうしたら閉じられるか、ということがすぐにわかるでしょう。
ボトムナビゲーションを取り入れる
ボトムナビゲーションとは、サイトの下の方に設置されるバーのことで、このバーは基本的にサイトが移動しても固定可能で、スクロールをしても固定されたまま表示出来ます。
ホームボタンやメニューボタンなどは、このように固定されたバーにアイコンとして設置すると、ハンバーガーメニューのように隠れないのでわかりやすいのです。
頻繁にアクセスすることが予想されるメニューは、ハンバーガーメニューにするよりもボトムナビゲーションの方がユーザー思いの設計と言えるでしょう。
ハンバーガーメニューは補助的に使用する
ハンバーガーメニューは、メインで使われるメニューに使うよりも、あまりアクセスが見込めないメニューを表示する際に使うのがおすすめです。
例えばショッピングサイトならその企業の採用情報や企業理念など、ショッピングとは直接関係が無いものなどを表示する場合には、ハンバーガーメニューは最適な方法と言えるでしょう。
まとめ
今回はハンバーガーメニューについて、使い方や作り方などを解説してきました。ハンバーガーメニューは、ウェブサイトの一部であって、すべてではありませんが、ユーザーがサイトを閲覧する一つの指標として重要な役割を果たしています。
いろいろ賛否両論ありますが、サイト制作者のアイデア次第で、魅力的なハンバーガーメニューを作れるでしょう。