Claude Media
Claude Code datavizスキルでチャートとダッシュボードを作る

Claude Code datavizスキルでチャートとダッシュボードを作る

Claude Codeの/datavizはチャート形式の選定から色覚多様性の検証までを1コマンドで担うバンドルSkillです。使い方と設計思想、バージョンごとの改善点を解説します。

/datavizはClaude Codeにバンドルされたスキルで、チャートやダッシュボードを作るときのデザイン判断をClaudeに肩代わりさせます。データに応じたグラフ形式の選定、役割ベースの配色、色覚多様性の検証までを1コマンドで任せられます。v2.1.198以降で使えます。

デザイナーが手薄なチームや、可視化が専門ではないエンジニアだけのプロジェクトでは、色の妥当性を判断する基準が社内にないことがあります。/datavizはその基準を、検証スクリプトという形で持ち込みます。この記事では、依頼の出し方、色の検証の中身、自社の配色への差し替え、そして「このスキルだけ止めたい」ときの設定の切り分けまでを扱います。

/datavizに何を任せられるか

コマンド一覧の説明によると、/dataviz [request]はチャート・グラフ・ダッシュボードのデザイン指針を与えるスキルです。Claudeはデータに合うチャート形式を選び、系列には役割で色を割り当てます。同梱スクリプトでパレットの色覚多様性とコントラストを検証し、マーク・インタラクション・アクセシビリティのルールも適用します。

初期パレットはブランドに寄せていないプレースホルダーで、自社の色に置き換える前提です。つまり主眼は色そのものではなく、選び方と検証の型にあります。

依頼の出し方

引数に依頼を自然文で渡します。

/dataviz 月次の売上とチャーン率を1つのダッシュボードにまとめて

既存のダッシュボードやチャートコンポーネントがあるなら、先にそのファイルを読ませてから依頼すると、似た部品を二重に作られにくくなります。

バンドルSkillとしての動き方

/datavizはプロンプトベースのSkillです。固定ロジックを直接実行する組み込みコマンドとは違い、詳細な指示がClaudeに渡り、Claudeがツールを使いながら作業を組み立てます。データの読み込みも、チャート形式の判断も、検証スクリプトの実行も、その指示に沿ってClaudeが進めます。

Claude Codeには、/doctor、/code-review、/batch、/debug、/loop、/claude-apiなどのバンドルSkillが同梱されています。大半はどのセッションでも使えます。一方で、機能の有効化に依存するものもあります。たとえば/workflow-authoringは、動的ワークフローを有効にしたときだけ使えます。

配色は目視ではなくスクリプトが判定する

「グラフを描いて」と頼んだだけの出力との違いは、色の判断が検証スクリプトに置き換わる点です。目視のレビューは担当者の経験や体調で揺れますが、スクリプトは毎回同じ基準を当てます。「色覚多様性で見分けがつかない配色を出さない」という最低限の線を、レビュー項目に人手で加えずに保てます。

検証ロジックはリリースのたびに手が入っています。色差の判定は、当初の方式から知覚的な色差モデルのOKLabへ切り替わり、色覚多様性のしきい値も再調整されました。人の目で見て近すぎる色を、より正確に拾う方向の改善です。

OKLabは、色の数値上の距離が見た目の違いに近くなるよう作られた色空間です。RGBの数値が離れていても、人の目には似て見える色があります。逆も起こります。距離を目の感覚に寄せて測ることで、系列の色が実際に見分けられるかを判定しやすくなります。

あゆみ

/datavizの変更履歴

  1. v2.1.198スキルを追加

    /datavizが登場し、実行できる配色の検証スクリプトが付きました。

  2. v2.1.210色差判定をOKLabに

    色差を知覚的なモデルで測るようになり、色覚多様性のしきい値も見直されました。

  3. v2.1.216既定パレットの並びを変更

    既定のチャートパレットの順序を入れ替え、4系列のチャートで直接ラベルを勧めていた誤った指針も直されました。

検証の仕組みが先に固まり、その後は既定の見た目や指針の誤りの手直しに移っています。

v2.1.216の修正は、4系列のチャートで直接ラベルを勧めていた指針の誤りです。変更履歴に載っているのは修正の事実だけで、理由は書かれていません。v2.1.216より前に作った4系列のチャートは、直接ラベルを使っていないか見直す余地があります。

自社の配色に差し替える

初期パレットのまま使い続ける必要はありません。差し替えには2つの道があります。

くらべる

配色ルールの渡し方

手軽

依頼のたびに渡す

