前回、前々回と色味とトーンを調整した配色選定方法についてまとめてきましたが、第3回目となる今回は、オリジナルの配色を作成するときに役立つ具体的なテクニックについて紹介していきたいと思います。配色において色の決め方は様々な方法があるかと思いますが、より早くロジカルに作成するためには参考になるかと思いますので、ぜひ試してみてください。 （参考記事） 「トーンと色味をコントロールして配色を考えてみる（トーンと配色知識）」 「トーンと色味をコントロールして配色を考えてみる（色味の選定）」  

トーンにおける高明度と低明度グループの「シェード」と「ティント」

トーンについては過去記事「トーンと色味をコントロールして配色を考えてみる（トーンと配色知識）」で詳しく紹介しましたが、1つの色味でも明度と彩度の違いでいろんな色が存在します。その中でも、配色を決める上で注目したいトーンがあります。それは「シェード」と「ティント」と呼ばれる、高明度帯と低明度帯のトーンです。   具体的なトーン名でいうと次のように、「ペールトーン」「ライトトーン」「ブライトトーン」「ダークグレイッシュトーン」「ダークトーン」「ディープトーン」の6つのトーンが該当します。   その中でも明るい部類に入るトーンを「ティント」と呼び、逆に暗い部類に入るトーンを「シェード」と呼びます。自分で配色を決める際にはこれらのトーンをそれぞれ用意することでバランスの良い使いやすい配色を作成することができます。  

シェードとティントを使って配色パレットを作成する

では具体的にシェードとティントを使った配色の決め方についてまとめていきます。まずは過去記事「トーンと色味をコントロールして配色を考えてみる（色味の選定）」にて紹介している、基本配色とグレースケールの色味を用意し、グレースケールに合わせて下記のイメージのように基本配色を並べます。この時に重要なのが、色味によって明度が異なるという点に注目することです。色味が持つ明度をグレースケールの明度に合わせて配置し、明度による色味ごとの位置関係を定義しておきます。   次に、配置した基本配色を中心に、それぞれグレースケールの明度に合うよう、ティントのトーンとシェードのトーンを用意していきます。こうすることで、基本配色の全ての色味がグレースケールに合わせた明度ごとのトーンで埋まるようになります。これで、基本配色からトーンコントロールすることにより生まれた色で、バランスよく配色パレットを作ることができました。  

トーンコントロールにより配色が増えることで得られるメリット

適当や感覚的に選んだ色とは異なり、基本配色からトーンコントロールで色を増やすことにより、必然的に調和のとれた配色となります。統一感を保ちながら、色数を増やすことができるので、まず失敗しない配色になっているのではないでしょうか。   また、ウェブデザインにおいては、情報の性質やUIパーツの特性や状態を表すために、様々な色の使い分けが必要になるケースもあります。そんな場合に、この方法で作成した配色はとても使いやすく、法則性に合わせた迷いのない色の決め方をすることができます。   デザイン制作のスピードアップにつながるだけでなく、ロジックの伴った根拠ができるので、クライアントさんに提案するときなどにも役に立ちますね。もちろんデザインの品質としても担保されるようになります。  

---

  今回はトーンと色味をコントロールした配色選定について、全3回に渡る記事でまとめてきました。配色はデザインする上でとても重要な要素ですが、感覚的になりやすいという傾向も感じられます。そんな時にこのようなルールや指針があれば、作業の効率化だけでなく、クオリティアップも期待できるので、是非参考にしていただければと思います。 （参考記事） 「トーンと色味をコントロールして配色を考えてみる（トーンと配色知識）」 「トーンと色味をコントロールして配色を考えてみる（色味の選定）」