coastdigitalgroup/coastai-skills

データ可視化システム

目的

データ可視化システムは、個々のメトリクスの上位レベルでチャートやグラフを設計するための方法論を提供します。これにより、経時的なトレンド、カテゴリ間の比較、値の分布などの定量的な関係が、明確かつ正確に、そしてアクセシブルに伝達されることを保証します。このシステムは、チャート選択、光学的正規化、アクセシブルな色分け、レスポンシブリフローのルールを確立することで、「視覚的ノイズ」や認知過多を防止します。

ユースケース

• SaaSダッシュボード: ユーザー成長、収益トレンド、システムパフォーマンスの可視化。
• 財務レポート: ポートフォリオ分布、経費カテゴリ、市場変動の表示。
• 分析プラットフォーム: トラフィックソース、コンバージョンファネル、行動コホートの表示。
• インパクト＆サステナビリティレポート: 環境メトリクスや社会的インパクトデータの経時的可視化。
• ヘルス＆フィットネスアプリ: バイタル、活動レベル、目標達成度の追跡。

使用すべきでない場合

• 単一の影響力の大きい数値: 孤立したKPI（例：「総収益：1万ドル」）の場合は、metric-and-statistic-system を使用してください。
• 生の多属性データ: ユーザーが20項目以上の特定の値を複数列で読み取る必要がある場合は、data-table-ui-system を使用してください。
• 純粋に装飾的なインフォグラフィック: 非動的、非データ駆動型のグラフィックを用いた芸術表現やナラティブストーリーテリングが目的の場合。
• 段階的なステータス表示: 線形プロセス（例：「ステップ2/4」）の場合は、step-progress-system を使用してください。

入力

1. ユーザーの目標: ユーザーは何を理解しようとしているか？（比較、トレンド、分布、部分-全体関係）。
2. データタイプ: データはカテゴリカル（例：「ブラウザタイプ」）、テンポラル（例：「月別売上」）、または定量的（例：「価格 vs. 品質」）か？
3. カーディナリティ: 同時に表示する必要がある項目または系列の数は？
4. デバイス制約: ターゲットビューポートとインタラクションモード（タッチ vs. マウス）。
5. ブランドトークン: 親デザインシステムからのパレット、タイポグラフィ、スペーシング。

出力

1. チャート選択マップ: 目標とデータに基づいて選択されたチャートタイプ（折れ線、棒、円、散布図）。
2. アクセシブルカラー仕様: 色覚異常（第一色盲、第二色盲、第三色盲）のユーザーにも識別可能なパレット。
3. 構成要素とラベリング仕様: 軸タイトル、凡例、ツールチップ、データマーカーのルール。
4. レスポンシブ遷移マップ: チャートがデスクトップからモバイルにどのように適応するか（例：向きの変更、データの簡略化）。

ワークフロー

1. コミュニケーション目標の特定

チャートを選択する前に、データが何を「伝える」べきかを定義します：

• 経時的トレンド: 折れ線チャート または 面グラフ を使用します。
• カテゴリの比較: 棒グラフ（垂直または水平）を使用します。
• 部分-全体関係: ドーナツチャート または ツリーマップ を使用します（標準の円グラフは3カテゴリ以上で避ける）。
• 相関/分布: 散布図 または ヒストグラム を使用します。

2. チャートタイプの選択と正規化

「データの真実」ルールを適用して正確性を確保します：

• ゼロベースラインルール: 棒グラフは、差を誇張しないために値軸のベースラインをゼロから開始する必要があります。
• アスペクト比ルール: 折れ線グラフでは、傾きが人為的に急になったり緩やかになったりしないように、バランスの取れたアスペクト比（通常2:1または3:2）を維持します。
• ミニマリストジオメトリ: 3D効果、重いグリッド線、データを伝えない影など、本質的でない「チャートのジャンク」を削除します。

3. 視覚的階層とラベリングの確立

visual-hierarchy-system をチャートコンポーネントに適用します：

• 直接ラベリング: 可能な限り、データ系列のラベルを線/棒のすぐ隣に直接配置し、別の凡例を使用しないことで眼球運動の疲労を軽減します。
• 強調: 「現在」または「目標」のデータ系列には高コントラストの色を使用し、履歴データやベンチマークデータには控えめなニュートラルカラーを使用します。
• コンテキストの階層: 軸タイトルは存在させるが、主要なデータやチャートタイトルよりも従属させる（小さく/薄く）。

