はじめに

本稿は UI Design Advent Calendar 2015 – 8日目のモバイル UI に関する記事です。

まず私はハンバーガーメニューという UI が嫌いです。その理由についてこの記事で説明していきたいと思います。これから例によりハンバーガーメニューをディスりますがご了承くださいませ。

≡ あの三本線を人はハンバーガーと呼ぶ

最近よく見かけるあの“三本線”のことを海の向こうでは ハンバーガーアイコン とか ハンバーガーメニュー とか言うらしいです。上のがパンで、真ん中のがハンバーグで、下のがパンに見えるからだそうです。私はハンバーガーにはチーズが入っている方が好きなのですが、残念ながらチーズは省かれてしまっていますね。もう少し細いチーズに見立てた線を下に垂れてる感じで2番目の線の上に足した方が良いと思います。

にしても欧米人にはあれが本当にハンバーガーに見えるのでしょうか。他にもう少しマシな例えは無かったのでしょうか。東洋の文化で育った私は 日本の家紋 か 風水の八卦 かと思いましたよ。乾（いぬい）メニュー なんてなんだか格好良くありません？

https://ja.wikipedia.org/wiki/八卦

まあ違和感あれどそこに抗ってもしょうがないので、とりあえず彼らに倣ってこれはハンバーガーと呼称することにします。GUI でよく出てくる三本線はハンバーガーです。参考までにとてもわかりやすい図を上に用意しました。……ほらもうハンバーガーに見えてきたでしょう？　😋🍔

目を醒ませ、ハンバーガー野郎は実はそんなにイケメンではない

例えば iPhone の Safari とかでインターネットするとほぼ必ず現れる彼、最近とっても人気者みたいです。特に Google さんはもうアプリでも Web でもハンバーガーにぞっこんのようです。最近では 三点リーダーを縦向きにしたような、もはやハンバーガーですらない意味不明なアイコン も用い始めています。
一方の Apple さんはアプリではそうでもないみたいですが、Web の一部ではハンバーガーを使っています。

Chrome

ここからは、それぞれのサイト・アプリにおいてハンバーガーメニューがどのように活用されているのか、少し見てみましょう。

android.com

「やりたいことのそばにいる」とせっかくビジュアルを使って綺麗に見せてるのに、それを遮るかのように左からニュッと味気ないドロワーメニューが出てきました。大胆に Android の巨大ロゴ入りで。
Safari だとアプリの世界でツールバーが引っ込んだりするものだから、ドロワーの裏に敷かれている黒い帳が画面下で切れちゃってポロリしてます。Web だとよくあるブラウザ依存の「崩れ」でしょう。まあたぶんここは Android の Chrome に最適化しているでしょうし、「iOS ではこんなこともまともにできないから Android にスイッチしようぜ」という Google さんからのメッセージと捉えておきましょう。

そうこうしてたらハンバーガー君が右に移ってしまいました。試しに押したらよくわからない画面に飛ばされちゃいました。ブラウザ依存なのか、これらのボタンを押しても無反応なんです。さっきのハンバーガーを返してくださいよ。あなたではなく彼が好きだったんですよ。

このハンバーガー君はどうも落ち着きがないみたいで、外見だけでは彼がどんな働きをしてくれるのか、なかなか判断しづらいですね。突然持ち場を離れるようなことがあったら、慌てず、冷静に、ブラウザの「戻る」を押してやり直せば大丈夫です。

apple.com

あまりハンバーガーに乗り気では無い Apple さん、スマホ向けの Web UI に限り、二本線のハンバーガーアイコンを使っています。いや、これではハンバーグが無いからただのパンです。あるいはハンバーグとパン1枚。少なくとも S◯ftBank ではなさそうです。どっちでもいいのですが三本ではない理由はタップしてみればわかります。要はくるんと動いてバッテンマーク×に変化するわけですね。なので真ん中のハンバーグ（あるいはパン片方）が邪魔なのです。

それにしてもハンバーガーをくるんと回す意味はあるのでしょうか。この程度だったらかっこいいかもしれませんけど。

メニューの展開のされ方をみると、これはドロワーではなく上の帯が縦に拡張した領域という位置付けのようです。だからそのまま下にスクロールするとさっきまで表示していたコンテンツが覆い隠されることなくちゃんとそこにいます。黒い帳で隠されないだけまだ android.com よりはマシですね。

apple.com の最近の傾向として、画面いっぱいの大きな自社商品の写真でその魅力を最大限に伝えようとするデザインが多いです。胡散臭いキャッチコピーももちろん健在ですけど、本質とはあまり関係のないグローバルメニューなんかは極力目立たせないようにしています。スマホは画面が狭いので自社商品の写真で埋め尽くすためにも、ここでハンバーガーの出番というわけですね。ユーザーとしてはそこは隠さないでさっさとメニューを押させて欲しいのですが。

