uzumaki blog|アートディレクター/グラフィックデザイナー 宮田圭介の日々を綴っております。

〈教えて!その色、どんな色?〉テーマに合わせた色の選び方

デザイン依頼をした際に提出されたデザイン案を見て、なんとなくイメージしていた色と違うけれどその色との違いがうまく説明できないということはありませんか。また、色選びに自信がなく、よく分からずに色を何となくセレクトしている方もいると思います。
それもそのはず、色を表現するときに使う言葉は、明るく、暗く、濃く、薄く、元気な感じに、落ち着いた雰囲気でなど、抽象的な言葉が多いです。どのくらいの塩梅かは分からないので相手のイメージする色を想像するしかありません。

そこで今回は、色についてお悩みのあるAさんの問題を解決しながら、色の塩梅や配色の考え方について説明していきます。

Aさんのお悩み

ある商店街で行われるイベントで、その商店街のキャラクターである戦隊ヒーローの舞台が行われることになりました。イベントの企画担当者Aさんは舞台のチラシの制作をデザイン会社に依頼しましたが、どうやら困っているようです。

Aさんの依頼は、困っている人を見ると放っておけない心優しいヒーローが、町の人々の困りごとを次々に解決していく軽快なストーリーなので、その印象を与えるチラシにしたいという内容でした。

しかし、あがってきたデザインは
戦隊ヒーローらしい派手な色合いのデザインでした。

1.優しさを表す色選び

優しさという言葉には、明るい、柔らかい、ふんわりというようなイメージがあります。そのイメージを色で表すとどのような色になるのか考えてみましょう。

色は色相・彩度・明度という三要素で成り立っています。それを色の三要素といいます。

まず、色相とは赤・青・黄色・緑などの色の種類のことです。
普段何気なく使っている言葉や温度、感情などからイメージする色があると思います。例えば、カイロのパッケージには赤やオレンジ色が使用されていて、それを見ると暖かそうな印象を受けます。そのように色によって感じる感情やイメージのことを色彩感情と言います。

優しさという言葉から受ける、明るさや柔らかさのイメージに近いのは黄色だと考えました。

では、どんな黄色なのでしょうか?

黄色と言っても、鮮やかなのか淡いのか、明るいのか暗いのかが変わることで、同じ色相でも雰囲気が大きく変わります。その違いは、色の三要素のうち明度と彩度によって変化します。

明度とは色の明るさのことです。絵の具に白を混ぜていくと白っぽくなり、黒を混ぜていくと黒っぽくなっていきます。明度では白に近い色ほど明るく、黒に近いほど暗いと考えます。白い壁の部屋は明るく、黒い壁の部屋は暗く感じるのがその例です。また、明るい色は軽さを感じる色に、暗い色は重さを感じる色になります。

ふんわりという言葉には軽さを感じるので、明るい色をイメージしました。

また、白や黒、その間のグラデーションであるグレーは無彩色と言い、その名の通り彩度の調整は無く、明るさの違いしかありません。

彩度は色の鮮やかさのことです。何も混ぜていない単色の絵の具は色が鮮やかで彩度が高い状態です。そこに他の色を混ぜていくと元の色の特徴が失われて色が濁っていきます。色が濁り、白や黒の無彩色に近い色になった状態を彩度が低いと言います。彩度が高いと元気さや賑やかさ主張の強さを感じ、彩度が低いと落ち着きや静かさを感じます。今回は彩度が中〜低い、つまり色が鮮やかではない方が優しさ・柔らかさのイメージと近いです。

トーンとは

色の話をしているとトーンという言葉を聞くと思います。トーンとは彩度と明度のどちらも影響し合う色調のことをいいます。表はトーンを表したものです。彩度、明度の違う色相環が12個並んでおり、それぞれの色相環がトーンの違いを表します。

図の左右(数学的に言うとグラフのx軸)は彩度をあらわしており、左に行くほど無彩色に近くなり、右に行くほど鮮やかになります。

図の上下(数学的に言うとグラフのy軸)は明度を表しており、上に行く程明るい色に、下に行くほど暗い色になります。

優しさを感じる色は明度が高く、彩度が中〜低い黄色だと分析できたので、この表で言うとペールトーン・ライトトーンの黄色が最適です。

今回のデザイン案に対してAさんが修正依頼をする際、どのように色を伝えると良いのかと言うと、明度が高く彩度は低めの黄色と言えば正確ですが、もう少し簡単に言うなら明るくて淡い黄色や、白に近い黄色と言うこともできるでしょう。

2.雰囲気を統一するための配色

