福岡・筑紫野のホームページ制作会社｜WEBプラネット

アコーディオンメニューの定義

アコーディオンメニュー（Accordion menu）とは、見出し（ヘッダー）をクリックまたはタップすると、その下に隠れているコンテンツが開閉するインタラクティブなUIの一種です。スペースを節約しつつ情報を階層的に表示するために使われます。

詳細説明

アコーディオンメニューは、FAQ、目次、ナビゲーション、用語集などでよく使われます。通常は HTML の見出しやボタン要素と CSS・JavaScript を組み合わせて実装され、以下の特徴があります。

• スペース効率：画面スペースを節約でき、特にモバイルで有効。
• 階層的表示：関連項目をまとめて折りたたみ、必要なときだけ展開できる。
• 操作性：キーボード操作（Tab / Enter / Space）やスクリーンリーダーに配慮した実装が重要。
• 技術実装：純CSSのみで簡易的に作る方法や、JavaScriptで高度な挙動（アニメーション、複数開閉の制御、状態保存など）を追加する方法がある。

アクセシビリティ面では、開閉ボタンに aria-expanded 属性を付け、開閉する領域に aria-controls や role="region" を設定するとスクリーンリーダーでの理解が進みます。また、見出しを <button> にすることでキーボード操作が自然になります。

活用例

• FAQページ：質問見出しをアコーディオンにして回答を折りたたむ。
• 用語集・目次：用語名や章タイトルをクリックして詳細を展開する。
• サイドバー／ナビゲーション：カテゴリやフィルタの選択肢を折りたたんで見せる。
• モバイルUI：画面が狭い環境で情報を整理するために使う。

実装時のベストプラクティスとしては、初期状態や開閉のアニメーションを適切に設定し、開いている項目が多すぎないようにすること、そしてキーボード／スクリーンリーダー対応を必ず行うことです。

関連用語

• UI（ユーザーインターフェース）
• UX（ユーザー体験）
• アクセシビリティ（WCAG、aria 属性）
• JavaScript / DOM 操作
• CSS トランジション・アニメーション
• FAQ（よくある質問）