センスのないあなたでもできる！トーンを意識した配色の方法
突然ですが、配色で悩んでいませんか？私はよく悩みました。なんせ、服飾系の一家に育った母親に、『あんたは色のセンスがないねえ』と子供の頃からよく言われたからです。
だから配色に対しては、自分はセンスがないからなあ・・・とコンプレックスでした。服を選ぶときは店員を困らせ、絵を描くと斬新だね、と美術の教師に嫌味を言われ、家具を選ぶと落ち着きのない部屋ができあがりました。
そんな私がWeb制作スクールで配色技法を学び、トーンを意識して使いこなすことを知ってからは、なるほど、こう考えればいいのか！と目から鱗となり、今ではいつのまにか色に対するコンプレックスもなくなりました。
この記事は、配色に悩むあなたに、トーンを意識した配色のコツをつかんで頂ければと思い書いてみました。
トーンとは
色には３つの要素（色相・彩度・明度）があります。
ピンとこないかもですが、色相がいわゆる色のことです。赤色とか黄色とか青色ですね。
彩度が色の濃さ。明度が色の明るさです。そして、トーンとは色の濃さと色の明るさを合わせたものなのです。
よく『配色のトーンを合わせて！』なんていう言い方をしますが、色の濃さと明るさを合わせる、ということなんですね。
カラーピッカーを見ればトーンを理解しやすい
難しいことは置いておいて、フォトショップやワードプレスなどでweb制作をしたことがあれば、次のようなカラーピッカーを見たことがあるでしょう。
上記を見てわかるように、同色のグラデーションで大きな四角が塗りつぶされたエリアでトーンを選択でき、その下にある虹色のバーで色相を選択することができます。現在の色相は緑色となっています。
さらに四角のトーン設定エリアは横軸が彩度、縦軸が明度となっていて、ざっくりいえば次のように分類できるでしょう。
カラーピッカーを使った配色方法
カラーピッカーが色相を選ぶバーとトーンを選ぶエリアに分かれているのには理由があります。
それは、次の２つの基本的な配色方法に都合がよいからです。
- 色相を固定して、トーンを変化させる
- トーンを固定して色相を変化させる
順番に説明していきます。
①色相を固定してトーンを変化させる
色相 オレンジに固定
例えば、色相にオレンジを固定して次のようにトーンを３つ選んで配色します。
すると次のような配色となります。
トーンの選択に決まりはありません。とはいえ、明度または彩度にある程度差をつけることで、メリハリの利いた配色に仕上げることができます。
色相 赤色に固定
もう一つ、今度は色相に赤色を固定した例です。
配色は以下の通りです。
他の色も同じ要領で配色してみました。長くなるので結果だけを紹介します。
色相 黄色に固定
色相 緑色に固定
色 青色に固定
色 紫色に固定
アクセントカラーをつける
以上のようにトーンを変化させても色相を固定すると、統一感が生まれますよね。
この統一感の中に、違う色相を入れるとアクセントカラーとして効果的です。
例えば、先の例の色相をオレンジに固定した配色の中に、オレンジの補色である青をアクセントカラーとして配置すると次のようになります。
アクセントカラーはWebページの場合だと、目立たせたい文字やボタンに使うと効果的です。
明度差を意識してトーンを選ぶのがコツ
トーンを選ぶときのコツとしては、トーンのうち1色は必ず明度差をつけておくことです。
2色配色ならば必ず明度差のある２つのトーンを選ぶ、3色以上の配色ならば、うち1色は必ず他のトーンとは明度差をつける・・・。
そして、明度差をつけたトーンをベースカラーにする、のがよいでしょう。
なぜなら、テキストを記述するときに、基本的には黒基調または白基調で記述することになるからです。
したがって、テキストを黒基調（すなわち明度・彩度ともに低い）とするならば、その背景となるベースの色としては、白、明るいグレー、およびそこに彩度を適度に加えたトーンを使うことが多くなります。
逆にテキストを白基調にするならば、ベースカラーには黒または暗めのグレー、およびそこに彩度を適度に加えたトーンをベースカラーに選択するのがよいでしょう。
②トーンを固定して色相を変化させる
今度は逆に、トーンを固定しておいて、色相を変化させる、という配色です。
複数の色相を選ぶことになるので、色相の選び方がポイントとなります。
・同系色を選んで、イメージを表現する
・同系色を選択せず、自由に表現する
同系色を選んでイメージを表現する
暖かいイメージを出す
赤やオレンジあたりの暖色系の色を使って彩度・明度の高いトーンに固定化すると暖かいイメージを出すことができます。
できあがった配色です。
かなり暖かく感じますね。
冷たいイメージを出す
シアン色～青といった寒色系の色を使って彩度の高いトーンに固定すると冷たいイメージを出すことができます。明度はやや落としておくとより寒く感じるでしょう。
配色結果。
冷たい感じがしますね。
このように、同系色を並べて色の持つイメージを表現するならば、自然に選ぶトーンとしては彩度の高いトーンを選ぶことが多くなりますが、必ずしもそうではありません。
例えば柔らかいイメージを出したいときは、暖色系同系色の彩度低め、明度高めのトーンを使う、という手法があります。
同系色以外の色を選んでイメージを表現する
同系色以外の色相を選んで配色してみましょう。
軽やかな感じを出す
明度高め、彩度含めのトーンに統一すると軽い感じを表現することができます。
配色結果。
軽やかな表現になっていますね。
地味なイメージを表現する
明度・彩度ともに中間よりやや低めのトーンに統一すると地味なイメージとなります。
地味ではありますが、おごそかなイメージも醸し出しますね。
トーン固定でアクセントカラーをつける
ではトーン固定でアクセントカラーをつけるにはどのようにすればよいでしょうか？
色相はこれ以上増やしたくありませんので、使用した色相をどれか１つ選んで、全く違ったトーンの色をアクセントカラーにすればよいでしょう。
このときも、できるだけ明度差を意識して選択しましょう。
例えば、上の地味なイメージの中にアクセントカラーを置いてみました。
もっと明度差をつけたトーンの選択もできます、おごそかな雰囲気をキープしたい、ということで控えめにしてあります。このあたりは表現したい内容や好みによるでしょう。
Webでトーン固定を使うならばモノトーンをベースにする
このように多彩な表現ができるトーン固定ですが、Webページで使用するならば、テキストを記述するエリアとしてモノトーンを柔軟に取り入れていけば、トーン固定で表現したイメージを崩すことなくまとめることができます。
まとめ
明度と彩度とを融合したトーンを意識して配色してみると、センスのない私でもあなたでも調和のとれた配色を作り出していくことが可能です。
今回紹介した色相固定やトーン固定は、色相とトーンを組み合わせて配色していく上で、基本的な手法です。配色技法には、これらとは別に、さまざまな表現する手法もありますので、別の機会に紹介できたらと思います。
ちなみにウェブチルオリジナルのトーンマップを使った配色ツールもあるので、ご興味があれば合わせてご覧ください。webサイトの配色を簡単にシミュレートもできるようになっています。
https://web-children.com/color-distribution-using-original-t...