似た青3色はNG判定──Claude Code新スキル/datavizで配色を機械検証した

この記事で分かること

• Claude Code v2.1.198（2026年7月1日リリース）で標準搭載された /dataviz スキルの中身
• 同梱の配色検証スクリプト validate_palette.js を実際に動かした結果（良い例・悪い例・公式デフォルトパレットの3パターン）
• 「似ている色を並べただけ」の配色ミスが、なぜ機械的に検出できるのか

TL;DR

• Claude Code に「グラフ・ダッシュボードの配色を検証する」ビルトインスキル /dataviz が追加された（インストール不要・CLI同梱）
• 中核は scripts/validate_palette.js。渡した16進カラーの配列を色覚多様性（CVD: Color Vision Deficiency）シミュレーション込みで判定する
• 実際に3パターン検証したところ、色相環をぐるっと使った「虹色」も、逆に似すぎた「青の濃淡3色」も両方 FAILED になった
• 公式デフォルトパレット（8色）は light/dark 両モードで ALL CHECKS PASS。ドキュメント記載のΔE数値（24.2 / 10.3）とも完全一致した

背景

Qiitaや社内ダッシュボードでグラフを作るとき、色選びは大体「見た感じ良さそうな色」を並べて終わりにしがちだ。筆者もそうだった。だが色覚多様性（日本人男性の約20人に1人が該当するとされる）を考慮すると、「見た目は違って見えるのに、CVDシミュレーション上ではほぼ同じ色になる」組み合わせは珍しくない。

Claude Code v2.1.198（2026年7月1日リリース）の changelog に、この問題をコードで機械検証できる /dataviz スキルが追加されたとの記載があった[^changelog]。「感覚で配色する」を「スクリプトで判定する」に変えられるツールなので、実際に起動して検証ログを取ってみた。

/dataviz スキルの中身

Claude Code でスキルを起動すると、以下のような手順書（チャート設計の手続き）がロードされる。

1. Pick the form.       — 何のグラフにすべきか（棒・線・面 or そもそもグラフ不要か）
2. Assign color by job. — カテゴリ識別・大小比較・正負の対比・状態表示、それぞれ別ルール
3. VALIDATE the palette — scripts/validate_palette.js を実行して判定（目視でΔEを推測しない）
4. Apply mark specs     — 線の太さ・角丸・マーカーサイズなどのスペック
5. Add the hover layer  — ツールチップ・クロスヘアの実装ルール
6. Final accessibility  — 凡例・テーブルビュー・ダークモード対応の最終チェック
7. Render it and look   — 検証スクリプトは色だけを見るので、レイアウトは目視確認が必須

ポイントは3番目。「色は最後に決める。しかも目視でなくスクリプトで検証する」という設計思想が明記されている。

実際に検証してみた

/dataviz を起動すると scripts/validate_palette.js が使える状態になる。3パターンを実行し、それぞれの実行ログを以下に載せる（すべて --mode light で検証）。

パターン1: 互いに離れた4色（良い例）

node scripts/validate_palette.js "#3b82f6,#f97316,#10b981,#8b5cf6" --mode light

