Google Stitch でカンバンボードUIを設計した——ドラッグ&ドロップを「静止画で伝える」ことの難しさ

2026.04.14

プロジェクト管理ツールのカンバンボードを Google Stitch で設計することになったとき、最初に感じた違和感を今でも覚えている。

カンバンボードの本質は「動き」だ。カードを掴んで、別の列にドロップする。その一連のインタラクションがあって初めて「カンバン」として機能する。でも Stitch が生成できるのは静止画だ。「動き」のないカンバンボードのデザインを作ることに、最初はどんな意味があるのか少しわからなかった。

でも設計を進めるうちに、「静止画でインタラクションを伝える方法」というスキルが自分の中で育っていった。カンバンの各状態を個別に生成し、コメントで動きを仕様化する——その作業を通じて、「UIの設計とは動きを絵コンテに変換することだ」という感覚が生まれた。

この記事は、Stitch でカンバンボードUIを設計した記録だ。

結論から言うと

Google Stitch でカンバンボードを設計するとき、「1つの完成画面」を生成しようとするより、「複数の状態（通常・ドラッグ中・ドロップ先ハイライト・完了後）を個別に生成して並べる」アプローチが圧倒的に有効だ。静止画の集合体が、インタラクションの「絵コンテ」として機能する。

カンバンボードUIとは何か

定義と代表的なサービス

カンバンボードとは、タスクや案件をカード形式で表現し、複数の列（ステータス）に分けて管理するUIのことです。「ToDo・進行中・完了」という3列構成が最もシンプルな例で、Trello・Jira・Notion・Asanaといったプロジェクト管理ツールで広く採用されている。

カンバンボードの主な構成要素は以下の通りだ。

列（カラム）：ステータスを表す縦の区画。「未着手・進行中・レビュー中・完了」など
カード：各タスク・案件を表すカード。タイトル・担当者・期限・ラベルなどを含む
列ヘッダー：列の名前とカード枚数を表示するエリア
カード追加ボタン：各列の末尾またはヘッダーにある「カードを追加」ボタン
列追加ボタン：ボード右端の「新しい列を追加」ボタン
ドラッグハンドル：カードをドラッグするときのつかみどころ（明示する場合）

Google Stitch でカンバンボードを生成すると何が出てくるか

Stitch に「カンバンボード」とプロンプトを書くと、複数の列が横並びになり、各列にカードが積まれたデザインが生成される。一般的な3〜4列構成で、カードにはタイトルとラベルが含まれ、全体的に Trello や Notion に近い見た目になることが多い。

生成物の品質は「通常状態の静止画」としては十分だ。問題になるのは、「カードをドラッグしている最中」「ドロップ先の列がハイライトされている」「カードが新しい位置に移動した後」といった動的な状態をどう表現するか、だ。これらはすべて別々のプロンプトで生成する必要がある。

設計の核心：カンバンの「状態」を洗い出す

設計すべき状態の一覧

カンバンボード設計でまず取り組んだのは、「設計すべき状態の一覧化」だ。ドラッグ&ドロップというインタラクションには、思った以上に多くの状態がある。

デフォルト状態：カードが各列に通常配置されている状態
カードホバー状態：マウスカーソルをカードに乗せたとき（影が濃くなる・ドラッグハンドルが現れるなど）
ドラッグ開始状態：カードを掴んで持ち上げた直後（元の位置にゴースト＝半透明の影が残る）
ドラッグ中状態：カードが宙に浮いて移動している（少し回転する・影が大きくなるなど）
ドロップ先ハイライト状態：ドラッグ中のカードが列の上に来たとき、その列が受け入れ可能であることを示す（背景色変化・破線ボーダーなど）
ドロップ完了状態：カードが新しい列に移動した直後
列がいっぱいの状態：カードが多すぎて列が縦にスクロールが必要な状態
空の列状態：その列にカードが1枚もない状態
カード追加中状態：「カードを追加」をクリックして入力フォームが現れている状態

