タイムライン
Timeline
別名: タイムライン表示、時系列表示、アクティビティタイムライン、履歴表示、Timeline、Activity timeline
生態（さわってみる）
プロジェクト発足
キックオフミーティングを実施し、要件定義を開始しました。
デザインレビュー完了
主要画面のデザインレビューが完了し、実装フェーズへ移行しました。
β版リリース
社内ユーザー向けにβ版を公開し、フィードバックの収集を開始しました。
正式リリース
一般公開を開始しました。
一言定義
出来事を日付や時刻の順に沿って、縦または横に並べて可視化する時系列表示UI。
分類
使う場面
- 更新履歴や活動記録など、過去に起きた出来事を時系列で振り返らせたいとき
- 日時が確定した複数のイベントを、発生順に並べて見せたいとき
避ける場面
- これから進む決まった手順の、現在どこにいるかを示したいとき（→ステップバー）
- タスクの状態（未着手/進行中/完了）を横断的に管理・移動させたいとき（→カンバンボード）
近縁種との比較
ステップバーが「これから進む決まった手順の、現在どこにいるか」という未来志向の工程表示であるのに対し、タイムラインは「過去に何が起きたか」という時系列の記録を振り返る用途に使う点で対照的である。両者とも縦または横に並んだ目印という見た目は似るが、ステップバーの各ステップは完了・現在・未達という3値の状態しか持たないのに対し、タイムラインの各イベントは自由な日時と内容を持つ点でも異なる。カンバンボードは同じくタスクの状態を可視化するが、列間をドラッグして状態そのものを能動的に変更できる管理UIである一方、タイムラインは基本的に過去の記録を並べるだけの読み取り専用の表示である。
実例リンク
アクセシビリティ
- role
- 時系列イベントは順序を持つol（順序リスト）としてマークアップし、各イベントをliにして日時はtime要素で明示する
- キーボード操作
- 通常のページスクロールで閲覧する表示専用要素。個々のイベントにリンクがある場合は通常のTab移動に含める
- 補足
- 縦線や丸ドットなどの装飾はCSSのみで表現し、意味情報は日時テキストとイベント内容の側に持たせる