サイトを立ち上げる際に「カラー設定」は必要不可欠ですよね。
しっくりこない、これであってるのかな？などで悩んだ経験は1度や2度はある事と思います。
カラーの設定でサイトの印象が変わるので、基本ルールをまとめてみました。
テーマごとで反映される箇所が異なりますので、まずはそれぞれ(SPACE / Flower / CITY)ご覧いただき、反映箇所を確認してみましょう！
サイトの配色は役割別に3つあり、色数は3色程度に制限した方が良いでしょう。
基本カラー3色を(70% ：25%：5%)の比率で配色すると、バランスの取れた美しい配色になるとされています。
・ベースカラー（70%）
最も面積を占める色で余白や背景などに用いることが多い色です。
・メインカラー（25%）
ブランドのイメージカラーなどデザインの中心になる色でサイトの印象を決定づける主役の色です。
・アクセントカラー（5%）
全体を引き締め、少ない使用量ながらも画面にアクセントを持たせるための色ユーザーの目を引く色です。
次は、カラーを決める順番と決め方です。
メインカラー → ベースカラー → アクセントカラーの順番で決めていくと色を決めやすいです。
➀ メインカラーの決め方
サイトイメージを大きく左右するメインカラーは一番初めに決めます。
メインカラーの傾向は、文字が読みやすいなどの可読性の問題から、ロゴなどに使用されることが多いので、「明度の低い色」が扱いやすいとされています。
使用する色を決める基準としては、ターゲットイメージに合わせた色を探す必要があるので、色の印象を把握しながら決めると良いでしょう。
➁ ベースカラーの決め方
メインカラーの次はベースカラーを決めていきましょう。
ベースカラーはデザイン全体の印象にもなりますので、主にサイトの背景色となる色です。
無彩色、またはメインカラーやアクセントカラーの明度をあげた色をベースカラーにするとデザインしやすくなります。
メインカラーやアクセントカラーを邪魔しないような色を選びましょう。
➂ アクセントカラーの決め方
単調なトーンにメリハリをつけたい時などに使う色です。
全体に占める面積の割合は一番小さく、最も目立つ色となることが理想です。
ベースカラーやメインカラーと比べて使用する色の面積が少ないので、色合いが強かったとしても問題ありません。
