配色の根拠
色番号ではなく、導出できて調整もできる配色ルールを出す
[プロダクト/ページ] の配色を決めたいのですが、色番号をいくつか渡されるだけでは困ります。導出できる配色ルールをください：1）まずこの色が果たす目標を順位づけ（可読性、情緒、ブランド認知）し、その理由を説明；2）主色がなぜその色相なのか、根拠を示す；3）ニュートラルカラーの階層ロジック——背景・カード・区切り線・副次テキストがそれぞれ明度でどれだけ差をつけるか；4）アクセントカラーの使用量を規定——1 画面で最大何回まで、どの要素にだけ使うか；5）ダークモードに切り替えるときの調整ルール。実行できない「高級グレー」のような言葉は使わないこと。
使い方
目標の順位は自分で埋めてから聞く。でないと色相の理由が「なんとなく良さそう」に流れる。
向いている場面
- レビューで「なぜこの色なのか」を説明する必要があるとき——パレットを見せるだけでは足りない。目標の順位、色相の根拠、使用量の規定をまとめて出す。
- ダークモードや複数ブランドのスキンに展開するとき——必要なのは導出できるルール（ニュートラルの階層、アクセントの使用量）で、固定の色番号ではない。
向いていない場面
- 数パターンの配色をさっと見たいだけ——欲しいのは画像で理由ではない。配色ツールで試すほうが速い。
- ブランドの主色が VI で固定され変更できない——調整できるのはニュートラルとアクセントの使用量だけ。主色を選び直させるのは無駄。
例
入力
B 向けのデータダッシュボード。ユーザーは毎日 8 時間見る。ブランドブルー #1F5AE0 は変更不可で、ダークモードを追加したい
得られるもの
まず目標を順位づけ：長時間の可読性が状態色の識別性より上、状態色の識別性がブランド認知より上。主色はブランドブルーのまま使うが、暗い背景ではコントラスト確保に約 12% 明るくする必要があると示す。ニュートラルは 4 段階の明度差を提示し、背景・カード・区切り線・副次テキストにそれぞれ固定の段を割り当てる。アクセントは 1 画面 3 箇所まで、主操作と異常アラートだけに限定。ダークモードは純黒を使わず、影ではなく明度で階層を上げる、と規則化する。
よくある誤用
- 「高級な配色の色番号をください」と直接頼む——hex を 5 つ受け取っても理由が分からず、次のページでまた配色できない。
- 可読性・ブランド感・若さ・季節感を同時に満たすよう頼む——目標が順位づけられておらず、どれも半分しか満たさない結果になる。
こう変えると効く
- 「主色がなぜその色相か説明して」を「候補の色相を 2 つ、それぞれのコストを説明して」に変える——1 つの答えを受け取るのではなく、根拠ある選択ができる。
- 「アクセシビリティ基準を満たせない場合の代替案を出す」を足す——色覚特性や低コントラストの場面に備えがあり、レビューで止まらない。