CLAUDE.mdや設計ガイドにブランドカラーを書き、既存のカラー変数を定義したファイルを先に読ませます。設定ファイルを増やさずに済みますが、依頼ごとに文脈を用意する運用になります。

繰り返し向き

プロジェクトSkillで固定する

.claude/skills/dataviz/SKILL.mdを置きます。配色ルールやチャートライブラリの指定を毎回渡さなくて済みます。

同名のSkillがバンドルと共存するときの優先順は、公式の解決表で決まっています。エンタープライズ、個人、プロジェクトの間では上位が勝ちます。バンドルSkillと競合した場合は、自分のSkillがバンドルのコマンドを置き換えます。

ただし置き換わるのは名前が一致したコマンドだけで、バンドル側の別名(エイリアス)は置き換わりません。公式の例では、プロジェクトにcode-reviewを置くと/code-reviewは置き換わりますが、別名の/reviewはバンドル版を走らせません。この説明は/datavizに別名があることを意味しません。コマンド一覧の表では、/datavizに別名は載っていません。

自分のSkillで置き換えるとバンドル版は走らなくなります。バンドル版の検証スクリプトを使い続けたいなら、置き換えるのではなく、CLAUDE.mdでブランドカラーを渡す側の道が向いています。

止めたい・隠したいときの設定

/datavizを業務で使わせたくない、別のチャートスキルに一本化したい、という場面では設定で止められます。効き方の違う設定が2つあります。

くらべる

skillOverridesとdisableBundledSkills

1本ずつ

skillOverrides

スキル名をキーにして状態を指定します。"dataviz": "off"で/datavizだけが消え、/code-reviewや/batchはそのまま残ります。

まとめて

disableBundledSkills

バンドルSkillとワークフローを丸ごと取り除きます。/datavizだけを狙う設定ではありません。

skillOverridesの値は4種類あり、Claudeへの見え方と/メニューへの出方が違います。

値Claudeに一覧で見せる/メニュー
"on"Claudeに一覧で見せる名前と説明/メニュー出る
"name-only"Claudeに一覧で見せる名前だけ/メニュー出る
"user-invocable-only"Claudeに一覧で見せる隠す/メニュー出る
"off"Claudeに一覧で見せる隠す/メニュー隠す

skillOverridesに書かれていないスキルは"on"として扱われます。"user-invocable-only"は、/skillsメニューではuser-onlyと表示されます。自分は使うがClaudeには勝手に呼ばせたくない、というときの中間状態です。

/skillsメニューは、対象を選んでスペースキーで状態を切り替え、Escで保存すると.claude/settings.local.jsonにskillOverridesを書きます。ただし/skillsが並べるのはプロジェクト・ユーザー・プラグイン由来のスキルで、バンドルSkillは載りません。バンドルの/datavizを"off"にするには、設定ファイルに次のように直接書きます。

{
  "skillOverrides": {
    "dataviz": "off"
  }
}

バンドルSkillがどれだけ読み込まれているかは、/contextのスキルの欄で見えます。/skillsに出ないバンドルSkillも、こちらには含まれます。

"off"にしたスキルは、v2.1.199以降、Remote ControlのクライアントやAgent SDKに渡されるコマンド一覧からも消えます。それでも、フルネームを直接指定して呼ぶとエラーが返り、実行はされません。

注意点が2つあります。/doctorはv2.1.205以降、disableBundledSkillsを有効にしても入力できる状態で残ります。隠すには、環境変数DISABLE_DOCTOR_COMMANDか"doctor": "off"を使います。またdisableBundledSkillsをtrueにすると、/initのような組み込みコマンドも、入力はできるもののモデルからは見えなくなります。プラグイン、.claude/skills/、.claude/commands/のスキルは影響を受けません。したがって、disableBundledSkillsで/datavizを消してもプロジェクトSkillのdatavizは残ります。

どの設定ファイルに書くか

skillOverridesとdisableBundledSkillsは、どちらもユーザー・プロジェクト・ローカル・管理設定のどのファイルにも書けます。それぞれ~/.claude/settings.json、.claude/settings.json、.claude/settings.local.json、組織が配る管理設定に対応します。

チーム全員の環境から/datavizを外したいなら、リポジトリで共有する.claude/settings.jsonに書きます。自分の手元だけで外すなら、.claude/settings.local.jsonか~/.claude/settings.jsonです。/skillsメニューが書き込み先に選ぶのは、.claude/settings.local.jsonです。共有ファイルには何も入らないので、メニュー操作の結果がチームに波及することはありません。

隠す理由はコンテキストの予算にもある

