coastdigitalgroup/coastai-skills

かんばんボードUIシステム

目的

かんばんボードUIシステムは、ワークフローのステータスカラム、カードベースのタスク項目、およびプロセスパイプラインを管理するための、標準化された高密度でアクセシビリティの高いレイアウトフレームワークを提供します。かんばんボードは、最新のSaaSアプリケーション、プロジェクト管理ツール、候補者追跡システム（ATS）、および営業CRMパイプラインにおける中核的なインタラクションキャンバスです。

効果的なかんばんインターフェースを設計するには、高い視覚密度、独立したカラムスクロール、明確な空間的階層、リアルタイムの仕掛中（WIP）制限フィードバック、そしてビューポート全体での流動的なレスポンシブ対応のバランスを取る必要があります。さらに、従来のポインターのみのドラッグ＆ドロップ実装は、深刻なアクセシビリティ障壁を生み出すことがよくあります。このスキルは、設計と技術的な実行の橋渡しをし、カラムの格納、タスクカードの構造、タッチターゲット、そしてWCAG AA基準に準拠したキーボード/スクリーンリーダーによる並べ替えワークフローのための空間ルールを確立します。

ユースケース

• プロジェクト＆タスク管理システム: スプリントボード、バックログカラム（例：バックログ、進行中、コードレビュー、完了）、および課題追跡ボードの構造化。
• 候補者追跡システム（ATS）: 候補者の採用段階（例：応募、スクリーニング、面接、オファー、採用）の可視化。
• 営業＆CRM商談パイプライン: 商談のステージを、カラムごとの集計された商談価値と確率で管理。
• コンテンツ編集カレンダー: アイデアから草稿、レビュー、公開までの記事やメディア制作ワークフローの追跡。
• 注文処理ワークスペース: 物流やキッチンディスプレイインターフェースにおける多段階の注文処理の監視。

使用すべきでない場合

• データグリッド＆表形式の財務リスト: ソート、フィルタリング、および一括セル編集を必要とする、密度の高い複数列の行データの場合は、data-table-ui-system を使用してください。
• 階層的なドキュメントまたはファイルツリー: 深くネストされたファイル構造やドキュメントアウトラインの場合は、tree-view-navigation-system を使用してください。
• ビューポート固定のSaaSシェルレイアウト: アプリケーション全体のシェル（ナビゲーションバー、トップバー、折りたたみ可能なパネル）の場合は、dashboard-layout-system を使用してください。
• 単一カラムのアクティビティフィード: 時系列ストリームフィードまたは単純な垂直タスクリストの場合は、timeline-activity-system または card-ui-system を使用してください。

入力

1. ワークフローステージ＆カラム分類: ワークフローステータスの順序付きリスト（例：To Do、進行中、レビュー、完了）とそのカラムメタデータ（WIP制限、ステータスアクセントカラー、商談合計）。
2. カードデータ密度マトリックス: タスクカードごとに表示する属性（例：タスクID、タイトル、優先度タグ、期限、担当者アバター、サブタスク進捗、添付ファイル数）。
3. ビューポート＆シェルコンテキスト: 親アプリケーションシェル（dashboard-layout-system からの）によって提供されるレイアウト境界。
4. デザイントークン: カラーパレット、エレベーションサーフェス、スペーシングスケール、およびタイポグラフィトークン（accessible-color-system、elevation-and-depth-system、および fluid-spacing-system から）。

出力

1. 水平カラムキャンバス仕様: ビューポート固定の水平スクロールコンテナ、固定カラム幅、およびガターギャップのための空間レイアウト定義。
2. カラムヘッダー＆WIP制限構造: カラムヘッダー、バッジカウンター、WIP制限警告しきい値（通常、近い、超過）、およびクイック追加アクショントリガーのためのビジュアルデザイン。
3. タスクカードコンポーネント仕様: 標準、コンパクト、および拡張タスクカードのための構造化レイアウト設計図。ドラッグハンドルターゲット、メタデータグリッド、およびホバー/フォーカス/グラブ状態のインタラクションを含みます。
4. アクセシブルなキーボード＆ドラッグ＆ドロップモデル: ARIAロールマッピング（role="region"、role="list"、role="listitem"）、フォーカス管理ルート、キーボード並べ替えショートカット、および aria-live アナウンスパターン。
5. レスポンシブモバイル戦略: 複数カラムの水平レイアウトを、小画面ではセグメント化されたタブビューまたは積み重ねられたアコーディオンパネルに切り替えるレイアウト適応ガイドライン。

