ハンバーガー‐メニュー【hamburger menu】
ハンバーガーメニュー
【英】hamburger menu, hamburger button
ハンバーガーメニューとは、主にスマートフォン向けウェブサイトやウェブアプリのUIに用いられる、等幅の横線が「三」の字に並んだアイコンの通称である。
ハンバーガーメニューは画面の右上や検索ボックスの右端などに設置されることが多い。機能は、いわゆるプルダウンメニューと同じである。メニューをタップすることでアクセス可能なページや機能の一覧が表示される。
ハンバーガーメニューは、HTML/CSSのコーディングだけで設置できる手軽さや、フラットデザインに合うシンプルな表示が好まれている。スマホ向けページと揃えるようにしてPC向けウェブサイトにハンバーガーメニューを設置しているウェブサイトも少なくない。
ハンバーガーボタン
ハンバーガーボタン（英語: hamburger button）とは、一般にグラフィカルユーザインタフェース (GUI) の画面上部の隅に配置されるボタンである。
図らずもハンバーガーに似ていることから、そのように名付けられた[1]。ハンバーガーアイコンともいう。トグルメニュー（ハンバーガーメニューと呼ばれることもある）もしくはナビゲーションバーとして機能し、ボタン操作によって折り畳まれたり、画面上に表示されたりする。
3本の横線で構成されるこのウィジェットに結び付けられるアイコンは、折り畳みメニューアイコン (collapsed menu icon) としても知られる。
歴史
このアイコンはノーマン・コックスによって初めてデザインされ、1981年にXerox Starのユーザインタフェースの一部として導入された[2]。2009年からは、スクリーン面積に制約があるモバイルアプリケーションの普及に伴い、復活することとなった[3][4][5]。このアイコンの作成について、コックスは「『道路標識』のように極めてシンプルで、機能を記憶しやすく、表示されるメニューのリスト（一覧）に似せることを意図してデザインした。ごくわずかな画素数でも扱うことができ、シンプルながらも判りやすくなければならなかった。我々は16x16ピクセルだけで画像を表示させた（13x13だったかも…はっきり憶えていないが…）」と述べている[6]。
Xerox Star以降で最初にハンバーガーボタンが採用されたと推定される事例は、1985年にリリースされたWindows 1.0であり、各画面のコントロールメニューにハンバーガーアイコンが含まれていた[7]。もっともこれはアイコンとしては短命に終わり、Windows 2.0ではコントロールメニューを示す1本の横線に置き換えられた。
Windows 95では1本の横線からそれぞれのプログラム自身が持つアイコンに代わり[8]、Windows 10 Anniversary Updateでスタートメニューに配置されるまで、ハンバーガーアイコンがWindowsに戻ってくることはなかった[9]。
外観と機能
“メニュー”ボタンは、端を揃えて並べられた3本の横線によりリストを暗示する、アイコンによって構成される（≡のように表示される）[3]。この名称は、アイコンの操作によって展開されるメニューに似せていることによる[10]。メニューが表示された状態ではアイコンが3個の垂直に並べられた点に変わる（⋮のように表示される）。Microsoft Office 365では、これと同様の3個の四角形が3列に並べられたアプリケーションメニューが表示される[11]。タップやクリックなどのボタン操作によってメニューが展開され、常に画面上に表示されるメニューバーもしくはタブバーと区別される[12]。
メニューボタンを操作した後の種類として他には、≡ボタンの上にメニューバーが重なるもの、≡ボタンが×ボタンに切り替わるもの[13]などがある。×ボタンに切り替わるパターンでは、アニメーションするエフェクトを表示するものも多い[14]。
批判
折り畳みメニューアイコンがありふれた存在となった一方で、初めて対峙した際にその機能が必ずしも一目瞭然ではない、との議論がある[15]。特に、モダンな象徴的表現に馴染みの薄い古参のユーザーにとっては混乱を招きやすい[16]。
モバイルアプリケーションにおいてスクリーン面積の節約に役立つのと引き替えに、メニューボタンは画面下端のメニューバーと比較してインタラクションコストが増大し、同じ情報を得るためにより多くのクリック回数が必要となる[17]。また、デザイナーがこれらのアイコン内に過剰に情報を詰め込んで、情報を隠したがる傾向がみられるとする議論もある[16]。
脚注
出典
- ^ “How To Create a Menu Icon”. www.w3schools.com. 2018年9月5日時点のオリジナルよりアーカイブ。2018年9月20日閲覧。
- ^ “The origin of the hamburger icon”. 2015年11月7日時点のオリジナルよりアーカイブ。2018年9月20日閲覧。
- ^ a b Campbell-Dollaghan, Kelsey (2014年3月31日). “Who Designed the Hamburger Icon?”. Gizmodo. 2016年2月6日時点のオリジナルよりアーカイブ。2016年2月2日閲覧。
- ^ “A Brief History of the Hamburger Icon”. placeit.net (2014年10月29日). 2017年2月2日時点のオリジナルよりアーカイブ。2017年1月25日閲覧。
- ^ Ltd., Stuff & Nonsense. “We need a standard show navigation icon for responsive web design”. 2018年9月20日時点のオリジナルよりアーカイブ。2018年9月20日閲覧。
- ^ “A Brief History of the Hamburger Icon” (英語). Placeit Blog (2014年10月29日). 2019年2月23日閲覧。
- ^ Ali, Fahad (2015年5月13日). “Microsoft First Used The Controversial Hamburger Menu In 1985”. windowschimp.com. 2019年6月12日閲覧。
- ^ Doppelhammer, Jim. “Windows Elements”. doublehammer.com. 2019年6月12日閲覧。
- ^ Shaikh, Rafia (2016年4月4日). “Here's How the New Windows 10 Anniversary Start Menu Looks Like”. wccftech.com. 2019年6月12日閲覧。
- ^ 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 saves time with single sign-on to web apps”. Tech Radar Pro. 2018年2月9日時点のオリジナルよりアーカイブ。2018年2月8日閲覧。
- ^ Constine, Josh (2014年5月24日). “Kill the hamburger buttons”. TechCrunch. 2016年8月19日時点のオリジナルよりアーカイブ。2015年4月10日閲覧。
- ^ “WIRED.jp”. CONDE NAST JAPAN. 2022年1月19日閲覧。
- ^ “CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋”. 2020年1月20日閲覧。
- ^ Stokel-Walker, Chris (2015年5月16日). “Hamburger icon: How these three lines mystify most people”. オリジナルの2018年2月20日時点におけるアーカイブ。 2018年10月11日閲覧。
- ^ a b “Loving & Hating the Hamburger Icon” (英語). Webdesigner Depot (2018年9月17日). 2019年2月23日閲覧。
- ^ Tsiodoulos, Dimitrios (2016), Comparison of hamburger and bottom bar menu on mobile devices for three level navigation, オリジナルの2018-06-13時点におけるアーカイブ。 2018年6月13日閲覧。
関連項目
 | この項目は、コンピュータに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。 |
- ハンバーガー･メニューのページへのリンク
