ハンバーガーボタン（）は、ハンバーガーに似ていることからその名が付けられ、通常はグラフィカルユーザーインターフェース（GUI）の上隅に配置されるボタンです。[ 1 ] このボタンの機能は、メニュー（ハンバーガーメニューと呼ばれることもあります）またはナビゲーションバーをボタンの後ろに折りたたむか、画面上に表示するかを切り替えることです。このウィジェットに関連付けられた3本の水平バーで構成されるアイコンは、折りたたみメニューアイコンとも呼ばれます。
歴史
このアイコンは、1981年に発売されたゼロックス・スター・パーソナルコンピュータのユーザーインターフェースの一部として、ノーム・コックスによってデザインされました。 [ 2 ]コックスはアイコンの制作について次のように述べています。「このグラフィックデザインは、道路標識のようにシンプルで、機能的に記憶に残り、表示されるメニューリストの外観を模倣することを意図していました。使用できるピクセル数が非常に少ないため、非常に際立ちながらもシンプルである必要がありました。画像をレンダリングするために16×16ピクセルしかなかったと思います。（あるいは13×13だったかもしれません…正確には覚えていません。）[ 3 ]」
1985年にリリースされたWindows 1.0では、Xerox Star以降おそらく初めて、各ウィンドウのコントロールメニューにハンバーガーアイコンが採用されました。[ 4 ]しかし、このハンバーガーアイコンはWindows 2.0で消え、コントロールメニューを示す1本の水平線に置き換えられたため、短命に終わりました。Windows 95では、この1本の線がプログラムアイコンに置き換えられました。 [ 5 ]そして、ハンバーガーアイコンはWindows 10の1年ごとのアップデートでスタートメニューに配置されるまで、Windowsに再び登場することはありませんでした。[ 6 ]
コックスのハンバーガーアイコンは、モバイルアプリの画面領域が限られていることから、2009年から復活を遂げました。[ 7 ] [ 8 ] [ 9 ]
外観と機能性
アイコンは3本の平行な水平線で構成され、小さなメニューのテキスト行を模倣しています。[ 7 ] [ 10 ]画面の占有領域をさらに削減するために、縦に3つのドット（ ）に狭められることがあります。これはケバブボタン、ミートボールボタン、またはファラフェルボタン
と呼ばれていますが、それでも通常に見えるメニューがポップアップ表示されます。Microsoft Office 365とGoogleのオンラインアプリケーションでは、3列に3つの四角形（ ）で構成される同様のアイコンがメニューではなくアイコンの配列をポップアップ表示し、ワッフルボタンと呼ばれています。[ 11 ]
これらのボタンをクリックまたは押すと、垂直メニューが表示されます。これは通常、1項目のメニューやタブバーと同じです。[ 12 ]
類似の文字
 |
