【デザインに役立つ】カラートーンの種類と特徴【色調基準の配色】

【デザインに役立つ】カラートーンの種類と特徴【色調基準の配色】

色の「トーン」ってよく聞くけど、トーンってなに?

トーンは明度彩度を組み合わせた色調のことです

トーンは色の三属性である「色相」「明度」「彩度」の色相以外を組み合わせたものです。

明度と彩度による色の変化を視覚化したものが下図です。

カラートーン図 PCCS (Practical Color Co ordinate System)
PCCS (Practical Color Co-ordinate System)

例えば明度と彩度の両方を高くした「ブライトトーン」や「ビビッドトーン」は明るくポップな印象で、子供向けのデザインなどに最適。

彩度だけを下げた「ベリーペールトーン」や「ペールトーン」などは淡い色で柔らかい印象を与えるのでナチュラルデザインなどにマッチします。

重厚感やシックな雰囲気を出したい場合は「ダークトーン」を利用する…といった具合に与えたい印象によってトーンを使い分けることができます。

  • トーンの与える印象
  • トーンの効果的な使い方
  • トーングループを使った配色方法

本記事では上記の内容について図付きでわかりやすく解説します。

目次

ビビッドトーン Vivid Tone

ビビッドトーン Vivid Tone

ビビッドトーンは彩度と明度が最大になるトーンです。

白と黒が混ざることのない純色になっており、色に濁りがないのも特徴。

ビビッドトーンのイメージ

彩度と明度が高いビビッドトーンを使用すると、以下のイメージを与えることができます。

  • 元気
  • 活気
  • 派手
  • ポップ
  • 鮮やか
  • にぎやか

ビビッドトーンは白や黒を混ぜない純色になるので色味がハッキリとしているのが特徴。

RGBで彩度と明度を最大にした純色を使うと色が主張しすぎて浮きがちなので使用には注意が必要。

ビビッドトーンの使い方

ビビッドトーンの使用例

ビビッドトーンは色味がはっきりしており、目を引くので視線をひきつけたい場合にも有効。

色に深みがなく安っぽい印象にもなりやすいので注意は必要ですが、「元気」「活気」といったにぎやかな印象を出したいときや、派手さを強調したいときにはビビッドトーンを使用してみてください。

Webデザインなど液晶表示するものに利用すると目に負担がかかるので以下の近接トーンを使うのがおすすめです。

ビビッドトーンの代わりに使用するトーン
  • ブライトトーン
  • ストロングトーン
  • ダークトーン

ブライトトーン Bright Tone

ブライトトーン

ブライトトーンは明度の高さが際立ち「明るい」印象を与えます。

「楽しい」「健康的」「陽気」といった印象も強く、元気な雰囲気を出したいときに採用したいトーングループです。

ブライトトーンのイメージ

ビビットトーンから少し彩度を下げたブライトトーンには以下のイメージがあります。

  • 陽気
  • 活気
  • 健康的
  • 明るい
  • 楽しい

明るくて色味がはっきりしている色が欲しい場合は「ブライトトーン」が選ばれやすいです。

ブライトトーンはポジティブなイメージを与えたいときだけでなく、一部を強調したいときにアクセントカラーとして使うのもおすすめです。

ブライトトーンの使い方

ブライトトーンの利用イメージ(青系)
ブライトトーンの利用イメージ(オレンジ系)

ブライトトーンを配色に利用すると発色の良い色が目立つので色が持つ印象をダイレクトに与えることが可能。

全体に使用してもアクセントカラーとして使っても色の印象が強く出ます。

しかし、色の主張が強めなのでメインコンテンツが目立たなくなってしまわないように注意してください。

ブライトトーン使用イメージ

ストロングトーン Strong Tone

ストロングトーン

発色の良いビビッドトーンの明度と彩度を少し下げて、深みを増したストロングトーンは「強さ」イメージさせる力強い色が特徴。

ストロングトーンのイメージ

ストロングトーンのイメージサンプルカラー

文字通り力強いストロングトーンですが、その他にも「情熱的」「活動的」などのイメージも持っています。

  • 強い
  • 情熱
  • 活動的
  • 豊富な

パワフルな印象を与えたいときに使いたいトーンです。

ストロングトーンの使い方

ストロングトーンのWebデザインイメージ
ストロングトーンのWebデザインイメージ

ストロングトーンは多くのシーンで利用されています。

力強い色なので人の目を引きたいポスター広告バナーデザインなどにも向いています。

ストロングトーンの使い方(利用サンプルバナーイメージ)

また、ストロングトーンはロゴのテーマカラーとして採用されることも多くなっています。

ロゴでの使用例(青イメージ)
ロゴでの使用例

ディープトーン Deep Tone

ディープトーン

色に深みを足したディープトーンは少し落ち着いた印象を与えたい時に最適です。

ディープトーンのイメージ

ディープトーンのイメージサンプルカラー

ディープトーンがもつイメージには以下のようなものがあります。

  • 深い
  • 和風
  • 重厚感

ディープトーンははっきりとした色味を維持しつつ重厚感を出すことができます。

ディープトーンの使い方

ディープトーンを使ったバナーデザイン例
ディープトーンのサイトイメージ(緑系)
ディープトーンを使ったWebデザイン例

ディープトーンは背景色などにがっつり使っても馴染みやすいのでWebデザインで重宝します。

バナーデザインにディープトーンを使用したイメージ
バナーデザインなど

また、ディープトーンは和風の広告などにも向いています。

高級感や和風と言った印象をさらに強化したい場合は後述する「ダークトーン」などのより明度を落としたトーンを利用しますが、明るさを重視したい場合はディープトーンがおすすめ。

ライトトーン Light Tone

ライトトーン

爽やかな色合いが特徴のライトトーンは子供らしさや清潔感を表現するのに向いているトーンです。

ライトトーンのイメージ

ライトトーンのイメージ サンプルカラー

ライトトーンには以下のようなイメージがあります。

  • クリア
  • 清潔感
  • 爽やか
  • ガーリー
  • 子供らしさ

ライトトーンは純色に白色を加えた明清色なので濁りがなく澄んだ印象が強いのが特徴です。

ライトトーンの使い方

ライトトーン使用イメージ1
ライトトーン使用イメージ2

ライトトーンのもつ「清潔感」や「爽やかさ」といったクリアな印象活用して製品イメージを強調したり、明度の高さを利用して背景色として使用するのもおすすめです。

ライトトーンを使ったデザインイメージ

明るいライトトーンは黒とのコントラストが際立つのでタイトルなどの文字が見やすくなるのもメリットです。

明度が最大となる白色を文字として使用しても視認可能なコントラストもあるため他の色と組み合わせしやすいトーンでもあります。

ソフトトーン Soft Tone

ソフトトーン

ソフトトーンは文字通り、やわらかい印象を与えてくれるトーンです。

ソフトトーンのイメージ

ソフトトーンのイメージ サンプルカラー
  • 柔らかい
  • 穏やか
  • 曖昧
  • 優しさ

優しさや穏やかさを強調したいときにはソフトトーンがぴったり。

落ち着きのあるはんなりテイストなどにもソフトトーンが似合います。

ソフトトーンの使い方

ライトトーンとダルトーンの中間に位置するソフトトーンはは「優しい」「穏やか」といった印象が強い色なので「女性向け」や「母親向け」によく利用されています。

ダルトーン Dull Tone

ダルトーン

ダルトーンはくすんだ印象のあるトーンで渋い感じなデザインなどに映える色調になっています。

ダルトーンのイメージ

ダルトーンのイメージカラー
  • 鈍い
  • 渋い
  • 暗い
  • 自然な
  • くすんだ
  • 品が良い

単語的にはあまりポジティブな印象がないかもしれませんが、渋い感じや自然な色味が品の良さを出してくれます。

ダルトーンの使い方

ダルトーンサンプルイメージ

ダルトーンは男性をターゲットとしたデザイン関係に使いやすいトーンになっています。

与える印象を有効活用するために30代〜50代あたりの年齢層に向けて品の良さをアピールするのが良いかもしれません。

白や黒とのコントラストも映えるのでタイトルやロゴなどに使うのも便利です。

ダークトーン Dark Tone

ダークトーン

ダークトーンは文字通り暗い印象のあるトーンです。

単体で見ると使いにくそうなイメージがありますが、使ってみると馴染みやすく、使いやすい色調になっています。

ダークトーンのイメージ

ダークトーンのイメージカラー
  • 暗い
  • 重厚感
  • 高級感
  • クラシック
  • 大人らしさ

ダークトーンは暗さが増して、色に重みがあり「重厚感」「高級感」といった印象を与えることができます。

ダークトーンの使い方

ダークトーンイメージ

高級感や大人らしさを出したい時は彩度と明度を抑えたディープトーンが役立ちます。

ビビッドトーンとディープトーンの違いを比較してみると印象の差は一目瞭然。

ビビッドトーンサンプル
ビビッドトーン
ダークトーンサンプル
ダークトーン

セールなどで安さを強調したい場合は明るい色が効果的ですが、安さではなく高級感を売りにしたい場合はダークトーンを使用すると印象がより強まって効果的です。

ペールトーン Pale Tone

ペールトーンは明度がかなり高く、軽くて色味が澄んでいるのが特徴。

ペールトーンのイメージ

ペール(Pale)の「淡い」という意味通り、淡く澄み切った印象を与えるのでペールトーンを使用すると以下のイメージを与えることができます。

  • 淡い
  • 儚い
  • 透明感
  • 軽やか
  • さわやか

ドリーミーな女性向けのかわいいテイストなどとも相性の良いトーンです。

