折りたたむ利点
小画面では位置把握が難しく（Kim et al., 2015）、見出しを先に見せると構造が分かり負荷が減ります（Sweller, 1988）。段階的開示の代表です。手がかりで開くか決めるため（Pirolli & Card, 1999）見出しは正確に。
向く場面・避ける場面
一部だけ必要な内容に向きます（Loranger, 2014）。ほぼ全部読むなら開いたまま見出しで視覚的階層を。見出しが多すぎれば（Miller, 1956）情報設計から見直します。
デザインとアクセシビリティ
行全体を押せるようにし、矢印で状態を示します。見出しをボタンにしaria-expandedを（W3C, n.d.）、WCAG 2.2の4.1.2に沿います。
よくある質問
- 一つだけ開くべき？
- 比較なら複数、順序のある内容なら一つずつでも構いません。
- SEOに不利？
- HTML内にあれば読まれますが、重要な内容は開いておきます。
出典確認日：2026-10-27
参考文献
- Loranger, H. (2014, May 18). Accordions for complex website content on desktops. Nielsen Norman Group. アコーディオンの利点と欠点です。
- World Wide Web Consortium. (n.d.). Accordion pattern (sections with show/hide functionality). ARIA Authoring Practices Guide. 見出しボタンとaria-expandedです。
- Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 手がかりで開くか決める理論です。
- Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285. 不要な情報が負荷になる研究です。
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 小画面のスクロール負担の研究です。
- Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological Review, 63(2), 81–97. 一度に見渡せる数の限界です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 4.1.2と2.4.6の基準です。