dashboard-design

Vizro ダッシュボードの設計

構造化された 要件 → レイアウト → 可視化 ワークフローです。

ワークフローの実行

ステップ 1～3 を順番に実行してください。各ステップは前のステップに依存します。進捗を記録してください。

Dashboard Development Progress:
- [ ] Step 1: Understand Requirements (define end user, dashboard goals, document decisions)
- [ ] Step 2: Design Layout & Interactions (wireframes, filter placement)
- [ ] Step 3: Select Visualizations (chart types, KPIs; colors only if user asked)

対話スタイル：要件を集めるときや設計上の判断を行うときは、的を絞った質問をして、ユーザーがすばやく選べるよう 番号付きの選択肢を 2～5 個提示してください。やり取りを簡潔にし、クリックで選択できるよう、クライアントに組み込まれた複数選択または質問用の UI を優先してください。利用できない場合は、同じ番号付き形式をプレーンテキストで使用してください。

ステップを省略しないでください。 コンテキストが一部しかない場合は、次のように対応してください。

• ユーザーはデータを持っているが要件はない → ステップ 1 から開始する
• ユーザーは要件を持っているがデータはない → データを尋ねるか、サンプルデータを提案する
• ユーザーはワイヤーフレームを持っている → ステップ 1 の決定事項を検証してから、ステップ 2 に進む
• ユーザーはビジュアルデザイン／モックアップを持っている → ステップ 1～2 の決定事項を検証してから、ステップ 3 に進む
• ユーザーが「そのまま作って」と依頼する → ステップを踏む価値を説明し、省略せずに簡略化する方法を提案し、データを尋ねるか、サンプルデータを提案する

---

シンプルなダッシュボード（1 ページ、チャート 5 個未満）の場合、ステップ 1～3 は簡略化できますが、完全に省略することはできません。

---

仕様ファイル：決定事項の記録

重要：各ステップでは、設計の根拠を記録し、共同作業を可能にして、今後のセッションで再開できるように、spec/ ディレクトリ内に仕様ファイルを作成します。プロジェクトの開始時に spec/ ディレクトリを作成してください。

---

ステップ 1：要件を把握する

目標：提示する情報と、その情報が重要な理由を定義します。

話し合う重要な質問

1. ユーザー：このダッシュボードを使うエンドユーザーは誰ですか？ユーザーの種類ごとに、どのような判断を行う必要がありますか？どのようなタスクや業務を達成する必要がありますか？
2. 目標：解決すべき現在の問題は何ですか？このダッシュボードの目標は何ですか？
3. データ：利用可能なデータソースは何ですか？更新頻度はどのくらいですか？
4. 構成：ページまたはビューはいくつありますか？どのようにグループ化するのが論理的ですか？

設計原則

• KPI を絞る：1 ページあたりの主要指標は 5～9 個（7 ± 2 のルール）
• 明確な階層：概要 → 詳細 → 粒度の細かい情報（最大 3 階層）
• ペルソナに基づく：ユーザーによって必要なビューは異なる場合があります
• 意思決定を重視する：すべての指標が判断に役立つようにします

必須の出力：spec/1_information_architecture.md

assets/1_information_architecture.md のテンプレートをプロジェクトのルートにある spec/1_information_architecture.md にコピーし、プレースホルダーに値を入力してから、ステップ 2 に進む前に保存してください。

検証チェックリスト

ステップ 2 に進む前に、次を確認してください。

• すべてのページに明確で固有の目的がある
• KPI が測定可能で、具体的な行動につながる
• データソースにアクセスできる
• ユーザーが構成を確認済みである

詳細なガイダンス：information_architecture.md を参照してください。アンチパターン：common_mistakes.md の「Step 1: Requirements Mistakes」セクションを参照してください。

---

ステップ 2：レイアウトとインタラクションを設計する

目標：ユーザーがデータをどのように移動して探索するかを定義します。

Vizro のナビゲーションアーキテクチャ

Tier 1: Global Navigation
├── Multi-page sidebar (automatic in Vizro)
└── Page selection

Tier 2: Page-level Controls
└── Filters/Parameters in left collapsible sidebar

Tier 3: Component-level
├── Container-specific filters/parameters
├── Cross-filter, cross-highlight interactions
└── Export actions

レイアウト戦略

グリッドシステム、コンポーネントのサイズ、フィルターの配置、セレクターのルールについては、designing-vizro-layouts スキルを読み込んでください。ユーザーの承認を得るために ASCII ワイヤーフレームを作成する際は、ワイヤーフレームのテンプレートを使用してください。

インタラクション設計

標準的なサイドバーフィルターに加えて、Vizro では、チャートやテーブルをクリックするとほかのコンポーネントに影響する高度なインタラクションをサポートしています。wiring-vizro-actions スキルを読み込み、名前付きの 6 つのインタラクションパターン（階層型ドリルダウン、単一ページのドリルダウン、比較スポットライト、多次元スライス、選択して探索、データエクスポート）について、ワイヤーフレーム、仕様エントリ、コードを確認してください。

