PixsoでカンバンボードUIを作る：カード・列・移動状態の設計手順

使いやすいカンバンボードの UI は、再利用できる状態の組み合わせとして設計します。色分けした列を並べるだけでは十分ではありません。カードには一貫したメタデータ、列には明確な上限と空の状態、ドラッグ操作には開始前・操作中・完了後の状態が必要です。このチュートリアルでは、仕事を「バックログ」から「進行中」「レビュー」「完了」へ進めるプロダクトチームを想定し、Pixso で編集可能なカンバン用コンポーネント一式を作成します。

1. カードを描く前にボードのモデルを定義する

最初にワークフローのルールを書き出します。この例では、4 つの列を設け、タスクごとに担当者を 1 人設定します。優先度は 1 つ、ラベルは最大 2 つ表示し、「進行中」のカードは 3 枚までに制限します。「レビュー」へ移すには担当者の設定が必要です。「完了」のカードには期限の代わりに完了日を表示します。

これらは、このプロダクトを想定したルールの例であり、すべてのカンバンに共通する決まりではありません。プロダクトオーナーに、次の点を確認しましょう。

• どの列を設け、誰が列間でタスクを移動できるか。
• 列の中の位置は手動で決める優先順位なのか、それとも別の並び順なのか。
• それぞれの状態遷移で、どの項目の入力が必須になるか。
• 仕掛かり中の作業数の上限に達した場合、移動を禁止するのか、警告だけを表示するのか。
• アーカイブ済み、ブロック中、期限超過、完了したタスクをどう表現するか。
• 別の共同作業者が同じカードを移動した場合、どう処理するか。

これらのルールはデザインのそばに残しておきます。Pixso Whiteboardには初期のワークフロー図や PRD の表を置き、デザインファイルには編集可能なボードとコンポーネントの各状態を配置できます。ボードが方針を決めるのではなく、決めた方針を可視化してレビューできるようにします。

ワークフローのメモを、下図の「バックログ」「進行中」「レビュー」「完了」の4列に落とし込みます。再利用できるコンポーネントを作る前に、仕掛かり作業（WIP）の上限、カードの項目、空の状態がチームの運用ルールと合っているかを確認してください。

2. カードの構成を設計する

まず、必要最小限の情報で役立つタスクカードを作ります。最も目立つ行にはタスク名を置きます。補助的なメタデータは、すべての項目を開かなくても次の行動を判断できる内容にします。この例では、タスク ID、優先度、ラベル、担当者のアバター、期限、コメント数を含めます。実装時には、支援技術でも担当者名を取得できるようにします。

このカンバンボードの UI では、すべてのメタデータ項目を、タスクの移動や優先順位の判断に役立てます。

情報の順序を一定にすると、内容を追いやすくなります。

1. タスク ID と状態を示す情報。
2. あらかじめ決めた行数まで折り返せるタスク名。
3. プロダクトの領域や作業の種類を示すラベル。
4. 対応が必要な場合に表示する優先度と期限の警告。
5. 担当者と、補足となる件数の表示。

カードに詳細ページの情報をすべて詰め込む必要はありません。一覧での確認や移動の判断に役立たないメタデータは非表示にします。深刻度、優先度、期限のリスクをすべて強い色で示すと、画面が煩雑になります。最も強い視覚的な手掛かりは、最も重要な判断に使い、文字やアイコンでも意味を伝えましょう。

3. Pixso でカードコンポーネントを作成する

デザインツールの Pixso で「Kanban Components」というページを作り、元となるコンポーネントを置くセクションを追加します。実際の内容に合わせてタスク名、ラベル、メタデータが調整されるよう、レイアウトを設定してカードを組み立てます。その構造をコンポーネントに変換し、チームが実際に変更するプロパティを公開します。

装飾だけの違いをプロパティに増やしすぎないようにします。ラベルの色ごとに別のバリアントを作ると、ライブラリの管理が難しくなります。デザインシステムで使える範囲でスタイルや変数を活用し、意味に対応したラベルの色を限られた数に絞ります。

Pixso AI のスマートリネームは、意味のないレイヤー名を業務内容が伝わる名前に置き換える際に役立ちます。スマートレイアウトは、選択したコンテンツの構成を整えるために利用できます。どちらも編集を支援する機能として扱い、チームライブラリへ公開する前に、生成された階層、余白、名前を確認してください。最新の機能概要は、Pixso AI のドキュメントで確認できます。

4. 列とその状態を作成する

列コンポーネントには、見出し、件数、必要に応じた上限、カード一覧、追加操作、空の状態が必要です。カードを読み取りやすい安定した列幅を保ち、横方向のはみ出しはボード側で制御します。仕掛かり中の作業数の上限は、到達時に色を変えるだけでなく、「2/3」のように表示しましょう。

カードあり、空、読み込み中、上限到達、権限制限という列の状態を作成します。空の列で常に「タスクを作成」と案内する必要はありません。「レビュー」なら「レビュー待ちのタスクはありません」と表示することもできます。次に案内する操作は、列の目的とユーザーの権限によって変わります。

列の読み込みに失敗した場合は、ボードのほかの部分を維持し、このセクションを利用できないことを説明します。データが不明な状態なのに、仕事が存在しないと思わせる空の表示を出してはいけません。

5. カンバンボードの UI を組み立てる

4 つの列のインスタンスを含むボードフレームを作成します。ツールバーには、検索、担当者による絞り込み、ラベルによる絞り込み、表示設定など、ボードで実際に使う操作だけを追加します。考えられる管理操作をすべてボードの上に並べるのは避けましょう。

実際の利用に近い次の内容で、ボードを確認します。

• 短いタスク名と、3 行に折り返すタスク名。
• 担当者が未設定のため「レビュー」に移せないタスク。
• 期限を過ぎた優先度の高いタスク。
• カード数が上限に達した「進行中」の列。
• タスクのない「レビュー」の列。
• 完了日が表示された完了済みのタスク。

デスクトップでは、列が多いときに横スクロールを使うことで、カードの読みやすい幅を保てます。狭い画面では、すべての列を画面内へ押し込むよりも、1 つの列に集中させ、列を切り替える操作を用意する方法を検討します。現在の位置や作業の文脈をどう維持し、列間をどう移動するかまで設計に示しましょう。

6. ドラッグ＆ドロップを一連の状態として設計する

ドラッグ操作の設計は、半透明のカードを用意するだけでは終わりません。持ち上げたカード、元の位置、移動可能な場所、移動できない場所、挿入位置、自動スクロール領域、ドロップ後の結果を示します。実装では、キーボード操作とタッチ操作で使える代替手段も必要です。

1. 操作前：カードの内容を読み取ることができ、ドラッグ可能であることを示す要素がリンクやメニューの操作を妨げない状態にします。
2. 持ち上げた状態：元の位置が分かるように残し、移動中のカードが浮き上がっていることを明確に示します。
3. 移動可能な場所の上：挿入マーカーによって、カードがどこに配置されるかを正確に示します。
4. 移動できない場所の上：「レビューに移す前に担当者を設定してください」など、その場所へ移せない理由となるルールを表示します。
5. ドロップ後：カードを新しい位置に表示し、ボード上で状態の変更を確認できるようにします。
6. 失敗時：カードを元の位置に戻すか、復旧できる状態で残し、失敗の理由と再試行の方法を示します。

画面デザインだけで、リアルタイムの競合処理が検証済みであるかのように扱ってはいけません。別の人が同じタスクを移動した場合には、競合時の処理や更新のルールが必要です。デザインのフレームでは意図するメッセージを示せますが、同期の動作は開発側でテストする必要があります。

7. ドラッグ以外の移動方法を用意する

ドラッグの使いやすさは人によって異なり、タッチ端末では位置を正確に指定しにくいこともあります。カードのメニューや詳細パネルに「移動先」操作を追加しましょう。移動可能な列を一覧にし、移せない場合の理由を説明し、選択した移動先を確認できるようにします。

キーボード操作では、メニュー、コマンド、あるいは操作手順を明記した持ち上げ・ドロップ方式などを最終製品に用意できます。どの方式でも、フォーカスの移動を予測でき、カードの新しい位置が読み上げられるようにする必要があります。デザインレビューだけで済ませず、実装でも動作をテストしてください。

8. ボードの状態が分かる絞り込みを設計する

フィルターが変えるのは表示対象であり、元のワークフローではありません。適用中の条件を表示し、簡単に解除できるようにします。列の件数が全カード数なのか表示中のカード数なのかも定義してください。表示対象の件数を示すなら「8 件中 2 件」のように表現すると、絞り込みによって見えないタスクを、消えたタスクと誤解しにくくなります。

検索結果では一致した文字を強調できますが、状態を示す手掛かりは残します。0 件の場合は、表示条件に一致するカードがないことを伝え、条件を修正できるようフィルターを維持します。サーバー側で検索するボードでは、読み込み中と一部失敗の状態も追加します。

9. チームでコンポーネント一式をレビューする

インスタンスを確認してから、承認済みの元コンポーネントをチームの再利用用ライブラリへ公開します。該当するカードや列の状態に直接コメントを付け、内容、権限、状態遷移に関する決定を残しましょう。Pixso はリアルタイムの共同編集と対象にひもづくコメントに対応しているため、プロダクト担当、デザイナー、エンジニアが同じ編集可能な成果物を確認できます。

カンバンボードの UI レビューでは、再利用する元コンポーネントと、実際の内容を入れたボードのインスタンスの両方を確認します。

チームの Pixso デザインシステムに、カードの構成、プロパティの定義、ラベルの上限、列幅、空の状態、移動ルール、誤った使い方の例を記録します。レビュー用のファイルは、Pixso のプロダクトデザイン用ワークスペースを通じて共有します。コンポーネントの公開は、プロダクトのルールを承認したことにはなりません。状態遷移の各制約には、その根拠となる正式な資料へのリンクを付けてください。

10. 開発へ引き継ぐための情報を整える

レスポンシブ表示のルール、はみ出し、余白、カード内の文字の省略、状態の対応関係、ドラッグ時の全状態に注釈を付けます。各状態遷移について、開始条件、楽観的更新か確定後の更新か、失敗時の復旧、完了を確認する情報を明記します。開発者が、見た目のプロパティとワークフローのルールを区別できるようにしましょう。

Pixso の開発者向けインスペクトと D2C は引き継ぎを支援し、React、Vue、HTML、ArkUI、Flutter 向けのコード生成を利用できます。ただし、生成コードにも、プロジェクトの状態モデル、ドラッグ用ライブラリ、セマンティクス、キーボード操作、性能、データ同期、テストに関する開発者のレビューが必要です。最新の手順は、Pixso D2C ガイドで確認してください。

11. カンバンボードの UI 設計チェックリスト

• 列、状態遷移のルール、権限、上限について、責任者が明確になっている。
• カードのメタデータは一覧での確認を支援し、詳細ページの情報を詰め込みすぎていない。
• 通常、選択中、ドラッグ中、ブロック中、完了、失敗の各状態を用意している。
• 列には、カードあり、空、読み込み中、上限到達、利用不可の状態がある。
• ドラッグ中の挿入位置と、移動できない場所が明確になっている。
• ドラッグ以外の移動方法が用意されている。
• フィルターが件数や 0 件の表示に与える影響を確認できる。
• 長い内容、多言語化、狭い画面、高倍率の拡大表示を確認している。
• リアルタイムの競合、権限、キーボード操作を実装でテストしている。

まとめ

カンバンボードの UI は、明確なワークフローのルール、再利用可能なカードと列のコンポーネント、移動の全過程を土台として組み立てます。Pixsoを使うと、チームで編集可能なコンポーネント、共通の基準、レビューコメント、開発へ渡す背景情報を管理できます。すべての視覚的な状態を、実際の権限、データの動作、実装時のテストと結び付けることで、より確かな設計にできます。