大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

色のトーンについて

2021/8/19 デザインMemo
色のトーンについて

ホームページ制作やデザイン制作において、配色に悩む機会は多いでしょう。

  • 「どの色を使えばよいのか分からない」
  • 「色の組み合わせ方が分からない」

このように感じている方もいるのではないでしょうか。

色を表現する際は、「色のトーン」を意識することが重要です。トーンとは、明度と彩度を複合させた概念のことで、色調(色の調子)とも呼ばれます。トーンを手がかりにしながら色を選ぶことで、イメージ通りの配色を実現できるでしょう。

今回は、初心者向けに、色のトーンについて分かりやすく解説していきます。色の表現方法が分からない方や、色の基礎について理解を深めたい方は、ぜひ参考にしてみてください。

トーンとは

まずは、トーンとは何か簡単に解説します。

皆さんは、色の三属性をご存知でしょうか。色の三属性とは、色相・明度・彩度のこと。それぞれ以下のような意味合いを持っています。

  • 色相:色味の違い
  • 明度:色の明るさの度合い
  • 彩度:色の鮮やかさの度合い

色の三属性のうちの「明度」と「彩度」を複合させた概念が、「トーン」です。「同じような明度・彩度を持つ色を集め、グループ化したもの」だと考えてください。日本語では、「色調(色の調子)」と表現されることもあります。

「青色」と一口に言っても、薄いトーンの青色・明るいトーンの青色・強いトーンの青色など、様々な「青色」が存在します。それぞれ違う特徴を持っており、与える印象も大きく異なります。

ホームページ制作やデザイン制作を行う際には、作りたいコンテンツにぴったりなトーンの「青色」を選びましょう。

また、明るいトーンの青色・明るいトーンの黄色・明るいトーンの赤色など、同じトーンの色を組み合わせることで、統一感のある配色が可能になります。

PCCSにおけるトーン

PCCS(Practical Color Co-ordinate System)とは、財団法人日本色彩研究所によって発表されたカラーシステムのこと。効果的な配色や色彩調和を考える際に非常に役立つので、ぜひ覚えておきましょう。

なお、PCCSでは、色の三属性のうちの色相を「ヒュー」、明度と彩度をまとめて「トーン」と呼んでいます。

PCCSのトーン概念図では、明度を縦軸に、彩度を横軸にしながら、全部で12種類のトーンがマッピングされています。

引用元:日本色研事業株式会社

次の章では、それぞれのトーンがどのような印象を与えるのか具体的に解説していくので、ぜひ参考にしてください。

各トーンのイメージ

上述の通り、PCCSにおいて、トーンは12種類に分類されています。具体的には以下の通りです。

  1. ペールトーン
  2. ライトグレイッシュトーン
  3. グレイッシュトーン
  4. ダークグレイッシュトーン
  5. ライトトーン
  6. ソフトトーン
  7. ダルトーン
  8. ダークトーン
  9. ブライトトーン
  10. ストロングトーン
  11. ディープトーン
  12. ビビッドトーン

各トーンの特徴を紹介していくので、比較しながら読み進めてみてください。

1. ペールトーン

ペールトーン

ペールトーンは、低彩度・高明度のトーンで、爽やかで澄んだ印象を与えます。「パステルカラー」と呼ばれることも少なくありません。

ペールトーンのイメージは以下の通りです。

「淡い/優しい/薄い/軽い/かわいい/女性的/若々しい/弱々しい/あっさりしている」

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

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

ライトグレイッシュトーンは、低彩度・明るめのトーンです。ほどよい明るさで、落ち着きを感じさせてくれます。

ライトグレイッシュトーンのイメージは以下の通りです。

「明るい灰みの/落ち着いた/静かな/シックな/おとなしい/年老いた/渋い」

3. グレイッシュトーン

グレイッシュトーン

グレイッシュトーンは、低彩度・暗めのトーンです。一見地味な印象ですが、上品さや大人っぽさも感じられるでしょう。

グレイッシュトーンのイメージは以下の通りです。

「濁った/地味な/灰みの/ネガティブ/悲しさ/懐古的な/上品な/洗練された」

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

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

ダークグレイッシュトーンは、低彩度・低明度のトーンであり、重さや高級感を感じさせます。

ダークグレイッシュトーンのイメージは以下の通りです。

「暗い灰みの/陰気な/重い/硬い/怖い/男性的/クラシカル/高級感」

5. ライトトーン

ライトトーン

ライトトーンは、中彩度・高明度のトーンです。健康的な印象を与えたい時や、明るくてポップな印象を与えたい時には、ライトトーンの色を使用すると良いでしょう。

ライトトーンのイメージは以下の通りです。

「爽やかな/澄んだ/楽しい/子供っぽい/健康的/浅い」

6. ソフトトーン

ソフトトーン

ソフトトーンは、中彩度・明るめのトーンです。穏やかで親しみを感じやすいトーンだと言えるでしょう。

ソフトトーンのイメージは以下の通りです。

「柔らかい/穏やか/ぼんやりしている/優しい/アットホーム」

7. ダルトーン

ダルトーン

ダルトーンは、中彩度・暗めのトーンです。地味な印象も受けますが、味わい深い魅力があります。

ダルトーンのイメージは以下の通りです。

「鈍い/中間色の/くすんでいる/湿っぽい/気だるい」

8. ダークトーン

ダークトーン

ダークトーンは、中彩度・低明度のトーンです。大人っぽくて渋い雰囲気を演出したい場合には、ダークトーンの色が最適でしょう。

ダークトーンのイメージは以下の通りです。

「大人っぽい/暗い/丈夫な/円熟した/渋い」

9. ブライトトーン

ブライトトーン

ブライトトーンは、高彩度・明るめのトーンです。ポジティブで華やかな印象を与えてくれます。

ブライトトーンのイメージは以下の通りです。

「明るい/健康的/華やか/陽気/ポジティブ」

10. ストロングトーン

ストロングトーン

ストロングトーンは、高彩度・中明度のトーンです。力強さを感じさせるので、大きなインパクトを与えたい場合に有効でしょう。

ストロングトーンのイメージは以下の通りです。

「力強い/アクティブ/情熱的/くどい/動的」

11. ディープトーン

ディープトーン

ディープトーンは、高彩度・暗めのトーンです。深みがあり、非常に安定感があります。日本の伝統的なデザインにおいても、ディープトーンが使われることが少なくありません。

ディープトーンのイメージは以下の通りです。

「濃い/深い/伝統的/和風/充実している」

12. ビビッドトーン

ビビッドトーン

ビビッドトーンは、最も彩度が高いトーンです。「純色」とも呼ばれます。アクティブで派手な印象を与えたい場合は、ビビッドトーンの色を使用すると良いでしょう。

ビビッドトーンのイメージは以下の通りです。

「鮮やか/冴えた/派手/目立つ/生き生きした」

まとめ

初心者向けに、色のトーンについて分かりやすく解説しました。ぜひ当記事を参考にしながら、それぞれのトーンの特徴を理解し、上手く使い分けてみてください。

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP