非デザイナーにも役立つ！デザインの配色で活躍するトーンとは

今回は配色をする時に役立つ「トーン」の基本をご説明したいと思います。

本記事では、トーンの基本や使い方をご説明します。駆け出しデザイナーの方はもちろん、デザインのディレクションをする方もトーンを理解しておくと配色がしっくりきやすくなります！

デザインをする時や、ディレクションをする時に役立つデザインの知識は以下の記事にもまとめているので是非参考にしてみてください。

https://www.ol-marketing-school.com/color-scheme/

トーン（色調）とは

トーンとは色を構成する3つの属性、色相、明度、彩度のうち、彩度と明度をあわせたもので、【明度と彩度が似ている色を集めたグループ】のことです。

トーンには、以下のような12種類のグループがあり、以下の図で一覧化されます。この図はPCCS(日本色研配色体系)が定めるもので、色相＝「Hue（ヒュー）」と、明度・彩度＝「Tone（トーン）」を組み合わせているので、「ヒュートーンシステム」と呼ばれます。

参考：日本色研事業株式会社HP

トーンは大きく4つに分類できる

トーンは「純色」「明清色」「暗清色」「中間色」の4つに分けられます。

さらに、トーンは12種類あり、それぞれ「イメージ」が指定されています。それらのイメージを覚えておくと、その時の色の見え方に影響されない論理的なフィードバックができるようになります。

それでは、12種類のトーンを1つずつ紹介していきます。

純色

純色とは彩度が非常に高く鮮やかなトーンです。

ビビッドトーン

彩度が最も高いグループです。鮮やかで活き活きとした印象を与えます。誘目性の高いトーンのため、ロゴなどに使用されることも多いです。多様しすぎると安っぽい印象や子供っぽい印象になってしまうため注意！
トーンのイメージ：冴えた、鮮やかな、派手な、目立つ、活き活きした

例えば、100%フルーツジュースやサマーセールなど元気でイキイキとしたデザインを制作する時などに活用できます。

明清色（めいさいしょく）

純色に白を混ぜてできた色を明清色（ティントカラー）といいます。

ブライトトーン

ビビッドよりも明度が高く、彩度を落としたトーンです。明るく健康的な印象を与えます。カジュアルなイメージやポップなイメージを与えるため、子供向け・女性向けのデザインに使用されることが多いです。
トーンのイメージ：明るい、健康的な、陽気な、華やかな

ライトトーン

ブライトから更に彩度を落とし、明度を上げたトーンです。柔らか、軽い、爽やか、清潔な印象があるため、生活用品や女性向けデザインに多く使用されます。逆に男性向けのデザインに使用されることはあまりありません。
トーンのイメージ：浅い、澄んだ、子供っぽい、さわやかな、楽しい

ペールトーン

白に近い淡いトーンです。透明感、優しい、女性的な印象を与えます。視認性が悪いため、ロゴや文字色に使われることはありません。背景色や装飾などで使用すると良いでしょう。
トーンのイメージ：薄い、軽い、あっさりした、弱い、優しい、淡い、かわいい

 

暗清色（あんせいしょく）

純色に黒を混ぜてできた色を暗清色（シェードカラー）と言います。

ディープトーン

ビビッドよりも彩度と明度をやや落としたトーンです。鮮やかな印象を残しながら、落ち着いた印象も与えることができます。クラシックな印象、上品な印象から、秋冬のファッソンや和風のデザインに用いられることも多いです。
トーンのイメージ：深い、濃い、充実した、伝統的な、和風の

ダークトーン

ビビッドの明度を落としたトーンです。色味を感じさせながらも、大人っぽく重厚な印象を与えます。品格、格式を求められる場で使用されることが多いトーンです。
トーンのイメージ：暗い、大人っぽい、丈夫な　円熟した

ダークグレイッシュトーン

明度も彩度も最大限落としたトーンです。重厚な印象を与えますが、色相の印象はほとんど失っているためどの色を選んでも似たような印象になります。
トーンのイメージ：暗い灰みの、陰気な重い、固い、男性的

中間色

純色に灰色を加えてできる濁った色を中間色と言います。

ストロングトーン

ビビッドよりもやや彩度を落としたトーンです。ビビッドと同じく、派手で力強い印象を与えます。
トーンのイメージ：強い、くどい、動的な、情熱的な

ソフトトーン

ビビッドから彩度のみを落としたトーンです。色味を感じさせつつ落ち着いた印象を与えますが、うまく使わないと、濁った印象を与えてしまうトーンでもあります。
トーンのイメージ：柔らかな、穏やかな、ぼんやりした

ダルトーン

ビビッドから彩度と明度を落としたトーンです。大人っぽく落ち着いた印象を与える反面、上手に用いないと暗く濁った印象になってしまいます。
トーンのイメージ：鈍い、くすんだ、中間色的

ライトグレイッシュトーン

ペールをやや濁らせたようなトーンです。明度が抑えられているため、ペールトーンよりも大人っぽい上品な印象を与えます。
トーンのイメージ：明るい灰みの、落ち着いた、渋い、おとなしい

グレイッシュトーン

ライトグレイッシュの明度を落としたトーンです。アースカラーとも呼ばれ、ナチュラルな印象を与えます。
トーンのイメージ：落ち着いた、渋い、おとなしい

トーンの活用の仕方

それぞれのトーンに記載させていただいた「イメージ」を押さえておくと、イメージ通りの配色をしやすくなります。
実際に手を動かさないディレクターやマーケティング担当の方も、デザイナーとの共通言語としてトーンを活用するとスムーズに制作ができるでしょう！

また、駆け出しデザイナーの方でも「何か変だけど何が変かわからない・・・」という時にトーンがおかしくないかな？という観点でデザインを見ると修正すべき点が見えてくるかもしれません。

非デザイナーは細かく指示しすぎる必要はありませんが、きちんとした知識を持ってディレクションができると「再現性の高いデザインスキル」になりますので、是非習得してみてください！

参考文献：色の事典（色彩活用研究所サミュエル／監修）

まとめ

• トーンは明度と彩度が似ている色を集めたグループ。
• それぞれのトーンの「イメージ」を頭に入れておくと配色で役立つ。

ビビット（冴えた）	冴えた、鮮やかな、派手な、目立つ、活き活きした
ブライト（明るい）	明るい、健康的な、陽気な、華やかな
ライト（浅い）	浅い、澄んだ、子供っぽい、さわやかな、楽しい
ペール（薄い）	薄い、軽い、あっさりした、弱い、優しい、淡い、かわいい
ディープ（深い）	深い、濃い、充実した、伝統的な、和風の
ダーク（暗い）	暗い、大人っぽい、丈夫な　円熟した
ダークグレイッシュ（暗い灰みの）	暗い灰みの、陰気な重い、固い、男性的
ストロング（強い）	強い、くどい、動的な、情熱的な
ソフト（柔らかい）	柔らかな、穏やかな、ぼんやりした
ダル（鈍い）	鈍い、くすんだ、中間色的
ライトグレイッシュ（明るい灰みの）	明るい灰みの、落ち着いた、渋い、おとなしい
グレイッシュ（灰みの）	落ち着いた、渋い、おとなしい