4. アクセシブルな色とパターンの適用

誰もがデータを知覚できるようにします：

• 色覚異常セーフパレット: 異なる色相と変化する明度ステップを使用します。「悪い」vs「良い」を示すために赤と緑のみのペアリングは避け、赤/青を使用するか、アイコン/記号を追加します。
• 冗長エンコーディング: 色だけに頼らないでください。破線、異なるマーカー形状（丸、四角、三角）、または異なるパターン/テクスチャを追加して系列を区別します。
• コントラスト: すべてのテキスト（ラベル、軸）が背景に対してWCAG AA（4.5:1）のコントラストを満たしていることを確認します。

5. インタラクションとレスポンシブネスの設計

• プログレッシブディスクロージャー: ツールチップを使用してホバー/タッチ時に正確な値を表示し、チャートをクリーンでスキャンしやすい状態に保ちます。
• レスポンシブリフロー:
  • 水平から垂直へ: デスクトップ上の幅広の垂直棒グラフは、モバイルでは水平棒グラフに切り替えて水平スクロールを避ける必要があります。
  • データ削減: モバイルでは、X軸ラベルの数を減らす（例：一か月おきに表示）か、データポイントを集約します。
  • アスペクト比の固定: チャートの読みやすさを維持するために、CSSの aspect-ratio を使用してスペースを予約し、CLSを防ぎます。

決定ルール

• 「No Pie」ルール: 5つ以上のカテゴリがある場合、またはカテゴリ間の差が小さい場合は、円/ドーナツチャートを避けてください。代わりに水平棒グラフを使用します。
• 凡例よりラベリング: 凡例が必要な場合は、絶対的な下部ではなく、データにできるだけ近い場所（例：チャートの上または右揃え）に配置します。
• モノクロ成功: 良いチャートは、グレースケールで印刷されても理解できる必要があります。そうでない場合、色の選択やマーカーが色相のみに依存しすぎています。
• 精度 vs. スキャン: ダッシュボードでは、即座にスキャンできるように値を丸めます（例：1,242,301ではなく1.2M）。高い精度はツールチップに残します。

制約条件

• アクセシビリティ: チャートには、主要な洞察を要約した付随するデータテーブルまたは説明的な aria-label が必要です。role="graphics-document" または role="img" と aria-label を使用します。すべてのインタラクティブ要素（マーカー）は、24x24pxの最小ターゲットサイズを満たしている必要があります。
• レスポンシブネス: チャートは固定ピクセル幅を持つことはできず、流動的である必要があります。複雑なSVGチャートの場合は、スケーリングに viewBox を使用します。
• 階層: チャートのタイトルが最も目立つテキストであり、その次にデータ自体が続く必要があります。

よくある失敗パターン

• 円グラフの過負荷: 円グラフで10個のスライスを表示しようとすると、小さなスライスが区別できなくなります。
• 切り詰められた軸: 小さな差を大きく見せるために、棒グラフをゼロ以外の値から開始する（欺瞞的なデザイン）。
• 色のみへの依存: 折れ線グラフで5本の線を類似した青色の色合いだけで区別すると、色覚異常のユーザーにとってアクセス不能になります。
• 凡例疲れ: ユーザーにカラーキーとデータの間を何度も行き来させてチャートを理解させること。
• モバイルチャートのあふれ: モバイル向けにチャートタイプやラベリングを調整せず、小さく読みにくいテキストや壊れたレイアウトを引き起こすこと。

検証基準

• チャートタイプの選択がコミュニケーション目標と一致している（例：トレンドには折れ線）。
• 棒グラフがゼロベースラインから始まっている。
• カラーパレットが色覚異常セーフであり、冗長エンコーディング（マーカー/パターン）を使用している。
• スペースが許せば直接ラベリングが使用され、凡例は近接して配置されている。
• チャートが流動的で、モバイルに正しく適応している（例：水平リフロー）。
• アクセシビリティ：aria-label がデータ/洞察の要約を提供している。
• インタラクション：ツールチップがホバー/タッチ時に正確なデータを提供する。
• すべてのテキストがWCAG AAコントラスト（4.5:1）を満たしている。