色彩設計

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

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テストを実行したりすることも有効です。

より詳細なアクセシビリティの原則については、アクセシビリティの原則を参照してください。

カラーパレットの実装については、デザイントークンを参照してください。