スプリントボードアプリのデザイン

Northwind スプリントボード

この OpenDesign 公式サンプルは、Sprint 38 の Day 6 of 10 における Northwind Growth Squad を表現しています。デスクトップのワークスペースはボードを中央に置き、右側に Sprint Pulse サイドバーを常時表示するため、作業情報とサマリーの文脈を同時に読めます。

上部バーは、カードが始まる前にスコープを示します。「NORTHWIND / GROWTH SQUAD」と「Sprint 38 · Day 6 of 10」が並び、反対側の端に Search tickets、Filter、New があります。この並びにより、現在のスプリントの把握から作業の検索や追加へ素早く移れ、主要領域はタスクの比較に充てられます。

フィルターストリップは、コントロールとタスク内容を分けています。メンバーのイニシャル、Active sprint、Bug、Feature、Research の各ラベル、さらに Group · Status と Sort · Priority のコントロールにより、サンプルボードの整理方法が明確になります。トレードオフは密度で、多くの選択肢が表示されたままですが、別の画面を開かなくてもボードの意図するグルーピングを理解できます。

作業量とブロッカーの確認

このデザインは、待機中、進行中、レビュー中、完了済みの作業を確認するチームに向いています。カードは、色付きの作業タイプバンド、タスク名、担当者アバター、ポイント見積もり、NW-241 のような課題IDという共通の構造を繰り返します。この反復により、種類の異なる作業でもチケットの識別性を保ったまま比較できます。

サンプルデータは、1つのキューにさまざまな種類の作業が並ぶ様子も示しています。「Add empty-state illustration to onboarding step 2」が「Interview 5 new Enterprise admins about 2FA enforcement」の隣にあり、「CSV export drops emoji from project names」は不具合を独立した区分として見せています。タイプバンドは Feature、Design、Research、Chore、Bug を区別しますが、カードの構造が共通なので、それらのカテゴリーを比較できます。

この構成は、詳細なチケットの議論よりも、ざっと見渡すことを重視しています。チームは、リサーチ項目が5 pts、CSV エクスポートの課題が1 ptであることを確認できますが、ボードは見積もりのルールや受け入れ基準を説明しません。本番アプリケーションでは、そうした詳細にはより深いタスクビューが必要で、表示されているデザインの範囲外です。

ボードから Sprint Pulse へ

ワークスペースは左から右へ、Backlog、In progress、In review、Done の順に読みます。表示されているバッジは5、4、3、6です。最初の3つは見えているカード数と一致しますが、Done はバッジが6なのにカードは4枚しかありません。左から右への並びはワークフローの段階を区別できますが、このボードを運用データとして使う前に、サンプルの件数の不一致を解消する必要があります。

進捗バーは、In progress の一部のカードにのみ表示されます。対象は TOTP enrollment UI in member settings、Recovery codes、Fix focus-trap regression in command bar、2FA challenge step です。これにより、進行中の作業と、単にステータスが割り当てられただけのカードが視覚的に分かれます。バーが何を測るものかは定義されていないため、検証済みの完了指標ではなく、例示的な進捗の手がかりとして読むべきです。

サイドバーでは、読む単位がチケットからサンプルのスプリントサマリーに変わります。Completed 22 of 38 pts と表示され、Devon Park が9 pts、Mira Reddy と Priya Banerjee が各5 pts、Caleb Renner が3 ptsと並びます。これらのコントリビューターの値は合計22ですが、見えている Done カード4枚の合計は11ポイントにとどまります。この差について元の資料に説明はないため、サイドバーとボードを突き合わせ済みの成果レポートとして扱うべきではありません。

サイドバー最後のブロックは、ステータスと依存関係の結び付きを明示します。「1 ticket needs unblock」は NW-205 を指し、Brand による文案レビュー を待っていると説明され、「Mention @Sasha or move it back to backlog」が次の対応の案内として表示されます。これをボードの隣に置くと依存関係を見落としにくくなりますが、サイドバーが常に場所を占めるため、タスク領域を広げる余地は減ります。

見えているデザインの範囲

このアーティファクトは、例示用の名前、数値、タスク内容、主張を使った、デザインのみのデスクトップアプリのサンプルです。キャプチャが示すのは、見えている構成、ラベル、色分け、並び順、サンプルの状態までです。接続された本番サービス、永続的な保存、動作する検索、フィルター、チケット作成、リアルタイム更新が存在することまでは裏付けていません。

応用する場合は、4つのワークフロー列と Sprint Pulse サイドバーの関係を維持してください。実用的な実装では、ポイント合計、進捗バー、ブロッカーへの対応、状態変更を運用データとして示す前に、それぞれの明確な定義が必要です。元の資料はこれらの状態をプロトタイプにできる程度にインターフェースの約束事を示していますが、コントロールがすでにそれらを実行していると主張できるほどではありません。