ハンバーガーメニューアイコンの現在：認識されやすいか
ハンバーガーメニューは、10年前と比べて現在ではより馴染みのあるパターンになったが、非表示ナビゲーションに関する従来のベストプラクティスは依然として有効である。
デジタルデザインにおいて、過去10年間でハンバーガーメニューアイコンほど多くの議論を引き起こしたアイコンはほとんどない。ハンバーガーメニュー（その抽象的で積み重ねられたハンバーガーのような見た目からこの愛称で呼ばれる）は、メインナビゲーションを単一のボタンの背後に隠すことで、小さな画面でスペースを節約するための賢い方法として最初は採用された。しかし、このアプローチはインタフェースをすっきりさせた一方で、ユーザビリティの低下にもつながった。具体的には、ユーザーはハンバーガーメニューを見落としたり、モバイルでもデスクトップでもタスクを完了するのにより時間がかかるようになった。
当時は斬新なパターンだったが、今ではほとんどのユーザーがハンバーガーメニューを認識し、その意味を理解している。それでも、当初と同じデザインリスクの多くが今も当てはまる。この記事では、ハンバーガーメニューに関する我々の初期の調査結果を再検討し、現在のハンバーガーメニューの認識可能性に関する調査内容を共有して、ハンバーガーアイコンのビジュアルデザインのベストプラクティスを提示する。
当時：ハンバーガーメニューがインタフェースのユーザビリティを低下させた
2015年から2016年にかけて、我々は非表示のナビゲーションパターン（ハンバーガーメニューなど）と、常に表示されているナビゲーションを比較する一連の定性・定量調査を実施した。結果は明確で一貫していた：
- ハンバーガーメニューアイコンの背後にあるコンテンツへの、ユーザーの関与は減少した。
- タスク成功率は低下した。
- タスク所要時間は増加した。
- 全体的な満足度は低下した。
これらの問題は、モバイルとデスクトップの両方のインタフェースに当てはまっていた（ただしデスクトップではより深刻だった）。
当時の我々のガイドラインは、可能な限りナビゲーションを表示し、ハンバーガーメニューの使用は控えめにする、つまり、スペースの制約から本当に必要な場合にのみ用いる（そして、デスクトップでは決して使わない）、というものだった。さらに、ハンバーガーメニューを使用する場合は、いくつかのベストプラクティスに従うことを推奨した。これらのプラクティスは今も有効である（本記事の最後でそれをまとめている）。
現在：ハンバーガーメニューはお馴染みのパターン
過去10年間で、ハンバーガーメニューは、その名前の由来となった料理と同様に、定番となった。モバイルファーストデザインが定着すると、ハンバーガーメニューは画面をすっきりさせ、スペースを節約できる解決策となり、AppleやAmazonのようなデザインリーダーが採用すると、他の企業も追随した。ハンバーガーメニューの普及が進むにつれ、そのアイコンの持つ意味も標準化されていった。繰り返し目にすることで、ユーザーはそのアイコンを自信を持って認識し解釈できるようになったのである。
書籍『Digital Icons That Work: A Comprehensive Guide to Enhancing Experience with Effective Iconography』のために、最近、実施した調査では、参加者にコンテキストの中で数十種類のハンバーガーアイコンを提示し、その機能を予測するよう求めている。
この調査は、過去の調査と異なり、タスク時間や成功率は測定しなかったが、ユーザーがアイコンを見たときにそれを非表示メニューと認識したかどうかという認識可能性を評価した。
そして、実際、ユーザーは認識できた。ほとんどの場合、参加者はハンバーガーアイコンをメインメニューやサイトのトップレベルのカテゴリとして正しく識別した。とりわけ、ハンバーガーアイコンが想定される位置にあり、標準的な外観（同じ長さの3本の線の積み重ね）で表示されているときはそうだった。
たとえば、Dick’s Sporting Goodsのモバイルウェブサイトは、標準の位置（画面の左上隅）に、典型的なスタイルのハンバーガーアイコンを配置し、そこにトップレベルのナビゲーションを収めていた。参加者に提示したスクリーンショットで「メニュー」ラベルを削除しても、彼らはこのアイコンを問題なく理解できていた。
VivaiaのモバイルECサイトのハンバーガーアイコンは、2本線でも、想定される位置にあったため、正しく理解された。
ハンバーガーアイコンでは、位置が解釈に大きく影響する。画面の左上隅という想定される場所に表示されていれば、ユーザーは一般にそのアイコンを「ここにカテゴリが隠されている」という意味だと理解する。
我々の調査では、ハンバーガーアイコンのデザインを多少変えても、典型的な位置に配置されていれば、大きな問題は生じなかった。
たとえば、Tomsのモバイルウェブサイトは、長方形の枠で囲んだ3本線という、文書のようなデザインのハンバーガーアイコンを左上隅に配置していた。
ほとんどのユーザーは、枠があることに若干の戸惑いはあったものの、それをメインメニューと正しく理解したが、文書と間違えた参加者もいた。一方、最初は確信が持てず、次のように考えた参加者もいた：
普通なら、それはメニュー項目だろうけど、四角の中に入っているから何か違うものだと思いました。でも、他の場所にメニューが見当たらないから、やっぱりメニューなんだろうなと思いました。
Newsweekのモバイルサイトは、矢じりを重ねたハンバーガーアイコンを採用していた（おそらくスライドメニューを示唆するため）。
しかし、ユーザーは追加されたその要素を無視して、アイコンがサイト全体のカテゴリを表示するものだと正しく予測した。ここでも、アイコンが左上隅という見慣れた位置にあったことが解釈を助けた可能性が高い。
それでも、このような装飾は不要だ。見慣れている形を変えると、完全に認識を妨げなくても、疑念を生む可能性があるからだ。
デザインが多少違っていても、ハンバーガーアイコンが一貫して認識されるという事実は、デジタルなインタラクション全般に見られる傾向を反映している。つまり、繰り返し触れるうちに、当初は不慣れなパターンも自然に身についていくのである。しかし、だからといってハンバーガーメニューが万全で普遍的に理解されているというわけではない。特に技術に疎い層や、見慣れないレイアウトでは理解されにくい。
また、この調査で検討したのは認識可能性のみであり、ハンバーガーメニューを伴うタスクの所要時間や成功率が年月とともに変化したかどうかは言及できない（過去のユーザビリティ上の問題は、アイコンの認識だけに起因するものではなく、気づきやすさ、記憶しやすさ、そしてパターン全体への慣れにも関係していた）。
注意：慣れが干渉になる場合
ハンバーガーメニューは広く普及したので、その視覚的形態（3本の積み重なった線）は今やユーザーのメンタルモデルに深く刻み込まれている。その結果、実際、まったく機能が異なる場合でも、類似した構造のアイコンはハンバーガーメニューと誤認されることがある。
この種の視覚的干渉は、リスト表示やフィルターアイコンなどの線ベースのアイコンが画面の左上隅に配置された場合に特に起こりやすい。この位置はサイトのメインナビゲーションと強く結びついているからだ。
たとえば、Appleのメモ（Apple Notes）のデスクトップアプリケーションでは、リスト表示アイコンが左上隅でギャラリー表示アイコンの隣に配置されていたが、従来のハンバーガーアイコンと区別するために箇条書きのような点が入っていたにもかかわらず、ユーザーはこれをしばしばナビゲーションメニューと解釈した。
ある参加者は次のように説明した：
一番左にあるのがハンバーガー（アイコン）です。展開するナビゲーションでしょう。展開して、追加のメニュー項目や機能のリストが表示されるはずです。
別の例として、YouTubeモバイルアプリの線ベースのフィルターアイコンも混乱を招いた。多くのユーザーがそれを（フィルタリングではなく、ナビゲーションやリスト表示の領域にあたる）カテゴリやお気に入りリストと解釈した。
この例は、アイコンが左上隅に配置されていなくても、ユーザーがひとまとまりの線をナビゲーションと強く結びつけることを示している。
デザインの教訓としては、ユーザーがナビゲーションを連想する位置で、リストやフィルター、コンテンツ表示などの線ベースのアイコンを使う際は注意が必要だということだ。特に左上隅に配置すると、これらのアイコンはハンバーガーメニューと誤認される可能性がある。加えて、認識しやすく、意味を正しく読み取れるよう、アイコンには必ずラベルを付けるようにしよう。
ハンバーガーアイコンのデザインに関する推奨事項
最近の調査により、ハンバーガーメニューが幅広いユーザーに認識されていることが裏づけられた。大半のユーザーはこのアイコンを、非表示メニューやカテゴリのリストを表すものと理解している。適切に実装すれば、ハンバーガーアイコンは効果的なナビゲーションツールになるだろう。
気づきやすく、ユーザブルなハンバーガーメニューの秘訣は今も変わらない。現在および将来にわたってユーザビリティを最大化するには、次のベストプラクティスに従うとよい：
- 標準的な3本線のアイコンを使用する：元々の3本線のハンバーガーアイコンはユーザーの期待に強く合致する。独創性は不要だ。ユーザーが期待するお馴染みのパターンを使おう。
- 左上隅に配置する：ユーザーは画面左上隅に非表示のナビゲーションがあるものとして一貫して視線を向ける。メニューを他の位置に配置すると、見落とされたり誤解されたりするリスクが高まる。
- 余分な装飾や枠線を入れない：アウトラインや枠のような装飾的な要素は、ユーザーがアイコンを別のもの（文書アイコンなど）と誤認する原因となる。
- アイコンに「メニュー」というラベルを付ける：ラベルは経験の浅いユーザーや、見慣れない状況でこのパターンを導入する際に特に役立つ。
- 控えめなアニメーションやトランジションを使用する：アイコンをタップするとナビゲーションパネルが表示される場合、控えめな動きの手がかりを入れることで、インタラクションの挙動を明確にし、ユーザーの期待を導くことができる。
- 他の3本線アイコンとの混同を避ける：リスト表示やフィルターのような、他の線ベースのアイコンとの区別には特に注意し、画面やパネルの左上隅に類似アイコンを配置しないようにしよう。
- ハンバーガーアイコンのサイズを適切に調整する：スマートフォン向けの大きさに設定されたハンバーガーアイコンは、大型のデスクトップ画面ではほとんど視認できなくなる。
- クリックできるような見た目にする：極端なフラットデザインは気づきやすさを損ない、インタラクションを制限する可能性がある。
- アイコンの周囲に余白を設ける：アイコンをヘッダーや他のUI要素と近づけすぎると、視認性が低下する。
- 十分なコントラストを確保する：低コントラストのアイコンは背景に溶け込み、特に視覚障害のあるユーザーにとっては識別しにくい。
- 追加のナビゲーション手段を提供する：インラインリンク、関連リンクの一覧、視認性の高い検索機能、フッターリンクでハンバーガーメニューを補完しよう。
これらの基本的なデザイン原則は変わっていない一方で、ハンバーガーメニューに関するユーザーの期待や行動は変化した。
とはいえ、ナビゲーションを非表示にする必要がないなら非表示にしない、という古いガイドラインは今も有効だ。今やほとんどのユーザーがハンバーガーメニューを認識しているが、非表示のナビゲーションは依然としてインタラクションコストを増大させる。ユーザーがメニュー項目にアクセスするために余分なステップを踏む必要があるからだ（さらに覚えておいてほしいのは、認識可能性が高まったからといって、ハンバーガーメニューを使ったタスクの所要時間や成功率が必ずしも変化したとは限らない）。
結論：最新の評決
ハンバーガーメニューは今やお馴染みの認識可能なパターンとなった。
しかしながら、慣れたからといって、その根本的なトレードオフが解消されるわけではない。ナビゲーションを非表示にすることは、常にインタラクションコストを発生させる。ユーザーは重要な選択肢にアクセスするために余分なステップを踏まなければならないし、重要度の高いコンテンツが視界から外れたままだからだ。
ハンバーガーメニューは思慮深く用いれば、特に画面スペースが限られる場合、効果を発揮する。お馴染みのデザイン、一貫した配置、そしてベストプラクティスの遵守が依然として重要なのである。
評決：ハンバーガーメニューは有効だが、万能ではない。賢く活用し、ベストプラクティスに従い、そのトレードオフを考慮して、常に（他のアイコンと合わせて）ユーザーとともにテストし、ユーザーのニーズを真に満たしているかどうか確認しよう。
関連情報
ハンバーガーメニューアイコンの進化とアイコンのユーザビリティに関するコンテキストとして、以下の資料を参照してほしい：
記事で述べられている意見・見解は執筆者等のものであり、株式会社イードの公式な立場・方針を示すものではありません。
