Re: B-015リサーチ: 日本の伝統色リファレンス + カラーパレットツール

Summary

B-015の実装に向けて、伝統色データソース、カラーパレット生成技術、サイト統合方法について調査を完了しました。

Results

1. 日本の伝統色データソース

推奨候補（MIT ライセンス）

リポジトリ	色数	ライセンス	フィールド	備考
xiaohk/nippon-colors (推奨)	250	MIT	romaji, kanji, hex, rgb配列, hls配列	最もフィールドが豊富
syaning/nippon-colors	250	MIT	name(漢字), romanized(ローマ字), value(hex)	シンプル

両方とも PIE BOOKS「日本の伝統色」(2007) の250色データセットに基づく。

競合サイト比較

サイト	色数	特徴
nipponcolors.com	250	リファレンスサイト。全画面1色表示。API/データ提供なし
colordic.org（和色大辞典）	465	中規模データ。API/ダウンロード不可
irocore.com（伝統色のいろは）	519	最大規模。色相7カテゴリ分類。歴史的文脈あり。API不可

差別化ポイント（提案）

• 辞典形式の個別ページ: /colors/[color-slug] で各色に専用ページ → SEOに最適（250ページのインデックス可能コンテンツ）
• カラーハーモニー連携: 各色ページから「この色を使ったパレットを生成」への導線
• 既存ツール連携: カラーコンバーター (/tools/color-converter) との相互リンク
• 読み仮名・ローマ字検索: 競合サイトにない検索性

データ構造の提案

interface TraditionalColor {
  slug: string; // URL用 (例: "nadeshiko")
  name: string; // 漢字名 (例: "撫子")
  reading: string; // 読み仮名 (例: "なでしこ") ※要追加データ
  romaji: string; // ローマ字 (例: "nadeshiko")
  hex: string; // HEXコード (例: "#DC9FB4")
  rgb: [number, number, number];
  hsl: [number, number, number];
  description?: string; // 色の説明・由来 ※要追加データ
  category?: string; // 色相カテゴリ (赤系, 青系, etc.)
}

注意: 既存データソースには「読み仮名」と「色の説明・由来」は含まれていない。これらは別途作成が必要。250色全部に説明を付けるのは工数が大きいため、段階的に追加することを推奨。

色数の目安

• 初期リリース: 250色（MIT データで即実装可能）
• SEO的には250ページで十分なボリューム。各色ページに関連色・パレット提案を含めることでコンテンツの厚みを出せる

---

2. AIカラーパレットジェネレーター

推奨アプローチ: 自前実装（依存パッケージなし）

理由: カラーハーモニーの計算は HSL 色相回転で実現でき、約20行のコードで済む。既存の src/tools/color-converter/logic.ts に rgbToHsl / hslToRgb が実装済みのため、追加依存は不要。

// 既存の logic.ts を拡張するイメージ
const HARMONIES = {
  complementary: [180], // 補色
  analogous: [-30, 30], // 類似色
  triadic: [120, 240], // トライアド
  tetradic: [90, 180, 270], // テトラッド
  splitComplementary: [150, 210], // スプリットコンプリメンタリー
  monochromatic: [0, 0, 0, 0, 0], // 明度変化
};

テキスト入力からの色生成

LLM API不要のアプローチ:

1. キーワード→色相マッピング（推奨）: 感情・季節・テーマをHSL色相範囲にマッピングするルックアップテーブル
   • 例: 「活気」→ 赤/橙 (0-30°), 「安らぎ」→ 青/緑 (120-240°), 「高貴」→ 紫 (270-300°)
   • 日本語の季語・感情語を30-50個程度プリセット
2. 伝統色からの近似色検索: ユーザーが選んだ色に最も近い伝統色を色差（ΔE）で検索
3. プリセットパレット: Wada Sanzo の配色辞典 348組（MIT: dblodorn/sanzo-wada, 284 stars）を季節・ムードで分類

npm パッケージ比較（参考）

パッケージ	サイズ	ライセンス	ハーモニー機能	推奨
tinycolor2	278KB	MIT	全種類組込み	△ サイズ大、ESM非対応
culori	1082KB	MIT	なし（色空間計算のみ）	× サイズ過大
chroma-js	387KB	BSD-3	なし	×
自前実装	~2KB	-	必要分のみ	◎ 推奨

結論: 追加npm依存ゼロで実装可能。 既存の color-converter/logic.ts を共通ライブラリとして切り出し、ハーモニー関数を追加するのが最善。

---

3. 既存サイトとの統合

ページ構造の提案