この9つの状態を Stitch で個別に生成し、Play ボタンで繋いでいくことで、カンバンボードの「動き」を静止画の連続として表現できた。

「ドラッグ中状態」の表現方法

ドラッグ中のカードをどう表現するかは、Stitch での生成で最も工夫が必要な部分だった。

プロンプトを「カードが『進行中』列からドラッグされている状態。カードは元の位置から少し右上にずれており、背景に薄い影（ドロップシャドウ）がある。元の位置にはカードの輪郭だけのプレースホルダー（薄いグレーのボーダー）が残っている」と書いた。

この指定でドラッグ中の視覚的フィードバックを含むデザインが生成できた。「どこから来てどこに向かっているか」がわかるデザインの確認に使えた。

カードのデザイン設計

カードに含める情報の優先度設計

カンバンのカードに何を表示するかは、サービスの用途によって大きく変わる。情報を詰め込みすぎると、カードが大きくなりすぎてボード全体の一覧性が下がる。

情報の優先度を3層に分けて考えることにした。

常に表示（必須）：タイトル・ラベル（色付きバッジ）・担当者アバター
状況に応じて表示：期限（期限が近い場合のみ赤字で強調）・添付ファイル数・コメント数
クリックして展開：詳細説明・チェックリスト・活動ログ

この設計方針を Stitch のプロンプトに落とし込んだ。「カンバンカード。タイトル・緑のラベル（デザイン）・担当者アバター（2名）を常に表示。下部に期限日・コメントアイコン（3）・添付アイコン（1）を小さく表示」

このプロンプトで、情報密度が適切でスキャンしやすいカードデザインが生成できた。

カードのサイズと列の幅の設計

カンバンボードで見落としやすいのが「列の幅」と「カードの最小・最大の高さ」の設計だ。

列の幅が狭すぎるとカードのテキストが折り返しすぎて読めなくなる。広すぎると1画面に収まる列数が減って一覧性が下がる。一般的な目安として、列幅は280〜320px程度が多く採用されている。

Stitch でプロンプトを書くとき、「各列の幅は約300px。カードの最小高さは80px。タイトルは最大2行で折り返す」と指定した。この指定でコンパクトかつ読みやすいカードレイアウトが生成できた。

カンバンボードの「全体構造」設計

ヘッダー・ボードの階層構造

プロジェクト管理ツールのカンバンボードは、通常「アプリ全体のナビゲーション → プロジェクト選択 → カンバンボード」という階層の中に位置する。

Stitch でカンバンボードを設計するとき、「ボード単体」だけでなく「アプリ全体の文脈の中のカンバン」として設計するとより実用的な画面が生成できた。プロンプトを「プロジェクト管理アプリ。左サイドバーにプロジェクト一覧ナビゲーション。ヘッダーにプロジェクト名・ビュー切り替えタブ（カンバン/リスト/タイムライン）・フィルター・メンバーアバター。メインエリアにカンバンボード（4列）」と書いた。

この「全体構造を含むプロンプト」で生成した画面は、現場レビューで「実際のツールに近い」と評価された。カンバン単体の画面より、全体の文脈が見えた方がフィードバックがしやすかった。

横スクロールが必要な場合の設計

列が5列以上になると、一般的な画面幅（1280px）に収まらなくなる。この場合、ボードエリアが横スクロール可能になる設計が必要だ。

Stitch でプロンプトに「6列のカンバンボード。画面右端に部分的に見えている次の列が横スクロールで確認できることを示すデザイン（7列目の左端が画面端にわずかに見えている状態）」と書いた。「もっとある」ことをユーザーに示す視覚的なヒント（切れかけた列）を設計に含めることで、横スクロールの存在を自然に気づかせるデザインが確認できた。

ドラッグ&ドロップ実装への引き継ぎ

Stitch の静止画からドラッグ&ドロップ実装へ

