mcpField
D
design-dashboards

design-dashboards

github.com/dastoyanデザイン・UI0177 回インストール15 週間前に更新
リポジトリ

design-dashboards について

design-dashboards は、意思決定に役立つダッシュボードの評価、再設計、仕様策定を行うスキルです。依頼に応じて手順を選び、リアルタイム監視や対応向けの運用設計も扱います。

主な機能

  1. 01既存のレイアウトと指標の評価
  2. 02要件に基づくダッシュボード案の作成
  3. 03意思決定を軸にした目標と流れの再設計
  4. 04実装向けダッシュボード仕様の作成
  5. 05運用ダッシュボードの確認項目に対応
  6. 06設計原則を参照した分析

活用シーン

  1. 01ダッシュボード画像の問題点確認
  2. 02業務要件からダッシュボードを構想
  3. 03意思決定に沿った既存画面の再構成
  4. 04リアルタイム運用画面の仕様策定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dastoyan/skills --skill design-dashboards

インストール後、Claude Code で/design-dashboardsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

NOTICE.md
README.md
references/
dashboard-design-principles.md

詳細

ダッシュボードの設計

このスキルは、ダッシュボードをプレゼンテーション用のグラフィックではなく、意思決定のための実用的なツールとして批評、設計、再設計、または仕様化する際に使用します。

ダッシュボードに関する判断が重要となる批評、再設計、運用ダッシュボードの作業、ベストプラクティスのレビュー、仕様の作成に着手する前に、references/dashboard-design-principles.md を開いてください。チャート、レイアウト、ゲシュタルト、知覚、インタラクション、視覚的エンコーディングに関する検討が不要な、単純なコンセプトスケッチの場合に限り、参照は任意です。

モードの選択

ユーザーのリクエストに合う、最も限定的なモードを選んでください。

運用、リアルタイム、監視、キュー、インシデント対応、またはその他の対応を目的としたダッシュボードがリクエストに含まれる場合は、まずタスクに応じた通常のモードを選び、そのうえで運用ダッシュボードのワークフローも適用してください。

  • 既存の運用ダッシュボードの批評:モード 1 と運用ダッシュボード
  • 新しいリアルタイムまたは運用ダッシュボード:モード 2 と運用ダッシュボード
  • 既存の運用ダッシュボードの再設計:モード 3 と運用ダッシュボード
  • 運用ダッシュボードの仕様:モード 4 と運用ダッシュボード
モード 1:ダッシュボードの批評と調整

ユーザーが既存のダッシュボード、スクリーンショット、ワイヤーフレーム、チャート群を提示した場合や、ダッシュボードがベストプラクティスに沿っているかを尋ねた場合は、デフォルトでこのモードを使用してください。すぐに実行できる改善点、視覚デザイン上の問題、ゲシュタルトの評価、戦略上の懸念、論理的な欠落を示してください。過度な再設計は避けてください。

次の点を維持してください。

  • ダッシュボードの目的。ただし、明らかに問題がある場合を除きます
  • 可能な限り、現在の情報アーキテクチャ
  • 明らかに誤解を招く KPI を除き、既存の KPI
  • プロダクトの制約とビジュアルランゲージ

目的、ダッシュボードの役割、KPI の妥当性、比較コンテキスト、チャートとレイアウトの適合性、視覚的な強調、インタラクションの挙動、戦略上の不足点に焦点を当ててください。

次の項目を含めてください。

  • 判定
  • うまく機能している点
  • 重大度順の問題
  • ゲシュタルトの評価
  • チャート/KPI の修正
  • レイアウト、色、インタラクションの調整
  • 戦略上の懸念
  • どのようなコンテキストがあれば評価が変わるか
  • 推奨する次のステップ

次の 3 段階で重大度を示してください。

  • 高:ダッシュボードの意思決定を妨げる、または誤解を招く
  • 中:理解を遅らせる、または比較を弱める
  • 低:仕上げ、一貫性、効率に関する問題