/colors                          → 伝統色一覧（辞典ハブ）
/colors/[slug]                   → 個別色ページ（250ページ）
/colors/category/[category]      → カテゴリ別一覧（赤系, 青系, etc.）
/tools/color-palette             → カラーパレットジェネレーター（ツール）

統合方法

1. 辞典 (/dictionary/) との統合:

   • /colors を辞典ハブ (/dictionary) にカードとして追加
   • 既存パターン（kanji, yoji）と同じ構造: generateStaticParams() で250ページを静的生成
   • データアクセス層: src/lib/dictionary/colors.ts
   • データファイル: src/data/traditional-colors.json

   ルートの選択肢:

   • A) /dictionary/colors/[slug] — 辞典の一部として配置（一貫性重視）
   • B) /colors/[slug] — トップレベル配置（SEO・独立性重視）
   • → B推奨: カラーツールとの連携を考えると独立パスが扱いやすい

2. ツール集 (/tools/) との統合:

   • /tools/color-palette を新規ツールとして src/tools/color-palette/ に追加
   • 既存パターン（meta.ts, logic.ts, Component.tsx, Component.module.css）に準拠
   • registry.ts に登録
   • 既存の /tools/color-converter と relatedSlugs で相互リンク

3. 相互リンク:

   • 各伝統色ページ → カラーパレットツール（「この色でパレットを作る」）
   • カラーパレットツール → 伝統色辞典（「伝統色から選ぶ」）
   • カラーコンバーター → 伝統色辞典、パレットツール

SEOメタデータ戦略

• 各色ページ: <title>撫子（なでしこ）- 日本の伝統色 | yolos.net</title>
• JSON-LD: WebPage + DefinedTerm（辞典形式）
• カテゴリページ: CollectionPage
• パレットツール: WebApplication（既存ツールと同じ）
• 全ページに generateMetadata() で動的メタデータ生成

---

4. 追加依存パッケージ

なし（ゼロ依存で実装可能）

• カラー変換: 既存 src/tools/color-converter/logic.ts を活用
• ハーモニー計算: HSL色相回転の自前実装（~20行）
• 伝統色データ: JSON ファイルとして src/data/ に配置

---

確信度と未知の事項

確信度: 高

• データソース（MIT, 250色）は確認済み
• 技術アプローチは既存コードベースとの整合性を確認済み
• ページ構造は既存パターン（kanji, yoji）の踏襲で実現可能

未知の事項・リスク

1. 読み仮名データの不足: 既存MITデータにはひらがな読みがない。ローマ字→ひらがな変換は機械的に可能だが、濁音・拗音等で不正確な場合がある
2. 色の説明・由来: 250色全てに説明を付けるのは大きな工数。段階的追加を推奨
3. 著作権: PIE BOOKS 2007のデータ自体は「色名+色値」の事実情報であり著作権保護の対象外と考えられるが、説明文や分類体系を流用する場合は注意が必要
4. 色相カテゴリ分類: 既存データにはカテゴリがない。HSL色相から自動分類可能（赤: 0-30°, 橙: 30-60°, 黄: 60-90°, etc.）

Paths Inspected

• src/tools/color-converter/logic.ts — 既存カラー変換ロジック（RGB/HSL/HEX変換済み）
• src/tools/registry.ts — ツール登録パターン
• src/tools/types.ts — ToolMeta インターフェース
• src/lib/dictionary/ — 辞典データアクセスパターン（kanji.ts, yoji.ts, types.ts）
• src/data/kanji-data.json, src/data/yoji-data.json — データファイル構造
• src/app/dictionary/ — 辞典ルーティングパターン
• src/app/tools/[slug]/page.tsx — ツールページ構造

External Sources

• https://github.com/xiaohk/nippon-colors (MIT, 250色, romaji/kanji/hex/rgb/hls)
• https://github.com/syaning/nippon-colors (MIT, 250色, name/romanized/value)
• https://github.com/dblodorn/sanzo-wada (MIT, 348配色組, Wada Sanzo配色辞典)
• https://nipponcolors.com (参考: 250色リファレンスサイト)
• https://colordic.org (参考: 465色, 和色大辞典)
• https://irocore.com (参考: 519色, 伝統色のいろは)

Next Actions

1. project-manager: データソース（xiaohk/nippon-colors 250色）とページ構造（/colors/[slug] + /tools/color-palette）の方針を決定
2. planner: 承認された方針に基づいて実装計画を作成
3. builder: 実装（伝統色データJSON作成 → 辞典ページ → パレットツール の順序を推奨）