サイトデザインにおいて配色はとても重要になってくる要素の一つです、当サイトでは過去にも配色に関する記事をいくつか公開してきましたが、今回は少し聞き慣れない「トーナル配色」と「セパレートカラー」の関係について触れてみたいと思います。少し難易度が高い配色になりますが、うまく組み合わせることで微妙なニュアンスや独特な世界観を表現できるので、ぜひマスターしておきたいですね。 （こちらの記事もご参考に） トーンと色味をコントロールして配色を考えてみる＃1（トーンと配色知識） トーンと色味をコントロールして配色を考えてみる＃2（色味の選定） トーンと色味をコントロールして配色を考えてみる＃3（シェードとティント）  

落ち着いたイメージが表現できるトーナル配色

トーナル配色とは中明度で低彩度〜中彩度の色で構成される配色のことを指します。全体的にくすんだ色味が多いため、素朴で落ち着いた雰囲気やレトロで懐かしい、叙情的な世界観であったり、和の趣や大人なイメージを表現することができます。ただし色味が出にくい配色となるため、組み合わせたり使いこなすのが難しい配色であるとも言えます。   トーナル配色では「ソフトトーン」「ダルトーン」「ライトグレイッシュトーン」「グレイッシュトーン」のトーンから選びます。トーンの変化が少ないため、色味も少なくなるとドミナントトーンやカマイユ・フォカマイユ配色になるので、トーナル配色っぽさというのが出にくくなってしまいますので、できるだけ色味は揃えておきたいところですね。   実際のトーナル配色のサンプルを見ていきます。先述のイメージの通り、落ち着いた雰囲気の配色となっていますね。ただこの配色でデザインするとなるといろんな点にを考慮する必要があります。   その一つとしてコントラストが出しにくいため、文字の視認性などが下がりやすくなってしまうことに注意しなければいけません。実際にトーナル配色で文字色と背景色を組み合わせた例を見ていきますと色味が近しいためこのように背景と文字が馴染んでしまっているのがわかります。   トーナル配色では全体的に主張が弱くなりがちな色が多いため情報の整理や訴求といった面で扱いづらくなってしまいます。そこで、セパレートカラーという配色テクニックを使うことで効果的にこれらの問題を解消していきます。  

セパレートカラーとは

セパレートカラーはその名の通り、複数ある色味を分断するような色を組み合わせた配色になります。大体は2つの色味に対して1つのセパレートカラーという形で3色程度の組み合わせが多く、バランスも取れやすくなります。実際にセパレートカラーを使った配色はこのようなものになります。   これらを見てわかるとおり、2つの色の間には明確な境界線があるように見える配色となります。ただ1点気になることがあります。それは「アクセントカラー」との違いです。アクセントカラーとは、ベースとなる色味に対して強調色となる色味を使った配色になり、使い方によってはセパレートカラーにもなりうるケースがあります。（アクセントカラーについては、過去記事「トーンと色味をコントロールして配色を考えてみる＃2（色味の選定）」をご参考ください）ただし、トーナル配色ではベースとなる色味がくすんでいたり主張が弱い色が多いため、アクセントカラーの場合には強調し過ぎてしまったり浮いてしまったりとうまく組み合わせられないものもあります。実際にアクセントカラーとセパレートカラーの違いを見比べてみます。   このようにどちらも2つの色と大きな差があるだけに見えますが、しっかりと確認するとアクセントカラーの場合には主に色相の差が、セパレートカラーは明度や彩度の差が中心となって配色されているのがわかります。つまり、色を基準にするのではなく濃さや明るさというグレースケールベースを基準にしたものがセパレートカラーになります。極端にいうと無彩色もセパレートカラーとして効果的な色になります。  

トーナル配色が活きる効果的なセパレートカラーの組み合わせ

アクセントカラーのように色味を気にしなくていいため、低彩度〜中彩度のくすんだ色味で構成されるトーナル配色にも使いやすいと言えますね。先ほどの文字色と背景色を比較したサンプルで、テキストの色味をセパレートカラーに変えてみて改めて確認してみます。するとこのように配色バランスを保ちながらも、しっかりとメリハリが生まれ視認性も向上したことがわかります。   トーナル配色ではセパレートカラーを効果的に用いることで配色の世界観を変えずに、コントラスト上げてメリハリをつけたり、視認性をコントロールすることができるようになります。  

トーナル配色だけの場合には色相やトーンコントロールでメリハリを

もしセパレートカラーが使えず、トーナル配色だけで構成する場合にはどのようにすればいいでしょうか。ポイントとしてはセパレートカラーやアクセントカラーのように色としての差を生むことが重要になってきます。そのためには、「明度差」でコントラストをつける方法と「色相差」でコントラストをつける方法が考えられます。後者の場合にはアクセントカラー同様に補色や対照色といった、できるだけ違いがわかる色味を組み合わせることでメリハリが生まれます。だた、色同士の相性によっては配色の世界観がバラバラになってしまうため、限定的であると言えます。   そのためには、前者の方の明度差でコントロールする方法が簡単ではないでしょうか。つまりできるだけたくさんのトーンや差が大きいトーンの組み合わせで配色を行なっていきます。この場合には色味に差をつける必要がないため、配色イメージを変えずにコントラストだけ上げられるというメリットもあります。特に全体的に馴染ませたい場合になどには有効ですね。  

---

  今回はトーナル配色とセパレートカラーを使った効果的な配色テクニックについて考え方をまとめてみました。使いこなすのに難易度が高いトーナル配色ですが、うまく使いこなせると格好いい配色を生み出せられるのではないでしょうか。トーナル配色を使ったデザインをするときにはアクセントカラーも忘れずに用意しておくといいかもしれませんね。   （こちらの記事もご参考に） トーンと色味をコントロールして配色を考えてみる＃1（トーンと配色知識） トーンと色味をコントロールして配色を考えてみる＃2（色味の選定） トーンと色味をコントロールして配色を考えてみる＃3（シェードとティント） ナチュラルハーモニー・コンプレックスハーモニー配色を比べてみる 配色をイメージ別のマトリクス上に分類してデザインワークに役立てる