階層ツリー

Tree view

親子関係を持つデータを、開閉できるインデント付きの階層構造として表示するUI。

  • プロジェクト資料
    • 要件定義書.docx
    • スケジュール.xlsx
  • 議事録.pdf

○ 使う場面

  • フォルダ構造や組織図など、親子関係を持つデータをそのまま見せたいとき
  • 必要な階層だけを開いて、全体のボリュームを抑えたいとき

× 避ける場面

  • データがフラットで、そもそも階層を持たないとき(→データテーブル)
  • 開閉の単位が独立したセクションであり、親子関係を表現する必要がないとき(→アコーディオン)

別名

ツリービュー、ツリー表示、フォルダツリー、ツリーグリッド

近縁種との比較

「ツリービュー」は、根から幹、枝、葉へと分岐していく木(tree)の構造に見立てた名称で、親子関係を持つデータの階層を、実際の木のような枝分かれとして表現することに由来する。

近縁種違い・使い分け
データテーブルフラットな行の集合であるデータテーブルは属性同士の横断比較・並び替えに向くのに対し、階層ツリーは親子関係そのものを構造として見せることに主眼があり、階層を持つデータには階層ツリーが適している。
アコーディオンアコーディオンの各パネルは互いに独立したセクションであるのに対し、階層ツリーの各項目は親子関係でネストしており、キーボード操作も矢印キーによる階層移動(WAI-ARIA APGのTree Viewパターン)という専用の作法を必要とする。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション