アコーディオンメニューとは？使い所とUI/SEOの基本を解説
アコーディオンメニューの概要と重要ポイント
アコーディオンメニューは見出しをクリックすると内容を開閉できるUIです。情報量が多いページでも視認性を保ち、回遊の邪魔を減らせます。ただし乱用すると発見性が下がるため、まずは 折りたたみの初期状態 と開閉の手掛かりを適切に設計することが重要です。
アコーディオンメニューの定義（意味としくみ）
関連する要素群を見出し（トリガー）とパネル（内容）に分け、クリックやEnter/Spaceでパネルを開閉します。HTMLの<details><summary>や、ボタン＋ARIA属性（aria-expanded、aria-controls）で実装できます。アニメーションは高さや変形をCSSトランジションで滑らかにし、状態はURLフラグやLocalStorageで保持すると再訪時の体験が向上します。
実務での論点（使い分け・設計・落とし穴）
FAQや補足説明、二次的ナビゲーションに向いています。一方、主要メニューや重要導線を隠すのは不適切です。フォーカス輪郭の可視化、アイコンの回転など視覚的フィードバックも併せて検討します。特に キーボード操作対応 は必須で、矢印キーによる移動やEscapeの挙動も一貫させます。
- 用途の見極め：一次情報は開いたまま、補足は折りたたむ
- 実装選択：簡易ならdetails、制御が必要ならARIA＋JS
- 操作性：Enter/Spaceで開閉、Tab順序とフォーカス可視を担保
- 視覚手掛かり：矢印アイコンの回転、開閉状態のコントラスト
- 状態保持：初期開閉を文脈で決め、必要に応じて記憶
比較・使い分け表
| 項目 | 意味 | 用途 |
|---|---|---|
| details/summary | ネイティブ開閉UIを提供するHTML要素 | FAQや単純な折りたたみ。JS最小で可用 |
| ボタン＋ARIA | buttonにaria-expanded等を付与して制御 | 複数連動・アニメ・状態保持など高度制御 |
| タブUI | 複数パネルから1つを切替表示 | 同一階層の比較・切替が中心の情報提示 |
| ドロワー/メガメニュー | ナビ全体を展開する大型メニュー | グローバルナビ。一次導線は隠しすぎない |
運用上の注意（SEO・アクセシビリティ）
折りたたみ内のテキストも通常はクロール対象ですが、ユーザーが発見しづらいと実際の評価に結びつきません。パンくずや関連リンクなど 主要導線の露出 を優先し、開くべき文脈では初期状態で展開します。アニメはパフォーマンス負荷を抑え、メディアクエリprefers-reduced-motionを尊重します。
よくある質問（FAQ）
SEOで折りたたみ内のテキストは評価されますか？
検索エンジンは通常クロール可能ですが、ユーザーが閲覧しやすい配置が望ましいです。重要な要点や導線は初期表示で露出させ、補足説明を折りたたむ設計が安全です。
<details>とARIA実装はどちらが良いですか？
要件がシンプルならdetailsが手軽で堅牢です。複数連動、カスタムアニメ、状態保持などが必要ならbutton＋ARIA＋JSで制御すると柔軟に対応できます。
初期状態は開く・閉じるどちらが良いですか？
ユーザーの目的に応じて決めます。FAQ一覧など探索的行動は閉じる、重要なお知らせや主要導線を含む場合は開くが基本です。ページ速度やCLSにも配慮します。
キーボードやスクリーンリーダー対応の要点は？
button要素を用い、aria-expandedとaria-controlsを同期します。Tabで見出しへ移動でき、Enter/Spaceで開閉、フォーカスは内容の先頭に自然移動するよう制御します。
アコーディオンメニューのまとめ
アコーディオンメニューは情報量を整理する有効なUIですが、重要情報を隠しすぎない判断が成果を左右します。文脈に合わせた初期状態、適切な実装方式、アクセシビリティ準拠を満たし、発見性と読みやすさを両立させて運用します。
