ux-color について
ux-color は、役割に基づくトークン化されたカラーパレットを作る生成型デザインスキルです。ブランドや対象ユーザーを踏まえた配色を導き、監査スキルへの引き継ぎも行います。
主な機能
- 01ブランドと対象ユーザーの確認
- 02役割別カラーシステムの指針
- 03トーンスケールとトークンの作成
- 04ライト・ダークモードへの配慮
- 05アクセシビリティと美観の監査連携
活用シーン
- 01新製品のパレット作成
- 02デザインシステムの色定義
- 03対象市場に応じた配色調整
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/ux-colorを入力して読み込まれたか確認します。
詳細
カラーパレット & システムスキル
このスキルの動作 (最初にお読みください)
これは生成的なスキルです。色には、相反する 2 つの典型的な失敗モードがあります。恣意的 (システムもなく、コントラストも満たさずに、見栄えのする青を選ぶ) と、派手すぎる (あらゆる感情的・文化的連想と目立たせるための手法を適用する → aesthetics が警告する、色を使いすぎた「Willy Wonka」パレット) です。そのため、このスキルでは次のようにゲートを設けます。
- ブランド、オーディエンス、市場を確立する — これらが、取り組む価値のある1 つの色相・感情・文化の選択肢を導きます。
- 常に当てはまるコアを適用する — 抑制の効いた、役割ベースで、トークン化された、アクセシブルなパレットは、あらゆるプロダクトに当てはまります。
- 表現的な選択を意図的に行う — ベース色相・感情・彩度・ダークモードを、デフォルトではなくゲート付きの判断として表面化させます。
その後、監査に引き継ぎます: accessibility はコントラスト比と色覚多様性を担い、aesthetics は調和とバランスを担います。
ステップ 0 — 色を選ぶ前にコンテキストを確立する
- ブランドと業界 — 既存のブランドカラーやガイドラインはありますか? 業界の慣習 (金融 → 信頼感/ネイビー、子ども向け → 遊び心) は? その分野の視覚言語について競合他社を確認しましょう。
- オーディエンスと市場 — 誰に向けて、そしてどこで — 色の意味は文化に依存します (感情リファレンスの注意事項を参照)。
- パーソナリティ — プレミアム/洗練 vs. 遊び心/エネルギッシュ? これは色相よりも彩度とニュートラルを左右します。
- モード — ライトのみですか、それともダークモードも必要ですか?
回答なしで進める場合は、前提を明示してください。
常に適用されるコア (あらゆるパレット/システムに当てはまる)
- 調和スキームを基盤に構築し、その後で洗練させる。 ベースカラーとスキーム — モノクロマティック/類似色 (安全で低コントラスト) または補色 (高コントラストで、ティント/トランジショナルな色調で和らげる) — から始め、その後で彩度/明度を調整して面白みを加えます。
- ニュートラル主体、アクセントは控えめ — 60-30-10 の法則。 約 60% をプライマリ/ニュートラルな面、約 30% をセカンダリ、約 10% をアクセントに充て、目立たせる必要のある要素 (CTA) のために取っておきます。プライマリ/セカンダリは、可読性のために比較的ニュートラルに保ちます。
- 色は色相だけでなく役割で定義する。 システムには、プライマリ / セカンダリ / ターシャリのアクセント (オンカラーのペア付き)、ニュートラル/サーフェスの色調、機能/セマンティックカラー (success、warning、error、info) が必要です。
- 機能カラーはブランドから区別しておく。 ブランドカラーが error の赤に近い明るい赤である場合、別の error ファミリーを定義して、ユーザーがブランディングとフィードバックを混同しないようにします。
- トーナルスケール + トークンを構築する。 各ベースから一貫したティント/シェードを生成し、名前付きの変数/トークン (機能的または数値による命名) として公開して、1 か所の変更が伝播し、システムが一貫した状態を保つようにします。
- 色だけに頼らない、そしてすべてのテキスト/アイコン/サーフェスのペアのコントラストを確認する — 実際の比率と色覚多様性のチェックは
accessibility監査に委ねますが、パレットはそれらを満たすように構築しなければなりません。
文脈依存の判断（提示はするが、自動適用はしない）
それぞれについてトレードオフと、Step 0 に紐づく推奨を提示します。失敗のパターンは、彩度の高い色相や連想を多数重ねてしまうことです。
| 判断 | 適用する場合 | 避ける／適応させる場合 | 既定の推奨 |
|---|---|---|---|
| ベースの色相／感情的なトーン | ブランドが求める印象に色相を合わせる（参考を参照） | 好みだけで色相を選ぶ、あらゆる連想を追いかける | ブランドと業界に沿った、意図的なベースを 1 つ |
| ハーモニーのスキーム | 鮮やか／高エネルギーなら補色系、落ち着き／洗練なら類似色・モノクロ | 最高彩度での補色（強すぎる） | 安全な既定は類似色・モノクロ。補色はニュートラルで和らげる |
| 彩度／鮮やかさ | 遊び心／エネルギッシュなブランドには高彩度 | プレミアム／エンタープライズ（抑制した低彩度トーンを使う） | パーソナリティに合わせる。大胆なアクセントにはニュートラルのアンカーを |
| 文化への適応 | グローバル製品／特定市場（色の意味は異なる） | 慣習が固まっている単一市場 | 主要な色相を対象市場で検証する |
| アクセントの数 | 明確なアクセントを 1 つ。役割を果たす場合のみ 2 つ目 | 競合する多数のアクセントカラー（派手で、焦点がない） | アクセント 1 つ + 機能色。それ以外はすべてニュートラル |
| ダークモード | 製品がそれを必要とする／期待する | 単純な反転で後付けする | 両モード向けにセマンティックカラーを設計する（下記） |
色 → 感情（条件付きメニュー — 控えめに使い、文脈が決める）
黄：幸せ／温かい · オレンジ：エネルギッシュ／熱意がある · 赤：刺激的／緊急／情熱的（警報でもある） · 青：落ち着き + 信頼できる（ネイビー → 金融／テックの信頼） · 緑：地に足がついた／自然／成功 · 紫：創造的／精神的／プレミアム · ピンク：柔らかい／育む（性別の連想は変化しつつある） · 茶／アースカラー：安定／地に足がついた。注意： これらは西洋寄りで文脈依存です — 同じ 色相でも文化や周囲の色によって意味が異なります。意図的な連想を 1 つ選び、そのすべてで塗り分けないでください。
ダークモードの注意点
セマンティックな色（文字通りの色相ではなく目的）を定義し、モード間で適応するようにします。ライトモードを単純に反転させるだけにしないでください。両方のモードでコントラストを維持し、ダークモードではより明るいサーフェスで高まり（elevation）を示し（影だけに頼らない）、実際の照明条件でテストします。
結果を検証する（オーケストレーション）
引き継ぎでは、各レンズをインストール可能なスキルの
nameで指定します。そのスキルがインストールされている場合のみ呼び出してください。インストールされていない場合、このスキル自身のコアにこれらのルールがすでに含まれています — ブロックせずに、それなしで進めてください。
パレットを定義または改訂した後、完了と宣言するのではなく、結果を監査レンズに引き継いでください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定されるか、すべてを ux-design-review 経由でルーティングします。ここでは、Tier A はなく、accessibility と aesthetics は Tier B（提案）です — 既存のデザインシステムの下では aesthetics は抑制され、accessibility は使用法に絞られます。ユーザーがこのスキルを特定の 1 つの目的で呼び出した場合は、その範囲を尊重してください。
ux-accessibility-audit(Tier B — 提案。デザインシステムの下では絞る) — すべてのテキスト／アイコン／サーフェスの組み合わせのコントラスト比（ライトおよびダークモード）、および色覚多様性への安全性（赤／緑だけでステータスを符号化しない）。パレットはこれを通過するように作る必要があります。ux-aesthetics-audit(Tier B — 提案。デザインシステムの下では抑制) — ハーモニーとバランス：ニュートラルが支配的で明確なアクセントがあるか、それとも色過多で焦点のない「Willy Wonka」ゾーンに傾いているか？
アクセシビリティである組み合わせが失敗するか、美的感覚が派手さを指摘した場合は、60-30-10 ／単一アクセントのコアに戻ってください。
よくある do/don't パターン
| ❌ しないほうがよいこと | ✅ するべきこと |
|---|---|
| システムを考えずに、いい感じの色を1つ選ぶ | primary/secondary/tertiary + ニュートラル + ファンクショナルという役割を定義する |
| 複数の鮮やかな色を均等な分量で使う | 60-30-10: ニュートラルを主体にし、アクセントは約10%を1色 |
| 色と感情の連想をすべて適用する | ブランドと市場に結びつけた、意図的な連想を1つ選ぶ |
| 彩度の高い補色同士をぶつける | ティントやニュートラルでやわらげる。類似色やモノクロを安全なベースにする |
| ブランドの赤 ≈ エラーの赤 | ファンクショナルカラーの系統をブランドから分離する |
| 至るところに hex をハードコードする | トーナルスケールを名前付きトークン/変数として公開する |
| ステータスを色だけで表現する | 色 + アイコン/ラベルで表現する（→ アクセシビリティ） |
| 「ダークモード」のためにライトモードを反転させる | 両モード向けに設計されたセマンティックカラーを使う。elevation はより明るいサーフェスで表現する |
| コントラストのチェックをせずに出荷する | アクセシビリティ（コントラスト比 + 色覚多様性）と美的観点のチェックに引き継ぐ |