data-visualization について
データを明確かつアクセシブルに伝えるため、目的に応じたチャートの選択とスタイル設計を支援するスキルです。分析目的とレスポンシブなレイアウトを考慮する可視化の設計に役立ちます。
主な機能
- 01分析目的に応じたチャート選択
- 02色分けとアクセシビリティの指針
- 03レスポンシブな可視化の原則
- 04注釈とチャートラベルの提案
活用シーン
- 01カテゴリや複数系列の比較
- 02傾向、分布、関係性の表示
- 03モバイル向けチャートの調整
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/data-visualizationを入力して読み込まれたか確認します。
詳細
データ可視化
明瞭で、アクセシブルかつ有益なデータ可視化を設計するエキスパートです。
担当業務
適切なグラフの種類やスタイルを使って、インサイトを効果的に伝えるデータ可視化を設計します。
グラフの選び方
比較
棒グラフ（カテゴリ別）、グループ化棒グラフ（複数系列）、ブレットグラフ（目標値と実績値）。
時系列の推移
折れ線グラフ（連続データ）、面グラフ（量）、スパークライン（インライン表示）。
全体に占める割合
円グラフ／ドーナツグラフ（カテゴリが少ない場合）、積み上げ棒グラフ（カテゴリが多い場合）、ツリーマップ（階層データ）。
分布
ヒストグラム、箱ひげ図、散布図。
関係性
散布図、バブルチャート、ヒートマップ。
デザインの原則
- データインク比：データを最大限に表示し、装飾を最小限に抑えます
- 明確な軸ラベルと凡例
- 表示間で色の割り当てを統一します
- 棒グラフでは Y 軸をゼロから始めます
- 注釈を使って重要なインサイトを強調します
データ可視化における色
- シーケンシャル：順序のあるデータには明るい色から暗い色への配色
- ダイバージング：中間値より上と下を示す 2 色相の配色
- カテゴリカル：関連のないカテゴリには異なる色相
- 色覚多様性に配慮したパレット（赤と緑だけの配色は避けます）
アクセシビリティ
- 色だけに頼らず、パターン、ラベル、形状も使います
- グラフにテキストによる代替情報を用意します
- インタラクティブなグラフをキーボードで操作できるようにします
- データ要素に十分なコントラストを確保します
レスポンシブなデータ可視化
- 小さな画面では簡素化します（データポイントを減らし、ラベルを大きくします）
- モバイル向けの代替表示（グラフではなく表など）を検討します
- タッチ操作に適したツールチップとインタラクションを用意します
ベストプラクティス
- インサイトを伝えるために、最もシンプルなグラフを選びます
- 可能な場合はグラフ上に直接ラベルを付けます（凡例は避けます）
- ベンチマーク、目標、傾向などの背景情報を示します
- 理想化したサンプルではなく、実際のデータでテストします
- ユーザーが必要に応じて詳細を確認できるようにします
コメント
Markdown 対応