カンバンの画面まるごと

ボード名・フィルタ・メンバーのヘッダーと、WIP 上限付きの4列（バックログ/着手中/レビュー/完了）。カードはドラッグで列間を移動でき、上限を超えた列は赤く警告する。

ENGLISH

Kanban Board (Full Screen)

約204行画面のかたち / 実用サンプル: アプリ画面の一覧 →

プレビュー

ドラッグ

操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。

仕様書

向く場面: ステータス列で流れを見るプロジェクト管理
WIP 上限で着手数を抑えたいチーム
担当者フィルタが 1 つで足りるボード
避ける場面: 多段の絞り込みや検索が主目的の一覧
カードに詳細を書き込ませたい画面
構成要素: ヘッダー（ボード名／フィルタ／メンバー）
列（見出し／件数と上限）
カード（題／タグ／担当）
ドロップ位置の点線
浮遊するカード
持っている状態: 通常
フォーカス
押下中
キーボード: フィルタは Tab で到達し Enter/Space で切替。カードは Tab で到達し、←→ で隣の列へ移動、↑↓ で列内の並べ替え（ドラッグの代替）
支援技術: フィルタは role=group＋aria-pressed。カードは tabindex=0＋aria-roledescription「カード」で、掴んだ・移動した結果を role=status で通知。WIP 超過は数字と赤に加え隠し文「上限超過」
動き: ドロップ先の列背景が 150ms で青みに変わる。掴んだカードは 2° 傾いた浮遊コピーが指に追従し、元は 0.35 に薄くなる

デザインの要点

列の見出しに「3/3」のように WIP 上限を出す。超過は色で警告し、移動自体は止めない（判断は人に残す）
カードは 2 行（題・タグ＋担当）に絞る。詳細は開いて見る。ボードは「流れ」を見る場所
フィルタ「自分の担当」は最上段の 1 チップで足りる。多段のフィルタは検索画面に譲る
スマホは列を横スクロール＋スナップで 1 列ずつ見せる。列幅は 240px を下限に固定する

プロのサイトでの実例

Linear別サイト ↗課題のボード表示・担当者フィルタ・ステータス列という構成が同じ型の実例

実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。

コード（コピーして使えます）

<div class="kbs-app">
  <header class="kbs-head">
    <div class="kbs-head-left">
      <h1 class="kbs-h1">春の新商品ローンチ</h1>
      <div class="kbs-filters" role="group" aria-label="フィルタ">
        <button type="button" class="kbs-chip is-on" data-filter="all" aria-pressed="true">すべて</button>
        <button type="button" class="kbs-chip" data-filter="me" aria-pressed="false">自分の担当</button>
      </div>
    </div>
    <div class="kbs-members" aria-label="メンバー">
      <span class="kbs-avatar" style="background:#2b50c7">佐</span>
      <span class="kbs-avatar" style="background:#0f766e">田</span>
      <span class="kbs-avatar" style="background:#b45309">小</span>
      <span class="kbs-avatar kbs-avatar-more">+2</span>
    </div>
  </header>
  <div class="kbs-board" id="kbs-board">
    <section class="kbs-col" data-col="backlog" data-limit="0">
      <header class="kbs-col-head"><h2 class="kbs-col-title">バックログ</h2><span class="kbs-col-count" data-count="backlog">3</span><span class="kbs-sr kbs-col-warn"></span></header>
      <div class="kbs-cards" data-cards="backlog">
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="小"><p class="kbs-card-title">LP のヒーロー画像を差し替える</p><div class="kbs-card-meta"><span class="kbs-tag kbs-tag-design">デザイン</span><span class="kbs-owner" style="background:#b45309">小</span></div></article>
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="田"><p class="kbs-card-title">FAQ の文言を法務に確認</p><div class="kbs-card-meta"><span class="kbs-tag">確認</span><span class="kbs-owner" style="background:#0f766e">田</span></div></article>
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="佐"><p class="kbs-card-title">プレスリリースの下書き</p><div class="kbs-card-meta"><span class="kbs-tag kbs-tag-write">執筆</span><span class="kbs-owner" style="background:#2b50c7">佐</span></div></article>
      </div>
    </section>
    <section class="kbs-col" data-col="doing" data-limit="3">
      <header class="kbs-col-head"><h2 class="kbs-col-title">着手中</h2><span class="kbs-col-count" data-count="doing">2/3</span><span class="kbs-sr kbs-col-warn"></span></header>
      <div class="kbs-cards" data-cards="doing">
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="佐"><p class="kbs-card-title">価格表の最終版を作る</p><div class="kbs-card-meta"><span class="kbs-tag kbs-tag-write">執筆</span><span class="kbs-owner" style="background:#2b50c7">佐</span></div></article>
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="小"><p class="kbs-card-title">パッケージ裏面の校正</p><div class="kbs-card-meta"><span class="kbs-tag kbs-tag-design">デザイン</span><span class="kbs-owner" style="background:#b45309">小</span></div></article>
      </div>
    </section>
    <section class="kbs-col" data-col="review" data-limit="2">
      <header class="kbs-col-head"><h2 class="kbs-col-title">レビュー</h2><span class="kbs-col-count" data-count="review">2/2</span><span class="kbs-sr kbs-col-warn"></span></header>
      <div class="kbs-cards" data-cards="review">
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="田"><p class="kbs-card-title">注文フォームの入力検証</p><div class="kbs-card-meta"><span class="kbs-tag kbs-tag-dev">開発</span><span class="kbs-owner" style="background:#0f766e">田</span></div></article>
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="佐"><p class="kbs-card-title">メール配信の文面</p><div class="kbs-card-meta"><span class="kbs-tag kbs-tag-write">執筆</span><span class="kbs-owner" style="background:#2b50c7">佐</span></div></article>
      </div>
    </section>
    <section class="kbs-col" data-col="done" data-limit="0">
      <header class="kbs-col-head"><h2 class="kbs-col-title">完了</h2><span class="kbs-col-count" data-count="done">1</span><span class="kbs-sr kbs-col-warn"></span></header>
      <div class="kbs-cards" data-cards="done">
        <article class="kbs-card" tabindex="0" aria-roledescription="カード" data-owner="田"><p class="kbs-card-title">商品写真の撮影</p><div class="kbs-card-meta"><span class="kbs-tag">撮影</span><span class="kbs-owner" style="background:#0f766e">田</span></div></article>
      </div>
    </section>
  </div>
  <p class="kbs-sr" id="kbs-status" role="status">カードを選んで ←→ で列を移動、↑↓ で並べ替えできます</p>
</div>