chart-designer

チャートデザインスキル

概要

適切なチャートの種類を提案し、人気のチャートライブラリ向けの設定を生成して、データビジュアライゼーションのベストプラクティスを適用することで、効果的なデータビジュアライゼーションの設計を支援します。

できること：

• データに適したチャートの種類を提案
• ECharts/Chart.js の設定を生成
• ダッシュボードのレイアウトを設計
• ビジュアライゼーションのベストプラクティスを適用
• Excel のチャート仕様を作成
• 配色やスタイルを提案

できないこと：

• チャートを直接レンダリング（生成した設定をツールで使用してください）
• カスタムチャートの種類をゼロから作成
• データに直接アクセス

---

使い方

ステップ 1：データを説明する

以下を教えてください：

• どのような種類のデータか
• 伝えたいストーリー
• 対象者（技術者、経営幹部、一般の人々）
• 表示する場所（プレゼンテーション、ダッシュボード、レポート）

ステップ 2：提案を受け取る

以下を提案します：

• データに最適なチャートの種類
• 設定オプション
• 配色
• レイアウトに関する考慮事項

ステップ 3：チャート設定を受け取る

以下を提供します：

• ECharts の JSON 設定
• Chart.js の設定
• Excel チャートの設定手順
• CSS/スタイルの推奨事項

---

チャート選択ガイド

比較チャート

チャートの種類	最適な用途	データ要件
棒グラフ	カテゴリの比較	カテゴリ + 値
グループ化棒グラフ	複数系列の比較	カテゴリ + 複数系列
積み上げ棒グラフ	全体に対する部分の比較	カテゴリ + 構成要素の値

傾向チャート

チャートの種類	最適な用途	データ要件
折れ線グラフ	時間経過に伴う変化	時系列データ
面グラフ	累積傾向	時系列データ（積み上げは任意）
スパークライン	コンパクトな傾向	単純な時系列

分布チャート

チャートの種類	最適な用途	データ要件
ヒストグラム	値の分布	数値
箱ひげ図	分布の概要	四分位数を含む数値
散布図	相関関係	2 つの数値変数

全体に対する部分を示すチャート

チャートの種類	最適な用途	データ要件
円グラフ	単純な割合（≤5 項目）	カテゴリ + 割合
ドーナツグラフ	合計を含む割合	カテゴリ + 割合
ツリーマップ	階層的な割合	階層データ + 値

特殊なチャート

チャートの種類	最適な用途	データ要件
ファネル	プロセスの段階/コンバージョン	段階 + 値
ゲージ	単一の KPI と目標の比較	現在値 + 目標
ヒートマップ	マトリックスの比較	行 + 列 + 値
レーダーチャート	多次元の比較	項目ごとの複数の指標
サンキー図	フロー/遷移	ソース + ターゲット + 値

---

意思決定ツリー

What do you want to show?
│
├─ Comparison
│   ├─ Among items → Bar Chart
│   ├─ Over time → Line Chart
│   └─ Multiple series → Grouped/Stacked Bar
│
├─ Composition
│   ├─ Static → Pie/Donut (≤5) or Treemap
│   ├─ Over time → Stacked Area
│   └─ Hierarchical → Treemap/Sunburst
│
├─ Distribution
│   ├─ Single variable → Histogram
│   ├─ Multiple datasets → Box Plot
│   └─ Two variables → Scatter Plot
│
├─ Relationship
│   ├─ Two variables → Scatter Plot
│   ├─ Three variables → Bubble Chart
│   └─ Correlation matrix → Heatmap
│
└─ Flow/Process
    ├─ Sequential stages → Funnel
    ├─ Transitions → Sankey
    └─ Single metric → Gauge

---

出力形式

# Chart Design: [Title]

**Data Type**: [Description]
**Purpose**: [What story to tell]
**Recommended Chart**: [Chart type]

---

## Chart Configuration

### ECharts