---

ワークフロー

1. 水平カラムキャンバス構造の確立

ビューポート固定シェル（dashboard-layout-system）内でメインボードワークスペースを構造化します:

• コンテナサイズ: ボードラッパーを display: flex; flex-direction: row; height: 100%; overflow-x: auto; overflow-y: hidden; に設定し、ボードヘッダーを固定したままカラム間で水平スクロールを可能にします。
• カラム寸法: 固定またはフレックス収縮カラム幅（min-width: 280px; max-width: 340px; width: 300px;）を定義します。カラムを 280px 未満に収縮させないようにして、テキストの切り捨てやタップターゲットの圧迫を防ぎます。
• ガターとパディング: 一貫したカラムギャップ（例：gap: var(--space-m, 16px)）と水平パディング（例：padding: 16px 24px）を設定します。
• カラムコンテナシェル: 各カラムを独立したフレックスコンテナとしてスタイル設定します（display: flex; flex-direction: column; max-height: 100%; background: var(--surface-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-subtle);）。

2. カラムヘッダーとWIPシグナリングの設計

各カラムヘッダーは、カラムスタックの上部にあるスティッキーコントロールバーとして機能します:

• スティッキーカラムヘッダー: ヘッダーをカラムフレックススタックの上部に配置します（flex-shrink: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between;）。
• ヘッダー要素:
  1. ステータスアクセントインジケーター: ステージに対応する10x10pxの色付きピルまたは左ボーダー（例：青 = 進行中、紫 = レビュー、緑 = 完了）。
  2. カラムタイトル: 切り捨てられたテキスト（font-weight: 600; font-size: 0.9375rem; color: var(--text-primary)）。
  3. カードカウンター＆WIP制限バッジ: WIP制限とともにアイテム数を表示します（例：「3/5」）。
  4. カラムアクションメニュー: カラム設定、並べ替え、または折りたたみオプションへのアクセスを提供する32x32pxのアイコンボタン（...）。
• WIP制限の視覚的状態:
  • 通常（制限未満）: 控えめなニュートラルバッジ背景（background: var(--surface-neutral-muted); color: var(--text-secondary)）。
  • 警告（制限に達した）: アンバーバッジ背景（background: var(--surface-warning-subtle); color: var(--text-warning-bold)）。
  • 超過（制限オーバー）: ベタ赤のバッジまたは強調表示されたヘッダーボーダー（background: var(--surface-danger-subtle); border-color: var(--border-danger); color: var(--text-danger)）。アクセシブルな警告アイコンと、ワークフローのボトルネックを説明するツールチップを伴います。

3. 独立したカラムスクロール領域の構築

単一のカラム内の長いカードリストを検査する際に、ボード全体またはページが垂直方向にスクロールするのを防ぎます:

• カードリストコンテナ: リストコンテナ（role="list"）に flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 12px 12px 12px; display: flex; flex-direction: column; gap: 8px; を適用します。
• 慣性＆スムーズスクロール: -webkit-overflow-scrolling: touch; とカスタムスクロールバー（控えめな6pxスクロールバー）を有効にして、個々のカラムがグローバルなページ移動をトリガーせずにスムーズにスクロールするようにします。
• 空の状態コンテナ: カラムに0枚のカードが含まれている場合、破線のドロップゾーンアウトライン（border: 2px dashed var(--border-muted); border-radius: 6px; padding: 24px; text-align: center;）を、控えめなラベル（「このステージにタスクはありません」）とクイック「カードを追加」ボタンとともに表示します。

