ux-dashboard

ダッシュボードスキル

このスキルの動作(最初にお読みください)

これは生成的なスキルであり、ダッシュボードには特有の過剰設計という罠があります。つまり、利用可能なあらゆる指標を1つの画面に詰め込んでしまうことです。教訓が示すとおり — 「すべてが重要なら、何も重要ではない」。デフォルトの本能はすべてのデータを見せることですが、優れたダッシュボードはユーザーの問いに答える少数のものだけを見せます。そこでこのスキルでは次のようにゲートします:

1. 誰が見ていて、どのような意思決定を行うのかを明確にする — これが画面に何を含めるべきかを決めます。
2. 常に当てはまる核心を適用する — あらゆるダッシュボードに当てはまる組織化、階層、チャート適合の原則です。
3. 密度、詳細、チャートの種類を意図的に決める — 「すべてを見せる」というデフォルトに頼るのではなく、状況依存の選択肢を表面化させます。

その後、監査に引き渡します — 特に aesthetics(ここでは雑然さ/階層が成否を分けます)。

---

ステップ 0 — 設計前にコンテキストを確立する

• オーディエンスとその人が行う意思決定 — いつ、なぜこれを閲覧するのか、そしてデータが導くべきアクションは何か。(本当の答えはユーザーリサーチにあります。不明な場合は尋ねてください。)これが何を含めるべきかのフィルターです。
• ダッシュボードの種類:
  • オペレーショナル — リアルタイム、モニタリング、即時の対応が必要(患者のバイタル、航空交通)。一目で全体を把握でき、頻繁に更新されます。
  • アナリティカル — 調査と思慮深い意思決定のため(販売ダッシュボードなど)。時間に敏感ではなく、ドリルダウンをサポートします。
• 役割 — オーディエンスは1つですか、それとも複数ですか?複数の役割がいる場合 → カスタマイズが重要になります。
• プラットフォーム — 画面サイズが、いくつのウィジェットが収まるか、そしてレスポンシブレイアウトを左右します。

回答なしで進める場合は、前提を明示してください。

---

常に適用する核心(あらゆるダッシュボードに当てはまる)

• 手元にあるデータからではなく、ユーザーの問いから始める。 各ウィジェットについて問いかけてください:「これはどの意思決定を支えるのか?」何も支えないなら、削除します。目標 + ユーザーニーズ + データの性質がウィジェットを選ばせます。
• 圧倒しない。 包括的な多数よりも、関連する少数を。階層のない密度は混乱です。
• スキャンのために優先順位をつける。 人は読みません、スキャンします。最も重要な指標を、目が最初に留まる位置に置きます。重要度順に並べます。
• 関連するコンテンツをグループ化する。 コンテナ、区切り線、余白を使って、関連する指標が1つのグループとして読めるようにします(共通領域の原則)。セクションのラベル/タイトルは視覚的なアンカーとして機能します — それらを際立たせてください。
• 余白を使って分割し強調する — データが密な画面での可読性を高め、重要な数値に余裕を与えます。
• 構造を一貫させる — コンテナ間で配置、タイトルサイズ、マージンを共有します。これによりレスポンシブレイアウトもスケールしやすくなります。
• 比較するデータを一緒に見えるように保つ。 ユーザーが比較する必要のあるものをタブやポップアップの背後に埋もれさせないでください。常に必要な情報を隠してはいけません。タブは並べて比較しないコンテンツにのみ使います。
• チャートをデータに合わせる(下記のリファレンスを参照) — 最も効果の大きい正確性の判断です。

---

文脈依存の判断（表面化させ、自動適用しない）

判断	適用する場合	避ける／適応させる場合	デフォルトの推奨
運用志向か分析志向かのフレーミング	リアルタイム監視では、ひと目で把握できる包括的なレイアウトが必要	分析用途ではドリルダウンを求め、時間的プレッシャーは少ない	ステップ 0 のタイプに合わせてレイアウト／更新頻度を選ぶ
表示する指標／ウィジェットの選定	その指標が実際の意思決定を支える	「データがあるから」／バニティ指標	ユーザーの問いに答えるものだけに容赦なく絞る
詳細度／ドリルダウン	分析ダッシュボードは概要 → 詳細が有効	すべてを一度に表示する必要がある運用ダッシュボード	まず概要、次に段階的なドリルダウン。比較をタブで隠さない
指標ごとのグラフ種別	データの意図（傾向／比較／全体の一部／相関）で選ぶ	装飾的なグラフ選び。カテゴリが多い場合の円グラフ	データに合わせる（下記参照）
役割ごとのカスタマイズ	複数役割のシステム（営業マネージャー対アナリスト）	単一でよく知られたオーディエンス（不要な複雑さを加える）	役割が本当に異なる場合に提供する
リアルタイム更新	運用監視	分析レビュー（絶え間ない更新はノイズ）	意思決定のスピードに合わせた更新頻度

