そもそも色の仕組みもよく知らないので配色するときさらに迷う。
デザイン初心者にもわかりやすいように、色と配色について基本的なことを教えてほしい。
そういった疑問を解決します。
今回は色と配色の基本について、解説します。
色は「色味」「鮮やかさ」「明るさ」で成り立っていて、その3つのうち1つが変わると「色が変わる」ことになります。
これを知ってると自分のイメージしている色を選びやすくなります。
このブログのデザインも、配色を意識する前は統一感のない見た目でした。
非デザイナーやデザイン初心者の方にわかりやすいよう、図を使って解説しますのでぜひご覧ください。
☑ 本記事の内容
色の仕組み
配色を決める前に色の仕組みを知っておく方が色を選びやすくなります。
初めに色の仕組みをわかりやすく説明します。
すべての色はこの3つの性質から成り立っています。
- 色相
- 彩度
- 明度
青にも「明るい青」や「くすんだ青」がありますよね？
そういった微妙な違いは3つの性質の違いです。
つまり3つの性質を調節すればあらゆる色を自由に作ることができます。
では3つの性質をひとつずつ解説します。
①色相
色相とは赤や青と呼んでる「色味」のことです。
色相を輪のようにつなげると図のような「色相環」ができあがります。
きれいな配色にしたければ色相環を元に色を選ぶと配色の良いデザインになります。
例えば輪の反対同士に位置する2色「黄色」と「青紫」ですね。
このは2色は「補色」と呼ばれ、コントラストを強調したい時に使うと美しくなります。
緑色と一緒に配色するより美しく見えますよね。
相性が良い同士の色ということです。
配色するたびに色相環をチェックしなくて大丈夫ですが、相性の良い悪いが色相環でわかる、ということを覚えておいてください。
②彩度
続いて2つめの性質は、色の鮮やかさである「彩度」です。
鮮やかな色は彩度が高く、くすんだ色は彩度が低い、となります。
白や黒、グレーに近づくほど彩度が低い、と解釈できます。
真っ青な空は「鮮やかな青空」と表現しますが、雲の多い空は鮮やかとは言わないですよね。
混じり気があるかどうかで彩度が変わります。
③明度
3つめは色の明るさ「明度」です。
明るい色、暗い色と表現しますよね。
白が多く混ざった色は明度が高く、黒が多く混ざった色は明度は低くなります。
なので色の中で最も明度が高いのは白、反対に最も低いのが黒になります。
以上の3つ①色相②彩度③明度が色を構成してる性質です。
もしあるひとつの色相を選んだ場合、その色の変化は残りの「彩度」と「明度」だけになりますよね。
例えば色相を青にしたらその他の違いは彩度と明度ですね。
残りの「彩度」と「明度」を複合したものを「トーン」と呼びます。
配色を考える際によく使われる言葉なので覚えておきましょう。
彩度×明度＝トーン
トーンとは、色の三属性のうち2つの属性「彩度」と「明度」の組み合わせで色を表現したものです。
例えばこんな表現をしますよね。
- あわい青
- 渋い青
- つよい青
明るい、暗いよりさらに細かく表現する感じですね。
デザイン全体の印象を決める要素なので覚えておきたいです。
初心者向け配色テクニック
ここまでは色を構成する3つの性質①色相②彩度③明度と、そのうち2つ②彩度③明度を組み合わせた表現方法「トーン」を解説しました。
ここからは実際に2色以上の色を使って配色する方法を解説します。
配色にはパターンとして構築されたテクニックが存在します。
今回は初心者の方にもわかりやすくマネしやすい配色を3つ解説します。
同色系でまとめる：ドミナントカラー配色
ひとつの色相だけで配色する方法です。
その色がもつイメージを直接的に表現できるのと、ひとつの色味しか使わないので初心者でも失敗しないです。
多色でまとめる：ドミナントトーン配色
彩度と明度を揃えた色、つまりトーンを揃えた色で構成する配色です。
トーンが揃っていれば多色でも違和感なくなじみます。
カテゴリーで色分けしたい場合など、たくさんの色を同等に扱いたいときに役立ちますね。
メリハリがある：トーンオントーン配色
明度に大きく差をつけた同じ色同士の配色です。
1個目に紹介したドミナントカラーの一種ですが、まとまりがでるだけでなくメリハリをだせます。
特にデザイン全体を引き締めたいときに使うとはっきりした配色になります。
まずは初心者にも使いやすい配色パターンを3つ紹介しましたが、確立された配色技法は実は20個以上あります。
一気に覚えるより実際に配色しつつ学んでいくことをおすすめします。
配色のポイントと注意点
ここからは配色の際のより実践的なポイントや注意点をまとめました。
好きな色を感覚で選ぶと失敗しやすいので、以下のルールを守った方がセンスく出来上がります。
- ３色以内におさえる
- 色の比率を意識する
- 配色見本を使う
- トーンに注意する
- まっ黒を使わない
３色以内におさえる
使う色は3色に抑えます。
デザイン全体に統一感がでるのと、伝えたい印象が伝わりやすくなります。
デザインを少しでもマシにしたい、という思いからつい何色も使ってしまいます。
そうすると情報量が多くなり、何を伝えたいデザインなのかわかりにくくなっててしまいます。
「3色だと足りないのでは？」と疑問に思うかもしれませんが、色数は多くなるほど扱うのが難しくなります。
配色に慣れていないときほど3色を強く意識したいです。
40通りの3色配色パターンがデザインテイスト別に掲載されてる記事もぜひご覧ください。
色の比率を意識する
配色の際は3色を適当に使わず、それぞれの色の比率を意識します。
この割合で配色するとバランスの取れた美しい配色になるとされています。
特に少ない割合のアクセントカラーをたくさん使ってしまうと、アクセントにならずおしゃれになりません。
厳密でなくていいので意識してみましょう。
配色見本を使う
色を選ぶ際は、感覚で自分の好きな色を選ぶのはキケンです。
必ず配色見本を参考にします。
配色見本だときちんと計算されているので調和した配色を見つけられます。
なんとなくで色を選んじゃうとちぐはぐになってしまうので注意です。
使いやすい配色見本のサイトをいくつか紹介しますね。
その①『coolors』
（引用：https://coolors.co/5c6f68-8aa39b-95d9c3-a4f9c8-a7fff6）
『coolors』はスペースキーを押すたびに最大5色のカラーパレットがランダムで表示されます。
もし5色のうち気に入った1色があれば、その色だけを固定して別の4色を選んでくれます。
その②palettable
（引用：https://www.palettable.io）
出てきた色を「スキ：like」か「キライ：Dislike」で判断していくと自分好みの配色が完成します。
こちらも最大5色までの組み合わせを選べます。
直観で操作できて使いやすいサイトです。
その③pigment
（引用：https://pigment.shapefactory.co）
2色の組み合わせを選べます。
左側に色味や明度を調整できるバーがあるので自分好みの色が選べます。
配色ツールその④canva
（引用：https://www.canva.com/ja_jp/learn/100-color-combinations）
こちらはツールというより100個の配色パターンが載ってるページです。
夏っぽい、都会っぽい雰囲気、などイメージで配色を選べます。
配色は自分のこだわりよりツールに任せる方が失敗しないですよ。
トーンに注意する
トーンとはさきほど紹介した彩度と明度のことです。
悪い例のようによく似たトーンの色同士を近づけないようにしましょう。
トーンが近いと濁った感じがするのと、コントラストが弱くなっちゃいます。
特に標語や注意を促す用途のデザインではトーン差をつけましょう。
まっ黒を使わない
なるべく黒（カラーコード#000000）は使わないことをおすすめします。
真っ黒だとどうしてもインパクトが強すぎてしまうんですよね。
なので黒を使いたい場合は黒に近い色が優しくていいと思います。
以上が配色の基本的なポイントと注意点でした。
デザインでの配色のコツ5選も合わせてご覧いただくとより実践に生かせます。
まとめ
さいごに色と配色の基本についてまとめます。
- 色は三属性（色相・彩度・明度）から成り立っている
- 彩度と明度で表現したのがトーン
- 配色には構築された技法が存在してる
- 3色を配色見本から選び比率どおり配色する
- 真っ黒やトーン差の近い色は使わない
とにかくなんとなく感覚で色を選ぶのだけはやめましょう。
ちなみに「色と配色についてもっと知りたい」という方にピッタリな本を紹介しておきます。
デザインを学ぶすべての人に贈るカラーと配色の基本BOOK
自分の好きな色で配色してたのは失敗だったんだと気づかせてくれました。
他の本に比べて初心者向けに書かれてるので、実践しやすいテクニックが多いです。
では今回の配色の基本をいかして、デザインの素材サイトまとめで紹介してるツールを使って実際にデザインしてみましょう。
を使用しております。
「シンプル・簡単・時短」を叶えてくれます。