Stitch が生成するコードにはドラッグ&ドロップの動作が含まれないことが多い（基本的なインタラクションは含まれる場合もあるが、一貫性がない）。カンバンボードの実装では、専用のライブラリを使うことが現実的だ。

代表的な実装ライブラリとして、React DnD（React向け）・dnd-kit（React向け、軽量で柔軟）・Vue.Draggable（Vue向け）・Svelte DnD Action（Svelte向け）などがある。Stitch のデザインをこれらライブラリのスタイリング参照として使い、ライブラリが提供するドラッグ機能の上にビジュアルを乗せる方法が効率的だ。

設計段階で「ドラッグ&ドロップはdnd-kitで実装する前提。各状態のビジュアルはStitchデザインを参照」とコメントに書き添えることで、開発チームとの認識合わせが一度でできた。

FAQ

Q1. Google Stitch でカンバンボードのドラッグ&ドロップ動作まで生成できますか？

基本的なインタラクションは生成される場合もありますが、ドラッグ&ドロップの動作は一貫性がなく、完全には生成されないと考えるべきです。Stitch はUIのビジュアル設計に特化したツールです。ドラッグ&ドロップの実際の動作は、dnd-kit・React DnD などのライブラリで別途実装することをお勧めします。Stitch の出力は「ビジュアル参照」として使うことが現実的です。

Q2. カンバンの列（カラム）は何列が標準的ですか？

最もシンプルな構成は3列（ToDo・進行中・完了）です。開発・制作系のワークフローでは「未着手・進行中・レビュー中・承認待ち・完了」の5列が多く見られます。列が増えると一覧性が下がるため、7列以上になる場合はフロー自体の見直しを検討することをお勧めします。Stitch でいくつかの列数パターンを生成して比較すると、「自分のチームに合った列数」の判断がしやすくなります。

Q3. カンバンカードのサイズ（情報量）はどう決めればいいですか？

カードに表示する情報は「一覧で素早くスキャンするために必要なもの」に絞ることをお勧めします。タイトル・担当者・期限の3点が最小構成です。ラベル・優先度・コメント数・添付数などを追加する場合は、視覚的なスキャンを妨げないよう小さなアイコンや数字で表現します。詳細情報（説明文・チェックリスト・活動ログ）はカードクリックで開くモーダルやサイドドロワーで表示する設計が一般的です。

Q4. モバイルでカンバンボードはどう表示するのが良いですか？

スマートフォンでは列を横並びで表示すると列が狭くなりすぎます。主な対処法は2つです。1つ目は「1列ずつスワイプで切り替える」設計（横スワイプでToDo→進行中→完了と切り替わる）、2つ目は「リスト表示に切り替える」設計（全カードをステータスでグループ分けしたリスト表示）です。Stitch でモバイル版のカンバンUIを生成するとき、このどちらかのパターンで設計するとモバイル体験が大きく改善します。

Q5. カンバンボードを Stitch で設計するとき、最初に生成すべき画面はどれですか？

「デフォルト状態の全体画面（データが入った通常状態）」を最初に生成することをお勧めします。全体構造が決まってから、各詳細状態（ドラッグ中・空列・カード追加中など）を個別に生成していく順序が最も効率的です。全体を先に固め、細部を後から埋めるボトムダウンのアプローチがカンバン設計では機能しやすいと感じました。

Q6. カンバンボードで「WIP制限」（各列に置けるカード数の上限）のUIはどう設計しますか？

WIP制限を設ける場合、列ヘッダーに「進行中 3/5」のように「現在のカード数/上限」を表示するUIが一般的です。上限に達した列は列ヘッダーの色を変えるか、警告アイコンを表示してユーザーに気づかせます。Stitch で「進行中列のヘッダーに現在5枚/上限5枚と表示されており、赤色で警告状態になっている」と指定すると、WIP制限超過の視覚的フィードバックを含むデザインが生成できます。