ハンバーガーボタン

出典: フリー百科事典『ウィキペディア(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月20日閲覧。
  2. ^ The origin of the hamburger icon”. 2018年9月20日閲覧。
  3. ^ a b Campbell-Dollaghan, Kelsey (2014年3月31日). “Who Designed the Hamburger Icon?”. Gizmodo. 2016年2月2日閲覧。
  4. ^ A Brief History of the Hamburger Icon”. placeit.net (2014年10月29日). 2017年1月25日閲覧。
  5. ^ Ltd., Stuff & Nonsense. “We need a standard show navigation icon for responsive web design”. 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 (2013年3月18日). “What’s a ‘hamburger’ button? A guide to app features”. The Wall Street Journal (Dow Jones & Company). https://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/ 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月8日閲覧。
  12. ^ Constine, Josh (2014年5月24日). “Kill the hamburger buttons”. TechCrunch. 2015年4月10日閲覧。
  13. ^ wired”. https://wired.jp/.+2020年1月20日閲覧。
  14. ^ CSSで実装するハンバーガーメニュークリック時のエフェクト 10+”. 2020年1月20日閲覧。
  15. ^ Stokel-Walker, Chris (2015年5月16日). “Hamburger icon: How these three lines mystify most people”. https://www.bbc.co.uk/news/magazine-31602745 2018年10月11日閲覧。 
  16. ^ a b 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時点におけるアーカイブ。, https://web.archive.org/web/20180613235022/http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf 2018年6月13日閲覧。 

関連項目[編集]