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

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

デザイナーの手が空いていないチームや、可視化を専門にしないエンジニアだけで開発しているプロジェクトでは、色の妥当性を判断する基準そのものが社内にないことがあります。/datavizはその判断基準を検証スクリプトという形で持ち込む点が特徴です。

/datavizでできること

/datavizは「このデータをどう見せるか」という設計判断そのものを引き受けるスキルです。要求を渡すと、Claudeはデータの形に合ったチャート種別を選び、系列ごとに役割で色を割り当てます。そのうえで同梱のスクリプトが色覚多様性とコントラストを検証し、マーク・インタラクション・アクセシビリティのルールを適用します。

色そのものより「どう選び、どう検証するか」の型を渡す点が主眼のスキルで、初期配色の扱いは後述の専用節にまとめています。

使い方 — 実行例

引数にリクエストを渡すだけで動きます。データの形式を説明する必要はなく、自然文で依頼すれば十分です。

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

コードベース内に既存のダッシュボードやチャートコンポーネントがある場合、Claudeはそれを踏まえたうえで新しいチャートを追加します。

Skillとして呼び出す仕組み

/datavizはプロンプトベースのSkillとして実装されています。固定ロジックを持つ組み込みコマンドとは違い、詳細な指示がClaudeに渡され、その指示にもとづいてClaudeが自らツールを操作しながら作業を進める仕組みです。データの読み込み、チャート形式の判断、検証スクリプトの実行まで、すべてこの指示に沿ってClaudeが自律的にこなします。

Claude Codeには/datavizのほかにも/doctorや/code-review、/batch、/debug、/loop、/claude-apiといったバンドルSkillが同梱されており、いずれもセッションを開けば標準で利用できます。バンドルSkillの有効・無効を制御する設定にはdisableBundledSkills(バンドルSkillを一括で止める設定)とskillOverrides(Skillごとに個別指定する設定)の2種類があり、それぞれの使い分けは後述の「よくある質問」にまとめています。

色覚多様性の検証はどう動くか

/datavizが他の「グラフを描いて」という指示と違うのは、色の妥当性を主観で判断せずスクリプトで検証する設計になっている点です。バンドルされた検証スクリプトがコントラスト比と色覚多様性への安全性をチェックし、判定を経てから配色を確定します。配色の検証だけでなく、マーク(点・線・面といったデータの表現要素)の選び方、ホバーやツールチップなどのインタラクション、そしてアクセシビリティ全般のルールもあわせて適用される設計です。

この検証ロジックは初出以降も改良が続いています。当初の色差判定から、知覚的な色差モデルであるOKLabを使う方式に切り替わり、色覚多様性のしきい値も再調整されました。人間の目で見た「近すぎて区別しづらい色」をより正確に検出できる方向への改善です。

デザイナーが不在のチームでも、少なくとも「色覚多様性で見分けがつかない配色を出力しない」という最低限のアクセシビリティ品質を機械的に担保できるのが、このスキルの実務上の価値です。レビュー工程に「配色が見分けられるか」というチェック項目を人手で毎回入れる代わりに、検証スクリプトが機械的に通過判定を出す形に置き換えられます。

ブランドニュートラルパレットを自社のデザインに置き換える

/datavizが最初に使う配色は、特定のブランドに寄せていないプレースホルダーパレットです。これは「とりあえず動くグラフ」ではなく「後で自社の配色に差し替える前提の土台」として設計されています。

実務では、CLAUDE.mdやプロジェクトの設計ガイドにブランドカラーの定義を書いておくと、Claudeがそれを参照してパレットを差し替えやすくなります。既存のダッシュボードコンポーネントのカラー変数を先に読み込ませておく運用が現実的です。

プロンプトでの指示だけでなく、.claude/skills/dataviz/にプロジェクト独自のSkillを置く方法もあります。バンドルSkillと同じ名前のSkillをプロジェクト側に定義すると、そちらがバンドル版を上書きします。ただしこの上書きが効くのはSkill名そのものが一致した場合だけで、バンドル版のエイリアスまでは上書きされません。チームの配色ルールやチャートライブラリの指定を毎回プロンプトで渡す代わりに、SKILL.mdへ固定で書き込んでおける点が実務では便利です。

バージョンで何が変わってきたか

/datavizはv2.1.198での追加以降、検証ロジックとパレットの初期値が繰り返し調整されています。

