配色って、様々な場面において重要になります。
- 広告を作る
- サイトを作る
- ブログの色を変える
- イラストを描く
などです。
ですがみなさん
今回は、「配色」の基礎について理解を深め、そして活かしてもらえるようことを目的とします。
また、レイアウトやWebデザインについては別の記事を参照してください。
色の三原色
色の三原色には２種類あります。
- 色光の三原色（RGB）
- 色料の三原色（CMY）
の２つです。
色光の三原色
- 赤（Red）
- 緑（Green）
- 青（Blue）
の組み合わせで表現されています。（RGB）
混ざって一番明るいところは「白」になります。逆に光が無いところは黒になるわけです。
代表例は、パソコンやテレビのディスプレイです。
色料の三原色
- シアン（Cyan）
- マゼンタ（Magenta）
- イエロー（Yellow）
の３つで構成されています。（CMY）
本や雑誌など、印刷で出されるものはこれを用いて作られています。
色の３属性
色は表現するために３つの属性に分かれています。
- 色相
- 明度
- 彩度
の３つです。
色相
色相は赤・青・緑などの色味の違いのことです。
この色相が段階的に変わっていくのを表す図形で有名なのが「色相環」です。
明度
明度は、「色の明るさ」のことです。
- 明るい色：「明度が高い」「高明度」
- 暗い色：「明度が低い」「低明度」
と表します。
全ての色の中で、最も明度が高い色は「白」、最も明度が低い色は「黒」になります。
彩度
彩度は、「色の鮮やかさ」のことです。
彩度は明度同様に、「高い」「低い」で表します。
- 彩度の高い色：派手めな色
- 彩度の低い色：地味な色
といった印象を与えます。
ちなみに、皆さんがよく目にするこちら。
- 上下：明度
- 左右：再度
を表しています。
配色のバランスは？
配色を決める時に「キーカラー」「サブカラー」「アクセントカラー」を決めていきます。
ブロガーのみなさんは、色のデザインを変える時などよく目にするワードだと思います。
- ベースカラー：７０％
- サブカラー：２５％
- アクセントカラー：５％
の割合が一般的には良いと言われています。
配色の決め方
色をどうやって決めたらいいのか迷いますよね。
冒頭でもお話しましたが
- 広告を作る
- サイトを作る
- ブログの色を変える
イラストを描くなど場面は様々です。
企業の公式ホームページを見ていても、企業のイメージカラーが使われていますよね。
例えば、日本郵便ならポストから赤色がサイトによく使われています。
リクルートのサイトはブルー系が多いかもしれません。
広告やサイトを作る場合は、目的やユーザーをきちんと考えて設計していると思います。
その用途に合った色が望ましいです。
お子さん向けならカラフルな印象、ベビーグッズならパステル系などざっくりしたものでも最初は構いませんが、出来るだけ具体的に説明できる方が良いです。
「この色から、ベビーグッズが想像できる」とか「カラフルな色から子供向けおもちゃがイメージできる」など。
ブログでも「自然やアクティビティについて発信しているなら、自然をイメージした色」とかです。海や山でもそれぞれ色味が全然違います。
マリンスポーツなら、海や空などブルーを基調として連想させることが出来ます。
山でも「紅葉を見に行くのが好き」なら、紅葉を連想させる「赤や赤よりの茶系」になりますが、「登山」なら樹木などの幹の色味も加えるとより登山っぽさが増しますよね。
富士山だったら、また違うかもしれません。
そうは言っても、１から色を考えるのが難しい時は「配色ツール」「カラーコード一覧」などを使うとオススメです。
オススメの配色ツール
「Adobe」では、すでに出来上がっている見本もあるので参考にできます。
例えば「空」と検索すると、「空」をイメージして作られた配色の組み合わせが何パターンか出てきます。
1から配色を考えるのに、使いやすいツールです。
オススメのカラーコード一覧
「Web色見本 原色大辞典」では色とコードが並んでおり、検索しやすいです。
その他のオススメツール
わたしは、ヘッダーに使う写真やプロフィールのアイコンなど、使用する画像を決めてから色味を考えることがあります。
そういったときにはこのツールがおすすめです。
好きな画像を選択すると、その画像の色を抽出してくれます。
この写真（Twitterのヘッダーに使っています）を抽出するとこういう風に出てきます。
ぜひ使ってみてください。
配色で与える印象が違う
配色によってユーザーが感じる印象は変わってきます。
例えば
- 青系、低彩度のもの→男性のイメージ
- 明るく柔らかい色→女性のイメージ
- 金や銀などの色をアクセントに→高級感
などみなさんも直感で感じる部分はありますよね。
他にも
- 郵便局→赤系のイメージ
- 旅行→空や飛行機から青や白のイメージ
- 赤ちゃん向けサイト→パステルなど優しい印象
- 子供向けサイト→明るい色が中心（親が見る子供用のサイトならトーン抑えめ）
などそれぞれのコンセプトや印象で、色によって与える印象は変わってくるわけです。
当ブログにおける配色の決め方
「海外生活」が念頭にあり、それがきっかけでWebデザインや英語の勉強を始め、さらにはブログ運営にも行きついています。
きっかけが「海外」であり、さらには「世界中を巡りたい」という思いもあるので
地球でつながっている「空」をモチーフにしました。
好きな言葉に「夢は空高く、努力は足元に」というのがあるので、空と地面が移っている画像を選びました。それを少し加工してトーンを落とし、「配色抽出サイト」にて抽出した色のものを使っています。
（余談ですが、「空」と検索すると道が写った画像が多いのですが個人的に「道」は決められていてほしくないという頑固さがあるので「道」が載っていない画像を探しまくりました(笑)）
そこから抽出した色をもとに、「Adobe」の配色ツールで並べてみて色を変えつつ…行きつきました。
個人的に好きな色は黄色でしたのでそれを使いたく、
緑よりの青を採用しています。
彩度や明度を変えまくっているのでサイトから「空」と連想できないと思います。
（私の場合は、看護師やWebデザインなどの他のテーマも融合させているブログでもありますから。）
ブログなどはアイデンティティも大事なので、そこは愛嬌だと思っています。
好きな色で、ユーザーが見やすいことも大事です。
まとめ
「色」がもたらす効果は様々あることがわかります。
ぜひ参考にしてみてください。
