mcpField
D
data-viz-palette

data-viz-palette

github.com/basiclinesデザイン・UI1645 回インストール32 週間前に更新
リポジトリ

data-viz-palette について

rampaを使ってグラフやダッシュボードの配色を作るためのガイドです。明度と彩度をそろえ、色相の間隔でカテゴリを区別する方法や、配色例、色覚への配慮を示します。

主な機能

  1. 01色数別のパレット例
  2. 02明度と彩度をそろえる指針
  3. 03色相間隔によるカテゴリの区別
  4. 04背景に応じた明度の推奨
  5. 05色覚に配慮した配色の考慮点

活用シーン

  1. 01円グラフで区別しやすい色を選ぶ
  2. 02四半期比較用の配色を作る
  3. 03明色・暗色背景向けのグラフ色を選ぶ
  4. 04赤と緑の違いへの依存を減らす

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/basiclines/rampa-studio --skill data-viz-palette

インストール後、Claude Code で/data-viz-paletteを入力して読み込まれたか確認します。

詳細

データ可視化パレット

チャート、グラフ、ダッシュボードに最適化された色のセットを生成します。色は最大限に区別でき、視覚的な重みが均等になるよう、数学的に間隔を空けています。

使用する場面

  • 「チャート用の色を作成して」
  • 「データ可視化パレットが必要です」
  • 「グラフ用に区別しやすい色を生成して」
  • 「ダッシュボードのチャート用の色」

インストール

npx @basiclines/rampa

主な原則

  1. 明度を固定 - すべての色の明度を同じにすると、視覚的な重みが均等になります
  2. 彩度を固定 - パレット全体で鮮やかさを統一します
  3. 色相の間隔を最大化 - 調和を利用して、知覚上の区別を明確にします
  4. 色ごとに単一のシェード - データ可視化では、グラデーションではなく、区別しやすい色相が必要です

色数別のレシピ

3色（三色配色）

円グラフやシンプルな棒グラフに最適です。

rampa -C "<brand-color>" --add=triadic --size=2 -L 50:50 -S 70:70 -O css

出力：base、triadic-1、triadic-2（120°間隔）

4色（スクエア配色）

四半期データや4カテゴリの比較に適しています。

rampa -C "<brand-color>" --add=square --size=2 -L 50:50 -S 70:70 -O css

出力：base、square-1、square-2、square-3（90°間隔）

4色（コンパウンド配色）

補色と分裂補色を組み合わせた、よりニュアンスのある代替案です。

rampa -C "<brand-color>" --add=compound --size=2 -L 50:50 -S 75:75 -O css
6色

三色配色と補色を組み合わせます。

rampa -C "<brand-color>" --add=triadic -L 50:50 -S 70:70 --size=2 -O json
# Then run complementary of each triadic color

または、異なる明度の三色配色を2つ組み合わせます。

# Primary triad
rampa -C "<brand-color>" --add=triadic --size=2 -L 45:45 -S 70:70 -O css

# Offset triad (shift hue by 60°)
rampa -C "<brand-color>" --add=triadic --size=2 -L 60:60 -S 70:70 -H 60:60 -O css

完全な例

ブランドカラーが #3b82f6 の場合：

# 4-color chart palette
rampa -C "#3b82f6" --add=square --size=2 -L 50:50 -S 70:70 -O css

出力：

:root {
  --base-0: #3b82f6;      /* Blue */
  --square-1-0: #a855f7;  /* Purple */
  --square-2-0: #f97316;  /* Orange */
  --square-3-0: #22c55e;  /* Green */
}

明度の推奨値

背景推奨される明度
白 (#fff)45-55%
薄いグレー (#f5f5f5)45-55%
ダーク (#1a1a1a)55-65%
黒 (#000)60-70%

彩度のガイドライン

用途彩度
鮮やかで目を引く75-85%
プロフェッショナルで落ち着いた印象55-65%
アクセシブル（色覚多様性に配慮）60-70%

色覚多様性への配慮

色覚多様性に配慮したパレットにするには：

  1. 主な区別に赤と緑の組み合わせを使わない
  2. 似た色相を使う場合は、明度を少し変える
  3. 補助的な識別手段としてパターンや形を使う

明度に変化をつけた例：

rampa -C "#3b82f6" --add=square --size=1 -L 40:40 -S 70:70 -O css  # darker
rampa -C "#3b82f6" --add=square --size=1 -L 60:60 -S 70:70 -O css  # lighter

ヒント

  1. --size=2 を指定すると最小限のグラデーション（各2シェード）になり、データ可視化に適しています
  2. すべての色の彩度を一定に保ちます
  3. 明るい背景と暗い背景の両方でチャートをテストします
  4. 凡例の順序は、視覚的な目立ちやすさに合わせます
  5. 「データなし」や基準値には、中間色のグレーを追加します

コメント

Markdown 対応