非デザイナーもまず抑えたい色と配色の基本
こんにちは、syouheiです。
今回は「配色・色の基本」についてまとめました。
色使いに悩むデザイナーさんや、普段仕事で資料作成する社会人の方まで
色の基礎知識を知って、実務で使えるようなコツや基本的な配色法までまとめました。
◆この記事のポイント◆
色の基礎知識から基本的な配色法を知って、
実務で使える配色の仕方と配色法を身につける
◆オススメ書籍◆
01.
まずは、色の基礎知識を知って、正しく色を扱おう
◆「色相・彩度・明度」を理解して、色を知る
まずは最初に、色の基礎知識を知っていきましょう。
色の基礎知識を知ることで、
配色の際に意図的に色を扱えるようになります。
色は、3つの要素で構成されており、
「色相・彩度・明度」３つの要素から成り立っております。
色相とは？
赤や青などの色の種類のことを示します。
色相の中でも赤や黄色など暖かみを感じる色を「暖色」と呼び、
青や紫など冷たさを感じる色を「寒色 」と呼びます。
暖色と寒色の間の色相を「中性色」と呼びます。
彩度とは？
色の鮮やかさのことを示します。
彩度が高いほど、色は鮮やかになり原色に近づき、
逆に彩度が低いほど、色はくすんだような色になります。
明度とは？
色の明るさのことを示します。
明度が高いほど、白色に近づいていき、
逆に明度が低いほど、黒色に近づいていきます。
トーンについて
また、これらの上の３つの要素をもとに、
彩度と明度が同じ色相のものを「トーン」と呼びます。
トーンマップを用いることで、簡単に与えたい印象に合わせた色を選ぶことができます。
◆色が持つ意味を知って、正しい色使いをする
色にはそれぞれの色が持つ印象というものがあり、
赤色の場合は、情熱やエネルギッシュ、攻撃的、熱さなどの印象を持ち、
ポジティブな印象もあればネガティブな印象の両方を持っております。
その他にも、色が持つ印象は多岐に渡りますので
詳しく知りたい方は調べてみると、
よりたくさん出てきますので、ぜひ調べてみてください。
02.
次に、知っておきたい基本的な配色のコツ
色を扱う際に抑えることで、
配色に悩みにくくなるコツをいくつか紹介します。
デザイナーだけでなく、社会人で資料などを作る方にも
意識してほしい順ことを記載たのでぜひチェックしてみてください。
◆純色や真っ黒を避ける
純色とは、彩度と明度が100%（一番高い状態）のことを呼び、
デザインソフトでいう、カラーピッカーが右上の状態を指します。
このような純色は、他の色と合わせづらく、
他にも目がチカチカして読みづらくなるので彩度か明度を少し下げて使用するとをオススメします。
また、時と場合によりますが真っ黒も
コントラストが強すぎて目がチカチカしてしまうので、なるべく避けることをオススメしています。
黒を使用する場合は、真っ黒から彩度や明度を少しだけ上げた黒や背景色のなどの色味を少しだけ混ぜや黒を使用することでまとまりのある配色になります。
◆色数を制限する（基本は３色以内にする)
次に紹介するコツは、色数を抑えるということです。
色数が多くなると、それだけ配色も難しくなりますし
伝えたい部分が伝わりづらくなります。
色の扱いに慣れない間は、意図的でない限り、
配色は3色以内＋無彩色を使用することをオススメします。
◆70：25：5の法則を試してみる
続いてのコツは、ベース(70%)・メイン(25%)・アクセント(5%)カラー
の配色比率を用いて配色することです。
この比率は、一般的な美しい配色と言われています。
必ずしもこの比率で配色をする必要はありませんが、配色に悩んだり迷ったりする際はこの配色比率を活用してみましょう。
ベースカラーは、全体の基盤となる色。メインカラーは、ロゴやキャッチコピーなど人にとって目につきやすい、メインコンテンツに用いられる色。
アクセントカラーは、その名の通りアクセントになるカラーになります。
この法則を使って、配色を決める際は
ベースカラーの彩度を上げたものを、メインカラーにし、メインカラーの反対色をアクセントカラーにすることでメリハリのあるまとまった配色になります。
※ただし、ロゴなどあらかじめ決められた色がある際はブランドカラーなどがメインカラーとして使用することが多くなります。
◆トーンを合わせる
最後に紹介するコツは、トーンを合わせるになります。
01の時に紹介した、トーンマップを参考にトーンを合わせることでまとまりのある配色をすることができます。
03.
実務で使いやすい、色操作と基本配色法5選
最後に、色の基本と配色のコツを知った上で
実作業で直感的に使いやすいカラーパネルの操作方法と、基本的な配色法を5つ紹介していきます。
◆HSBパネルを操作して、色を扱う
色を変更したり、調整する際にカラーパネルのRGBやCMYKでコントロールするのは直感的でなく操作が難しくなります。
そんな際に、HSBパネルでコントロールすると直感的に色をコントロールしやすくなります。
H(色相)・S(彩度)・B(明度)は人の感覚に近い形で色を選べる便利なツールになります。
この使い方を知っていると、
「もう少し落ち着いた色にしたい」→S(彩度)を下げる
「明るい印象にしたい」→B「明度」を上げる
といった、感覚的に色の調整が可能です。
◆使いやすい、配色法5選
最後ににHSBパネルを用いて、使いやすい配色方法を４つ紹介していきます。
・モノトーン配色
ひとつ目は、無彩色のみを使用する配色方法になります。
白・黒・グレーの階調のみで構成され、写真やアート作品などビジュアルを見せたいものや、注目させたい時など引き立てる際に効果的です。
H(色相)S(彩度)を0に固定し、B(明度)のみで変化をつけます。
メインとなる明度差は50%以上を確保し、段階的な変化は20~30%刻みで設定します。特に強調させたい時は明度差を70%以上につけることで、視覚的なメリハリが生まれやすいです。
実務では、明度差の確保を意識しながら中間色を効果的に活用することが重要です。
・カマイユ配色
同一のS(色相)で、S(彩度)とB(明度)の変化をつけた配色法になります。
特定の色相における、豊かな表現を引き出し、洗練された統一感のある印象を演出できます。
色相を固定することで、色彩の調和が取りやすく
明度差が40%以上、又は彩度差30%以上を基準に設定します。
実務では、ベースカラーを決めてから段階的に明度と彩度を調整することで、効率的にデザインを進めやすくなります。
・アナログ配色
色相環上で、隣り合う色相または、近い位置にある色相同士を組み合わせる配色法になります。
色相差は3０度未満に設定し、主となる色相を中心に左右の色相を取り入れます。色相が近いため、自然な調和が生まれやすく明度と彩度の差で変化をつけることで豊かな表現が可能です。
・コンプレメンタリー配色
色相環上で、正反対(180度)に位置する色相を同士を組み合わせる配色法で、よく補色と言われる配色法になります。
お互いの色の鮮やかさを際立たせる効果があり、
色相差が大きい分強い対比が生まれやすく、彩度と明度の調整で印象をコントロールすることが必要になります。
実務では、主となる色相を決めてからその補色を効果的に取り入れ、面積比や彩度と明度のバランスとコントロールすることで意図した印象を作りやすい方法になります。
・スプリットコンプレメンタリー配色
色相環上で対向する色相(H)に対して、その両隣の色相(H)を組み合わせる配色法です。補色関係の持つ色鮮やかさを活かしながら、より柔らかな印象を作ることができます。
色相差は150度~210度の範囲で設定し、彩度と明度の調整で調和をとります。実務では、主となる色相を決めてから、補色の両隣から色を選び、面積比や彩度と明度のバランスを調整することで、魅力的な配色になります。
以上が、実務使いやすい色操作と配色法5選になります。
今回は、やデザインを始めた人・仕事で資料作成するビジネスマンまで
配色や色に悩む人に対して、色の基本から配色を行うときのコツから
実務で配色をする際の操作や配色法をまとめました。
あくまで、基本的なコツや配色法の一部になり
これが全てじゃなく必ずしも正しいとは限りませんので、いろんなデザインを見て参考にしながら実際に使用してより色使いを知っていくことをお勧めします。
また、配色や色を学ぶのにオススメの本をいくつか紹介しますので
もっと色について学びたい方や実務の参考書籍として欲しい方はぜひ手にしてみてください。