はじめに
Claude Code （2.1.199 時点）に同梱されている dataviz スキルを使って、売上ダッシュボードを作ってみました。
完成したダッシュボード
配色もマークの太さも、自分では 1 つも決めていません。
Claude Codeの /dataviz スキルが出してくる手順と検証済みパレットに、ぜんぶ従っただけです。それでこれができました。
スキルの手順どおりに組んだ売上ダッシュボード。青の単色バー、細いマーク、余白多めのカード。
ダークモードも「対応」ではなく、別ステップの色で作り直したものが最初から乗っています。トグル 1 つで切り替わります。
同じダッシュボード。青も緑も、ライトとは別の色に差し替わっている。
「グラフの色、なんとなくで決めてない？」という自覚がある人ほど刺さる機能かと思います。
Before / After
まず、よくある"やりがちな"作り方をわざとやってみたのがこちら。
データは上のダッシュボードとまったく同じです。
虹色バー・2軸重ね・全点ラベル・絵文字。どこかで見たことがある気がしませんか。
この Before、実はアンチパターンの見本市になっています。
| やりがちなこと | なぜダメか |
|---|---|
| 🌈 1 系列の棒に虹色 | 順序のないカテゴリに色相を振ると、棒の長さと色で情報を二重化。色弱だと隣が同じに見える |
| 📉 折れ線を 2 軸で重ねる | 左右で別スケール（新規 0-1500 / 継続 0-3000）。ありもしない「相関してそう」を捏造してしまう |
| 🔢 全点に数字ラベル | 6 月あたりで数字が重なって潰れている。全部載せると誰も読まない |
| ✨ 絵文字・極太バー・点線グリッド | 情報より装飾がうるさい |
After はこれを 1 つずつ潰した結果です。
派手さはないけど、読める。
dataviz スキルは、この「地味だけど正しい」に機械的にたどり着かせてくれます。
dataviz スキル
スキルを読み込むと、こんな一文から始まる手順書が出てきます。
🌈 色は最後に決める。 ほとんどのダメなチャートは色を最初に決めてしまう。
手順は 7 ステップ。色の話はステップ 2 からで、それより先に「そもそもこのデータはチャートにすべきか？」を問われます。
| # | ステップ | 要点 |
|---|---|---|
| 1 | 形を選ぶ | データの役割（大小・識別・正負・推移）で種別を決める。「stat タイルが正解」もある |
| 2 | 色の役割を割り当てる | カテゴリカル／シーケンシャル／ダイバージング／ステータスの 4 種、役割ごとに 1 ルール |
| 3 | パレットを検証する | 同梱の validate_palette.js が配色を pass/warn 判定（明度・彩度・色弱でも識別できるか・コントラスト）。ここは自分で書かず、スキルが自動で走らせてくれる
|
| 4 | マーク仕様と余白 | 棒は細く・角丸 4px・線 2px、隙間で区切る |
| 5 | ホバー層を足す | クロスヘア＋ツールチップは標準装備 |
| 6 | アクセシビリティ | 2 系列以上は必ず凡例、テーブルビュー、ダークは「選択」 |
| 7 | レンダリングして目視 | バリデータは色しか見ない。レイアウトは人の目で |
冒頭の「色を 1 つも選んでいない」の正体はステップ 3 です。検証を通った 8 色がこちら。パッと見はただの"きれいな色見本"ですが、この裏で明度・彩度・色弱での識別性・コントラストが全部チェック済みになっています。
validate_palette.js の検証を通った8色。左がライト、右がダークで、同じ「blue」でも #2a78d6 → #3987e5 と別の色（＝反転ではなく、ダーク用に選び直している）。
まとめ
dataviz スキルは、Claude Codeが「チャート作って」に対して黙って読み込んでいる設計ガイドです。
カラーパレットの検証が「読んで納得」ではなく「実行して合否が出る」形で同梱されているのが、他のデザインガイドラインと一番違うところです。