カンバンの画面まるごと
ボード名・フィルタ・メンバーのヘッダーと、WIP 上限付きの4列（バックログ/着手中/レビュー/完了）。カードはドラッグで列間を移動でき、上限を超えた列は赤く警告する。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
デザインの要点
- 列の見出しに「3/3」のように WIP 上限を出す。超過は色で警告し、移動自体は止めない（判断は人に残す）
- カードは 2 行（題・タグ＋担当）に絞る。詳細は開いて見る。ボードは「流れ」を見る場所
- フィルタ「自分の担当」は最上段の 1 チップで足りる。多段のフィルタは検索画面に譲る
- スマホは列を横スクロール＋スナップで 1 列ずつ見せる。列幅は 240px を下限に固定する
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<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></header>
<div class="kbs-cards" data-cards="backlog">
<article class="kbs-card" 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" 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" 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></header>
<div class="kbs-cards" data-cards="doing">
<article class="kbs-card" 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" 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></header>
<div class="kbs-cards" data-cards="review">
<article class="kbs-card" 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" 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></header>
<div class="kbs-cards" data-cards="done">
<article class="kbs-card" 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>
</div>