ハンバーガーボタン

ハンバーガーボタンとは

ハンバーガーボタンとは、グラフィカルユーザーインターフェース（GUI）において、画面上部の隅に配置されることが多いボタンのことで、3本の水平線で構成されています。この形状がハンバーガーに似ていることから、そのように名付けられました。また、ハンバーガーアイコンとも呼ばれています。

ハンバーガーボタンは、主にトグルメニュー（ハンバーガーメニューとも呼ばれる）やナビゲーションバーとして機能します。ボタンを操作することで、メニューが折りたたまれたり、画面上に展開されたりします。このアイコンは、折り畳みメニューアイコンとしても知られています。

歴史

ハンバーガーボタンの起源は、1981年にノーマン・コックスによってデザインされたXerox Starのユーザーインターフェースにまで遡ります。当時、コックスは「道路標識のようにシンプルで、機能を記憶しやすく、表示されるメニューのリストに似せる」ことを意図してデザインしたと述べています。 限られた画素数の中で、シンプルでありながら分かりやすいアイコンを追求した結果、このデザインが誕生しました。

その後、2009年頃から、スクリーン面積に制約のあるモバイルアプリケーションの普及に伴い、ハンバーガーボタンが再び注目されるようになりました。

Xerox Star以降で最初にハンバーガーボタンが採用された例として、1985年にリリースされたWindows 1.0が挙げられます。しかし、Windows 2.0では、コントロールメニューを示す1本の横線に置き換えられました。その後、Windows 95では各プログラムのアイコンに代わり、Windows 10 Anniversary Updateでスタートメニューに配置されるまで、ハンバーガーアイコンがWindowsに戻ることはありませんでした。

外観と機能

ハンバーガーボタンは、一般的に3本の水平線（≡）で構成されており、メニューのリストを暗示しています。ボタンを操作すると、メニューが展開され、アイコンが3つの垂直に並んだ点（⋮）に変わることもあります。Microsoft Office 365では、同様に3つの四角形が3列に並んだアプリケーションメニューが表示されます。

このボタンは、クリックやタップなどの操作によってメニューを表示し、常に画面上に表示されるメニューバーやタブバーとは区別されます。

メニューボタン操作後の変化としては、≡ボタンの上にメニューバーが重なる、≡ボタンが×ボタンに切り替わるなどがあります。×ボタンに切り替わる際には、アニメーションエフェクトが表示されることも多くあります。

批判

ハンバーガーボタンは広く普及していますが、初めて目にするユーザーにとっては、その機能がすぐに理解できないという批判もあります。特に、モダンなアイコン表現に慣れていないユーザーにとっては、混乱を招く可能性があります。

また、モバイルアプリケーションにおいては、画面スペースの節約に役立つ一方で、画面下部のメニューバーに比べて操作回数が増え、情報にたどり着くまでに時間がかかるという指摘もあります。さらに、デザイナーがハンバーガーアイコン内に情報を詰め込みすぎてしまい、情報が隠れてしまう傾向があるという意見もあります。

まとめ

ハンバーガーボタンは、そのシンプルさと省スペース性から広く採用されているUI要素ですが、その利便性だけでなく、ユーザーエクスペリエンスにおける課題も認識しておく必要があります。

関連事項

メニューキー
合同記号

もう一度検索