belt CLI スキルをインストール: npx skills add belt-sh/cli
データ可視化
inference.sh CLI を使って、明確で効果的なデータ可視化を作成します。
クイックスタート
inference.sh CLI（belt）が必要です。インストール手順
belt login
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]\nrevenue = [42, 48, 55, 61, 72, 89]\n\nfig, ax = plt.subplots(figsize=(10, 6))\nax.bar(months, revenue, color=\"#3b82f6\", width=0.6)\nax.set_ylabel(\"Revenue ($K)\")\nax.set_title(\"Monthly Revenue Growth\", fontweight=\"bold\")\nfor i, v in enumerate(revenue):\n ax.text(i, v + 1, f\"\${v}K\", ha=\"center\", fontweight=\"bold\")\nplt.tight_layout()\nplt.savefig(\"revenue.png\", dpi=150)\nprint(\"Saved\")"
}'
チャート選択ガイド
どのデータにどのチャートを使うか？
| データの関係 | 最適なチャート | 絶対に使わないチャート |
|---|
| 経時変化 | 折れ線グラフ | 円グラフ |
| カテゴリの比較 | 棒グラフ（カテゴリが多い場合は水平棒グラフ） | 折れ線グラフ |
| 全体に対する割合 | 積み上げ棒グラフ、ツリーマップ | 円グラフ（議論はあるが、棒グラフの方が常に明確） |
| 分布 | ヒストグラム、箱ひげ図 | 棒グラフ |
| 相関関係 | 散布図 | 棒グラフ |
| ランキング | 水平棒グラフ | 縦棒グラフ、円グラフ |
| 地理データ | コロプレスマップ | 棒グラフ |
| 経時的な構成変化 | 積み上げ面グラフ | 複数の円グラフ |
| 単一指標 | 大きな数字（KPIカード） | チャート全般（過剰） |
| フロー / プロセス | サンキーダイアグラム | 棒グラフ |
円グラフの問題
円グラフはほとんどの場合、間違った選択です。
❌ 円グラフの問題:
- サイズが似ているスライスの比較が困難
- 5〜6カテゴリ以上を表示できない
- 3D円グラフは常に間違い
- 正確な値の読み取りが不可能
✅ 代わりに使うもの:
- 水平棒グラフ（簡単に比較できる）
- 積み上げ棒グラフ（全体に対する割合）
- ツリーマップ（階層的な割合）
- 単なる表（精度が重要な場合）
デザインルール
軸
| ルール | 理由 |
|---|
| 常にY軸を0から始める（棒グラフ） | 誤解を招く視覚表現を防ぐ |
| 折れ線グラフは0より上から始めても良い | 変化を示す場合で、絶対値ではない場合 |
| 両方の軸にラベルを付ける | 読者が単位を推測する必要をなくす |
| 不要なグリッド線を削除する | 視覚的ノイズを減らす |
| 水平ラベルを使用する | 縦書きは読みにくい |
| 棒グラフは値で並べ替える | 理由がない限りアルファベット順は使わない |
色
| 原理 | 適用 |
|---|
| チャートあたり最大5〜7色 | それ以上は読みにくくなる |
| 1つのものを強調する | 他はすべてグレーにし、焦点に色を付ける |
| 順序を大きさに使う | 低→高を薄→濃に |
| 発散を正/負に使う | 赤 ← 中立 → 青 |
| カテゴリをグループに使う | 異なる色相、同じ明度 |
| カラーユニバーサルデザイン | 赤/緑だけに頼らず、図形やラベルを追加する |
| 一貫した意味 | 青＝収益なら、すべてで青を使う |
適切なカラーパレット
sequential = ["#eff6ff", "#bfdbfe", "#60a5fa", "#2563eb", "#1d4ed8"]
diverging = ["#ef4444", "#f87171", "#d1d5db", "#34d399", "#10b981"]
categorical = ["#3b82f6", "#f59e0b", "#10b981", "#8b5cf6", "#ef4444"]
cb_safe = ["#0077BB", "#33BBEE", "#009988", "#EE7733", "#CC3311"]
テキストとラベル
| 要素 | ルール |
|---|
| タイトル | データの種類ではなく、インサイトを述べる。「Q2収益チャート」ではなく「Q2で収益が倍増」 |
| アノテーション | 主要なデータポイントをチャート上に直接記載する |
| 凡例 | 可能な限り避け、チャートの線や棒に直接ラベルを付ける |
| フォントサイズ | 最小12px、プレゼンテーションでは14px以上 |
| 数値形式 | 大きな数値にはK、M、Bを使用（42,000ではなく42K） |
| データラベル | 正確な値が重要な場合、棒やポイントに追加する |
チャートレシピ
折れ線グラフ（時系列）
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(12, 6))\nfig.patch.set_facecolor(\"white\")\n\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\nthis_year = [120, 135, 148, 162, 178, 195, 210, 228, 245, 268, 290, 320]\nlast_year = [95, 102, 108, 115, 122, 130, 138, 145, 155, 165, 178, 190]\n\nax.plot(months, this_year, color=\"#3b82f6\", linewidth=2.5, marker=\"o\", markersize=6, label=\"2024\")\nax.plot(months, last_year, color=\"#94a3b8\", linewidth=2, linestyle=\"--\", label=\"2023\")\nax.fill_between(range(len(months)), last_year, this_year, alpha=0.1, color=\"#3b82f6\")\n\nax.annotate(\"$320K\", xy=(11, 320), fontsize=14, fontweight=\"bold\", color=\"#3b82f6\")\nax.annotate(\"$190K\", xy=(11, 190), fontsize=12, color=\"#94a3b8\")\n\nax.set_ylabel(\"Revenue ($K)\", fontsize=12)\nax.set_title(\"Revenue grew 68% year-over-year\", fontsize=16, fontweight=\"bold\")\nax.legend(fontsize=12)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.3)\nplt.tight_layout()\nplt.savefig(\"line-chart.png\", dpi=150)\nprint(\"Saved\")"
}'
水平棒グラフ（比較）
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\ncategories = [\"Email\", \"Social\", \"SEO\", \"Paid Ads\", \"Referral\", \"Direct\"]\nvalues = [12, 18, 35, 22, 8, 5]\ncolors = [\"#94a3b8\"] * len(values)\ncolors[2] = \"#3b82f6\" # 勝者を強調\n\n# 値で並べ替え\nsorted_pairs = sorted(zip(values, categories, colors))\nvalues, categories, colors = zip(*sorted_pairs)\n\nax.barh(categories, values, color=colors, height=0.6)\nfor i, v in enumerate(values):\n ax.text(v + 0.5, i, f\"{v}%\", va=\"center\", fontsize=12, fontweight=\"bold\")\n\nax.set_xlabel(\"% of Total Traffic\", fontsize=12)\nax.set_title(\"SEO drives the most traffic\", fontsize=16, fontweight=\"bold\")\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nplt.tight_layout()\nplt.savefig(\"bar-chart.png\", dpi=150)\nprint(\"Saved\")"
}'
KPI / 大きな数字カード
belt app run infsh/html-to-image --input '{
"html": "<div style=\"display:flex;gap:20px;padding:20px;background:white;font-family:system-ui\"><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Monthly Revenue</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">$89K</p><p style=\"color:#22c55e;font-size:14px;margin:0\">↑ 23% vs last month</p></div><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Active Users</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">12.4K</p><p style=\"color:#22c55e;font-size:14px;margin:0\">↑ 8% vs last month</p></div><div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:24px;width:200px;text-align:center\"><p style=\"color:#64748b;font-size:14px;margin:0\">Churn Rate</p><p style=\"font-size:48px;font-weight:900;margin:8px 0;color:#1e293b\">2.1%</p><p style=\"color:#ef4444;font-size:14px;margin:0\">↑ 0.3% vs last month</p></div></div>"
}'
ヒートマップ
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport numpy as np\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\nfig, ax = plt.subplots(figsize=(10, 6))\n\ndays = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]\nhours = [\"9AM\", \"10AM\", \"11AM\", \"12PM\", \"1PM\", \"2PM\", \"3PM\", \"4PM\", \"5PM\"]\ndata = np.random.randint(10, 100, size=(len(hours), len(days)))\ndata[2][1] = 95 # 火曜日11時のピーク\ndata[2][3] = 88 # 木曜日11時\n\nim = ax.imshow(data, cmap=\"Blues\", aspect=\"auto\")\nax.set_xticks(range(len(days)))\nax.set_yticks(range(len(hours)))\nax.set_xticklabels(days, fontsize=12)\nax.set_yticklabels(hours, fontsize=12)\n\nfor i in range(len(hours)):\n for j in range(len(days)):\n color = \"white\" if data[i][j] > 60 else \"black\"\n ax.text(j, i, data[i][j], ha=\"center\", va=\"center\", fontsize=10, color=color)\n\nax.set_title(\"Website Traffic by Day & Hour\", fontsize=16, fontweight=\"bold\")\nplt.colorbar(im, label=\"Visitors\")\nplt.tight_layout()\nplt.savefig(\"heatmap.png\", dpi=150)\nprint(\"Saved\")"
}'
データストーリーテリング
ナラティブアーク
| ステップ | やること | 例 |
|---|
| 1. コンテキスト | 読者が知っておくべき情報を提示する | 「毎月の顧客獲得単価（CAC）を追跡しています」 |
| 2. 問題提起 | 問題や変化を示す | 「第3四半期にCACが40％増加しました」 |
| 3. 解決 | インサイトや解決策を示す | 「しかし、LTVは80％増加したため、ユニットエコノミクスは改善しました」 |
タイトルはインサイトとして
❌ 説明的なタイトル（チャートが示すもの）:
「製品ライン別 第3四半期収益」
「2024年の月間アクティブユーザー」
「顧客満足度調査結果」
✅ インサイトタイトル（チャートが意味すること）:
「エンタープライズ製品が収益成長の70％を牽引」
「無料ティア開始後にユーザー成長が加速」
「サポート応答時間が満足度の最大の決定要因」
アノテーション技法
| 技法 | いつ使うか |
|---|
| コールアウトラベル | 特定のデータポイントを強調する（「ピーク：320K」） |
| 参照線 | 目標やベンチマークを示す（「目標：100K」） |
| 網掛け領域 | 期間を示す（「製品ローンチ期間」） |
| 矢印＋テキスト | トレンドの変化に注意を引く |
| 前/後の線 | イベントの影響を示す |
ダークモードチャート
belt app run infsh/python-executor --input '{
"code": "import matplotlib.pyplot as plt\nimport matplotlib\nmatplotlib.use(\"Agg\")\n\n# ダークテーマ\nplt.rcParams.update({\n \"figure.facecolor\": \"#0f172a\",\n \"axes.facecolor\": \"#0f172a\",\n \"axes.edgecolor\": \"#334155\",\n \"axes.labelcolor\": \"white\",\n \"text.color\": \"white\",\n \"xtick.color\": \"white\",\n \"ytick.color\": \"white\",\n \"grid.color\": \"#1e293b\"\n})\n\nfig, ax = plt.subplots(figsize=(12, 6))\nmonths = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]\nvalues = [45, 52, 58, 72, 85, 98]\n\nax.plot(months, values, color=\"#818cf8\", linewidth=3, marker=\"o\", markersize=8)\nax.fill_between(range(len(months)), values, alpha=0.15, color=\"#818cf8\")\nax.set_title(\"MRR Growth: On track for $100K\", fontsize=18, fontweight=\"bold\")\nax.set_ylabel(\"MRR ($K)\", fontsize=13)\nax.spines[\"top\"].set_visible(False)\nax.spines[\"right\"].set_visible(False)\nax.grid(axis=\"y\", alpha=0.2)\n\nfor i, v in enumerate(values):\n ax.annotate(f\"\${v}K\", (i, v), textcoords=\"offset points\", xytext=(0, 12), ha=\"center\", fontsize=11, fontweight=\"bold\")\n\nplt.tight_layout()\nplt.savefig(\"dark-chart.png\", dpi=150, facecolor=\"#0f172a\")\nprint(\"Saved\")"
}'
よくある間違い
| 間違い | 問題 | 修正方法 |
|---|
| 円グラフ | 比較が困難で、常に誤解を招く | 棒グラフまたはツリーマップを使用する |
| Y軸が0から始まっていない（棒グラフ） | 差を誇張する | 棒グラフは0から開始し、折れ線グラフは切り詰めても良い |
| 色が多すぎる | 視覚的ノイズ、混乱 | 最大5〜7色、重要なものだけを強調する |
| タイトルがない、または一般的なタイトル | 読者はインサイトを理解できない | タイトルは結論を書く（データの種類ではない） |
| 3Dチャート | データを歪め、プロらしくない | 常に2Dを使用する |
| 二重Y軸 | 誤解を招き、読みにくい | 別々の2つのチャートを使用する |
| 棒グラフのアルファベット順ソート | ストーリーを隠す | 値で並べ替える（大きい順） |
| 軸にラベルがない | 読者が解釈できない | 常に単位付きでラベルを付ける |
| チャートジャンク（装飾要素） | データから注意をそらす | 情報を伝えないものはすべて削除する |
| 色付けに赤/緑のみ | 色覚障害者が読めない | 図形、パターン、またはカラーユニバーサルデザイン対応パレットを使用する |
関連スキル
npx skills add inference-sh/skills@pitch-deck-visuals
npx skills add inference-sh/skills@technical-blog-writing
npx skills add inference-sh/skills@competitor-teardown
すべてのアプリを参照: belt app list