主要な KPI、チャート、レイアウトグループ、色や強調のパターン、インタラクション領域、ダッシュボードの役割との不一致のすべてについて、「維持」「修正」「置き換え」「対象外」のいずれかに分類できたら完了です。ダッシュボードの目標や仕様が提示されていない場合は、前提を明記し、戦略的な評価は暫定的なものだと伝えてください。推奨する次のステップでは、Dashboard Spec Grill を挙げ、正確なトリガーフレーズ「Run Dashboard Spec Grill.」を示してください。

モード 2:新しいダッシュボードのコンセプト

ビジネス上の課題、要件、指標、または白紙の状態から始める場合に使用してください。

1~3 個のコンセプトを提示してください。不確実性が高い場合は、対照的な 2 つのコンセプトを提示します。1 つは監視の明瞭さを重視し、もう 1 つはより深い分析を重視します。

各コンセプトに次の項目を含めてください。

  • コンセプト
  • 最適な用途
  • 主なストーリー
  • 対象ユーザー
  • 回答する主な質問
  • レイアウト
  • ビジュアル
  • 表示するコンテキスト
  • 色/強調
  • トレードオフ
  • 避けること

対象ユーザー、主要な意思決定、更新頻度、ダッシュボードの役割、KPI モデル、必要な比較コンテキスト、レイアウト領域、ビジュアルの選択、ドリルダウン/アラートの挙動、概要に含めない情報が特定できたら完了です。これらの入力が不足しており、コンセプトに大きく影響する場合は、確認の質問を 1 つするか、Dashboard Spec Grill を実行してください。

モード 3:既存ダッシュボードの再設計

既存のダッシュボードがありながら、コンセプト、KPI モデル、意思決定の流れ、または全体構造を見直したい場合に使用します。再設計、再考、このダッシュボードは適切な問いに答えているか、ダッシュボード戦略を改善する、このダッシュボードを作り直す、このダッシュボードをもっと役立つものにするといった依頼がきっかけとなります。

現在のダッシュボードは制約ではなく、入力情報として評価します。何を残し、何を変更し、どのようなコンセプトに置き換えるべきかを特定します。

以下を返します:

  • 現在の役割
  • 不一致
  • 新しいダッシュボードの目標
  • 対象ユーザーと意思決定
  • KPI モデル
  • 提案する構成
  • チャートとインタラクションのモデル
  • 現在のダッシュボードからの移行
  • リスク/トレードオフ

再設計で何を残し、何を削除し、新しいダッシュボードがどの意思決定を最適化するのか、KPI がどのように変わるのか、古い構成に代わるチャートやインタラクションは何か、何をドリルダウンに移すのか、どのような移行リスクが残るのかを明示したら完了です。見た目は洗練されていても戦略的に弱いダッシュボードは、率直に指摘してください。

モード 4:ダッシュボード仕様

ワイヤーフレーム、パネル仕様、KPI 一覧、KPI とチャートの対応付け、実装可能なダッシュボード構成が必要な場合、または要件をダッシュボード仕様にまとめるよう求められた場合に使用します。

以下を作成します:

  • 目標
  • 対象ユーザー
  • ダッシュボードの種類
  • KPI 一覧
  • 優先度の強調モデル
  • セクション
  • KPI とビジュアル
  • しきい値/コンテキスト
  • インタラクション
  • デザイン上の注意点

知覚、比較、意思決定支援に基づいて提案します。

対象範囲内のすべての KPI またはセクションについて、推奨する配置、比較の文脈、視覚的な表現、該当する場合はインタラクションやアラートの動作を示したら完了です。重要な入力情報が不足している場合は、前提と不明点を明示するか、Dashboard Spec Grill を実施します。

運用ルール

  1. ビジュアルを選ぶ前に、意思決定、対象ユーザー、更新頻度から着手します。
  2. 重要な入力情報が不足している場合は、前提を示してから妥当なデザインを提案します。
  3. 選択肢が競合する場合は、方向性を一つ推奨します。
  4. ダッシュボードのデザインルールに関する唯一の情報源として、references/dashboard-design-principles.md を扱います。
  5. 数値スコアやスコアカードは提示しません。
  6. 率直に伝え、明らかなデザイン上の問題を和らげて表現しません。
  7. ダッシュボードの一貫性にはゲシュタルトの原則を用います。個々の仕上げより先に、グルーピング、階層、視線の流れ、図と地を評価します。

