あたし、カラーコーディネートとか、そういうセンスはないのよねぇ。
ブログに限って言えば、１色好きな色を決めれば、残りの色はほぼ自動的に決まります。
１色なら簡単じゃない！
その１色をこだわって選んでもらいたいなと思いまして、知っておいた方がいい色彩学的な知識を少しだけ紹介します。
まず知っておきたいこと
配色の答えは１つじゃない。
デザイナーが10人いたら、10通りの答えがある。
配色は、そんな唯一解のない問題です。
正解を求めてさまよう配色難民にならないなように注意しましょう。
色の三属性
色を分類する尺度のひとつで、色を３つの要素で分類する方法があります。
この３つの要素、色相・彩度・明度を色の三属性と言います。
- 色相（Hue）
- 赤系、青系、黄系などの色味のこと。色相を虹と同じ順に環状に並べたものを色相環といい、個々の色相を角度０～360°で表します。
- 彩度（Saturation）
- 色の鮮やかのこと。彩度が低くなると、無彩色（白・グレー・黒）に近づいていきます。０～100％で表します。
- 明度（Value / Brightness）
- 色の明るさのこと。明度が高くなると白に近づき、低くなると黒に近づいていきます。０～100％で表します。
色彩調和論
２色以上の色を組み合わせて使用するとき、色の調和が問題になります。
1955年にアメリカの物理学者ジャッドが過去の色彩調和論を４つの原理にまとめました。
１．秩序の原理：色空間の中で一定の規則による色の組み合わせは調和する。
２．なじみの原理：見慣れた配色、特に自然界に存在する配色は調和する。
３．類似性の原理：似た要素を持つ配色は調和する。
４．明瞭性の原理：ちがいが大きい色の組み合わせは調和する。
無彩色は合わせて１色と数える。
赤・青・黄などのように色相・彩度をもつ色を有彩色、白・黒・グレーのように明度しかもたない色は無彩色といいます。
デザイン上、文字色や背景色としてよく用いられる無彩色は、まとめて１色として数えます。
色相を固定したトーン違いは１色と数える。
色の三属性のうち、色相は変えずに、明度と彩度を変えたものは、元の色と合わせて１色と数える。
ちょっと強引よね。
配色
２色以上の色の取り合わせが配色です。
デザインの世界では「配色は基本３色」と言われています。
色数が多いと、協調したい部分が目立たなくなったり、調和がとりづらくなるためです。
また、これら３色は役割ごとにベースカラー・メインカラー・アクセントカラーと呼ばれ、使用面積の黄金比率があります。
- ベースカラー
- 配色で最も面積が大きい色。ブログの背景や余白によく使われる。
- メインカラー
- ２番目に面積が大きく、デザインの中心となる色。サブカラー、アソートカラーとも呼ばれる。
- アクセントカラー
- 他の色とは大きく異なり、目をひくポイントとなる色。
色の指定方法
コンピューターやスマートフォン上に表示される色は、光の三原色であるＲ（赤）・Ｇ（緑）・Ｂ（青）を合成して作られています。
混ぜ合わせる各原色の明度は０～255、16進数で表すと00～FFの256段階で指定します。
WordPressやCocoonでは、主に16進数カラーコードを使います。
16進数がわからなくても、普通はコピー＆ペーストするだけなので大丈夫です。
あ、あたしはわかるわよ、16ナントカ……
Cocoonの色の設定
Cocoonの設定項目とウェブページ上の配色の関係は次のようになっています。
- サイトキーカラー
- ブログのヘッダーやフッター、見出しに使われる。
- サイトキーテキストカラー
- サイトキーカラーが背景のときの文字色。
- 文字色
- ブログでは基本的に黒系。
- 背景色
- 文字が読みやすいように、白や明度が高く彩度の低い淡い色。
- アクセントカラー
- 設定項目にはないが、記事中で注意を引くときに用いる色。前もって色を決めておくと、デザインとして統一感がでる。
サイトキーカラーを決める
サイトキーカラーはブログを代表する色です。
色がもつイメージ
一般的によく言われる色のイメージは以下の通りです。
| 色 | イメージ |
|---|---|
| 赤 | 愛、歓喜、情熱、強い、派手、危険、怒り、闘争的、活動的 |
| ピンク | 幸福、やさしい、かわいい、甘い、若い、柔らかい、開放的、弱い、わがまま |
| オレンジ | 温かい、親しみやすい、明るい、快活、楽しい、健康、安い、低俗 |
| 黄 | 希望、喜び、幸福、躍動、暖かい、にぎわい、注意、警告、騒がしい |
| 緑 | 安全、平和、公平、生命、再生、癒し、新鮮、若い、未熟 |
| 青 | 冷たい、静か、冷静、信頼、誠実、知性、爽快、憂鬱、孤独 |
| 紫 | 高貴、神秘、古典的、和風、不吉、大人、死、悪魔、高級 |
| 白 | 純粋、無垢、清潔、潔白、未来、新しい、善、真理、緊張 |
| 灰色 | あいまい、洗練、都会的、渋い、控えめ、上品、落ち着き、不安、不正 |
| 黒 | 強い、高級、クール、恐怖、悲しい、孤独、反抗、不吉、威圧的 |
ただ色に対するイメージは、育った環境や年齢・性別・好みなどによって変わるので、参考程度に考えましょう。
目にやさしい色を使おう
彩度と明度がともに100％の色は、目にきつくデザイン的にださくなりがちなので、使うのは避けたほうがよいでしょう。
16進数カラーコードでは
ですから
00とFFの両方がある色は避けたほうがいいですね。
原色大辞典
色選びをするのにお勧めのウェブサイトを紹介します。
９種類の色見本から色を選んで、16進数のカラーコードを知ることができます。
サイトキーテキストカラーを決める
視認性に気をつけてサイトキーテキストカラーも決めましょう。
サイトキーテキストカラーは、見出しなどサイトキーカラーの上に表示される文字の色です。
２色間の明度差が小さいと、文字と背景の判別がしづらく読みにくくなります。
Adobe Colorのアクセシビリティツールを利用して、文字の読みやすさを確保しましょう。
登録しなくても無料で使えます。
- 「背景色」に選んだサイトキーカラーを入力する。
- 「テキストカラー」に文字色を入力する。
黒系なら#000000、白系なら#FFFFFFを入力する。 - 「不合格」がある場合、右上の「コントラストの提案」から入力したサイトキーカラーを変更せずに済むものを選んで「適用」をクリックする。
アクセントカラーを決める
アクセントカラーは、注意事項とか何かを強調したいときに使う色ね。
補色と反対色
サイトキーカラーの反対色から、アクセントカラーを選定する。
- 補色
- 色相環において、キーカラーの正反対180°に位置する色。
- 反対色
- 色相環において、補色を中心とした左右45°の範囲の色。
Adobe Color カラーホイール
補色や反対色など、配色を考えるのに便利なツールを紹介します。
前述のアクセシビリティーツールと同じくAdobeが提供してくれています。
- △のある場所にサイトキーカラーを入力する。
- 左の「補色」や「分割補色」をクリックして補色や反対色のコードを得る。
ブログのようにベースカラーが白など明度が高い色の場合、アクセントカラーの明度は低めの方が見やすいと思います。（上の図の場合、ＥよりＤの紫のほうが映えます。）
「カラーモード」を「HSB」にすると色相Ｈ・彩度Ｓ・明度Ｂの値が見られます。
まとめ
ブログのデザインにおける配色の基本は、以下のようにまとめられます:
- 配色には正解がなく、デザイナーによって様々な答えがある
- 色の三属性である色相、彩度、明度を理解し、それらのバランスを取ることが重要
- 色彩調和の原理として、秩序、なじみ、類似性、明瞭性の４つがある
- サイトキーカラーとアクセントカラーを適切に選ぶことで、統一感のあるデザインが実現できる
- アクセシビリティツールを活用して、文字の読みやすさを確保することも重要
ブログのデザインにおける配色は、単に好みの色を選ぶだけでなく、色彩学的な知識に基づいて検討する必要があります。サイトキーカラーとアクセントカラーを適切に組み合わせ、アクセシビリティにも配慮することで、洗練されたブログデザインを実現できるでしょう。
「もっと簡単にオシャレにしたい！」「かわいいブログにしたい！」なら、プロのデザイナーが厳選した配色をあつめた本がありますよ。
