色
明暗スケール
Tints & Shades
明暗スケールとは、1つの色を明るさに応じて複数の段階へ展開したもののことです。
定義
明暗スケールとは、1つの色を明るさに応じて何段階かに並べたものです。いちばん薄い段階を 50、いちばん濃い段階を900として、その間を100、200のように一定の間隔で区切るのが定番です。 元の色に白を混ぜて明るくした側をティント（tint）、黒を混ぜて暗くした側をシェード（shade）と 呼びます。ポイントは、1つの色をあらかじめ複数の明るさで用意しておけば、同じ色の仲間の中から その場に合った濃さを選んで使えるということです。だから実務では、色を1つの点ではなく1本の 「スケール」として定義します。
なぜ重要か
段階が大切なのは、たった1色だけでは実際のUIを作れないからです。画面には、ごく薄い背景、 さりげない区切り線、はっきり読ませる文字、目を引く強いボタンのように、明るさの異なる場所が 同時に存在します。これらすべてを1色でまかなうことはできません。あらかじめ決めた段階があれば、 それぞれの場所にふさわしい濃さをルールに沿って選ぶだけでよく、色を使うたびにその場で計算する 必要がなくなります。これは画面を作るスピードを上げるだけでなく、複数人で作業しても色が バラバラに散らばるのを防いでくれます。うまく組まれた明るさスケールは画面全体のトーンを1つに まとめ、あとでブランドカラーを変えるときも、スケールごと一度に差し替えられるようにしてくれます。
よくある間違い
- 必要になるたびに、色をその場で明るくしたり暗くしたりして使ってしまうことです。ルールなしで 作った濃さが画面ごとに積み重なると、似ているけれど微妙に違う色が何十個にも増え、統一感を 失ったうえに管理も不可能になります。
- 段階どうしの明るさの間隔を、目分量で大まかに決めてしまうことです。人の目は明るい側と暗い側の 変化を違う感じ方でとらえるため、数値だけを均等に割ると、ある区間はほとんど同じに見え、ある 区間は急に飛んで、階段が不ぞろいになります。
- 必要以上に多くの段階を作ってしまうことです。50から900までびっしり揃えても、実際に使う段階は いくつかだけということが多く、使わない段階が増えると、かえってどれを選べばよいのか迷って しまいます。
実務のヒント
- 色は1つの値ではなく、スケールとして定義しましょう。背景には薄いトーン（50〜100）、境界線には 中間のトーン（200〜300）、文字やボタンには濃いトーン（600〜800）が必要だという目安を持って おけば、それぞれの要素にどの段階を使うか迷わずに決められます。
- 段階を作るときは、色相は固定して、彩度と明度だけを規則的に調整しましょう。色相がぶれると、 明るい段階と暗い段階が別の色のように見えてしまい、同じ家族だという感覚が崩れます。
- 濃い段階と薄い段階を文字と背景として組み合わせるときは、コントラストの基準を満たしているか 必ず確認しましょう。段階が細かいと、隣り合う2つの段階どうしではコントラストが足りないことが あります。
AIに頼む
ブランドのメインカラーは[ヘックス値 — 例: #3B82F6]なんだけど、これを1つの点じゃなくてスケールとして展開して。50（一番淡いティント）から900（一番濃いシェード）まで、50・100・200…900の全10段階で作って。ただし色相（hue）は固定して、彩度と明度だけを規則的に調整して。このとき数値を均等に割るだけにしないで。人間の目は明るい側と暗い側で変化の感じ方が違うから、明るい端も暗い端も目に同じくらい均等に見えるように段階の間隔を決めて。各段階を--color-50みたいなCSS変数として書き出して、背景には50〜100・ボーダーには200〜300・テキストとボタンには600〜800を使うっていう用途ガイドも表で一緒に出して。
下に貼り付けるコードから、色をその場その場で明るく・暗く調整して作った、似ているけど微妙に違う色を全部見つけて。これらの色を、色相（hue）を固定した1つの明暗スケール（50〜900、10段階）に統合して、それぞれの色を一番近い段階に対応させて。対応させるときは50〜900をびっしり全部埋めないで、実際のコードに出てくる濃度だけを残して、本当に必要な段階だけを維持して。元の値→段階の対応表と、ハードコードされた色を--color-*変数に置き換えたコードを一緒に出して。
下に貼り付ける明暗スケール（50〜900）から、テキストと背景としてペアにする組み合わせを選んで。各ペアのコントラストを計算して、本文の文字は4.5:1以上、大きい文字（24px以上またはボールド18.66px以上）は3:1以上（WCAG AA）を通過するか表で判定して。段階が細かいと隣り合う2段階（例: 600↔700）同士ではコントラストが足りないから、通過しなかったペアは最低何段階離せば通るのかも一緒に教えて。淡い背景（50〜100）に濃いテキスト（700〜900）を載せるような、安全な基本の組み合わせも提案して。