ハンバーガーボタンはテキスト文字ではなく、Unicodeでエンコードされていません。ただし、デザイナーはハンバーガーボタンを作成する際に、視覚的に類似した以下のテキスト文字を使用する場合があります。
ハンバーガーボタン
ケバブボタン
- U+1392 ᎒エチオピア・トーナル・マーク・リクリク
- U+205D ⁝トリコロン
- U+22EE ⋮縦の省略記号
- U+2D57 ⵗティフィナグ レター トゥアレグ ヤグ
- U+FE19 ︙縦横省略記号の表示形式
ワッフルボタン
- ケバブボタンの文字を3つ続けて表示します（例：⁝⁝⁝）
- U+25A6 ▦直交クロスハッチ塗りつぶしの正方形
- U+130D1 𓃑エジプト象形文字 D067H
受付
折りたたまれたメニューボタンは現在では一般的ですが、その機能は初めて見たときに必ずしもすぐには分からないという議論があります。 [ 13 ]特に、現代のアイコンに慣れていない年配のユーザーは混乱する可能性があります。[ 14 ]ハンバーガーメニューアイコンの位置も、特定のウェブサイトやアプリによって異なります。[ 15 ]
メニューボタンはメニューバーに比べてインタラクションコストが高く、画面のスペースを節約できるという利点があるものの、同じ情報を取得するために追加のクリックが必要になる場合があります。[ 16 ]また、デザイナーはこれらのアイコンに隠された情報を詰め込みすぎる傾向があるとも言われています。[ 14 ]
参照
- メニューキー
- トリプルバー § アプリケーション設計
- 省略記号 § コンピュータのユーザーインターフェースにおいて 、「その他のオプション」を示すために使用されます（非表示のオプション。折りたたまれたメニューアイコンはすべての非表示のオプションを示します）。
参考文献
- ^ 「メニューアイコンを作成する方法」 w3schools.com . 2018年9月5日時点のオリジナルよりアーカイブ。 2018年9月20日閲覧。
- ^ 「ハンバーガーアイコンの起源」 evernote.com . 2015年11月7日時点のオリジナルよりアーカイブ。2018年9月20日閲覧。
- ^ 「ハンバーガーアイコンの簡潔な歴史」 Placeitブログ、2014年10月29日。 2019年2月23日閲覧。
- ^ Ali, Fahad (2015年5月13日). 「Microsoftが初めて物議を醸したハンバーガーメニューを使用したのは1985年」 . windowschimp.com . 2021年4月1日時点のオリジナルよりアーカイブ。 2019年6月12日閲覧。
- ^ Doppelhammer, Jim. 「Windows Elements」 . doublehammer.com . 2019年6月12日閲覧。
- ^ Shaikh, Rafia (2016年4月4日). 「Windows 10 Anniversary Start Menu の新機能」 . wccftech.com . 2019年6月12日閲覧。
- ^ a b Campbell-Dollaghan, Kelsey (2014年3月31日). 「ハンバーガーアイコンをデザインしたのは誰？」 Gizmodo . 2016年2月6日時点のオリジナルよりアーカイブ。 2016年2月2日閲覧。
- ^ 「ハンバーガーアイコンの簡潔な歴史」placeit.net、2014年10月29日。2017年2月2日時点のオリジナルよりアーカイブ。2017年1月25日閲覧。
- ^ 「レスポンシブWebデザインには標準的なナビゲーションアイコンが必要」 Stuff & Nonsense 2012年3月17日. 2018年9月20日時点のオリジナルよりアーカイブ。 2018年9月20日閲覧。
- ^ Lessin, Jessica (2013年3月18日). 「What's a 'hamburger' button? A guide to app features」 . The Wall Street Journal . Dow Jones & Company . 2015年4月16日時点のオリジナルよりアーカイブ。 2015年4月10日閲覧。
- ^ Nguyen, Chuong (2015年6月26日). 「Office 365 Store、Webアプリへのシングルサインオンで時間を節約」 . Tech Radar Pro . 2018年2月9日時点のオリジナルよりアーカイブ。 2018年2月8日閲覧。
- ^ Constine, Josh (2014年5月24日). 「ハンバーガーボタンを廃止せよ」 . TechCrunch . 2016年8月19日時点のオリジナルよりアーカイブ。2015年4月10日閲覧。
- ^ Stokel-Walker, Chris (2015年5月16日). 「ハンバーガーアイコン：この3本の線が多くの人を惑わす理由」 BBC . 2018年2月20日時点のオリジナルよりアーカイブ。 2018年10月11日閲覧。
- ^ a b「ハンバーガーアイコンへの愛と憎しみ」 Webdesigner Depot 2018年9月17日2019年2月23日閲覧。
- ^ Tsiodoulos, Dimitrios (2016).モバイルデバイスにおける3階層ナビゲーションのためのハンバーガーメニューとボトムバーメニューの比較(PDF) (論文). 2018年6月13日時点のオリジナルよりアーカイブ(PDF) 。 2018年6月13日閲覧。