4. タスクカードコンポーネント階層の構築

visual-hierarchy-system を使用して、明確な視覚的スキャン順序でタスクカードを設計します:

• カード基本構造: 各カードを個別のリストアイテム（role="listitem" / article）としてレンダリングし、background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; cursor: grab; とします。
• カード領域内訳:
  1. トップ行（タグ＆アクション）: 優先度バッジ（例：高コントラストピルでの「高」、「緊急」）およびタスク参照ID（例：「PROJ-1042」）。24x24pxのドラッグハンドルボタン（aria-label="カード PROJ-1042 を並べ替え"）を含めます。
  2. 中央領域（タイトル＆説明）: メインタスクタイトル（font-weight: 600; font-size: 0.875rem; line-clamp: 2; margin-bottom: 8px;）。オプションの1行のミュートされたテキスト概要。
  3. 下部メタ行（進捗＆担当者）: 左側に期限インジケーター（期限切れの場合は赤で強調表示）とサブタスクチェックリストの進捗（例：「3/5 ✓」）を表示。右側に積み重ねられた担当者アバター（user-avatar-system）を表示。
• カードインタラクション状態:
  • ホバー: 若干のエレベーションシャドウ増加（box-shadow: var(--shadow-md); border-color: var(--border-hover)）。
  • フォーカス: 非常に視認性の高い2pxオフセットフォーカスリング（outline: 2px solid var(--focus-ring); outline-offset: 2px）。
  • ドラッグ中 / グラブ状態: opacity: 0.6; transform: scale(1.02) rotate(1deg); cursor: grabbing; box-shadow: var(--shadow-xl); z-index: 1000;。
  • ドロップターゲットキュー: カラムドロップゾーン上にカードをホバーすると、アニメーションする挿入プレースホルダーギャップを表示します（height: 60px; border: 2px dashed var(--brand-primary); border-radius: 6px; background: var(--brand-subtle);）。

5. アクセシブルなキーボード＆スクリーンリーダードラッグ＆ドロップの実装

標準的なドラッグ＆ドロップフレームワーク（HTML5 Drag and Drop API）は、キーボードのみおよびスクリーンリーダーユーザーにとってアクセスできないことがよくあります。明示的な代替キーボードナビゲーションモードを実装します:

• キーボード並べ替えトリガー: ユーザーがドラッグハンドルまたはカードにフォーカスし、Space または Enter を押して「移動モード」に入ることを許可します。
• 選択時のフォーカスとアナウンスメント: 移動モードがアクティブになると、aria-grabbed="true"（または移動トリガーに aria-pressed="true"）を設定し、カードの周りに視覚的な「グラブ」ハローを表示し、非表示の aria-live="polite" 領域を介してアナウンスします：「カード PROJ-1042 をグラブしました。現在のカラムは「進行中」、位置 2/5 です。矢印キーまたは Alt+矢印キーで移動、Space でドロップ、Escape でキャンセル。」
• カラム間およびカラム内での移動:
  • 上 / 下矢印キー: 現在のカラムリスト内でカードを並べ替えます。
  • 左 / 右矢印キー: カードを隣接する左または右のカラムに移動し、そのカラムのリストに追加します。
• ドロップとキャンセルの確認:
  • Space / Enter: 配置を確認します。DOM 位置を更新し、グラブ状態を解除し、ドロップされたカードにフォーカスを設定し、アナウンスします：「カード PROJ-1042 をカラム「レビュー」、位置 1/3 にドロップしました。」
  • Escape: 移動をキャンセルします。カードを元の位置に戻し、アナウンスします：「移動をキャンセルしました。カードを「進行中」、位置 2 に戻しました。」

6. モバイルビューポート適応

小型モバイル画面（<768px）での複数カラムの水平スクロールは、深刻な水平スワイプ疲労とぎこちないカードドロップにつながります。レスポンシブな変換戦略を実装します:

