ハンバーガー メニュー — またはハンバーガー アイコン — は、アプリについて話すときによく使用される用語です。お腹が空くかもしれませんが、食べ物とは関係ありません。このふざけた名前はどこから来たのでしょうか、そしてメニューは何をするのでしょうか？
ハンバーガーアイコンの歴史
ハンバーガー アイコン — メニュー、シンボル、ボタンなど — は 1981 年から存在します。これは、最初の商用パーソナル コンピュータである Xerox Star のグラフィックス リーダーである Norm Cox によって作成されました。
Norm は、メニュー選択のコンテナーとしてシンボルをデザインしました。水平線は垂直リストを抽象的に表したものです。以下のビデオの 21:15 あたりから、Xerox Star でハンバーガー メニュー ボタンが動作しているのを見ることができます。
当時のデザイン上の制約もあって、このシンボルは非常にシンプルになるように意図されていました。それは約 16×16 ピクセルしかないため、明確で簡単に見える必要がありました。 3 本の太い線がその目標を達成しました。
ハンバーガーのアイコンが主流の意識に爆発的に浸透したのは、スマートフォンとモバイル アプリが登場してからでした。画面スペースが限られているということは、オプションをメニューの中に押し込む必要があることを意味しており、それを示すためにハンバーガーのアイコンが人気の選択肢となっています。
モバイルアプリにおけるハンバーガーアイコンの歴史はもう少し曖昧です。 2008 年に「Tweetie」 と呼ばれる Twitter アプリで最初に使用されたと考えられます。その直後、Apple の iPhone 用 iOS オペレーティング システムに採用されるようになり、これがモバイル アプリのデザインでの人気につながったと考えられます。
ハンバーガーアイコンは何のためにあるのでしょうか？
前述したように、ハンバーガー アイコンの本来の目的は、オプションのリストを含むメニューとして機能することでした。そこからデザインが生まれます。通常、メニューには縦方向のリストにオプションが含まれるため、3 行が重なって表示されます。
現在でもハンバーガー アイコンはその目的で使用されていますが、その目的はモバイル アプリで拡大されています。現在では、画面の横からスライドして表示されるメニューによく使用されています。 (このタイプのメニューは「サイドバー」メニューと呼ばれることもあります。)
Android 用 Gmail アプリで使用されているハンバーガー アイコンの例を次に示します。アイコンをタップすると、画面のその側からメニューが開きます。
ハンバーガー アイコンは Windows 10 のスタート メニューにもあります。アイコンの上にマウスを置くかクリックすると、設定、電源、その他のユーザー オプションのショートカットが展開されます。
ハンバーガーのアイコンは単なる記号であり、「メニュー」を意味するようになりました。一度探し始めると、どこにでも見つかります。
なぜ「ハンバーガー」メニューと呼ばれるのですか？
デザイナーの ジェフ・アルデイ の研究のおかげで、ハンバーガーのアイコンの歴史がかなり詳しく明らかになりました。しかし、なぜ、いつ「ハンバーガー」というあだ名がついたのかはよくわかっていません。
このニックネームが、上部のバンズ、バーガーのパティ、下部のバンズに似ている 3 本の線に由来していることには誰もが同意しているようです。しかし、そのつながりを最初に作ったのは誰でしょうか?よくわかりません。ノーム・コックスは冗談めかしてそれを窓の「通気口」と呼んでいるとだけ言及している。
人間はどうやら食べ物を多くのものに見ているようです。
ハンバーガーメニューに対する反論
誰もがどこにでもあるハンバーガーのアイコンのファンというわけではありません。近年、アプリデザイナーはアプリから離れ始めています。
ハンバーガーのアイコンは、(厳格な制約を設けて) 非常にシンプルにデザインされました。その単純さが時には欠点になることもあります。あまり説明的ではないため、慣れていない場合は見落としてしまう可能性があります。
ナビゲーション バーは、メニュー項目を整理するためのより一般的な方法になっています。何も説明のないボタンの後ろにすべてを押し込むのではなく、複数のアイコンをテキスト付きのバー上に配置できます。これは誰にとってもはるかに理解しやすいです。
ただし、ナビゲーション バーはすべてのアプリで機能するわけではないため、ハンバーガー アイコンが表示されるのが一般的です。さらに人気があるのは、Android 版 Chrome で以下に示すように、メニュー アイコンとして 3 つの点を使用することです。
(How-To Geek のモバイル Web サイトでは、ボタンの下にハンバーガー メニューのアイコンが表示されます。Web サイトでもよくこのデザインが使用されています。)
ハンバーガーとソフトウェア設計についてはよく話題になります。知っておく必要があるのは、ハンバーガー メニューは通常、垂直方向に 3 つの水平線が並んでいるということだけです。 3つの点にも注目してください。メニューやその他のオプションを探している場合は、これらのボタンを使用します。さあ、マスタードを渡してください。
