coastdigitalgroup/coastai-skills — メトリクスと統計システム

メトリクスと統計システム

目的

メトリクスと統計システムは、定量データを即座に理解可能で、文脈的に適切な形で可視化するための方法論を提供します。単に「数字を表示する」ことを超え、数値の階層、トレンドの可視化、セマンティックカラーリング のルールを確立し、ユーザーが深く分析しなくても値の重要性（例：「42％は良いのか悪いのか？」）を把握できるようにします。

ユースケース

• SaaSダッシュボード: MRR、チャーン、アクティブユーザーなどの主要業績評価指標（KPI）の表示。
• マーケティングのソーシャルプルーフ: 「数字で見る」セクション（例：「1万以上の顧客」「99.9%の稼働率」）の強調表示。
• ヘルス＆モニタリング: システムパフォーマンス、エラー率、リソース使用率の可視化。
• パーソナルアナリティクス: フィットネス、ファイナンス、生産性アプリにおける目標達成度の表示。
• Eコマース: レビュー数、在庫レベル、「過去24時間の販売数」の表示。

使用すべきでないケース

• 生データセット: ユーザーが10行以上の複数属性データをソート、フィルター、比較する必要がある場合は、data-table-ui-system を使用してください。
• 複雑な関係性: 主な目的が時間経過に伴う変数間の関係を示すことである場合は、完全なチャート/グラフライブラリ（このアトミックシステムの対象外）を使用してください。
• ナラティブコンテンツ: 文章中に埋め込まれた数字は標準のタイポグラフィに従うべきであり、このシステムは「表示用」メトリクスを対象としています。
• 低価値のメタデータ: 通知のpingなどの小さなカウントは badge-and-tag-system を使用してください。

入力

1. 値: 表示する主要な数値またはパーセンテージ。
2. ラベル: 値が何を表すかについての明確で簡潔な説明。
3. コンテキスト/トレンド: 比較データ（例：前月比、目標比）。
4. 単位/フォーマット: 通貨記号、パーセンテージ、または単位（例：「ms」「GB」）。
5. 階層の優先順位: 「プライマリKPI」か「補助統計」か。

出力

1. 統計カード仕様: コンテナ内の値、ラベル、トレンドの空間的配置。
2. タイポグラフィスケール: 「表示用」数値とラベルの定義されたサイズ。
3. トレンドロジック: 上昇、下降、中立状態の視覚的ルール（色＋アイコン）。
4. レスポンシブ戦略: メトリクスグリッドがモバイルでどのように折りたたまれたりスケールしたりするか。

ワークフロー

1. メトリクスタイプの分類

必要な視覚的な「重み」を決定します：

• レベル1: ヒーローメトリック. 大きく中央揃えで、多くの場合枠線なし。ランディングページのトップレベルのソーシャルプルーフに使用されます。
• レベル2: KPIカード. カード内に収められ、多くの場合グリッドで表示されます。ダッシュボードのサマリーに使用されます。
• レベル3: インライン統計. 小さく、高密度な表示。ヘッダーやサイドバー内で使用されます。

2. 数値階層の確立

「表示用タイポグラフィ」ルールを適用します：

• 値: 最大の要素である必要があります（通常、本文サイズの200〜400％）。
• ラベル: 値の真上または真下に配置します。ミュートされた色または小さいウェイトを使用して、値と競合しないようにします。
• 単位: 記号（％、$）は数字よりもわずかに小さくし、数字への視線の集中を妨げないようにします。

3. トレンドと比較コンテキストの提供

コンテキストのない数字は無意味であることがよくあります。「比較レイヤー」を追加します：

• トレンドインジケーター: 矢印（↑/↓）をパーセンテージまたは値の変化と組み合わせて使用します。
• 時間枠ラベル: 比較期間を常に明記します（例：「過去30日間との比較」）。
• セマンティックカラーリング: 値ではなくトレンドに色を適用します。
  • ポジティブトレンド: 緑（通常）。
  • ネガティブトレンド: 赤（通常）。
  • 中立: グレー。

4. 空間リズムの適用（グリッド）

メトリクスが単独で表示されることはほとんどありません。responsive-grid-system を使用してグループ化します：

• グリッドレイアウト: デスクトップでは3列または4列、モバイルでは1列または2列。
• 内部パディング: 値の周りに十分な余白（--space-l または --space-xl）を確保し、値を「目立たせ」ます。

5. ローディング状態と空状態のデザイン

• スケルトン: データ取得中は、値とトレンドに skeleton-state-system を使用します。
• ゼロ状態: メトリクスが0の場合、「0」と表示するかダッシュ（—）と表示するかを決定します。

決定ルール

• 「良い/悪い」ルール: メトリクスが本質的にポジティブ/ネガティブでない場合（例：「温度」が上昇したからといって緑にしてはいけない）、トレンドに緑/赤を使用しないでください。価値判断のない変化には中立（グレー/青）を使用します。
• 丸めロジック: マーケティング統計の場合、即座にスキャンできるように最も近い「K」または「M」に丸めます（例：「12,432」ではなく「12.4K」）。ダッシュボードの場合は、タスクに必要な精度を使用します。
• アイコンの使用法: アイコンは、メトリクスの異なるカテゴリを区別するのに役立つ場合にのみ使用します（例：「ユーザー」アイコン対「収益」アイコン）。装飾のためだけにアイコンを使用しないでください。
• ラベルの配置: ラベルを上部に揃えると、類似したメトリクスのグリッドをスキャンしやすくなります。下部に揃えると、数字が主役の「ヒーロー」統計に適しています。

制約

• アクセシビリティ: aria-label を使用して完全なコンテキストを提供します（例：「収益：12,000ドル、先月比5％増加」）。トレンドインジケーターの色のコントラストがWCAG AA（4.5：1）を満たしていることを確認します。
• レスポンシブ対応: メトリクス値はコンテナからはみ出してはいけません。非常に大きな数値には、流動的なタイポグラフィ（CSS clamp()）または「縮小してフィット」ロジックを使用します。
• 一貫性: 単一グループ内のすべてのメトリクスは、同じ丸め、配置、トレンドスタイルを使用する必要があります。

よくある失敗パターン

• 「裸の数字」: ラベルやコンテキストなしで値を表示し、ユーザーがその意味を推測することになる。
• 色への過度の依存: トレンドを示すためにアイコン（↑/↓）なしで赤/緑のみを使用し、色覚異常のユーザーにとってアクセス不能になる。
• 階層の逆転: ラベルを値よりも大きくまたは太くし、「スキャンして理解する」プロセスを遅くする。
• メトリクスの密集: 1行にあまりにも多くのメトリクスを配置し、数字が互いに混ざり合って見える。
• 過剰な精度: マーケティングランディングページで小数点以下4桁を表示し、不必要な認知負荷を生み出す。

検証基準

• すべてのメトリクスに明確で可視的なラベルがある。
• 値は本文テキストよりも大きい、明確な「表示用」タイポグラフィサイズを使用している。
• トレンド（上昇/下降）が色とアイコン/記号の両方で示されている。
• 比較コンテキスト（例：時間枠）が明示的に記載されている。
• セマンティックカラー（緑/赤）は価値判断のある変化にのみ使用されている。
• グリッドレイアウトはモバイルでも読みやすさを維持している（オーバーフローがない）。
• アクセシビリティ：画面リーダーがARIAを通じて完全なコンテキストを利用できる。