明暗スケール

定義

明暗スケールとは、1つの色を明るさに応じて何段階かに並べたものです。いちばん薄い段階を 50、いちばん濃い段階を900として、その間を100、200のように一定の間隔で区切るのが定番です。 元の色に白を混ぜて明るくした側をティント（tint）、黒を混ぜて暗くした側をシェード（shade）と 呼びます。ポイントは、1つの色をあらかじめ複数の明るさで用意しておけば、同じ色の仲間の中から その場に合った濃さを選んで使えるということです。だから実務では、色を1つの点ではなく1本の 「スケール」として定義します。

なぜ重要か

段階が大切なのは、たった1色だけでは実際のUIを作れないからです。画面には、ごく薄い背景、 さりげない区切り線、はっきり読ませる文字、目を引く強いボタンのように、明るさの異なる場所が 同時に存在します。これらすべてを1色でまかなうことはできません。あらかじめ決めた段階があれば、 それぞれの場所にふさわしい濃さをルールに沿って選ぶだけでよく、色を使うたびにその場で計算する 必要がなくなります。これは画面を作るスピードを上げるだけでなく、複数人で作業しても色が バラバラに散らばるのを防いでくれます。うまく組まれた明るさスケールは画面全体のトーンを1つに まとめ、あとでブランドカラーを変えるときも、スケールごと一度に差し替えられるようにしてくれます。

よくある間違い

• 必要になるたびに、色をその場で明るくしたり暗くしたりして使ってしまうことです。ルールなしで 作った濃さが画面ごとに積み重なると、似ているけれど微妙に違う色が何十個にも増え、統一感を 失ったうえに管理も不可能になります。
• 段階どうしの明るさの間隔を、目分量で大まかに決めてしまうことです。人の目は明るい側と暗い側の 変化を違う感じ方でとらえるため、数値だけを均等に割ると、ある区間はほとんど同じに見え、ある 区間は急に飛んで、階段が不ぞろいになります。
• 必要以上に多くの段階を作ってしまうことです。50から900までびっしり揃えても、実際に使う段階は いくつかだけということが多く、使わない段階が増えると、かえってどれを選べばよいのか迷って しまいます。

実務のヒント

• 色は1つの値ではなく、スケールとして定義しましょう。背景には薄いトーン（50〜100）、境界線には 中間のトーン（200〜300）、文字やボタンには濃いトーン（600〜800）が必要だという目安を持って おけば、それぞれの要素にどの段階を使うか迷わずに決められます。
• 段階を作るときは、色相は固定して、彩度と明度だけを規則的に調整しましょう。色相がぶれると、 明るい段階と暗い段階が別の色のように見えてしまい、同じ家族だという感覚が崩れます。
• 濃い段階と薄い段階を文字と背景として組み合わせるときは、コントラストの基準を満たしているか 必ず確認しましょう。段階が細かいと、隣り合う2つの段階どうしではコントラストが足りないことが あります。

関連概念