前回では統一感のある色の選び方の一つとして「トーンを合わせていく」という方法についてお話ししました。(前回のデザイン講座はこちらから)今回はトーンの持つイメージの紹介と、配色の手順を簡単に説明していきます。

トーンの持つイメージ

トリガー

各トーンには関連づけられたイメージがあります。種類が多いのですべて覚える必要はありませんが、配色で迷っときは参考にしてみてください。

職員Aさん

各トーンごとにイメージが付いていると、デザインの目的によって当て嵌めやすいね。

ビビットトーン

色調:純色(各色相において、最も彩度が高い色)
イメージ:冴えた、鮮やかな、派手な、いきいきした

ブライトトーン

色調:純色に白を混ぜて出来る澄んだ調子の明るい色調

イメージ:健康的な、陽気な、明るい、華やかな、ポジティブな

ストロングトーン

色調:純色に白と黒を混ぜて出来る彩度の下がった濁った調子の色調

イメージ:情熱的な、力強い、アクティブな

ディープトーン

色調:純色に黒を混ぜてできる澄んだ調子の暗い色調

イメージ:伝統的な、深みのある、和風な、充実した

ライトトーン

色調:純色に白を混ぜて出来る澄んだ調子の明るい色調

イメージ:爽やかな、澄んだ、幼い、楽しい、浅い

ソフトトーン

色調:純色に白と黒を混ぜて出来る彩度の下がった濁った調子の色調

イメージ:柔らかな、穏やかな、ぼんやりした

ダルトーン

色調:純色に白と黒を混ぜて出来る彩度の下がった濁った調子の色調

イメージ:鈍い、くすんだ、気だるい、湿っぽい、中間的な

ダークトーン

色調:純色に黒を混ぜてできる澄んだ調子の暗い色調

イメージ:大人っぽい、円熟した、丈夫な、暗い

ペールトーン

色調:純色に白を混ぜて出来る澄んだ調子の明るい色調

イメージ:薄い、軽い、弱い、若々しい、優しい、淡い、かわいい

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

色調:純色に白と黒を混ぜて出来る彩度の下がった濁った調子の色調

イメージ:落ち着いた、シックな、静かな、渋い、おとなしい

グレイッシュトーン

色調:純色に白と黒を混ぜて出来る彩度の下がった濁った調子の色調

イメージ:濁った、地味な、ネガティブな、地味な、悲しい、懐古的な

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

色調:純色に黒を混ぜてできる澄んだ調子の暗い色調

イメージ:陰気な、重い、固い、怖い

参考ブログ「web creators manual」http://creators-manual.com/tone/

トリガー

デザインだけではなく、インテリアやファッションなど普段の暮らしでも取り入れることができるので、知っておくと役立つことも多そうですね。

配色の手順

トーンにイメージがあるように、色自体にもイメージがあることは以前色による印象でお伝えしました。デザインが決まったら、以下のような順番で配色を考えていくとスムーズかと思います。

1.デザインのテーマに沿って、基本となる色を決める(3色〜4色程度)

2.選んだ色のトーンを合わせる

3.色の使用面積(ベースカラー・メインカラー・サブカラー・アクセントカラー)を決める

4.文字等は読みやすいよう、背景色とコントラストをつけながら全体のバランスを見る

トリガー

使用したい色が決まったら、このようなカラーパレット(使用する色の一覧表)を事前に作成しておくと便利ですよ。

基本となる4色を使用し、トーンを揃えた配色を作成
カラーパレット(使用する色の一覧表)

職員Aさん

なるほど。でも自分で色の組み合わせを作るのって難しそうだな……。

トリガー

そんな時はこちらのサイトが役立ちます!どちらも無料で操作も簡単なのでおすすめです。

配色に役立つ無料参考サイト

coolors

おしゃれな配色パターンがたくさん。使用方法も簡単で、スペースキーを押すたびにランダムな色の組み合わせを作成してくれます。ユーザーが作成済みの配色パターンも検索できるので、自分では思い付かないような素敵な組み合わせに出会えることも。

Color Hunt

配置されている色の大きさにより、メインカラー・サブカラー・アクセントカラーが一眼でわかるようになっている便利なサイト。
いいねを押すことで、自分が気に入った配色が左上にストックされていきます。気に入ったパレットを一覧して探すことができます。

トリガー

配色は難しい作業ですが、基本的なポイントを抑えながら練習していくとコツがわかってきます。ぜひ楽しみながら、素敵なデザインを作成してください。