dribbble.com

我らが Dribbble、ここでも“彼”を見かけました。この開き方は Apple 方式のようですね。よく使うものは別にハンバーガーに挟まなくてもいい気はしますけど。

イカリング

みんな大好き Splatoon のイカリングでもハンバーガー君が活躍されています。海鮮かき揚げバーガーなのでしょうか。
たまにステージ情報を確認するために眺めることがありますが、やっぱりハンバーガーをタップして移動するのが面倒くさいです。あとこのサイトは独特の装飾・色使いになっているので、UI としてはなかなか見づらかったりします。

bk.mufg.jp

こういうのは銀行のサイトを見るのが一番だろ、ということで、我国が誇るメガバンク、三菱東京UFJ銀行のスマホ向けサイトを確認してみました。こちらではご丁寧に「メニュー」というテキストが付いていてその意味がある程度理解しやすくなっています。やっぱりあの味気ない三本線では意味がわからないんです。銀行の利用者層からしてご年配の方もおられるでしょうから、きっとそういうのを考慮してテキストを追加したのでしょう。既にページ内の情報が結構な量だからわざわざこのメニューが別途必要なのかはわかりませんが、さっそくこれを押してみましょう。すると大胆にもドロワーが画面を押しのけて登場しました。

ドロワー側をスクロールしようとするとなんかガタガタするし、慣性スクロールの減速具合が iOS っぽくなくて気持ち悪いのでこれたぶん JS か何かで独自実装したスクロールビューもどきですね。HTML だとこのようなスプリットビューをつくるのは難しいのでしょうか。

ちなみにこの状態からドロワーを閉じる方法は少なくとも3通り以上ありますが、既にお分かりですよね。

Amazon アプリ (iOS)

私は 注文履歴 リスト 最近チェックした商品 をよくタップしますけど、毎度毎度ハンバーガーを指で潰してこのまずそうなメニュー一覧をいちいち開いて目的の項目を探さなければなりません。文字が小さいからタップするのも一苦労です。の割に UIVisualEffectView を使って磨りガラスしちゃってたり、ハンバーガーから飛び出した中身をちょっとバウンスさせちゃったりしてますけど、肝心のメニューはとても見辛いものになっています。Web はともかくアプリの世界には UITabBar という素晴らしい御方がおられるので、注文履歴とかアカウント設定とかのナビゲーションは彼に任せるべきです。きちんと整理すれば5項目（UITabBar のタブ最大表示数）までまとめられるでしょう。

Google Maps (iOS)

どうせ Google さんのことだからハンバーガー君がいるんだろ、と思ったらやっぱりいました。あと Material の押し付けやめて欲しいですね。

気になるのはハンバーガーの位置。これではまるで検索窓に関係するメニューが白枠から展開するのを期待してしまいますが（検索履歴、検索オプションなど）、実際には画面全体を覆い隠すように左側からドロワーで登場するので期待を裏切られます。なんか矛盾していません？
ならアイコンは検索窓の白枠からは切り離してもっと左上とかの隅に置いておいてくださいよ。右下の青丸いらないので。

Xbox One SmartGlass (iOS)

なんで Xbox なのかというのは置いておくとして、このアプリでも“彼”が活躍していました。まあこの系統のアプリであればハンバーガー君も格好よく見えるかもしれませんね。Metro ならぬ Modern UI を否定しちゃってますけど。

ハンバーガーメニューがダメな理由

ここからは真面目にハンバーガーメニューがダメな理由を検証してみます。

1. 何をするのかがわからないアイコン

https://dribbble.com/shots/1454295-MOARRRR-Hamburgers

味気ない三本線を一目見ただけでは、一体全体何をするものなのかユーザーからはよくわかりません。クリックまたはタップしてみるまでは中身を知ることができません。また、いざ開いてみたとしても、大抵は縦方向に十分に余裕があることから、無駄にメニューが充実していることが多いです（Amazon のように）。こうなるともうユーザーはハンバーガーメニューの中身をいちいち覚えていられません。とにかくいろいろなモノが詰まったアノ三本線 という曖昧な記憶を頼りに、用がある度にそれをいちいちタップすることになります。

可能であれば、三菱東京UFJ銀行の例のように、アイコンの隣にテキストを付加してあげたほうが親切でしょう。この点についてはハンバーガーアイコンに関する調査報告をされている記事がありますので、そちらも合わせて読まれると良いと思います。

≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
Mobile Menu AB Tested: Hamburger Not the Best Choice?

