「動くグラフ」から「読めるグラフ」へ──Claude Codeの新スキル/datavizが、AIに図表デザインの作法を仕込む
Claude Code v2.1.198が追加した組み込みスキル/dataviz。チャート選択・レイアウト・視覚階層の指針をコンテキストに読み込ませ、配色を実際に検証するバリデータも同梱する。AIに図表デザインの作法を仕込む仕組みを解説します。
コーディングエージェントにダッシュボードやグラフを作らせると、たしかに動くものは出てきます。ただ、軸ラベルが読みにくい、色の意味が伝わらない、そもそもこのデータにその図は合っていない──そうした「動くけれど読めない図表」に手を入れた経験のある方は多いはずです。Anthropicは2026年7月1日公開のClaude Code v2.1.198で、この弱点を正面から埋める組み込みスキル /dataviz を追加しました。
スキルが読み込ませる、図表づくりの指針
/dataviz は、チャートやダッシュボードを設計するための指針を、その場でClaudeのコンテキストに読み込ませる組み込みスキルです。公式のチェンジログと関連レポートで確認できる範囲では、主に次の要素で構成されます。
| 要素 | 役割 |
|---|---|
| チャート種別の選択 | 扱うデータに対して、どの図（棒・折れ線・散布図など）が適切かを判断する指針を与える |
| レイアウトの規則 | 要素の配置や余白の取り方など、画面としての読みやすさを整えるルール |
| 視覚階層（visual hierarchy） | 情報量の多いUIで、何を目立たせ何を控えるかの優先順位づけ |
| 配色バリデータ | 配色パレットを実際に走らせて検証できるツール。コントラストやアクセシビリティをプログラム的に確認する |
特徴的なのは、最後の配色バリデータが「指針」ではなく実行できるツールとして同梱されている点です。色の選び方を文章で助言するだけでなく、Claude自身が配色を走らせて確かめられます。設計の助言（design guidance）と、実行可能な検証（runnable validator）を組み合わせた構成になっています。
なぜ「組み込みスキル」として配るのか
Claude Codeのスキル（Skill）は、特定の作業に必要な知識や手順をまとめ、/スキル名 と呼び出すだけでその場でコンテキストに引き込む仕組みです。これまで図表を作らせるたびに「読みやすい配色で」「凡例は右上に」といった指示を毎回書き足していたとすれば、その知識を使い捨てのプロンプトから、いつでも引き出せる作法へと格上げしたのが今回の /dataviz だと言えます。
効き方はシンプルです。ダッシュボードやグラフを作る場面で /dataviz を呼べば、設計指針が読み込まれた状態で作業が進みます。人手で毎回同じ注意書きを与える必要が減り、「動くコード」だけでなく「読める図表」に寄せやすくなる、という位置づけです。
ダッシュボードを任せる開発現場で効く
この機能が刺さるのは、社内向けの管理画面やデータプロダクト、分析ダッシュボードなど、図表そのものが成果物になる開発です。データを渡してUIを組ませる工程で、チャート選択や配色の当たり外れをAIの段階である程度そろえられれば、後工程のレビューでの手戻りは小さくなります。
/dataviz は単独の追加ではなく、同じv2.1.198の一連の更新の一部です。同バージョンではブラウザ上で動く「Claude in Chrome」が正式版になり、claude agents のサブエージェントが既定でバックグラウンド実行になるなど、エージェントの働く範囲を広げる変更が並びました。図表デザインの作法を足すこの一手も、その流れの中にあります。
「伝わるグラフ」は、誤読を生むグラフにもなりうる
一方で、図表デザインをAIに寄せる動きには注意点も指摘できます。見栄えのする、説得力のあるグラフほど、軸の切り方や色の使い方しだいで印象を誘導し、誤読を招く余地も大きくなります。配色バリデータがアクセシビリティの確認を助けてくれるとしても、そのデータにその表現が妥当かという判断まで肩代わりしてくれるわけではありません。
AIが整えた図表を鵜呑みにせず、何を伝える図なのかを人が確かめる工程は引き続き必要です。/dataviz は図表の質の底上げに効く道具ですが、最終的な妥当性の判断まで自動化するものではない、と捉えておくのが安全でしょう。
参照: Claude Code changelog（公式） ／ Claude Code Updates - Releasebot ／ AI Tools Weekly: Claude Code Gets Chrome, Background Agents
