見出し画像

個人的に実践しているWebデザインガイドライン② 配色編

TAK / Web Creator.

あくまで個人的に実践しているデザインのガイドラインです。

記事一覧はこちら↓

# 基本色の設定

あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。

基本配色とはベースカラー・メインカラー・アクセントカラーの3種。

＜ベースカラー＞
全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるために明度が低い無彩色を使用することが多い。メインカラーの明度を上げた色をベースカラーに使用するのも定番。
＜メインカラー＞
カンパニー・カラーなど、テーマとなるような一番主張させたい色。ロゴやキービジュアル、メインコンテンツなど、ユーザーに対して主張させたい部分に使用する。
＜アクセントカラー＞
その名の通りユーザーにより注目させたい箇所や見落として欲しくないポイントに用いる、その名の通りアクセントとなる色。ベースカラーやサブカラーとは色相や彩度が異なった色を選択することが多い。

メインカラーはビジネス目標を元にして選ばれることが多い。例えば赤色なら「情熱、エネルギー、積極的」青色なら「信用、信頼、安心」といったように。

IT企業がコーポレートカラーに青色を用いる企業が多いのは、信用や信頼のほかにもテクノロジーやイノベーションを想起させるからだとか（以下の記事参照）。

# 基本色の割合

基本色は以下の割合が理想的。

ベースカラー → 70%
メインカラー → 25%
サブカラー → 5%

基本色の設定がしっかりとできていれば、バランスのとれたデザインは作りやすい。

# 顕色系の色を極力使う

色の表現には混色系と顕色系の二つの色体系がある。

＜混色系＞
色や光の3原色を混ぜあわせて表現された、物理的な光に近い色の表現形式。数学的に扱いやすくコンピューター向き。
＜顕色系＞
「色相」「明度」「彩度」の要素から成り立つ、間の知覚に近い形で色を配置したもの。

混色系の色は周囲の色と調和が取りづらく扱うのが難しい。コンピューター向きではあるが人間向きではない。

PhotoshopやIllustratorなどの標準スウォッチやカラーパレットは混色系で表示されていることが多く、これらから色を選んでしまうと配色が悪くなりやすい。色相・彩度・明度を考慮して、顕色系の色を使うことが大切。

Adobe ColorやColorSpaceなどの配色見本サービスは色設計に便利なのでおすすめ。おすすめの配色見本サービスを以下のnoteで公開しているので見てね。

# 原色はなるべく使わない

red(#f00)やblue(#00f)などの原色は色が強すぎるのと、それ以上の変化をつけることができないのでよっぽどのデザインスキルが無いと綺麗に見せるのは難しい。必要性がないかぎりなるべく使わない。

真っ黒(#000)や真っ白(#fff)も個人的には非推奨。#000は黒が強すぎて目がしんどく、#fffはデバイスで見ると目がチカチカしやすい。

個人的には黒は#333、白は#fafafaあたりが好き。

周囲の色との対比を上手に利用することで、原色を使わずとも色の強弱をつけることはできる（以下の記事を参考に）。色相・彩度・明度を調整して色の強弱をつけるようにしよう。

# 色だけで判断する仕組みは避ける

例えばリンクのカレントをテキストの色を変えただけだと高齢者や色弱・色盲の方は判別できないことがある。テキストの下にボーダーを追加するなど、色のみで判断する仕組みは避ける。

日本において色覚異常を持つ方は世界平均よりは低いものの男性は20人に1人の割合。デザインでもアクセシビリティに気を使っていこう。

# その他

他のWebサイトの配色を参考・アレンジするのも有効。丸パクリはNG。

使用頻度の高い色はスウォッチやアセットに登録し、色にオリジナルの名前をつけておく。

色の乱用は秩序の乱れ。治安のよい配色を心がけるとサイト内の印象がよくなるね。

# 参考記事

# 参考スライド

# 参考書籍

---

次回「レイアウト編」はこちら↓


いいなと思ったら応援しよう！

TAK / Web Creator.
愛と平和