カンバンボード
Kanban board
別名: カンバン、タスクボード、かんばん、Kanban board、Task board、Kanban
生態（さわってみる）
カードはドラッグ&ドロップ、またはキーボードで「カードを選択（Enter/Space）→移動先ボタン」の操作で列を移動できます。
未着手
- 要件定義書の作成
- デザインモックの共有
進行中
- API実装
完了
- キックオフミーティング
一言定義
「未着手」「進行中」「完了」のような列にタスクカードを並べ、列間の移動で状態を管理する表示UI。
分類
使う場面
- 複数人のタスクを状態別に横断して見渡し、状況に応じて動かしたいとき
- Trello・Jiraのような、視覚的なワークフロー管理をしたいとき
避ける場面
- データを属性ごとに横断比較・並び替えしたいとき（→データテーブル）
- 出来事を発生順の記録として振り返りたいだけのとき（→タイムライン）
近縁種との比較
同じタスク管理でも、データテーブルが行×列で属性を横断比較・並び替えすることに主眼を置くのに対し、カンバンボードは「状態」という1つの軸に沿ってカードを列間で移動させる操作そのものに主眼を置く点で使い分けられる。多数の属性を持つデータの一覧・絞り込みにはデータテーブル、状態遷移を視覚的に操作させたいワークフローにはカンバンボードが向く。タイムラインとは、過去の出来事を時系列で記録するか、現在の状態をリアルタイムに操作するかという点で異なり、カンバンボードは常に「今」の状態を表す点でタイムラインより能動的なUIである。
実例リンク
アクセシビリティ
- role
- 列はlist、カードはlistitemとしてマークアップする。ドラッグ操作はHTML5 Drag and Drop APIに依存せず、キーボード代替として「カードを選択→移動先ボタンで実行」の操作系を必ず用意する
- キーボード操作
- カードをEnterで選択状態にし、表示される移動先ボタン（例:「進行中へ移動」）をEnter/Spaceで実行する。ドラッグ操作は視覚的な手段の一つにすぎない
- 補足
- カードの移動結果はaria-live領域で「〇〇を進行中に移動しました」のように通知する。ドラッグ＆ドロップだけを唯一の操作手段にしないことが必須要件