階層ツリー
Tree view親子関係を持つデータを、開閉できるインデント付きの階層構造として表示するUI。
- プロジェクト資料
- 要件定義書.docx
- スケジュール.xlsx
- デザイン素材
- ロゴ.svg
- バナー.png
- 議事録.pdf
○ 使う場面
- フォルダ構造や組織図など、親子関係を持つデータをそのまま見せたいとき
- 必要な階層だけを開いて、全体のボリュームを抑えたいとき
× 避ける場面
- データがフラットで、そもそも階層を持たないとき(→データテーブル)
- 開閉の単位が独立したセクションであり、親子関係を表現する必要がないとき(→アコーディオン)
別名
ツリービュー、ツリー表示、フォルダツリー、ツリーグリッド
近縁種との比較
「ツリービュー」は、根から幹、枝、葉へと分岐していく木(tree)の構造に見立てた名称で、親子関係を持つデータの階層を、実際の木のような枝分かれとして表現することに由来する。
| 近縁種 | 違い・使い分け |
|---|---|
| データテーブル | フラットな行の集合であるデータテーブルは属性同士の横断比較・並び替えに向くのに対し、階層ツリーは親子関係そのものを構造として見せることに主眼があり、階層を持つデータには階層ツリーが適している。 |
| アコーディオン | アコーディオンの各パネルは互いに独立したセクションであるのに対し、階層ツリーの各項目は親子関係でネストしており、キーボード操作も矢印キーによる階層移動(WAI-ARIA APGのTree Viewパターン)という専用の作法を必要とする。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション