色彩設計

視覚的デザインにおいて一貫性があり、かつアクセシビリティに配慮した色の選定・構築するためのガイドラインである。

UIデザインにおける色の役割を整理し、デザイナーやエンジニアが迷わずにカラーパレットを作成できる状態を目指す。

メインカラーとニュートラルカラーの選定

まず、ベースとなるメインカラーを1色決める。これはウェブサイトの印象を決定づける重要な色であり、鮮やかな色を選ぶことが推奨される。グレーや白、黒といった無彩色は避ける。

次に、ニュートラルカラーを2色選ぶ。白に近い明るい色と、黒に近い暗い色の2色である。

これで、鮮やかな色1色と、ニュートラルカラー2色（明るい色・暗い色）の計3色が揃った。

色の適用には、60/30/10ルールという有名な法則がある。

これは、メインカラーを60%、セカンダリカラーを30%、アクセントカラーを10% の比率で使用するというものである。これにより、バランスの取れた配色が実現できる。

ベースとなる3色が決まったら、それらの中間色を作成し、カラーパレットを構築する。これにより、コントラストが強すぎない、より自然な色の階調を表現できる。

ニュートラルカラーについては、まず中間色（500）を決める。次に、暗い色（900）と中間色（500）の中間の色（700）を決める。これを繰り返すことで、200単位または100単位の細かいグラデーションを作成できる。

アクセントカラーも同様に、ニュートラルカラーとの中間色を作成していく。

基本となるアクセントカラー（500）は、最もコントラストが高く、目立たせるべき要素に使用する。

それよりも目立たせたくない要素にはニュートラルカラーに近い色、つまりダークモードでは高い数値の色を、ライトモードでは低い数値の色を使用する。

これにより、色の持つ効果はそのままに、コントラストを抑えることができる。

ウェブサイトで使用する色は、ユーザビリティを向上させるものであるべきである。特に、色のコントラスト比は非常に重要である。

ユーザーが使用するデバイスや視覚障害、色覚特性など様々な状況を考慮し、誰にとっても使いやすいウェブサイトを目指そう。

Siege Media のコントラスト比ツールなどを使用し、コントラスト比が7以上になるように調整することが推奨される。

また、グレースケールでデザインを確認したり、ブラウザのLighthouseテストを実行したりすることも有効である。

より詳細なアクセシビリティの原則については、アクセシビリティの原則を参照すること。

カラーパレットの実装については、デザイントークンを参照すること。