```javascript
const option = {
  title: {
    text: 'Chart Title',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Series 1', 'Series 2'],
    bottom: 10
  },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Series 1',
      type: 'bar',
      data: [120, 200, 150, 80, 70, 110]
    },
    {
      name: 'Series 2',
      type: 'line',
      data: [100, 180, 160, 90, 80, 100]
    }
  ]
};

Chart.js

const config = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Series 1',
      data: [120, 200, 150, 80, 70, 110],
      backgroundColor: 'rgba(54, 162, 235, 0.8)'
    }]
  },
  options: {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: 'Chart Title'
      }
    }
  }
};

---

スタイルの推奨事項

カラーパレット

• プライマリ：#5470c6
• セカンダリ：#91cc75
• アクセント：#fac858
• ニュートラル：#73c0de

タイポグラフィ

• タイトル：16px、太字
• ラベル：12px、標準
• 軸：11px、細字

---

適用されるベストプラクティス

1. [プラクティス 1]
2. [プラクティス 2]
3. [プラクティス 3]

---

代替チャート

うまく機能しない場合は、以下を検討してください：

1. [代替案 1] - [条件] の場合
2. [代替案 2] - [条件] の場合

---

## ECharts Common Configurations

### Bar Chart
```javascript
{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: values,
    itemStyle: { color: '#5470c6' }
  }]
}

折れ線グラフ

{
  xAxis: { type: 'category', data: categories },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: values,
    smooth: true,
    areaStyle: {} // for area chart
  }]
}

円グラフ

{
  series: [{
    type: 'pie',
    radius: ['40%', '70%'], // donut
    data: [
      { value: 100, name: 'A' },
      { value: 200, name: 'B' }
    ]
  }]
}

散布図

{
  xAxis: { type: 'value' },
  yAxis: { type: 'value' },
  series: [{
    type: 'scatter',
    data: [[x1, y1], [x2, y2]],
    symbolSize: 10
  }]
}

---

カラーパレット

プロフェッショナル

#5470c6, #91cc75, #fac858, #ee6666, #73c0de, #3ba272, #fc8452, #9a60b4

クール

#1f77b4, #aec7e8, #17becf, #9edae5, #6baed6, #c6dbef, #08519c, #3182bd

ウォーム

#ff7f0e, #ffbb78, #d62728, #ff9896, #e377c2, #f7b6d2, #bcbd22, #dbdb8d

アクセシブル（色覚多様性に配慮）

#0077BB, #33BBEE, #009988, #EE7733, #CC3311, #EE3377, #BBBBBB

---

ベストプラクティス

データインク比

• 不要なグリッド線を取り除く
• チャートの装飾を最小限にする
• データに焦点を当てる

明瞭さ

• 明確で説明的なタイトル
• 単位を付けた軸ラベル
• 適切な精度（小数点以下の桁数を増やしすぎない）

比較

• 棒グラフでは Y 軸をゼロから始める
• 比較には一貫した目盛りを使う
• データを論理的に並べ替える

色

• 色は目的に応じて使います
• 色覚多様性に配慮します
• 色を使いすぎないようにします（7色以下）

インタラクション

• 詳細情報にはツールチップを使います
• 密度の高いデータにはズーム機能を使います
• 階層構造にはドリルダウンを使います

---

より良いチャートを作るためのヒント

1. 対象者を把握する - 技術者向けか、経営層向けか
2. 問いから始める - 何を明らかにしようとしていますか？
3. 適切なチャートを選ぶ - データを不適切な形式に無理に当てはめないでください
4. シンプルにする - シンプルなほど効果的です
5. 明確にラベルを付ける - 閲覧者には前提知識がないものとして考えます
6. 実際のユーザーでテストする - メッセージは明確に伝わりますか？
7. アクセシビリティを考慮する - 色、コントラスト、代替テキスト

---

制限事項

• チャートを直接レンダリングできません
• 特定のツールでは設定の調整が必要になる場合があります
• 複雑なカスタムビジュアライゼーションにはコードが必要な場合があります
• リアルタイムデータには追加の設定が必要です

---

Claude Office Skills コミュニティによって作成されました。貢献を歓迎します！