高度なインタラクションはすべて、ソース → コントロール → ターゲットに従います。ソースコンポーネント（Graph または Table — クリックデータを持つコンポーネント）が中間コントロール（Filter または Parameter。必ず明示的な id を指定）を設定し、それによってデータを持つターゲットコンポーネント（Graph、Table、Figure）が更新されます。

判断フロー — データの形状とユーザーのニーズに合ったパターンを選びます。

Hierarchy where detail needs its own page?    → Pattern 1 (Hierarchical Drill-Down)
Hierarchy where detail fits in a container?   → Pattern 2 (Single-Page Drill-Down)
Compare one entity vs many, keep context?     → Pattern 3 (Comparison Spotlight)
2+ categorical dimensions, click one cell?    → Pattern 4 (Multi-Dimensional Slice)
Users need to download data?                  → Pattern 5 (Data Export)
Otherwise → standard filters/parameters are sufficient

高度なインタラクションを使用しない場合：閲覧専用／経営幹部向けダッシュボード、単純なフィルタリングのニーズ（サイドバーのドロップダウンで対応可能）、グループ数が約 5 未満の場合、または 1 ページに 2 つを超えるインタラクションパターンを配置することになる場合（わかりにくくなります）。

各インタラクションについて、ソースコンポーネント、ソース値（列、または "x"／"y"）、コントロールの id と種類（Filter／Parameter）、ターゲット、表示設定（ハイライトパターンでは visible=False）、ページをまたぐかどうか（show_in_url=True）を記述します。完全なテンプレートについては、wiring-vizro-actions スキルを参照してください。

必須の出力：spec/2_interaction_ux.md

assets/2_interaction_ux.md のテンプレートをプロジェクトルートの spec/2_interaction_ux.md にコピーし、プレースホルダー（ページごとに 1 つの ASCII ワイヤーフレームを含む）を埋めて、ステップ 3 に進む前に保存してください。標準フィルター／パラメーターで十分な場合は、## Interactions セクション全体を削除してください。

検証チェックリスト

ステップ 3 に進む前に、以下を確認してください。

• レイアウトが Vizro の制約に従っている
• フィルターの配置に意図があり、その内容が記録されている
• すべてのページの ASCII ワイヤーフレームをユーザーに提示し、承認を得ている
• interactions: の各エントリが wiring-vizro-actions の名前付きパターンに対応している（または、インタラクションがないことが意図的である）
• ユーザーがインタラクションのフローを確認している

アンチパターン：common_mistakes.md の「ステップ 2：レイアウトとインタラクションの誤り」を参照してください。

---

ステップ 3：ビジュアライゼーションを選択する

目標：適切なチャートタイプを選び、ビジュアルの一貫性を確立します。

チャートタイプ、色、KPI

selecting-vizro-charts スキルを読み込み、チャートの選択、色の戦略、アンチパターン、KPI カードのルールを確認してください。主な設計上の決定事項：

• データに関する問いにチャートタイプを合わせます（比較には棒グラフ、傾向には折れ線グラフ、円グラフは 2～5 個のスライスに限ります）
• 色：仕様に ## Colors セクションを含めないでください。Vizro がパレットを自動で割り当てます。ユーザーがメッセージでカスタムカラーを明示的に指定した場合にのみ含めてください。
• 組み込みの kpi_card／kpi_card_reference を使用し、カスタムチャートとして作り直すことは避けてください

必須の出力：spec/3_visual_design.md

assets/3_visual_design.md のテンプレートをプロジェクトルートの spec/3_visual_design.md にコピーし、プレースホルダーを埋めて、実装（dashboard-build スキル）に進む前に保存してください。ユーザーがカスタムカラーを明示的に指定していない限り、## Colors セクションを追加しないでください。Vizro がパレットを自動で割り当てます。

検証チェックリスト

実装（dashboard-build スキル）に進む前に、以下を確認してください。

• チャートタイプがデータ型に合っている（時系列データに円グラフを使用していない）
• アンチパターンを使用していない
• カスタムチャートの必要性を特定している
• ユーザーがカスタムカラーを明示的に指定していない限り、## Colors セクションが存在しない

アンチパターン：common_mistakes.md の「ステップ 3：ビジュアライゼーションの誤り」を参照してください。

参考ファイル

参考資料	読み込むタイミング
information_architecture.md	ステップ 1：要件の詳細な確認
designing-vizro-layouts スキル	ステップ 2：グリッドシステム、コンポーネントのサイズ設定、フィルター
wireframe_templates.md	ステップ 2：ワイヤーフレームのテンプレートとインタラクションラベル
wiring-vizro-actions スキル	ステップ 2：クロスフィルター／クロスハイライト／ドリルスルー／エクスポートのパターン
selecting-vizro-charts スキル	ステップ 3：チャートの種類、アンチパターン
common_mistakes.md	すべてのステップ：避けるべきアンチパターン