Palette (light, surface #fcfcfb, categorical): 4 slots
  [PASS] Lightness band         all 4 inside L 0.43–0.77
  [PASS] Chroma floor           all 4 >= 0.1
  [PASS] CVD separation         worst adjacent #10b981↔#f97316 ΔE 38.9 (protan) · tritan 48.3 · normal 111.2
  [WARN] Contrast vs surface    below 3:1 — relief required (visible labels or table view): [["#f97316",2.73],["#10b981",2.47]]

  → ALL CHECKS PASS

青・オレンジ・緑・紫という「色相が離れた4色」は CVD 分離（ΔE 38.9）が十分で PASS。ただし明るい背景に対してコントラストが弱い2色があり、WARN（凡例だけでなく直接ラベルかテーブルビューを併用しろという指示）が出た。

パターン2: 色相環を全部使った「虹色」5色（悪い例）

node scripts/validate_palette.js "#ff0000,#ff8800,#ffff00,#00ff00,#0000ff" --mode light

Palette (light, surface #fcfcfb, categorical): 5 slots
  [FAIL] Lightness band         outside band: [["#ffff00",0.968],["#00ff00",0.866]]
  [WARN] CVD separation         worst adjacent #00ff00↔#ffff00 ΔE 8.3 (protan) · tritan 47.2 · normal 44.7
  [WARN] Contrast vs surface    below 3:1 — relief required: [["#ff8800",2.33],["#ffff00",1.05],["#00ff00",1.34]]

  → FAILED — fix the marked checks

意外にも「色相が全部違う」虹色パレットは FAILED になった。原因は黄色・緑が明るすぎて背景から浮かず（Lightness band FAIL）、かつ黄緑の隣接ペアが CVD 上ほぼ同じに見える（ΔE 8.3）ため。色相を分散させるだけでは不十分ということが数値で分かる。

パターン3: 似た青の濃淡3色（悪い例・最も気づきにくいパターン）

node scripts/validate_palette.js "#3b82f6,#2563eb,#1d4ed8" --mode light

Palette (light, surface #fcfcfb, categorical): 3 slots
  [PASS] Lightness band         all 3 inside L 0.43–0.77
  [PASS] Chroma floor           all 3 >= 0.1
  [FAIL] CVD separation         worst adjacent #1d4ed8↔#2563eb ΔE 7.1 (deutan) · tritan 7.7 · normal 9.2
  [PASS] Contrast vs surface    all 3 >= 3:1

  → FAILED — fix the marked checks

これが今回一番の気づきだった。「同系色の濃淡でグラデーション的に系列を分ける」配色は、通常視覚では明度差があるので違って見える。しかし CVD シミュレーション上の隣接ΔEは 7.1（正常視覚でも 9.2）しかなく、Lightness・Contrastは全部PASSしているのに CVD 分離だけが FAIL する。他の項目が全部通っているからこそ「一見問題なさそう」に見えてしまう、最も見逃しやすいパターンだと言える。

パターン4: スキル同梱の公式デフォルトパレット（8色）

スキルのリファレンス（references/palette.md）に記載された8色の公式デフォルトパレットを light/dark 両モードで検証した。

# light
node scripts/validate_palette.js "#2a78d6,#1baf7a,#eda100,#008300,#4a3aa7,#e34948,#e87ba4,#eb6834" --mode light
# → ALL CHECKS PASS (worst adjacent ΔE 24.2, protan)

# dark
node scripts/validate_palette.js "#3987e5,#199e70,#c98500,#008300,#9085e9,#e66767,#d55181,#d95926" --mode dark
# → ALL CHECKS PASS (worst adjacent ΔE 10.3, protan)

ドキュメントに「light ΔE 24.2 / dark ΔE 10.3」と記載されている数値と、実行結果は完全に一致した。8色という多い系列数でも、hue の並び順を検証済みにしておけば CVD 分離を確保できることが実測で確認できる。

著者視点の発見ポイント

筆者が今回一番驚いたのは、パターン3（似た青3色）の結果だ。Lightness・Chroma・Contrastの3項目は全部PASSしているのに、CVD分離だけがFAILしている。つまり「他の指標が良好だから大丈夫だろう」という直感が、色覚多様性の観点では通用しない。これまで「同系色のグラデーションでシリーズを分ける」配色を何度も採用してきたが、CVDシミュレーションにかけたことは一度もなかった。感覚に頼らずスクリプトで機械検証するというスキルの設計思想は、こうした「気づきにくい失敗」を潰すために存在すると実感した。

まとめ

• Claude Code v2.1.198 で /dataviz スキルが標準搭載され、配色検証スクリプトがCLIに同梱された
• 色相を分散させただけの虹色パレットも、逆に似た濃淡の同系色パレットも、どちらも機械的にFAILと判定される
• 「他の指標は良好なのにCVD分離だけFAIL」というパターンは目視では気づきにくく、スクリプト実行が最も効く場面
• 公式デフォルトパレットはドキュメント記載の数値と実測が一致しており、既存プロジェクトの配色を差し替える際の基準値として使える

参考リンク

• Claude Code Changelog — v2.1.198 の /dataviz 追加エントリを引用
• Claude Code Docs — What's new セクション