なぜ経路を示すのか
人は「情報の匂い」をたどります（Pirolli & Card, 1999）。検索から深いページに来た人に現在地を示します。階層が深いほど迷いやすく（Miller & Remington, 2004）、情報設計が深い場合に有効です。
モバイルでは短く
小画面では視線が上部に集中します（Kim et al., 2015）。一つ上の階層だけ示すか横スクロール1行に（Laubheimer, 2018）。タップ領域も確保し（Parhi et al., 2006）、主な移動はボトムナビに任せます。
デザインとマークアップ
現在ページはリンクにせず、区切りは「>」など方向のある記号に。視覚的階層では控えめに。navとaria-current（W3C, n.d.）を使えばWCAG 2.2の2.4.8にも沿います。
よくある質問
- アプリにも必要？
- 浅いアプリでは不要、深いカタログなら一つ上だけ表示が有効です。
- 現在ページはリンク？
- いいえ、テキストにしてaria-currentを付けます。
出典確認日：2026-10-27
参考文献
- Laubheimer, P. (2018, December 23). Breadcrumbs: 11 design guidelines for desktop and mobile. Nielsen Norman Group. デスクトップとモバイルのパンくず指針11項目です。
- Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 情報の匂いに沿って探すという理論です。
- Miller, C. S., & Remington, R. W. (2004). Modeling information navigation: Implications for information architecture. Human–Computer Interaction, 19(3), 225–271. 階層の深さと広さが探索に与える影響です。
- 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. 小画面では視線が上部に集中します。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 密集したリンクのタップ領域の根拠です。
- World Wide Web Consortium. (n.d.). Breadcrumb pattern. ARIA Authoring Practices Guide. navとaria-currentの使い方です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 現在位置を示す2.4.8です。