◎　コラム　◎　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
スマホUIでよく使われる「ハンバーガーメニュー」とは？
—————————————————————————-

みなさん、「ハンバーガーメニュー」をご存じでしょうか。

モバイルサイトやモバイルアプリでよく見かける
「横の三本線アイコン」の通称が、ハンバーガーメニューです。

それでは、ハンバーガーメニューにどのような内容が含まれているか、
想像がつくでしょうか。

スマートフォンはパソコンと異なり、画面領域が狭いため、
コンテンツやユーザーインターフェイス（UI）を絞り込んで
配置しなければなりません。

スマホでは、メニューは「ないと困る」が、
幅や高さをそれなりにとるため、「常にあると少し邪魔な存在」です。

このようなことから、グローバルナビゲーションなど、
主要カテゴリー同士を行き来するためのボタンやラベルを、
ハンバーガーメニューの中に入れたのです。

メニューをコンパクトにまとめておき、
タップで展開する省スペース型のUIとして、
多くのサイトやアプリで使われています。

メニューのデザインはサイトやアプリによって違いがありますが、
ハンバーガーメニューが広く普及した今日では、
おおよそ次の4タイプに分けられます。

1. 三本線のみ
2. 三本線＋ラベル（メニューやMENUなど）
3. その他
4. なし（グローバルメニューなどで表示）

表示領域の狭さと快適な操作をどうバランスさせるか。
デザイナーは試行錯誤を続けています。

▼参考
スマホでユーザビリティが高いメニューはどれ!?
大手15サイトを比較 – ウェブ企画ラボ
https://webkikaku.co.jp/blog/hpseisaku/smartphonemenu/

—————————————————————
□ ハンバーガーメニューのデメリット
—————————————————————-

さて、このようなハンバーガーメニューですが、

・そもそも「メニュー」であると気づいてもらいにくい
・タップされるまで、中身がまったくわからない

など、いくつかの致命的なデメリットがあります。

そこで、さまざまな検証が行われ、
これまで以上に使いやすいメニューUIが検討されています。

たとえば、

・横の三本線に囲いをつけてみる
・MENUというラベルを追加してみる
・色付きの三本線にしてみる

など、デザイン上の工夫です。

▼参考
ハンバーガーメニューのデザイン問題が決着！
ABテスト7パターン結果｜ferret [フェレット]
https://ferret-plus.com/2672

—————————————————————-
□ ハンバーガーメニュー廃止の動き
—————————————————————-

ハンバーガメニューを廃止する動きもあります。

身近なところでは、Facebook、Twitter、Instagramなどの
モバイルアプリは、人、メッセージ、通知（ベル）、家（ホーム）など、
内容が想像しやすいアイコンを配置するようになっています。

▼参考
ハンバーガーメニューはもう古い！
代わりに使えるモバイル用ナビメニュー5つまとめ – PhotoshopVIP
http://photoshopvip.net/96151
ハンバーガーメニューを「積み重ねて並べる項目」に使うのであれば、
見た目が中身を表しており、適切といえます。

ピクトグラムやアイコンは本来、
そのような「象形」のために使うものですが、
ハンバーガーメニューは、斬新な発想だっただけに、
安易に使われてしまったといえそうです。

サイトやアプリごとに、主な対象となるユーザーが異なります。

まずはユーザーをしっかりと認識し、よりよいUIを常に考え、
PDCAサイクルを頻繁に回すことが大切です。


萩原印刷株式会社　クロスメディア部