よくある入力情報

実用最小限の入力情報を収集するか、推定します:

  • 対象ユーザーと役割
  • 主な意思決定または問い
  • ダッシュボードの種類:モニタリング、分析、管理、またはリアルタイム運用
  • 主要な指標、ディメンション、比較対象、時間枠
  • 更新頻度とデータの鮮度に関する期待
  • しきい値、目標、ベンチマーク、または例外ルール
  • ドリルダウンの要件
  • 画面またはフォームファクターの制約
  • アラート処理の要件:確認、ミュート、リセット、フリーズ/解除、エスカレーション
  • 概要で扱わないこと

簡易レビューの前に確認する質問は、最大 1 つにします。答えによってレビューや構成が大きく変わる場合に限り、質問してください。それ以外の場合は前提を示して進め、戦略的な確信を持つにはコンテキストが不足している場合、Dashboard Spec Grill を推奨します。推奨する際は、次の文言をそのまま使用してください:Run Dashboard Spec Grill

補助ワークフロー

ダッシュボード仕様の掘り下げ

ユーザーがダッシュボードをさらに具体化したい場合、批評に戦略的な確信を得るための文脈が足りない場合、またはダッシュボードの仕様を掘り下げてほしいと依頼した場合に使用します。明示的なトリガーには、Run Dashboard Spec Grill、Dashboard Spec Grill、grill this dashboard、spec this dashboard が含まれます。インタビューの内容はダッシュボードに絞り、設計や批評に十分な意思決定モデルが明らかになった時点で終了します。

一度にすべてを尋ねず、段階的に質問します。すべての共通入力に加えて、ダッシュボードが意図的に答えないことも確認します。

対象者、意思決定、実施頻度、ダッシュボードの種類、KPI モデル、比較の文脈、例外ルール、主要なドリルダウンが把握できているか、明示的に不明と記されていれば完了です。その後、仕様を要約し、次に使用するダッシュボード批評、コンセプト、再設計、仕様策定のモードを推奨します。

運用ダッシュボード

ダッシュボードがリアルタイム、運用、アラート、対応を重視するもの、または監視、キュー、インシデント、SLA、稼働状態、コマンドセンター、トリアージに使用される場合は、選択したモードと併用します。ステータス、データの鮮度、しきい値、対応動作を、ダッシュボードの主要な意思決定モデルの一部として扱います。

以下を重視します。

  • シンプルな表示媒体
  • 数を絞り、目立たせた例外
  • 明確なしきい値と現在の状態
  • 対応可能な詳細への直接アクセス
  • すべて正常な状態では目立たせない表示
  • ライブ更新中も安定したスキャン領域
  • 調査に役立ち、緊急状態を見えにくくしない場合に限り、フリーズ/フリーズ解除をサポート

以下を明確に確認します。

  • ステータスモデル:正常、警告、重大、古い、未知、抑制済み、解決済みの状態
  • 例外条件、しきい値、重大度、発生からの経過時間、信頼度
  • 担当者、次のアクション、エスカレーション経路、想定応答時間
  • 必要に応じた確認、割り当て、ミュート、リセット、フリーズ/フリーズ解除、監査の動作
  • データの鮮度インジケーター、データ遅延状態、データなし状態、システム障害状態
  • 自動的に表示される内容と、クリックまたはホバーで表示される内容
  • ライブ更新が調査に与える影響
  • ステータスまたは例外から、原因、影響を受けたエンティティ、履歴、最近の変更へ進むドリルダウン経路

すべての運用ステータス、例外、または対応画面について、しきい値/重大度のロジック、データの鮮度、担当者/アクション、対応状態、エスカレーションまたは抑制の動作、ドリルダウン経路が考慮されているか、該当しないと明示されていれば完了です。

コメント