---

グラフの選択と誠実さ（クイックリファレンス）

データの意図にグラフを合わせる：

• 棒 — 離散的なカテゴリを比較。折れ線 — 時間の経過に伴う傾向。面 — 時間の経過に伴う傾向＋量。円／ドーナツ — 全体の一部（スライスは少数のみ）。散布 — 2 変数間の相関。バブル — 3 次元。レーダー — 複数変数の比較（少数）。ローソク足 — 金融価格の範囲。

グラフの誠実さと明瞭さ（譲れない — これらはユーザーを誤導し、排除する）：

• 軸はゼロから開始する。 基線を切り詰めると差異が誇張され、誤解を招きます。（意図的に誤解を招く可視化 → ダークパターン監査でフラグを立てる。）
• 3D グラフのスタイリングは行わない — 知覚される値を歪めます。
• 色だけで意味をエンコードしない — アイコン／ラベル／図形と組み合わせる（→ アクセシビリティ）。
• 水平ラベル、読みやすい注釈、一貫した色／マーカー、適切な間隔（1 年を日次ティックに詰め込まない）、標準的な角張った棒、複数折れ線グラフにおけるフォーカス／非フォーカス状態。

---

結果を検証する（オーケストレーション）

ハンドオフでは、各レンズをインストール可能なスキルの name で指定します。そのスキルがインストールされている場合のみ呼び出してください。インストールされていない場合、このスキル自体のコアにすでにこれらのルールが含まれています — ブロックせずにそのまま進めてください。

生成または改訂した後、完了と宣言するのではなく、結果を監査レンズに渡してください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定するか、すべてを ux-design-review 経由でルーティングします。ここでは、heuristics、dark-patterns、microcopy はティア A（自動実行）、accessibility と aesthetics はティア B（提供） です — 既存のデザインシステムの下では aesthetics は抑制され、accessibility は使用状況に絞られます。ユーザーがこのスキルを特定の 1 つの目的で呼び出した場合は、その範囲を尊重してください。

• ux-aesthetics-audit (ティア B — 提供。デザインシステムの下では抑制) — ダッシュボードの成否を分けるもの：雑然さ、視覚的階層、余白、コンテナのグループ化、「1 つのものが明確に最も重要か？」
• ux-heuristics-audit (ティア A) — 認識、ステータスの可視性（特に運用）、ユーザーコントロール（カスタマイズ）、比較の可視化維持。
• ux-accessibility-audit (ティア B — 提供。デザインシステムの下では絞り込み) — グラフの色が唯一のエンコードでないこと、コントラスト、ラベル付きセクション、インタラクティブウィジェットへのキーボードアクセス。
• ux-dark-patterns-audit (ティア A) — 誤解を招く可視化：切り詰められた軸、3D の歪み、都合よく選ばれた間隔。
• ux-microcopy-audit (ティア A) — セクションタイトル、ラベル、注釈が明確で一貫していること。

aesthetics が過負荷を指摘した場合、ゲートに戻ってください：ユーザーの問いに答えるウィジェットだけに絞り込みます。

---

よくある do/don't パターン

❌ しないこと	✅ すること
持っているすべての指標を表示する	意思決定を支える少数の指標を表示する
すべてを同じ視覚的な重みで扱う	優先順位をつける。最も重要なものを最初に目が行く場所に置く
ゆるく浮かぶウィジェットをひとつの平面上に並べる	コンテナ、区切り線、余白、ラベル付きセクションでグループ化する
比較データをタブの裏に隠す	並べて比較するデータは一緒に見えるようにする
装飾的なグラフの選択 / 12 切れの円グラフ	データの意図に合ったグラフを選ぶ
途中で切れた y 軸 / 3D 棒グラフ	ゼロを基準線に、フラットなグラフ — 誤解を招かないようにする
色だけの系列凡例	色 + アイコン/ラベル/形
縦書き/斜めの軸ラベル	横書きで読みやすいラベル
確認せずに出荷する	美しさ + ヒューリスティクス + アクセシビリティに引き継ぐ

---

出典レッスン (Uxcel)

• How to Design Dashboards for Better Analytics
• Types of Charts & When to Use Them
• Best Practices for Designing Charts