Webサイト・アプリのUIで見かけるトグルアイコン。
「ハンバーガーアイコンとトグルアイコンって同じもの？」「UIデザインでどう使い分けるの？」と疑問を持つ方も多いでしょう。
本記事では、トグルアイコンの種類・意味・UIデザインでの効果的な使い方を解説していきます。
トグルアイコンとは「タップで表示/非表示を切り替えるUI要素を示すアイコン」の総称である
それではまず、トグルアイコンの定義と種類を解説していきます。
トグルアイコンの主な種類：①ハンバーガーアイコン（≡）：横3本線・メニューの表示/非表示切替②シェブロン（∨・∧）：展開/折りたたみを示す矢印③プラス/マイナスアイコン（+/-）：コンテンツの展開/折りたたみ④目のアイコン（👁）：表示/非表示の切替⑤チェック/空欄アイコン：選択のON/OFF。これらはすべて「タップで状態を切り替える」というトグル動作を視覚化したアイコン。
ハンバーガーアイコンの意味と使い方
最も有名なトグルアイコンがハンバーガーアイコン（≡）です。
横3本線がハンバーガーに見えることから命名されたこのアイコンは、タップするとナビゲーションメニューが表示・非表示される動作のトリガーとして使われます。
スマートフォンのモバイルナビゲーションで特に多く使われており、PCではヘッダーのメニューボタンとして採用されることもあります。
アクセシビリティの観点からはアイコンのみでなく「メニュー」などのテキストラベルを付けることが推奨されています。
アコーディオンUIとトグルアイコン
FAQページ・設定リスト・コンテンツ折りたたみに使われるアコーディオンUIでは、シェブロン（∨・∧）またはプラス/マイナスアイコンがトグルアイコンとして機能します。
閉じた状態では∨（または+）・開いた状態では∧（または-）と切り替わることで、現在の状態をユーザーに伝えます。
状態変化に応じてアイコンが変わることがUXの重要な要件です。
ダークモード切替アイコン
ダークモード/ライトモードの切替ボタンも代表的なトグルアイコンの一例です。
太陽アイコン（☀️）または月アイコン（🌙）をトグルアイコンとして使い、クリックで表示テーマを切り替えます。
現在の状態（ライトモード表示中は「ダークモードに切り替え」の意味で月アイコンを表示する等）を示すか次の状態を示すかは設計判断ですが、一貫性が重要です。
UIデザインにおけるトグルアイコンのベストプラクティス
続いては、効果的なトグルアイコンの設計原則を確認していきましょう。
| 原則 | 内容 | 悪い例 |
|---|---|---|
| 状態の明確化 | ON/OFFが一目でわかるデザイン | 色だけで区別（カラーユニバーサル非対応） |
| アイコン+ラベル | アイコンのみでなくテキストも付ける | ≡アイコンのみで意味不明 |
| 状態変化のフィードバック | タップ後にアイコンが変化する | タップしても見た目が変わらない |
| タッチターゲットサイズ | 最低44×44px以上 | 小さすぎてタップしにくい |
アクセシビリティ対応
トグルアイコンのアクセシビリティ対応として、HTMLではaria-expanded属性とaria-label属性の設定が重要です。
aria-expanded=”true/false”で開閉状態をスクリーンリーダーに伝え、aria-labelでボタンの目的（「メニューを開く」等）を明示します。
キーボード操作（Enterキー・スペースキーでの操作）にも対応することが、アクセシブルなUI設計の基本です。
まとめ
本記事では、トグルアイコンの種類・意味・UIデザインでの使い方・アクセシビリティ対応について解説してきました。
トグルアイコンは「状態の切り替えを視覚化するアイコン」であり、ハンバーガーメニュー・アコーディオン・ダークモード切替など多様な場面で活躍します。
状態の明確化・ラベルの追加・アクセシビリティ対応を意識した設計が、使いやすいUIの実現につながります。
