お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

イメージを具体的な配色へ落とし込むためのヒント

どうもこんにちはJBです。
デザインの際に、クライアントさんから「なんかキリッとしててクールなんだけでテンション高い感じでお願いします」みたいな言葉でイメージを伝えられることもあるかと思います。今回は、そんな「ふんわりしたイメージ」から配色を作るための予備知識をまとめてみたいと思います。

まずは色の3属性をおさらい

配色を語るために必要不可欠な色の3属性、色相・彩度・明度についてさらりと触れておきましょう!

色相

色相は、色合いの違いを表します。赤や青、緑、黄色、紫…などの違いといえば分かりやすいですね!
赤から黄色にかけての「暖色系」、青っぽい緑から紫っぽい青にかけての「寒色系」、緑系や紫系の中性色系でざっくりと分かれます。
hue

彩度

彩度は読んで字のごとく、色の鮮やかさを表します。
配色の勉強で必ず出てくるこの表。左の方ほどが彩度が低く鈍い色に、右に行くほど彩度が高く鮮やかな色になります!ちなみにブラック〜グレー〜ホワイトは無彩色です。鮮やかさとかがないんでね…。
saturation

明度

先ほどと同じ表ですが、こちらは色の暗い〜明るいを表します(コントラスト)。
今度は縦軸で、下に行くほど明度が低く暗い色に。上に行くほど明度が高く明るい色になります。
brightness

イメージを配色につなげるヒント

さて、何となく色について分かった様な気がしてきたところで「こんなイメージの時はこう!」みたいなものを挙げていきましょう!

興奮⇔鎮静

exciting&calm
  • 興奮感
    テンションがあがる様な配色として効果的なのが、暖色系で彩度が高い組み合わせです。
  • 沈静感
    逆に落ち着いた雰囲気を作りたいなら、寒色系で彩度が中彩度〜低彩度のものが向いています。

やわらか⇔かたい

hard&soft
  • やわらか
    明度が高い色の組み合わせだと、柔らかな印象になります。これはモチーフの組み合わせで、曲線なんかを使うとより一層やわやわします。
  • かたい
    カタい感じにしたいなら、明度の低い色が効果的です。直線的なモチーフを合わせれば、硬さ一直線です。

軽い⇔重い

light&heavy
  • 軽い
    「やわらか」とほぼ同じ。明度が高ければ軽い雰囲気になります。
  • 重い
    「かたい」と同様、低明度にすれば重い感じに。

あたたかい⇔つめたい

worm&cool
  • あたたかい
    何のひねりもなく、暖色系を使えばいいのです。
  • つめたい
    こちらも寒色系を使えば何とかなります。

派手⇔地味

loud&dull
  • 派手
    彩度が高い組み合わせは派手に。色相差が大きいとさらに派手になります!
  • 地味
    彩度が低い組み合わせは、自然と地味ーな感じに。

実践的な組み合わせ

もっと具体的な「イメージ」から配色を考えてみる例をいくつか挙げてみます。

ダイナミック

ダイナミックは派手&興奮といった感じ。高彩度の暖色系を基調にして、色相差を大きくとるとダイナミックな感じになります。黒を入れて誘目性が高い配色にするのも効果的だそうです。
dynamic_1

ポップ

軽くて派手な感じ…ということで、高彩度&高明度の多色配色がおすすめです。
pop_1

ガーリー

軽い・柔らかい感じを意識して明るめの色に。さらに明度差(コントラスト)を少なくします。ピンクなどの暖色系を基調にするととってもガーリーです。
girly
「水色がいいですー」とかいわれたら、強すぎないペールトーン(低彩度&高明度)で、少し暖かみがある色にすると良いかと思います。

エレガント

ガーリーと似ていますが、中明度から高明度で、コントラストを小さくします。ここからがガーリーと違うところ。基調の色を紫にして、少しグレー気味の配色をすると一気にエレガントに!
elegant_1

モダン

無彩色を基調にして、コントラストをガッツリつけるとモダンな印象になります。さし色に暗めの寒色系が使われることも多いです。
modern_1

ナチュラル

地味で柔らかみのある感じですね!カーキやベージュなど、いわゆる「アースカラー」の組み合わせが効果的です。彩度は中くらい、いかにも自然界にありそうな色を合わせます。
natural

他にもたくさんありますが、何となーくイメージに合った配色が作れそうな気がしてきますね!

ふんわりイメージにうまく落とし込んでみよう

さて、実際のところは「そんなよくあるセオリー通りに簡単に配色できる訳じゃないんだぜ」ということが多々あります。
そこでおすすめなのが、連想してイメージを分解することです。
「夏っぽくさわやかに、テンション高めでお願いします!」と言われたら、「夏→暑い・納涼・青い空・太陽…、さわやか→白ベース×寒色系…、テンション高め→派手に」のようにイメージを分解して、それぞれ取捨選択して組み合わせていきます。
mix
こうすれば実際のプレゼン時に、配色の説明がつきやすくなりますよ!
「真夏の青空をイメージしてさわやかな水色と白を基調にしました。テンション高めということで彩度は高くあざやかに、さし色に太陽を連想させるオレンジを加えて、にぎやかな雰囲気にしてあります。」みたいなことが言いやすくなるワケですね!

「エレガントモダン」と言われたらハイコントラストの無彩色ベースに紫系のさし色、「ガーリーポップ」ならパステルカラーの多色配色にしてみる…など、適度に分解して組み合わせてみてください!

まとめ

いかがだったでしょうか?

お客様の頭の中の抽象的なイメージを形にするのは難しいですよね…。
でも、口にしている本人も「よく分からないけど何となく」の場合が多いです。こちらからいい感じで例を提示できて、さらに説得できる文言が添えてあれば、相手にも納得して頂く確率が高くなると思います!
配色はイメージづくりの大きな要素の一つなので、ぜひとも理解を深めて「いい感じの例」が出せる様に努力したいところです!

それではー!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00