初期リリースからほどなくして検証ロジックの精度が上がり、その後は「デフォルトの見た目」側の調整に移っている流れが読み取れます。土台となる検証機構を先に固め、そのうえで既定のプリセットを磨くという順序です。

/datavizと手動でのグラフ作成、どちらを使うか

「グラフを作って」とだけ指示する場合との最大の違いは、色の妥当性検証が人手のレビューから機械的な検証スクリプトに置き換わる点です。目視でのチェックはレビューアーの経験や体調に左右されますが、検証スクリプトは同じ基準を毎回一貫して適用します。用途に応じたどちらが向くかの見立ては次のとおりです。

よくあるつまずき

• 配色がブランドと合わない: 初期パレットは差し替え前提です。対処は前述の「ブランドニュートラルパレットを自社のデザインに置き換える」節を参照してください。
• 既存のチャートコンポーネントと二重管理になる: 既存のダッシュボード実装がある場合、先に該当ファイルを読ませてから依頼すると、新しいコンポーネントを重複して作られにくくなります。
• バンドルSkillだと気づかず個別にインストールしようとする: /datavizはClaude Codeに標準で同梱されており、追加のインストール操作は不要です。無効化したい場合の設定は「よくある質問」の「/dataviz単体だけを無効化できますか」を参照してください。
• プロジェクトSkillを同名で置いたのに反映されない: .claude/skills/dataviz/のSKILL.mdが正しい場所にあるか確認します。単体のファイルではなくフォルダの中にSKILL.mdを置く形式でないと認識されません。
• /skillsメニューでの操作がどこに反映されるか分からない: /skillsメニューで対象のSkillを選びスペースキーで状態を切り替えて保存すると、設定ファイル側のskillOverridesに同じ内容が書き込まれます。CLIから直接skillOverridesを編集するのと、メニュー操作は等価です。

よくある質問

/datavizはClaude Codeのどのバージョンから使えますか

v2.1.198以降で利用できます。それより前のバージョンでは/datavizコマンド自体が認識されません。バージョンを確認してから利用してください。

検証スクリプトはどんな基準で配色を判定していますか

コントラスト比と色覚多様性への安全性を、知覚的な色差モデル(OKLab)にもとづいて判定します。人間の目で見て区別しづらい色の組み合わせを機械的に検出し、基準に届かない配色を洗い出す仕組みです。

/dataviz単体だけを無効化できますか

できます。設定のskillOverridesに"dataviz": "off"を指定すると、/datavizだけを非表示にできます。/code-reviewや/batchなど他のバンドルSkillは影響を受けずそのまま残ります。/skillsメニューから対象のSkillを選び、スペースキーで状態を切り替えて保存する操作でも同じ設定が書き込まれます。バンドルSkill全体を止めたい場合はdisableBundledSkillsを使いますが、こちらは/dataviz単体ではなく全バンドルSkillに一括で効く設定です。ただし/doctorだけは例外として残り、disableBundledSkillsを有効にしても無効化されません。個別のSkillだけをピンポイントで止めたいときはdisableBundledSkillsではなくskillOverridesを使う、という切り分けを覚えておくと設定ファイルを見返すときに迷いません。

プロジェクト独自の配色ルールを毎回指示せずに済ませられますか

.claude/skills/dataviz/に同名のプロジェクトSkillを定義すると、そちらがバンドル版の/datavizを上書きします。ブランドカラーやチャートライブラリの指定をSKILL.mdに書き込んでおけば、プロンプトで毎回渡す必要がなくなります。

まとめ

/datavizはチャート・ダッシュボード作成における「色の妥当性」という、人間の目視レビューに頼りがちな判断を機械検証に置き換えるバンドルSkillです。色覚多様性の検証ロジックはv2.1.210のOKLab化以降さらに精度が上がっており、既定パレットの調整もv2.1.216まで続いています。デザイナーのレビュー工程を持たないチームほど、恩恵の大きい機能です。

初期状態のパレットをそのまま使い続ける必要はありません。プロジェクトSkillでの上書きやCLAUDE.mdへのブランドカラー定義を組み合わせれば、検証機構の恩恵を保ったまま見た目を自社仕様に近づけられます。バンドルSkillの有効・無効の細かい制御方法は「よくある質問」を参照してください。

Claude Codeのバンドルスキル全般の仕組みはClaude Code Skills完全ガイドで、他のスラッシュコマンドとの位置づけはClaude Codeスラッシュコマンド一覧で確認できます。自分でSkillを書く際の型はClaude Code Skillsの書き方にまとめています。