これは個人的な話ですが、たとえば iPhone でまとめサイトのようなところを見ていた時にそこにハンバーガーアイコンがあったとして、私はまずそいつをタップすることはありません。なぜなら Web にはネイティブアプリほどの洗練された UI を期待していないし、そしてアイコンだけを見ても一体全体それが何をするものなのか分からないからです。Twitter などからたまたま記事に飛んできた身としては、わざわざハンバーガーアイコンを押して内容を確認するほどにそのサイトの構造には興味がないため、まず押しません。

2. 隠しておけるからより多くの情報を扱える、という思い違い、そして面倒

スマホの画面は狭いので、ハンバーガーメニューのようなものをどこかに常設しておくと当然邪魔になります。なので、普段はそれを隠しておき、タップされたらそのときだけ開くというアイディアが生まれました。こうすることで開いたときにメニューがモーダル状態になるので、コンテンツを意識せずともメニューの UI だけを一時的に画面いっぱいに好きに使うことができるようになりました。なので、そこにスクロールビューを仕込めばいくらでもメニューを拡張することができるという画期的なものです。

果たしてそんなことをして本当に便利になるのでしょうか。

もしグローバルナビゲーションとしての役割をそれに与えるのだとしたら、メニューの内容は極力少なくするべきです。モーダルである必要もありません。主機能・主画面を呼び出せる最低限の項目に絞り込み、できれば隠さず、いつでも手の届くところに配置するべきです。その最適な UI こそがタブバーパターンです。Android や Web はよく知りませんけど、少なくとも （ドロワーの標準コンポーネントが提供されない）iOS のアプリにおいて、タブバーを否定してまでハンバーガーを採用する理由はあるでしょうか。もちろん、Android や Web でもタブバーのような UI を採用することは十分に現実味があるはずです。

触っていればすぐに気付くはずです。「トップ」「お気に入り」「検索」「履歴」「設定」「その他」と並んだグローバルナビゲーションがハンバーガーに収められている UI があるとき、例えばユーザーは検索したくなったらまずハンバーガーをタップしてメニューを開かなくてはなりません。メニューから目的の項目を見つけ出して、次にそれをタップします。
気が済んで今度は履歴を見たくなったらまたハンバーガーをタップして開きます。たった2画面間 を移動するだけなのに、いちいちハンバーガーメニューを開くコストをユーザーに強いることになるのです。1アクション多いどころか、大抵はメニューが0.3~0.4秒くらいのアニメーションを伴って登場しますから、そこで表示し終わるまで待たなければなりません。そしてその後目的の項目を味気ないメニューから探し出すのです。これが1回や2回に限らず、毎度です。ユーザーは次第にハンバーガーが鬱陶しく感じ、疲弊してしまうことでしょう。

安易にハンバーガーメニューに頼るのではなく、取り扱いたい情報を整理した上で、ハンバーガー以外の表示方法を検討すべきです。The Hamburger Menu Doesn't Work という記事ではハンバーガーメニューのこのようなダメな点について論理的に反論しています。

The Hamburger Menu Doesn't Work
日本語訳：ハンバーガーメニューはゴミだ！！
日本語訳：次世代のWebナビゲーションに向けて ー ハンバーガーメニューからの卒業
日本語訳：なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？

3. ナビゲーションとしての欠陥

http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

ハンバーガーメニューが使い終わると隠れてしまうので、グローバルナビゲーションとして採用すると使いづらいということは以前指摘しました。ここでは更に掘り下げてみます。

ハンバーガーメニューは画面をとても広く使うことができるので、スクロールビューにすれば実質的に拡張性は無限大です。ですが本当にナビゲーションは無限大になり得るでしょうか？　画面遷移の導線が10個にもなればもうごちゃごちゃした印象は拭えなくなってきます。なのでメニューがスクロールすること自体が既に非現実的と言えそうです。
Windows のスタートメニューみたいなものでしょうか。あれはすべてをプルダウン、いやポップアップメニューに押し込んだことにより、ランチャーのくせに無駄に広く深いメニューを何度も行き来しなければならない BAD UI です。Windows ユーザーはそれに慣れてしまっているからそう思わないかもしれませんが※。ただ Windows の場合はクイック起動やデスクトップ上のショートカットがあるだけ救いがあります。

スタートメニューとクイック起動の例：http://lifehacker.com/5955089/how-to-bring-back-the-start-menu-in-windows-8

グローバルナビゲーションであれば現在位置をユーザーに明示する必要があります。これは Web サイトの UI では古くからの常識です。アプリでも同様でしょう。しかしハンバーガーメニューを採用してしまうことでこの常識を破ることになります。サイト、あるいはアプリにおいて現在位置がわかりにくいナビゲーション UI は欠陥と言えるでしょう。