白に近い黄色を使い、統一感を出したデザインにするにはどうすれば良いか説明していきます。今回は優しい雰囲気を前面に出すことも意識していきましょう。

統一感を出すには色数を減らすことが大切になるので、今回は3色を用いた基本的な配色イメージについて解説していきます。

今回、優しさを表現する色として選んだのは黄色でした。この色が基調となっているカジュアルの配色を意識して黄色をメインに色を組み合わせていきます。

3色の割合は、背景などの面積が大きいベースカラーを70%、本文やパーツなどの次に面積が大きいメインカラーを25%、強調したいところなどのアクセントカラーは5%の割合で配色していきます。ベースカラーは明度が高く彩度の低い、主張の少ない色が良く、メインカラーはデザインの主役となる色でブランドやテーマのイメージを伝える役割を担う。アクセントカラーは視線を集め、メリハリをつける役割があります。

この割合を頭に入れ、カジュアルの配色を参考にベースカラーメインカラーを決めていきましょう。

決めたベースカラー、メインカラーの組み合わせは優しさを感じられますが、このままでは目立たないチラシになってしまうのでアクセントカラーには締める色を選んでいきます。

この配色をチラシのデザインにも反映してみます。

背景にベースカラーであるペールトーンの黄色を配置し、全体的に優しい雰囲気になるようにします。タイトルの文字は1番目立つようにアクセントカラーの赤を使用しました。メインカラーのオレンジはタイトルの次に目立つ色なので、重要度の高い情報である特別舞台の背景部分に入れることで、目に入るようにしました。タイトル部分の赤やヒーローのイラスト、かき氷などのイラストは、最初は彩度が高かったですが、優しい雰囲気に合わせて彩度を下げ、明度を上げています。この雰囲気のことをトーン&マナー(トンマナ)といいます。全体的に明るく淡い色合いにすることで優しい雰囲気を出すことができたのではないでしょうか。

色数を増やしても、統一感をキープするには?

ここで、文字色の黒や白、縁日の部分の背景色に対して、色数が増えているのではないかと疑問を持つ方がいるかもしれません。
今回は、特別舞台と縁日部分の内容の重要度に優先順位をつけたかったため項目ごとに色分けをして差を出しました。このように、内容を区別するために色数を増やしたいときは、色相はそのままに彩度・明度の調整をすることで統一感を崩すことを防ぐことができます。

別の色相を加えると色の個性が加わって雰囲気が変わる原因になってしまうので、色相を加えるのではなく、1つの色相を少し濃くしたり薄くしたりすることで違いを出しましょう。そのときに気をつけることは大きく変化させないことです。目安は、トーンの概念図の隣り合う色相環同士の差にとどめましょう。そうすることで、全体の雰囲気を崩さず、違いを出すことができます。

文字に白や黒の無彩色を使ったのは可読性を高めるためです。白と黒の無彩色は、色の個性の主張が少ないので、雰囲気を保ちやすく、特に、強調しない文字部分に使うと強調したい部分との差が出て読みやすくなります。

3.色選びの注意点

アクセントカラーを特に目立たせたいときは明度差を意識する必要があります。明度差が小さいと色相や彩度に差があっても視認性が落ちてしまうので、目立たせたい=赤という認識で鮮やかな赤を使ったとしても、もし地の色がその赤と明度が近い青だったとしたら、明度差がなく赤の視認性がなくなってしまいます。

また、同じトーンでも色相によって明度(明るさ)が違います。特に黄色は明度が高いという特徴があり、白い紙に乗せてみると分かるように、同じビビットトーンの色でも青い文字は見やすいですが黄色い文字は見にくいです。それは他のトーンの色相環と比べたときにも言えます。例えば、ビビットトーンの黄色とブライトトーンの青を比べたとき、色相環自体はブライトトーンの方が明度の高い位置にありますが、ビビットトーンの黄色の方が実際は明度が高くなります。このように色相自体の特徴として白に近い色(明るい)黒に近い色(暗い)があることも頭の片隅に入れておいてください。

まとめ

今回は抽象的な色について説明してきましたがいかかでしたでしょうか。色の仕組みを知ることで自分のイメージする色がどのくらいの塩梅の色なのかが伝えやすくなったのではないかと思います。色は何となく言った言葉からも連想されることが多いですが、今回の記事が何となくから脱却する手助けになれば幸いです。

| design | 2:15 PM | コメント(0) | トラックバック(0)
コメント

コメントする

comments:

name:

email:

url:

トラックバックURL
https://uzumaki.tv/archives/4895/trackback/
トラックバック