ペールトーンの使い方

ペールトーンは与える印象の特性から「化粧品」などのデザインに向いています。

ペールトーンの持つ「透明感」は商品紹介やサービスのイメージ向上に役立ちます。

また、トーンの違いによる印象差はイラストにも取り入れることができます。

ブライトトーン

くっきりとしたブライトトーンは「陽気」「活気」があるので青春要素には向いているが、「儚さ」は出しにくい。

ペールトーン

ペールトーンを利用すると「儚さ」や「透明感」「澄み切った感じ」が出やすい。

グレイッシュトーン Grayish Tone

グレイッシュトーン Grayish Tone

グレイッシュトーンは明度と彩度が共に低く、濃いグレーが強い落ち着いた色合いです。

グレイッシュトーンの特徴

グレイッシュトーンのイメージカラー

グレイッシュトーンは濃いグレーが強く、濁りがあり「自然な色味」を感じさせるトーンです。

  • アース
  • ナチュラル
  • おちついた

グレイッシュトーンの使い方

リアルな自然をイメージさせるナチュラル感の強いデザインに向いています。

ナチュラルデザインでは明るめのソフトトーンやペールトーンと合わせた配色もおすすめです。

グレイッシュトーンをメインに配色すると、色の刺激が弱まるので目に優しい配色になります。

ダークグレイッシュトーン Dark Grayish Tone

ダークグレイッシュ(Dark Grayish Tone)

黒を多く含んだダークグレイッシュはダークトーンの要素を強調した色調になっています。

ダークグレイッシュトーンの特徴

黒の濃さが強いダークグレイッシュトーンはダークトーンとも共通する以下のイメージをより強調したものになっています。

  • 堅い
  • 厳か
  • 伝統的
  • 重厚感

ダークグレイッシュトーンは単体では主張が強いものの、他のトーンと組み合わせて使用するとデザインがぐっと引き締まるのでコントラストを高めた配色の際などに重宝する色になっています。

ダークグレイッシュトーンの使い方

ダークグレイッシュトーンには「伝統的」「重厚感」という要素が強いため、和風や歴史感を出したいデザインに向いています。

シックな雰囲気を出しつつも、色がハッキリしているので力強い印象も与えることができます。

清色と濁色を分けた配色

トーンは「清色」と中間色の「濁色」それぞれ別に組み合わせると調和しやすくなります。

清色の組み合わせ

明清色×明清色

明清色×明清色 配色例

純色に白を混ぜた「明清色」同士の配色。

濁りがなく、澄みきった配色になります。

暗清色×暗清色

暗清色×暗清色 配色例

純色に黒を混ぜた「暗清色」同士を組み合わせた配色例です。

コントラストは低めになりますが、調和しやすく落ち着いた色味になります。

明清色×暗清色

明清色×暗清色 配色例

明清色×暗清色の組み合わせは調和を取りつつ、ハッキリとしたコントラストがつくのが特徴。

補色で組み合わせればアクセントカラーとしても映えるので使いやすい組み合わせです。

濁色と濁色の組み合わせ

濁色と濁色の組み合わせ配色例

中間色を組み合わせると程よい感じに馴染みます。

明るいトーンと暗いトーンを混ぜるとコントラストが強く使いやすいですが、濁色同士の組み合わせの場合は近接する類似トーンと組み合わせたほうがより深みが増して良い感じになります。

色の仕組みや配色のコツ

色調ごとの特徴や印象について解説してきましたが、色の選び方は色調だけではありません。

配色の際に気をつけたいポイントや意識しておくと良くなるコツをまとめます。

トーン以外にも気をつけたい配色のコツ

  • 色の選び方
  • 避けた方が良い色
  • 配色バランスのコツ
  • 見やすい配色のコツ
  • ターゲットに合わせた配色

配色の際に考えることは多いので配色のコツについての以下の記事もご覧ください。

色が与える印象と効果

本記事では「明度」と「彩度」による色調について解説しましたが、以下の記事では「色相」を主題とした色が与える印象について色彩心理を含めて解説しています。

デザインにおいて色が持つ力は超重要です。

五感にすら効果を及ぼす色彩心理を有効活用してみてください。

色の基本を理解しておくと配色しやすくなる

色の三属性である「色相」「彩度」「明度」の概要は以下のとおり。

  • 色相:色み
  • 彩度:鮮やかさ
  • 明度:明るさ

3つの数値を変えるだけで、どんな色でも自由に作ることができます。

色の三属性の詳細は以下の記事をご覧ください。

さらに、光の三原色(RGB)や色の三原色(CMYK)の知識もあると色について理解が深まります。

シェアしてくれると嬉しいです

コメント

コメント一覧 (1件)

  • トーンの種類ってたくさんあるんですね!
    こうしてみるとトーンごとにはっきりとした違いがあって面白いですね。
    参考にさせていただきます。

コメントする

目次
閉じる