ハンバーガーアイコン・とは？初心者が押さえる基本と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

ハンバーガーアイコンとは？

ウェブサイトやアプリの画面で「三本線」のマークを見たことがありますか？これを指すのが ハンバーガーアイコン です。見た目はシンプルな 三本の水平線 ですが、実はとても大切なUI部品です。アイコンをクリックするとメニューが開くことが多く、画面を広く使えるように設計されています。

なぜ「ハンバーガーアイコン」と呼ぶのでしょうか。理由はその形が ハンバーガー の中に挟まれた層を連想させるからという説と、三本線が重なって一つのアイコンになる様子が名字のように見えるからと説明されます。ただしアイコン自体は料理のハンバーガーとは関係がなく、名称は比喩的なものです。

使われ方と役割

多くのサイトやアプリでは、スマホや小さな画面のナビゲーション を隠す代わりに ハンバーガーアイコン を画面の端に配置します。ユーザーがクリックすると、サイドメニュー や ドロワー 形式のメニューが表示される仕組みです。これにより、情報を詰め込みすぎず、主要なコンテンツを先に見せることができます。

ただし、必ずしも全てのサイトで最適というわけではありません。検索機能や「メニュー」といった文字を先に表示したほうが使いやすい場合もあります。ポイントは 目的と状況に合わせた設計 をすることです。

アクセシビリティのポイント

アイコンだけに頼らず、代替テキスト や ARIAラベル などで何を開くのかを伝えることが大切です。キーボードで操作できること、スクリーンリーダーに正しく読み上げられることも欠かせません。画面リーダーを使う人も、直感的に使えるよう注意深く作りましょう。

デザインの工夫とバリエーション

基本の三本線のほかにも、状況に合わせたデザインが増えています。例えば、開くと線が上と下に動くアニメーションや、長い線を使って別の形に変化させる工夫などがあります。日常的には 「メニュー」 という文字を併記することで、初めての人にも優しくなります。

実装の基本と注意点

実装の考え方はシンプルです。ボタンとして実装すること、クリックで 隠れているメニューを表示 すること、そしてレスポンシブ対応を行うことです。ここでは難しいコードの話はせず、考え方だけを押さえましょう。

メリットとデメリットの比較

<th>メリット

画面をすっきり見せられる。小さな画面でもナビを隠せる。
デメリット	情報が隠れてしまい、初回訪問者が使い方を直感できないことがある。

ハンバーガーアイコンを使うときは、目的と状況を見極めることが重要です。初回訪問者には、最初の画面に 重要なリンクを表示 し、補助的なメニューを アイコンで隠す のバランスを考えましょう。テキストの有無、アイコンの大きさ、タップしやすさも大切な要素です。

まとめ

この ハンバーガーアイコン は、モバイルファーストの設計 でよく使われるUI部品です。使い方次第で、サイトの使い勝手を大きく変える可能性があります。デザイナーや開発者は、アクセシビリティと使いやすさを最優先に考え、必要に応じて代替テキストや名前をつけるなどの工夫をしましょう。

ハンバーガーアイコンの同意語

ハンバーガーアイコン: 三本の横線から成るアイコンで、画面上のナビゲーションメニューを開くボタンとして広く使われます。
ハンバーガーメニュー: ハンバーガーを用いたメニュー全体、またはそれを開くボタンとして使われる名称。主にモバイルやレスポンシブデザインで使われます。
三本線アイコン: 三本の横線で構成されたアイコン。メニューを開くボタンとして広く認識されています。
三本線メニューアイコン: 三本線デザインのメニューを開くアイコン。スマートフォンなど小さな画面でよく使われます。
三本線ボタン: 三本線で構成されたボタン形式のアイコンで、メニューを開く役割を持ちます。
ハンバーガーボタン: ハンバーガー形状のアイコンを指すボタン名。メニューを開く操作部品として使われます。
ドロワーメニューアイコン: サイドドロワー（横からスライドして表示されるメニュー）を開くための三本線デザインのアイコン。
ナビゲーションアイコン: サイト内のナビゲーションを開くためのアイコン。一般にはメニュー開閉を示すアイコンとして使われます。
ナビゲーションボタン: ナビゲーションを開くボタン。メニューアイコンと同義で使われることが多いです。
メニューアイコン: メニューを開くためのアイコン全般を指す総称的な名称。
メニューボタン: メニューを開くためのボタン全般を指す名称。アイコン形状を問わず使われます。
横線アイコン: 三本の横線で構成されるアイコンを指す呼称。メニューを開くボタンとして理解されやすいです。
3本線アイコン: 数字の3と横方向の線で構成されるアイコン。三本線デザインのメニューを開くアイコンとして用いられます。

ハンバーガーアイコンの対義語・反対語

Xアイコン: ハンバーガーアイコンの対義語として最も一般的な表現。画面上のメニューを閉じるための小さなXマークのアイコンで、現在表示中のメニューを閉じる動作を示します。
閉じるアイコン: メニューやパネルを閉じる機能を表すアイコン。ハンバーガーアイコンの対義として頻繁に使われます。
クローズアイコン: 英語の Close をそのままカタカナ化した表記。モーダルやサイドバーなどを閉じるときに用いられることが多いです。
×ボタン: ウィンドウやダイアログ、メニューを閉じるための×印のボタン。開いているものを閉じる際に使われます。
閉じるボタン: メニューやダイアログを閉じる操作を促す文字情報のボタン。アイコンとともに使われることがあります。
メニューを閉じるアイコン: 開いているメニューを閉じる目的を明示するアイコン名。ドロワー閉じなどに使われます。
ドロワー閉じるアイコン: 横から現れるサイドメニュー（ドロワー）を閉じるためのアイコン。実務ではXマークや矢印などが使われます。
メニュー非表示状態: メニューが表示されていない状態を指す表現。ハンバーガーアイコンの反対の、非表示・閉じた状態を説明するときに使います。

