コンテンツにスキップ

ハンバーガーボタン

出典: フリー百科事典『ウィキペディア（Wikipedia）』
ハンバーガーボタンのアイコン
名称の由来であるハンバーガー
ウィキペディア日本語版の「ハンバーガーボタン」の記事のモバイルビュー。左上にハンバーガーボタンが見える。

ハンバーガーボタン（英語: 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]。

脚注

[編集]

出典

[編集]
  1. ↑ “How To Create a Menu Icon”. www.w3schools.com. 2018年9月5日時点のオリジナルよりアーカイブ。2018年9月20日閲覧。
  2. ↑ “The origin of the hamburger icon”. 2015年11月7日時点のオリジナルよりアーカイブ。2018年9月20日閲覧。
  3. 1 2 Campbell-Dollaghan, Kelsey (2014年3月31日). “Who Designed the Hamburger Icon?”. Gizmodo. 2016年2月6日時点のオリジナルよりアーカイブ。2016年2月2日閲覧。
  4. ↑ “A Brief History of the Hamburger Icon”. placeit.net (2014年10月29日). 2017年2月2日時点のオリジナルよりアーカイブ。2017年1月25日閲覧。
  5. ↑ Ltd., Stuff & Nonsense. “We need a standard show navigation icon for responsive web design”. 2018年9月20日時点のオリジナルよりアーカイブ。2018年9月20日閲覧。
  6. ↑ “A Brief History of the Hamburger Icon” (英語). Placeit Blog (2014年10月29日). 2019年2月23日閲覧。
  7. ↑ Ali, Fahad (2015年5月13日). “Microsoft First Used The Controversial Hamburger Menu In 1985”. windowschimp.com. 2019年6月12日閲覧。
  8. ↑ Doppelhammer, Jim. “Windows Elements”. doublehammer.com. 2019年6月12日閲覧。
  9. ↑ Shaikh, Rafia (2016年4月4日). “Here's How the New Windows 10 Anniversary Start Menu Looks Like”. wccftech.com. 2019年6月12日閲覧。
  10. ↑ Lessin, Jessica (March 18, 2013). “What’s a ‘hamburger’ button? A guide to app features”. The Wall Street Journal. Dow Jones & Company. 2015年4月16日時点のオリジナルよりアーカイブ. 2015年4月10日閲覧.
  11. ↑ 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日閲覧。
  12. ↑ Constine, Josh (2014年5月24日). “Kill the hamburger buttons”. TechCrunch. 2016年8月19日時点のオリジナルよりアーカイブ。2015年4月10日閲覧。
  13. ↑ “WIRED.jp”. CONDE NAST JAPAN. 2022年1月19日閲覧。
  14. ↑ “CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋”. 2020年1月20日閲覧。
  15. ↑ Stokel-Walker, Chris (16 May 2015). “Hamburger icon: How these three lines mystify most people”. BBC. 2018年2月20日時点のオリジナルよりアーカイブ. 2018年10月11日閲覧.
  16. 1 2 “Loving & Hating the Hamburger Icon” (英語). Webdesigner Depot (2018年9月17日). 2019年2月23日閲覧。
  17. ↑ Tsiodoulos, Dimitrios (2016), Comparison of hamburger and bottom bar menu on mobile devices for three level navigation, オリジナルの2018-06-13時点におけるアーカイブ。 2018年6月13日閲覧。

関連項目

[編集]
「https://ja.wikipedia.org/w/index.php?title=ハンバーガーボタン&oldid=105399805」から取得