dataviz

データビジュアライゼーション

チャートは人が読み、あなたが実行するものです。このスキルでは、「見栄えよくする」をチェック項目のある手順に置き換え、好みではなく、最初から正しい結果を得られるようにします。

**ここで紹介する手法は、特定のデザインシステムに依存しません。**手順、形式を選ぶためのヒューリスティック、6つのチェック項目、マークの仕様のいずれも、特定の製品に固有のものではありません。デザインシステムが用意するのは、少数のパラメーター（カラ―ランプ、カテゴリの順序、発散型の色のペア、ステータスパレット、テクスチャ、サーフェス、フィルターコンポーネント）です。この手法はそれらを変更せずに使用します。検証済みのデフォルトパレットは、references/palette.md に完全な仕様を記載した基準例です。ブランドに合わせる場合は、そのファイルの構成を確認して値だけを置き換えてください。それ以外は変更しないでください。

最も重要な習慣はこれです。**色に関することは計算できるので、計算してください。**パレットが色覚多様性に配慮しているか、目視で判断してはいけません。scripts/validate_palette.js を実行してください。

手順 — 以下の順に実行してください

色を決めるのは最後です。よくないチャートの多くは、最初に色を決めています。

1. **形式を選びます。**データの役割は何でしょうか。大きさ、識別、極性、単一の要点、経時変化でしょうか。役割によってチャートの種類が決まります。場合によっては、答えはチャートではないこともあります（統計タイルやヒーロー数値など）。-> references/choosing-a-form.md
2. **役割に応じて色を割り当てます。**カテゴリ（識別）、シーケンシャル（大きさ）、発散型（極性）、ステータス（状態）には、それぞれ1つずつルールがあります。カテゴリ色相は固定順で割り当て、循環させてはいけません。-> references/color-formula.md
3. パレットを検証します — Delta E について考えるのではなく、スクリプトを実行してください。node scripts/validate_palette.js "<hex,hex,...>" --mode light（このスキルのベースディレクトリから実行します。または、チャート自身のページで <script type="module"> として読み込むと、<body> の data-palette を読み取り、console.table でレポートを出力します）。明度範囲、彩度の下限、隣接ペア間のCVD分離、通常の視覚における下限、コントラストについて、合格または不合格が返されます。不合格の項目をすべて修正してから続行してください。そのモードのサーフェスを使って --mode dark でも再実行してください。
4. **マークの仕様とスペーサーを適用します。**細いマーク、ベースラインに合わせた4pxの角丸データ端、2pxの線、>=8pxのマーカー、塗りつぶし間の2pxのサーフェスギャップ（積み上げセグメントと隣接する棒の両方）、重なり合うマーク上の2pxのサーフェスリング、必要な箇所への直接ラベルを適用します。-> references/marks-and-anatomy.md
5. **デフォルトでホバーレイヤーを追加します。**HTML/SVGチャートはインタラクティブなものです。折れ線グラフと面グラフには十字線とツールチップを、棒グラフ、ドット、セルにはマークごとのホバーツールチップを実装してください。これを省略できるのは、プロットを含まない単独の統計タイルだけです。ヒットターゲットはマークより大きくし、フィルターはチャートの上に1行で配置します。-> references/interaction.md
6. アクセシビリティの最終チェックを行います。系列が2つ以上ある場合は凡例を必ず表示し、4つ以下の場合は直接ラベルも付けます（系列が1つだけなら、タイトルで識別できるため凡例ボックスは不要です）。これにより、色だけに頼らず識別できます。テーブル表示を用意します。ダークモードは選択式にします。自動的に反転させるのではなく、同じカラ―ランプを使った専用の手順で設定し、ダークサーフェスに対して検証してください。色覚多様性、印刷、強制カラーモードに備えて、テクスチャを利用できるようにします。
7. **レンダリングして確認します。**バリデーターがチェックするのは色であり、レイアウトではありません。完成とする前に、出力を開くかスクリーンショットを撮って目視し、ラベルの衝突、形状、はみ出しがないか確認してください。

