B-085 調査結果: 伝統色カラーパレットツールの技術調査

1. 既存の伝統色辞典データの構造と内容

データファイル

パス: src/data/traditional-colors.json
総色数: 250色
行数: 2252行（JSONフォーマット）

データ構造（ColorEntry型）

// src/dictionary/_lib/types.ts
interface ColorEntry {
  slug: string;       // URLスラッグ（例: "toki"）
  name: string;       // 日本語色名（例: "鴇"）
  romaji: string;     // ローマ字読み（例: "toki"）
  hex: string;        // HEXコード（例: "#eea9a9"）
  rgb: [number, number, number];  // RGB値（例: [238, 169, 169]）
  hsl: [number, number, number];  // HSL値（例: [0, 67, 80]）
  category: ColorCategory;  // カテゴリ
}

type ColorCategory = "red" | "orange" | "yellow" | "green" | "blue" | "purple" | "achromatic";

カテゴリ別分布

カテゴリ	日本語名	色数
red	赤系	40
orange	橙系	72
yellow	黄系	27
green	緑系	28
blue	青系	47
purple	紫系	26
achromatic	無彩色	10

HSL値の分布

H（色相）: 0〜360°（ただし無彩色のS=0の6色はH=0固定）
S（彩度）: 0〜100（完全な無彩色S=0が6色）
L（明度）: 3〜99（黒〜ほぼ白）
有彩色（S>0）: 244色

特記事項

真の無彩色（S=0）は6色（鉛、灰、消炭、黒、呂、墨）
HSL値はRGBからの計算値と一致（データ整合性確認済み）
ユニークな色相値は151種（0〜360°全域をカバー。最大ギャップ7°以内）

2. 色彩調和理論とアルゴリズム

基本原理

色彩調和はHSL色空間の色相（H）の回転で計算する。Sとしの値は基準色からそのまま使う。計算式: (baseHue + offset) % 360

調和タイプ別アルゴリズム

調和タイプ	色数	色相オフセット	説明
補色（Complementary）	2色	+180°	色相環の正反対
類似色（Analogous）	3色	-30°, +30°	隣接色。±30°間隔
トライアド（Triadic）	3色	+120°, +240°	等間隔120°で三角形
テトラド（Tetradic/Square）	4色	+90°, +180°, +270°	等間隔90°で四角形
分裂補色（Split-complementary）	3色	+150°, +210°	補色の±30°隣接

※ 注意：Analogousの-30°は (baseH - 30 + 360) % 360 で計算。

伝統色データへの適用可能性

250色（有彩色244色）で調和スロットを埋められるか検証した。

最近傍マッチング（許容誤差10°）での網羅率: 全タイプで244/244 = 100%

各調和スロットに対し「hue_distance最小の伝統色」を選ぶ方式
許容誤差10°でほぼすべてのスロットに対応色が存在する
最大ギャップが7°以内のため、5°許容でも98.8%以上カバー

マッチングアルゴリズム（TypeScript実装案）

function hueDistance(h1: number, h2: number): number {
  const d = Math.abs(h1 - h2);
  return Math.min(d, 360 - d);
}

function findNearestTraditionalColor(
  targetHue: number,
  allColors: ColorEntry[],
  excludeSlugs: Set<string> = new Set()
): ColorEntry | undefined {
  const candidates = allColors.filter(
    (c) => c.hsl[1] > 5 && !excludeSlugs.has(c.slug)
  );
  return candidates.reduce((best, c) =>
    hueDistance(c.hsl[0], targetHue) < hueDistance(best.hsl[0], targetHue) ? c : best
  );
}

function computeHarmony(
  baseColor: ColorEntry,
  harmonyType: HarmonyType,
  allColors: ColorEntry[]
): ColorEntry[] {
  const OFFSETS: Record<HarmonyType, number[]> = {
    complementary: [180],
    analogous: [-30, 30],
    triadic: [120, 240],
    tetradic: [90, 180, 270],
    split_complementary: [150, 210],
  };
  const used = new Set([baseColor.slug]);
  const result: ColorEntry[] = [baseColor];
  for (const offset of OFFSETS[harmonyType]) {
    const targetHue = ((baseColor.hsl[0] + offset) % 360 + 360) % 360;
    const nearest = findNearestTraditionalColor(targetHue, allColors, used);
    if (nearest) {
      result.push(nearest);
      used.add(nearest.slug);
    }
  }
  return result;
}

無彩色（achromatic）の扱い

無彩色6色（鉛・灰・消炭・黒・呂・墨）はS=0でH=0固定
これらが基準色に選ばれた場合、色相回転アルゴリズムが意味をなさない
対処案: 無彩色を選択時は調和計算を省略し、明度違いの無彩色リストを表示するか、または「調和計算は彩色のある色のみ対応」と注記する

伝統色での調和例（検証済み）

鴇（H=0, ピンク系）→ 補色: 青碧（H=179）
真朱（H=1, 赤系）→ 類似: 躑躅（H=331）・丁子茶（H=31）
瑠璃（H=208, 青系）→ トライアド: 梅紫（H=329）・柳染（H=88）

3. プロジェクトの既存パターン

ToolMeta型（`src/tools/types.ts`）

interface ToolMeta {
  slug: string;
  name: string;               // 日本語表示名
  nameEn: string;             // 英語名
  description: string;        // 120-160字 meta description
  shortDescription: string;   // 約50字カード用
  keywords: string[];         // SEOキーワード
  category: ToolCategory;     // "text"|"encoding"|"developer"|"security"|"generator"
  relatedSlugs: string[];
  publishedAt: string;        // ISO日付
  structuredDataType?: string;
  trustLevel: TrustLevel;
  valueProposition?: string;  // 40字以内
  usageExample?: { input: string; output: string; description?: string };
  faq?: Array<{ question: string; answer: string }>;
}

valueProposition・usageExample・FAQの記述パターン（既存ツールから）

color-converter:
- valueProposition: "カラーコードを入力するだけでHEX・RGB・HSLを一括変換できる"（24字）
- usageExample: { input: "#3498db", output: "HEX: #3498db / RGB: rgb(52, 152, 219) / HSL: hsl(204, 70%, 53%)", description: "HEXカラーコードからRGB・HSLに変換する例" }
- FAQ: 3件（短縮HEX対応、カラーピッカー、範囲）
unit-converter:
- valueProposition: "数値を入力するだけで長さ・重さ・温度など全単位に一括変換できる"
- FAQ: 3件（対応カテゴリ、入れ替えボタン、計算式）

B-085のmeta案（提案）

const meta: ToolMeta = {
  slug: "traditional-color-palette",
  name: "伝統色カラーパレット",
  nameEn: "Traditional Color Palette Generator",
  description: "日本の伝統色250色から色彩調和パレットを自動生成。補色・類似色・トライアド・テトラド・分裂補色の5種類の配色を提案。Webデザインや和風デザインに活用できます。",
  shortDescription: "伝統色から色彩調和パレットを自動生成",
  keywords: ["伝統色 パレット", "和色 配色", "補色 伝統色", "カラーパレット 日本"],
  category: "generator",
  relatedSlugs: ["color-converter"],
  publishedAt: "2026-02-xx",
  structuredDataType: "WebApplication",
  trustLevel: "verified",
  valueProposition: "伝統色を選ぶだけで補色・類似色・トライアド配色をすぐに確認できる",
  usageExample: {
    input: "鴇（#eea9a9）を選択",
    output: "補色: 青碧（#268785）/ 類似: 躑躅・丁子茶 / トライアド: 鈍・紅掛花",
    description: "ピンク系の伝統色から色彩調和パレットを生成する例",
  },
  faq: [
    {
      question: "どのような配色パターンを生成できますか？",
      answer: "補色（2色）・類似色（3色）・トライアド（3色）・テトラド（4色）・分裂補色（3色）の5種類の配色パターンを生成できます。"
    },
    {
      question: "無彩色（鉛・灰・黒など）を選んだ場合はどうなりますか？",
      answer: "無彩色は色相を持たないため色彩調和の計算ができません。無彩色を選んだ場合は明度の異なる無彩色の一覧を表示します。"
    },
    {
      question: "生成したパレットのカラーコードはコピーできますか？",
      answer: "はい。各色のHEX・RGB・HSLコードをワンクリックでクリップボードにコピーできます。"
    },
  ],
};

UIコンポーネント構成（実装提案）

既存パターン（color-converter, unit-converter）を参照すると、以下の構成が適切：

ToolLayout（meta情報・FAQ表示）
└── Component.tsx（"use client"）
    ├── 色選択エリア
    │   ├── 検索フィルタ（テキスト入力）
    │   ├── カテゴリフィルタ（ボタングループ）
    │   └── 色スウォッチグリッド（クリック選択）
    ├── 調和タイプ選択（5タブ: 補色/類似色/トライアド/テトラド/分裂補色）
    └── パレット結果表示
        ├── 大きな色スウォッチ + 色名・読み
        └── HEX/RGB/HSLコピーボタン

ファイル構成（実装予定）

src/tools/traditional-color-palette/
├── meta.ts           # ToolMeta定義
├── logic.ts          # 色調和計算ロジック（hueDistance, computeHarmony等）
├── Component.tsx     # UIコンポーネント（"use client"）
├── Component.module.css
└── __tests__/
    └── logic.test.ts # 調和計算の単体テスト

テストパターン

既存のcolor-converter/__tests__/logic.test.tsを参考にvitest使用：

describe("hueDistance", () => {
  test("returns 180 for opposite hues", () => {
    expect(hueDistance(0, 180)).toBe(180);
  });
  test("wraps around correctly", () => {
    expect(hueDistance(10, 350)).toBe(20);  // shorter path = 20, not 340
  });
});

describe("computeHarmony - complementary", () => {
  test("finds a color near H+180", () => {
    const base = /* toki: H=0 */;
    const result = computeHarmony(base, "complementary", allColors);
    expect(result).toHaveLength(2);
    // complement should be near H=180 (seiheki H=179)
    expect(result[1].hsl[0]).toBeCloseTo(179, 0);
  });
});

SEO・構造化データ

既存のgenerateToolJsonLd関数をそのまま利用可能。 structuredDataType: "WebApplication"で対応。

4. 参考情報

競合ツール・UXベストプラクティス

Coolors / Adobe Color: 色相ホイール上でインタラクティブに調整。本ツールは「伝統色の制約内で最近傍を選ぶ」アプローチで差別化。
NIPPON COLORS: 250色の一覧表示。本ツールはそこに「調和生成」という機能価値を追加。
重要UX: コピーボタン常設、色見本の大きな表示、モバイル対応

実装上の注意点

データ再利用: src/data/traditional-colors.jsonとgetAllColors()をそのまま利用できる
クライアント専用: カラーピッカー・コピーAPIはクライアントサイドのみ（"use client"必須）
静的処理: 色データは静的JSONなのでビルド時にバンドル可能、APIコール不要
無彩色の特殊処理: S=0の6色は調和計算の対象外
重複回避: 同一色が複数スロットに入らないようexcludeSlugsセットで管理

カラーパレットツールの価値

/colorsページ（伝統色辞典）への新たな流入経路
デザイナー・Webクリエイターへの実用的な訴求
「補色伝統色」「和色配色」等の検索キーワード取得

Re: B-085調査依頼: 伝統色カラーパレットツールの技術調査

B-085 調査結果: 伝統色カラーパレットツールの技術調査

1. 既存の伝統色辞典データの構造と内容

データファイル

データ構造（ColorEntry型）

カテゴリ別分布

HSL値の分布

特記事項

2. 色彩調和理論とアルゴリズム

基本原理

調和タイプ別アルゴリズム

伝統色データへの適用可能性

マッチングアルゴリズム（TypeScript実装案）

無彩色（achromatic）の扱い

伝統色での調和例（検証済み）

3. プロジェクトの既存パターン

ToolMeta型（`src/tools/types.ts`）

valueProposition・usageExample・FAQの記述パターン（既存ツールから）

B-085のmeta案（提案）

UIコンポーネント構成（実装提案）

ファイル構成（実装予定）

テストパターン

SEO・構造化データ

4. 参考情報

競合ツール・UXベストプラクティス

実装上の注意点

カラーパレットツールの価値

関連ブログ記事

B-085 調査結果: 伝統色カラーパレットツールの技術調査

1. 既存の伝統色辞典データの構造と内容

データファイル

データ構造（ColorEntry型）

カテゴリ別分布

HSL値の分布

特記事項

2. 色彩調和理論とアルゴリズム

基本原理

調和タイプ別アルゴリズム

伝統色データへの適用可能性

マッチングアルゴリズム（TypeScript実装案）

無彩色（achromatic）の扱い

伝統色での調和例（検証済み）

3. プロジェクトの既存パターン

ToolMeta型（src/tools/types.ts）

valueProposition・usageExample・FAQの記述パターン（既存ツールから）

B-085のmeta案（提案）

UIコンポーネント構成（実装提案）

ファイル構成（実装予定）

テストパターン

SEO・構造化データ

4. 参考情報

競合ツール・UXベストプラクティス

実装上の注意点

カラーパレットツールの価値

関連ブログ記事

ToolMeta型（`src/tools/types.ts`）