スキルの一覧は、使われなくても毎ターン、名前と説明がコンテキストに載ります。一覧に割り当てる文字数の予算は、モデルのコンテキストウィンドウの1%です。スキルが多くて予算を超えると、使用頻度の低いものから説明文が削られます。すると削られたスキルは、依頼との照合に必要なキーワードを失います。

/datavizをほとんど使わない環境では、"name-only"にして説明を外す選択肢があります。名前は一覧に残るので、/メニューからの呼び出しは変わりません。空いた予算は、他のスキルの説明に回ります。予算の使われ方は/doctorで見積もりが確認でき、超過したときはデバッグログに警告が出ます。

使用頻度を測る/skill-doctorは、バンドルSkillを対象にしません。そのため、/datavizを隠すか残すかは、レポートの助けを借りずに自分で決めることになります。

使い分けの目安

用途向き理由
初めてダッシュボードを作る向き◎理由形式の選定から色の検証までを任せられる
色覚多様性への配慮が要件にある向き◎理由検証をスクリプトで機械的に回せる
既存の可視化ライブラリの流儀に厳密に合わせる向き△理由提案を土台に、レビューで自社ルールへ寄せる調整が要る
1回限りの簡易な棒グラフ向き△理由スキルを呼ばず直接指示するだけで足りることが多い

よくあるつまずき

  • 配色がブランドと合わない: 初期パレットは差し替え前提です。CLAUDE.mdへの色定義か、プロジェクトSkillでの固定を使います。
  • 個別にインストールしようとした: /datavizは標準で同梱されています。追加のインストールは要りません。
  • 同名のプロジェクトSkillが反映されない: 名前がdatavizと一致しているか確認します。別名で呼んでいる場合、置き換えは効きません。
  • 自作のdatavizのSKILL.mdで、/datavizの呼び出しは通るのに説明が効かない: フロントマターのYAMLが壊れていると、Claudeはメタデータが空のままスキル本文を読み込みます。/datavizは動きますが、説明文との照合は働きません。--debug付きで起動すると、パースエラーが出ます。
  • /skillsメニューに/datavizが見当たらない: 不具合ではありません。/skillsはバンドルSkillを一覧しません。存在確認は/contextで行い、状態の変更は設定ファイルへ書きます。
  • 自作のスキルが/skillsに出ない: .claude/skills/名前.mdのような単体ファイルではなく、.claude/skills/名前/SKILL.mdというフォルダ構成にします。
  • "off"にしたのに別名で動く: ユーザー・プロジェクト・ローカルの設定では、エントリはスキル名だけに照合されます。別名のエントリは、管理設定か--settingsで渡したファイルにあるときだけ、元のスキルへ効きます。

claude --helpにも、スキル全体を切る起動オプションが載っています。v2.1.285で確認した出力は次のとおりです。

$ claude --version
2.1.285 (Claude Code)
 
$ claude --help | grep -i "disable-slash"
  --disable-slash-commands   Disable all skills

--disable-slash-commandsは、そのセッションのスキルをすべて無効にします。/datavizだけを外す手段ではありません。

セッション単位で止める方法は他にもあります。環境変数CLAUDE_CODE_DISABLE_BUNDLED_SKILLSを1にすると、その1セッションだけバンドルSkillが外れます。この環境変数とdisableBundledSkillsのどちらかで止めた場合、もう一方で再び有効にすることはできません。

設定や拡張が原因で挙動がおかしいのか切り分けたいときは、claude --safe-modeが使えます。CLAUDE.md、スキル、プラグイン、フック、MCPサーバーなどをすべて外して起動し、認証・モデル選択・組み込みツール・権限は通常どおり働きます。安全モードで症状が消えるなら、原因はそれらのどれかにあります。組織の管理フックと設定ポリシーは安全モードでも適用され、管理設定のプラグイン・スキル・CLAUDE.md・MCPはオフになります。

まとめ

チームで/datavizを外すかどうかは、skillOverridesの書き先で波及範囲が決まります。共有の.claude/settings.jsonなら全員、.claude/settings.local.jsonなら自分だけです。自社の配色を載せたいだけなら、バンドル版の検証スクリプトを生かせるCLAUDE.mdでの受け渡しが先にあり、置き換えはそのあとの選択肢です。

バンドルSkillの仕組みはClaude Code Skills完全ガイドにあります。他のスラッシュコマンドとの並びはClaude Codeスラッシュコマンド一覧で見られます。自作Skillの型はClaude Code Skillsの書き方にまとめています。

この記事を共有:XはてブLinkedIn