こうならないためにも、ナビゲーション UI には極力アクセスしやすくするようにし、ユーザーが一目見て現在位置を把握できるようにしてあげる必要があります。また、サイトやアプリの構成を見直して、画面遷移がわかりやすくなるように整理します。ハンバーガーメニューのような複雑なナビゲーションに依存する必要がないよう、極力シンプルにするということが最も良い解決策と言えそうです。
iOS のタブバー（UITabBar）では同時に表示できるタブ数は5個まで、それ以上は「その他」というメニューに自動でまとめられる仕様ですが、これを採用するとき、事前に情報の整理と優先度の設定をうまくしてあげれば、5個以内に納めるということも不可能ではないでしょう。Twitter はその点シンプルにまとめあげています。また、Facebook アプリが少なくともハンバーガーメニューだった UI からタブバーベースの UI に変化したことは周知の通りです。

Twitter iOS

バカげた過剰装飾、アニメーション

Material Design 以前からハンバーガーアイコンを派手に動かして演出する例はありました。しかし Material Design (Android 5系) が登場してからは、世界中の Dribbbler たちはこぞってクールなダンシング・ハンバーガーを制作し始めました。これらが実際にアプリに実装されている例はほとんど見かけない気がしますけど如何でしょうか。Material Design には取り入れられましたけれど、その他の多くは “Dribbble UI” のひとつとして流れて行ってしまったのではないでしょうか。

https://www.pinterest.com/pin/538180224194366158/

https://dribbble.com/shots/2280087-Hamburger-Menu-Animation

https://dribbble.com/shots/2265620-hamburger-menu

https://dribbble.com/shots/2148679-Icon-Transition-Kit

こういったものは本質からは程遠いため、無意味にハンバーガーを踊らせるのはやめて、少なくともメニューを使いやすくしてから必要最低限のアニメーションに留めましょう。

Your UI isn’t a Disney Movie（君たちの UI はディズニー映画じゃないんだよ）

No More Hamburger Menu – ハンバーガーから卒業しよう

https://dribbble.com/shots/1633262-Hamburger

ハンバーガーがまずいということがよくわかりました。何も考えずにとりあえずあの三本線 ≡ を左上に配置し、隠れたメニューに大量の機能を押し込めるのはもうやめましょう。Android ではそれが推奨されているようにも見えますが、Android であってもそこに疑問を投げかけても良いと思います。iOS ではそもそもドロワー UI は UIKit では提供されないので、推奨されていないというのを察した上で UITabBar をまずは検討しましょう。常設タブが邪魔になるというのであれば、合わせてタブを隠すオプションを利用しましょう。

ドロワーといえば、OS X にも NSDrawer というドロワーが昔からありますが、ほぼ使われているのは見たことがありません。昔の2chブラウザで板一覧のサイドメニュー部分に使われていましたけど、批判が多かったのでスプリットビューで置き換わりました。要するに不便なので使われなくなったのです。

もしあなたがこれから iOS アプリのデザインをやるというのであれば、Apple の純正アプリを観察すると良いかもしれません。まずハンバーガーメニューは使われておらず、大抵はタブバーかその他のパターンで実現されています。Human Interface Guidelines を読んでもハンバーガーメニューに関する記載は見られないので、そもそも推奨していないのでしょう。

Web ではより深刻です。HTML や JavaScript を用いたインタラクティブな UI というものがなかなか実装しづらい上、ブラウザごとの「個性」によりそれがまともに動作する見込みが薄いです（例：android.com）。これはハンバーガーに限った話ではありませんが、JavaScript 等で複雑な挙動を実装するリスクをとるよりも無難にアイコンを横並びに配置しておく方がシンプルだし、ナビゲーションという目的であればその方が良い結果が得られるかもしれません。ネイティブ UI には敵わないということを自覚し、よく検討しましょう。

その結果、やっぱりハンバーガーメニューが優れていると思ったら採用してみる、そのぐらいの構えで UI デザインを行ってみては如何でしょうか。

参考資料

• The Hamburger Menu Doesn't Work
• ハンバーガーメニューはゴミだ！！
• 次世代のWebナビゲーションに向けて ー ハンバーガーメニューからの卒業
• なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
• ≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
• ［三］アイコンあるいは「ハンバーガー」アイコンは、まだ「メニューアイコン」だけじゃ通じないかな？
• アイコンのユーザビリティ
• HOW TO SOLVE THE HAMBURGER ICON PROBLEM
• Why We Banished the Hamburger Menu From Our iPhone App
• Why and How to Avoid Hamburger Menus
• Kill The Hamburger Button
• To hamburger menu or not? Web publishers' new addiction to hiding navigation
• Your UI isn’t a Disney Movie

UI Design Advent Calendar 2015 明日9日目は usagimaru さんの 闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう です。お楽しみに。