アコーディオンメニュー
クリックやタップをすると、隠れていた内容が下方向に展開する「折りたたみ式」のコンテンツ表示形式です。楽器のアコーディオンのように伸縮することから名付けられました。
主な活用シーン
- FAQ（よくある質問）ページ。
- モバイル（スマホ）サイトのナビゲーションメニュー（ハンバーガーメニュー の中身など）。
- 記事内の「目次」や、サイドメニュー。
鉄則：「情報の優先順位」を明確にする
限られた画面に情報を圧縮できる便利な UI ですが、「開かないと読まれない」というリスクが伴います。
- 優先度の高い情報（絶対に伝えたいこと）：常時表示にする。
- 補足情報や、特定のユーザーだけが知りたい情報：アコーディオンにする。
実務での向き合い方と注意点
画面設計（WF / ワイヤーフレーム）をする際は、ユーザーに「これはタップできる」と直感的に伝えるため、見出しの横に「▼」や「＋」などの開閉アイコンを必ずセットで配置するようデザイナーに依頼しましょう。
現場で陥りやすい「落とし穴」
ページをスッキリ見せたいあまり、すべての情報をアコーディオン化してしまうことです。ユーザーは「どこに自分の探している情報があるか」を毎回開いて確認しなければならず、かえって探しにくい構造になり、離脱を招きます。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
会話上での使用例
FAQ を 1 ページにまとめたいとプロデューサーから相談された場面
-
プロデューサー
FAQ が 50 件あるんだけど、1 ページにまとめられないかな。
-
Web 担当者
アコーディオンメニュー で質問ごとに折りたためば、すっきり収まりますよ。ただ HTML 上には全文を入れておいて、ブラウザ内検索でも引っかかるようにしておきましょう。
長くなったモバイルのサイドメニューをデザイナーと整理する場面
-
デザイナー
サイドメニューが長くなりすぎて、スマホだと見づらいんですよね。
-
Web 担当者
第 2 階層を アコーディオンメニュー で折りたたみましょう。タップで開く形にすれば、画面を占有せずに済みます。