![見出し画像](https://assets.st-note.com/production/uploads/images/15195453/rectangle_large_type_2_c5dbb29070d0fd960ecfb55495e83151.jpeg?width=1200)
個人的に実践しているWebデザインガイドライン② 配色編
あくまで個人的に実践しているデザインのガイドラインです。
記事一覧はこちら↓
# 基本色の設定
あらかじめWebサイトの配色設計を立てて、基本配色と配色の割合を決定した上でデザインをする。
基本配色とはベースカラー・メインカラー・アクセントカラーの3種。
<ベースカラー>
全体のイメージの基盤となる色。背景や余白などに利用し、ユーザーにどういった印象を与えたいかで選定する。可読性を高めるために明度が低い無彩色を使用することが多い。メインカラーの明度を上げた色をベースカラーに使用するのも定番。
<メインカラー>
カンパニー・カラーなど、テーマとなるような一番主張させたい色。ロゴやキービジュアル、メインコンテンツなど、ユーザーに対して主張させたい部分に使用する。
<アクセントカラー>
その名の通りユーザーにより注目させたい箇所や見落として欲しくないポイントに用いる、その名の通りアクセントとなる色。ベースカラーやサブカラーとは色相や彩度が異なった色を選択することが多い。
メインカラーはビジネス目標を元にして選ばれることが多い。例えば赤色なら「情熱、エネルギー、積極的」青色なら「信用、信頼、安心」といったように。
IT企業がコーポレートカラーに青色を用いる企業が多いのは、信用や信頼のほかにもテクノロジーやイノベーションを想起させるからだとか(以下の記事参照)。
# 基本色の割合
基本色は以下の割合が理想的。
ベースカラー → 70%
メインカラー → 25%
サブカラー → 5%
基本色の設定がしっかりとできていれば、バランスのとれたデザインは作りやすい。
# 顕色系の色を極力使う
色の表現には混色系と顕色系の二つの色体系がある。
<混色系>
色や光の3原色を混ぜあわせて表現された、物理的な光に近い色の表現形式。数学的に扱いやすくコンピューター向き。
<顕色系>
「色相」「明度」「彩度」の要素から成り立つ、間の知覚に近い形で色を配置したもの。
混色系の色は周囲の色と調和が取りづらく扱うのが難しい。コンピューター向きではあるが人間向きではない。
色には混色系と顕色系というジャンルがあって、おそらく混色系の色を選んでいるのではないかと。混色系はコンピューターに向いている色で色域が広く、彩度が高いです。そのため他の色との調和が取りづらく、人間が見るとチカチカしやすいため「人間向きの色ではない」という表現がいいかなって感想っす
— TAK (@tak_dcxi) October 11, 2019
PhotoshopやIllustratorなどの標準スウォッチやカラーパレットは混色系で表示されていることが多く、これらから色を選んでしまうと配色が悪くなりやすい。色相・彩度・明度を考慮して、顕色系の色を使うことが大切。
Adobe ColorやColorSpaceなどの配色見本サービスは色設計に便利なのでおすすめ。おすすめの配色見本サービスを以下のnoteで公開しているので見てね。
# 原色はなるべく使わない
red(#f00)やblue(#00f)などの原色は色が強すぎるのと、それ以上の変化をつけることができないのでよっぽどのデザインスキルが無いと綺麗に見せるのは難しい。必要性がないかぎりなるべく使わない。
真っ黒(#000)や真っ白(#fff)も個人的には非推奨。#000は黒が強すぎて目がしんどく、#fffはデバイスで見ると目がチカチカしやすい。
個人的には黒は#333、白は#fafafaあたりが好き。
webデザイナーにとっての黒色って大体 #333 あたりが相場だよね。僕は#333と#555が好き
— TAK (@tak_dcxi) July 27, 2019
周囲の色との対比を上手に利用することで、原色を使わずとも色の強弱をつけることはできる(以下の記事を参考に)。色相・彩度・明度を調整して色の強弱をつけるようにしよう。
# 色だけで判断する仕組みは避ける
例えばリンクのカレントをテキストの色を変えただけだと高齢者や色弱・色盲の方は判別できないことがある。テキストの下にボーダーを追加するなど、色のみで判断する仕組みは避ける。
【エックスライト社のカラーIQ(色彩感覚)テスト】https://t.co/5v6OXpseVT
— TAK (@tak_dcxi) October 11, 2019
僕は最高点の0点でした。
世界的には色覚異常を持っている方の割合は女性では255人に1人、男性では12人に1人の割合とのこと。日本人の場合は女性で500人に1人、男性で20人に1人の割合らしいです。
日本において色覚異常を持つ方は世界平均よりは低いものの男性は20人に1人の割合。デザインでもアクセシビリティに気を使っていこう。
# その他
他のWebサイトの配色を参考・アレンジするのも有効。丸パクリはNG。
Adobe XDを使っているなら「Mimic」というプラグインを入れると指定したサイトから色・フォント情報・画像情報を抽出して一覧化してくれて参考にしやすいからオススメ。画像には著作権があるから流用するのはダメ🙅♂️
— TAK (@tak_dcxi) October 17, 2019
使用頻度の高い色はスウォッチやアセットに登録し、色にオリジナルの名前をつけておく。
色の乱用は秩序の乱れ。治安のよい配色を心がけるとサイト内の印象がよくなるね。
# 参考記事
# 参考スライド
# 参考書籍
---
次回「レイアウト編」はこちら↓
愛と平和