ハンバーガーアイコンの共起語

ハンバーガーアイコン: ウェブやアプリでメニューを開くボタンとして使われる、3本の横線から成るアイコンです。
三本線: ハンバーガーアイコンを構成する3本の水平線のこと。
メニュー: サイト内のリンク群、ナビゲーションの集合。
ナビゲーション: サイト内の移動先やリンクの集合。ユーザーの移動をサポートする要素。
メニューボタン: メニューを表示・非表示にするボタンのこと。
ドロワー / ドロワーメニュー: 画面の横からスライドして現れるメニュー領域。
レスポンシブデザイン: 画面サイズに合わせて表示を切り替える設計思想。スマホではハンバーガーが使われやすい。
モバイル: スマートフォンなどの携帯端末。
アクセシビリティ: 誰もが使えるよう、読み上げやキーボード操作などを配慮する設計。
aria-label: スクリーンリーダーに読み上げる説明を設定する属性。
aria-expanded: メニューが開いている・閉じているを示す属性。
aria-controls: この要素が制御する対象を示す属性。
role=navigation: スクリーンリーダーにナビゲーション領域を示すための役割設定。
クロスアイコン / Xアイコン: メニューを閉じる状態を表すアイコン。
CSS: 見た目を整えるスタイルを定義する言語。
SVG: ベクター形式でアイコンを描くためのデータ形式。
アイコンフォント: フォントとして使えるアイコンの集合。
アニメーション: クリック時や開閉時の動きをつける演出。
変形アニメーション: 3本線がX形などに変化する動き。
色 / カラー: アイコンの色。背景とのコントラストが重要。
タッチ領域 / タップ判定: スマホで指で操作できる大きさと反応性。
ユーザビリティ: 使い勝手の良さを指す指標。
クリック / タップ: 入力操作の基本。

ハンバーガーアイコンの関連用語

ハンバーガーアイコン: 横向きの3本線から成るアイコンで、メニューを開く/閉じる操作を示すUI要素。モバイルや狭い画面でスペースを節約するために用いられる。
三本線アイコン: ハンバーガーアイコンと同義の呼称。見た目は3本の水平線。
ハンバーガーメニュー: ハンバーガーアイコンをタップ・クリックして表示されるメニュー。多くは画面左側からスライドするドロワー形式が一般的。
メニューボタン: メニューの開閉を操作するボタン。aria-expandedなどで状態を伝えるとアクセシビリティが向上する。
ナビゲーションメニュー: サイト全体の主要リンクの集合。ハンバーガーアイコンの下に表示されることが多い。
ドロワー / ドロワーメニュー: 画面の端からスライドして現れるメニュー領域。閉じるボタンを備えることが多い。
サイドドロワー: 左または右側から現れる縦型メニュー。
オフキャンバスメニュー: 画面外の領域に格納されたメニューを、表示時に画面内へスライドして表示する設計。
レスポンシブデザイン: デバイスの画面サイズに応じてレイアウトを変える設計思想。ハンバーガーアイコンは小画面での定番要素。
モバイルナビゲーション: スマホなどの狭い画面向けのナビゲーション設計の総称。
アクセシビリティ: 視覚・運動・知的障害を持つ人も利用できるように配慮する設計。
ARIA属性: スクリーンリーダーなど補助技術への情報伝達を目的とした属性群。aria-expanded、aria-controls などが関連する。
開閉状態: ハンバーガーの開閉状態を表す指標。aria-expandedで現在の状態を伝えることが重要。
アニメーション / トランジション: アイコンの形状が変化したり、メニューが表示/非表示になる際の動き。UXを滑らかにする。
Xアイコン / 閉じるアイコン: ハンバーガーが開くとX形状などの閉じるアイコンへ変化するパターン。
アイコン実装方法: SVG、アイコンフォント、CSSで作成する方法がある。
SVGハンバーガーアイコン: SVGで3本線のハンバーガーを描く実装。解像度が高く拡大にも強い。
CSSのみハンバーガー: CSSの擬似要素を使って3本線を描く軽量な実装方法。
ヒットボックス: アイコンをタップ/クリックしやすいよう、適切なサイズと余白を確保すること。
画面幅ブレークポイント: 特定の幅でハンバーガーを表示/非表示に切替える設定。
代替表示パターン: 大画面では横並びのメニューを表示し、狭い画面ではハンバーガーへ切替えるといった設計。
ユーザー体験/UX影響: 使いやすさ、発見性、操作性に影響。過度な使用はUXを損ねる場合もある。
パフォーマンス最適化: 軽量な実装が推奨。アイコンの遅延読み込みやCSS/JSの最適化が重要。
実装フレームワーク: BootstrapやTailwindなどのUIフレームワークには、ハンバーガーアイコンを含むナビ部品が用意されている。
テスト・アクセシビリティ検証: キーボード操作やスクリーンリーダーでの動作、ARIA属性の正しさを検証する。