• セグメント化されたカラムタブ（推奨モバイルパターン）: 768px未満の画面では、水平スクロールキャンバスを非表示にします。ボードの上部にスティッキーなセグメント化されたタブコントロール（segmented-control-system）をレンダリングし、アイテムカウントバッジ付きのカラムタイトルを表示します（例：「[ To Do (4) ] [ 進行中 (3) ] [ 完了 (8) ]」）。
• 単一カラムアクティブビュー: アクティブなカラムリストのみを全幅（width: 100%）で表示します。
• コンテキスト「移動先」モーダル/アクションシート: モバイルでカードがタップされた場合、カードメニューに明示的な「移動先...」ボタンを提供します。これをタップすると、ボトムシート（accessible-bottom-sheet-implementation）が開き、1タップで移動可能なターゲットカラムがリスト表示され、モバイル画面でのタッチドラッグジェスチャを完全に排除します。

---

決定ルール

モバイルカラムレイアウト戦略

ビューポート幅	推奨UIパターン	インタラクションメカニズム
デスクトップ (>1024px)	複数カラム水平グリッドキャンバス	同時表示カラム、ポインタードラッグ＆ドロップ + キーボード移動モード。
タブレット (768px - 1023px)	コンパクトカラムボード（水平スクロール）	狭いカラム (260px)、スムーズなタッチ水平スワイプスナッピング。
モバイル (<768px)	セグメント化されたカラムタブ + 単一アクティブカラム	上部ステータスタブ、単一カラム全幅カード、「移動先」ボトムシート。

カラム幅戦略

• 固定カラム幅 (300px): 3〜6カラムの標準ボードに最適。カラムは予測可能な幅を維持し、追加のカラムは水平オーバーフローにきれいにあふれ出します。
• フルードフレックスカラム (flex: 1; min-width: 280px): ワイド画面で正確に3つのカラム（例：To Do、進行中、完了）があるボードに最適。カラムが未使用の右側の空白なしにビューポート幅全体を均等に埋めることができます。

WIP制限超過処理

• ソフトWIP制限（警告のみ）: カラムヘッダーをアンバー/レッドで強調表示し、制限超過バッジを表示しますが、ユーザーがカラムにカードを移動することを許可します。一時的なボトルネックが発生するクリエイティブおよびアジャイルチームのワークフローに推奨されます。
• ハードWIP制限（ブロッキング）: 制限に達したときにカードをカラムにドロップするのを防ぎ、モーダルまたはインラインアラートを表示します：「WIP制限に達しました (5/5)。さらに追加する前に、既存のタスクを解決してください。」 そのカラムへのキーボード移動を無効にします。厳格に規制された運用ワークフローに推奨されます。

---

制約

• アクセシビリティ (WCAG 2.1 AA):
  • SC 2.1.1 キーボード: すべてのカード機能（編集、並べ替え、削除、移動）は、キーボードのみを使用して到達可能かつ操作可能でなければなりません。
  • SC 2.4.7 フォーカスの可視化: フォーカスされたカードとドラッグハンドルは、背景に対して最小3:1のコントラスト比で、クリップされていないフォーカスリングを備えている必要があります。
  • SC 4.1.3 ステータスメッセージ: カード移動アクション、WIP警告、およびフィルター結果は、aria-live="polite" 領域を介してアナウンスされなければなりません。
  • SC 2.5.8 ターゲットサイズ: ドラッグハンドル、カードメニュートリガー（...）、およびクイック追加ボタンは、最小タップターゲット 24x24px（タッチデバイスでは44x44px推奨）を提供する必要があります。
• レイアウト封じ込めとCLS: カラムリストコンテナは、動的なカード更新が発生したときにレイアウトの崩壊やページレベルのジャンプを防ぐために、固定ヘッダーで overflow-y: auto を指定する必要があります。
• パフォーマンス: カードリストを効率的にレンダリングします。合計200枚を超えるカードを含むボードの場合は、カラムごとに仮想リストスクロール（virtual-list-implementation）を実装して、ドラッグ操作中に60fpsのレンダリングを維持します。