Webデザインの勉強をしていると、配色で手こずることが度々あります。
配色がうまく決まらないと、印象が悪いのはもちろんですが、そもそも納得のいくサイトにならずサイトが完成するまでに異常に時間がかかったりします。
僕自身は、適当に色を選んでも綺麗な組み合わせを作れるような色彩のセンスが全く無かったタイプでしたので、配色にはやたらと悩まされました。
そこで、今回はそんな色彩センスに自信が無い方の為に、配色パターンを紹介していきます。
CONTENTS
配色のコツとポイント
まずは、配色においての基礎的なお話です。
これから、配色のパターンを紹介していきますが、その中で使う用語があります。
- 色相：赤、青などの色の様相のこと
- 明度：色の明るさのこと
- 彩度：色の鮮やかさのこと
- トーン：明度と彩度の複合概念
以上の4つです。細かくはイメージできなくて大丈夫です。
上の3つを色の三要素と呼びます。一般的には、上の4つの知識を使って配色を決めていきます。
配色における「トーン」の意味
ここで、トーンという用語を使うにあたって説明を加えておきます。
トーンというのは明度と彩度をあわせて考えたものになりますが、PCCS(以下で説明)では、この12種類に分割されています。
(出典：http://www.sikiken.co.jp/pccs/pccs04.html)
それぞれのトーンには、「ltg」や「sf」などの名前がつけられています。
“トーンが同じ”という表現は、同じ種類に分割されているという意味をさします。
例えば、「ltg」の中の12色は”トーンが同じ”と言えます。
日本にあるカラーシステム
実は、日本には「PCCS(日本色研配色体系：Practical Color Co-ordinate System）」というものがあります。
簡単に引用を使って説明をしておくと
PCCS（日本色研配色体系：Practical Color Co-ordinate System）は、財団法人日本色彩研究所が、カラーハーモニーの問題をシステマティックに解決することを主な目的として開発し、1964年に発表したカラーシステムです。
PCCSは色の三属性を骨組みにしていますが、色相とトーンによる二次元のシステムとして使用できる点に特徴があります。
と書いてあります。
今回の説明では、統一してこのPCCSで採用されている名称を使うことにします。
6つの配色スタイル
それでは、実際の配色スタイルの紹介に移っていきましょう。
まずは、メインカラーを選ばないと何も始まりませんので、それだけ仮に設定してしまいます。
今回は、僕が好きな青色(下の画像)を使用します。
(出典：色見本と配色サイト)
カラーコードは「#0066cc」です。
トーン・オン・トーン
トーン・オン・トーンと呼ばれる配色は、「色相を同じにし、トーンを変えた配色」と言えます。
例えば、今回の色相は「青」になるので、その中でトーンを変更していきます。
具体的には、下の画像のような配色です。
(出典：色見本と配色サイト)
これは僕もよく使う配色ですが、統一感が出しやすいので調和がしやすい配色とも言えます。
トーン・イン・トーン
トーン・イン・トーンは、トーンを同じにして、色相を変える配色です。
(出典：色見本と配色サイト)
個人的には、色相が変わるので組み合わせるのに技術がいる配色だと思っています。
今回のカラーコード「#0066cc」は「v」か「dp」に当たるので、そのトーンから選択していきます。
トーンの調べ方は「#0066cc(目当てのカラーコード) トーン」とネットで検索すると見つかります。
カマイユ
カマイユ配色は、微妙にトーンだけを変更する配色です。
PCCSのトーンが隣り合っている部分から選んだりするのがいいでしょう。
(出典：色見本と配色サイト)
これも色相が同じなので、使いやすい印象があります。
遠くから見ると、ただの単色に見えることもあります。
フォカマイユ
フォカマイユ配色は、カマイユという配色手法から色相とトーンの大きさを大きくしたような配色です。
(出典：色見本と配色サイト)
コントラスト
コントラスト配色は、色相・彩度・明度が反対の色を選択します。
違いがハッキリ出るため、印象づけることは出来ますが、乱用すると汚らしい印象を与えます。
(出典：色見本と配色サイト)
個人的には、CTA(コールトゥアクション：行動喚起)のボタンパーツに使うくらいをオススメします。
ビコロール
ビコロール配色とは「2色の」という意味があるため、明快な差のある2色の配色になります。
一般的には「白」「黒」との組み合わせになります。
(出典：色見本と配色サイト)
ミニマルデザインやマテリアルデザインの流行りで、こういうシンプルな配色も使われるように成るんじゃないかと思っています。
有名サイトの配色を調べる
それでは、ここからは実際にある有名なサイトの配色を調べていきましょう。
REDBULL
https://www.redbull.com/jp-ja/
あの「翼をさずける」で有名なREDBULLのサイトです。個人的には画像メインでかなりかっこいいなと印象を受けました。
気になる配色は、こんな感じです。(データはおおよそだと思ってください)
圧倒的に白が多いですね。実際にサイトを見ていても「ビコロール配色」と言えるんじゃないでしょうか。
cookpad
レシピをたくさん置いてくれてるcookpadさん。ここはアクセス数もとんでもない数です。
このサイトの配色はこんな感じです。
トーン・オン・トーンかな？といった具合の配色ですね。
Starbucks
スターバックスさんですね。配色はこんな感じです。
基本的には、ビコロールのような配色で、緑(スターバックスのロゴ)とのコントラストにしているのかなとも感じました。
自分のサイトの配色を決める
それでは、ここまで話した内容を実際に活かしていきましょう。
僕が行っている色の決め方を説明していきます。
- まずはメインカラーを決める。できれば1色。
- 次は、配色方法を決める。(※)
- 使う色を選び出し、一覧にしておく。
- 実際にサイトに使用してみる
こんな感じです。(※)とつけた2番のところでは、ネット上にあるツールなどを上手く使うといいでしょう。
(自力で出そうとすると、あまりにも大変です。)
僕のオススメは画像にも使わせて貰っているサイト(色見本と配色サイト)です。
配色に関するまとめ
以上、いかがでしたか？
配色方法は細かく調べていくともっとたくさんあるのですが、雰囲気は伝わったことだと思います。
先に配色を決めておくことで、行き当たりばったりのデザインにならないで済みます。結果的にそのほうが、クオリティも上がるし、制作スピードも速くなります。
ちなみに配色に関するオススメ本は7日間でマスターする配色基礎講座 (DESIGN BEGINNER SERIES)
最初のうちは馴れないとは思いますが、まずは、メインカラーを決めるところから、やってみてください。
より詳しくデザインについて学びたい方などは、TechAcademyなどのプログラミングスクールの利用がおすすめです。
ここまで読んでいただき、ありがとうございました。