次に、結果を**references/anti-patterns.md**と照らし合わせてください。これは問題が起こるパターンをまとめた一覧です。チャートが項目のいずれかに当てはまるなら、問題があります。

すべてのデザインシステムで必ず守ること

• カテゴリー色相は固定順序で割り当て、循環させないでください。 9つ目の系列に生成した色相を割り当てることはありません。「その他」、スモールマルチプル、または複合エンコーディングにまとめます。
• 軸は1つです。 2つの y 軸を使う二軸グラフは決して使わないでください。スケールの異なる2つの指標は、2つのグラフ、スモールマルチプル、または共通の基準値にインデックス化して表現します。 (これはグラフで最も多い間違いです。アンチパターンを参照してください。)
• 色はエンティティに対応させ、順位には対応させません。 系列数を変更するフィルターを適用しても、残った系列の色が変わってはいけません。
• シーケンシャルは1色相で、明から暗へ。ダイバージングは2色相と中間のニュートラルグレーで構成します。 虹色は使いません。ダイバージングの中間点に色相を使いません。
• カテゴリー配色をリリースする前に、必ずバリデーターを実行してください。 CVD Delta E の目標値は 8 以上です（OKLab x100）。6～8 は最低ラインで、二次エンコーディングがある場合にのみ許容されます。通常の視覚での最低ラインが 15 未満の場合は、明確な不合格です。フルカラーで見る人がその色の組み合わせを区別できません。隣接するペアリストで色を再調整してください（二次エンコーディングがあっても、この条件は免除されません）。--pairs all の場合は、系列を削減するかファセットに分割してください。check 4 を参照してください。コントラストの WARN が出た場合は、視認できるラベルまたはテーブル表示が必須です。無視することはできません。
• マークは細くします。系列が2つ以上の場合は凡例を必ず表示し、1つの場合は凡例を表示しません。直接ラベルは選択的に使用し、すべての点に数値を付けないでください。グリッドと軸は控えめにします。
• テキストにはテキストトークンを使用し、系列の色は使いません。 値、ラベル、凡例にはプライマリ／セカンダリ／ミュートのインクを使い、横に置いた色付きのマークで識別します。
• ステータスカラーは予約済みです（good／warning／serious／critical）。「系列4」などには再利用しません。アイコンとラベルを必ず添え、色だけで表現しません。

デザインシステムの組み込み

手法は変わりません。システムごとに変わるのは、これらのパラメーターだけです。すべての値を入力済みの参照例は references/palette.md です。

パラメーター	システムから提供されるもの
ランプ	配色に使用する色相スケール（名前付きの段階）
カテゴリー用テーマ	固定された色相の順序（名前付きのテーマ）。デフォルトと代替テーマ
シーケンシャルの色相	大きさを表すデフォルトの単色相
ダイバージングのペア	暖色／寒色の2つの極とニュートラルな中間色
ステータスパレット	good／warning／serious／critical。カテゴリー色とは異なる段階
テクスチャ塗り	45°／135°で使う、方向性のある手描き風の塗り
サーフェス	明色／暗色のグラフ背景色（バリデーターに必要）
フィルターコントロール	日付範囲とディメンションのコントロール（動作仕様は interaction.md を参照）

新しいシステムを導入するには、これらの行に値を入力し、そのランプをバリデーターに渡して、各スロットを最も近い合格済みの段階に合わせます。構成とルールは記載どおり維持します。

参照ファイル

ファイル	確認できる内容
references/choosing-a-form.md	どのグラフタイプを選ぶか。そもそもグラフにするべきか。
references/color-formula.md	4つの役割、6つのチェック、合格値へのスナップ
references/marks-and-anatomy.md	マークの仕様、スペーサー、ラベル、数値、ヒーロー数値
references/interaction.md	ツールチップとホバー、フィルターと期間
references/components.md	グラフを構成するパーツ。プレーンな HTML でそれぞれを構築します
references/anti-patterns.md	よくある問題。すべてのグラフで確認してください
references/palette.md	参照パレットの例。すべてのパラメーターを入力済み。自社ブランドのものに置き換えてください
scripts/validate_palette.js	実行可能な6項目チェックのバリデーター（目視ではなく、実行してください）