khanmo97/sanzo-wada-palettes

Sanzo Wada パレット

ユーザーが「和田の本から」カラースキーム、Sanzo Wadaパレット、特定の組み合わせ番号、またはサイト、ブランド、デザイン、コーディネートに適した上品なパレットを求めている場合に使用します。

1. データを取得する

出典: mattdesl/dictionary-of-colour-combinations (MITライセンス)。空のディレクトリにクローンします:

mkdir -p /tmp/wada && git clone --depth 1 -q https://github.com/mattdesl/dictionary-of-colour-combinations /tmp/wada/repo

フォールバック: 空のフォルダで npm install dictionary-of-colour-combinations を実行します。

colors.json は159色の配列です:

{"name": "Hermosa Pink", "combinations": [176, 227, 273], "swatch": 0,
 "cmyk": [0,30,6,0], "lab": [...], "rgb": [249,193,206], "hex": "#f9c1ce"}

パレットは直接保存されていません。組み合わせNは、combinations リストにNを含むすべての色です:

import json, collections
colors = json.load(open('/tmp/wada/repo/colors.json'))
combos = collections.defaultdict(list)
for c in colors:
    for n in c['combinations']:
        combos[n].append(c)
# combos[n] -> 2、3、または4色のリスト

Pythonは -I フラグ付きで実行し、スクリプトはクローンしたフォルダの外に置いてください。

2. パレットを選択する

• ユーザーが組み合わせ番号を指定した場合は、それをそのまま使用します。
• それ以外の場合は、ユーザーのリクエスト（色数（2、3、4）、ムード（色相で暖色/寒色、LABクロマでミュート/ビビッド）、または含めたい色（LAB距離で最も近い色））でフィルタリングします。
• スイッチャー（ステップ4）用に5～10個の候補を選びます。サイトを構築しない場合は、インラインスウォッチ（HEX、名前、組み合わせ番号）として3～5個を表示します。
• UI作業の場合は、テキストのコントラストをWCAG比率（本文で4.5:1）で確認します。最も明るい色または最も暗い色を背景色として使用します。不合格のペアがある場合は、パレットの色からテキスト用に明るい/暗い色合いを派生させ、その旨をメモします。

3. 各パレットをテーマにマッピングする

Web作業（デフォルトではTailwind/shadcn）の場合、すべての候補パレットを完全なshadcn CSS変数のセットに変換します: --background、--foreground、--card、--card-foreground、--primary、--primary-foreground、--secondary、--secondary-foreground、--accent、--accent-foreground、--muted、--muted-foreground、--border、--ring。プロジェクトですでに使用されている色形式（HSLまたはOKLCH）を使用します。パレットにほぼ白またはほぼ黒がない場合は、純粋なグレーを使用する代わりに、パレットの独自の色から色合い/シェードを派生させます。

すべてのテーマを1つのファイル（例: lib/wada-themes.ts）に書き込みます:

export const wadaThemes = [
  { id: 176, name: "Hermosa Pink / ...", swatches: ["#f9c1ce", ...], vars: { "--background": "...", ... } },
  ...
];

4. テーマスイッチャーを追加する（Web作業の場合は常に）

クライアントコンポーネント components/wada-theme-switcher.tsx を作成し、ルートレイアウトに1回だけレンダリングします。

動作:

• 右下隅に小さなフローティングボタン（高いz-index、固定のニュートラルスタイルで、どのテーマでも読みやすいようにします）。
• クリックすると、各テーマ（組み合わせ番号、名前、および小さな円で表示されるスウォッチ）をリストアップするパネルが開きます。テーマをクリックすると、そのテーマの vars を document.documentElement.style に設定することで即座に適用されます。
• 前/次の矢印とキーボードショートカット（[ と ]）で、テーマをすばやく切り替えられます。
• 「デフォルト」オプションでインライン変数を削除し、サイトの元のテーマに戻せます。
• 選択したテーマを localStorage（try/catchでラップ）に保存し、ページ移動やリロード後も維持します。
• 「CSSをコピー」ボタンで、現在のテーマを globals.css に貼り付け可能な :root { ... } ブロックとしてコピーします。コメントに組み合わせ番号が含まれます。
• 表示: process.env.NODE_ENV !== "production" の場合、またはURLに ?themes=1 が含まれている場合にのみ表示されます。これにより、ユーザーは本番Vercelプレビューでテストし、クライアントとリンクを共有できますが、通常の訪問者には表示されません。

ユーザーが「176で決定」などと選んだ場合、そのテーマの変数をデフォルトとして globals.css に書き込みます。スイッチャーと wada-themes.ts を削除するか、?themes=1 の背後に残すかを尋ねます。

その他の出力

• プレーンCSSサイト: バニラJSで同じスイッチャーを作成し、:root にカスタムプロパティを設定します。
• デザイン/印刷: 各色のHEX、RGB、CMYKを組み合わせ番号とともにリストします。
• コーディネート/非デジタル: 各色を平易な言葉で説明し、どのアイテム（ベース、メイン、アクセント）に適しているかを示します。

常に組み合わせ番号を引用し、ユーザーが書籍で見つけられるようにします。

注記

• HEX値はデジタル近似値です。印刷された書籍のCMYK値が基準です。
• 色名はデータセットに基づいています。日本語名をでっち上げないでください。