色付け時にはおさえておきたい配色テクニックの基本

色付け時には配色テクニックや色のイメージや印象を覚えておくと配色時に非常に有効的です。

見やすさや見づらさを左右するには配色次第と言っても過言ではありません。今回はそんな色のイメージや配色テクニックについてお話をしてまいります。

 

キーカラーと面積比率を設計しよう

デザインをする際にベースカラー(キーカラー)を決めておくとデザインをしやすくなります。

写真などの画像でも写真が持つキーカラーというものがあります。そのキーカラーをベースに考えてみるとバランスの取れたデザインを作り出すことができます。

 

それでは色の面積比率のご説明をしてまいります。

基本的な面積比率は、

  • ベースカラー70%
  • メインカラー25%
  • アクセントカラー5%

このバランスが美しく見える配色バランスになります。

 

メインカラーを多色にしたい場合は2で割って12.5%などにしてバランスを取るようにしましょう。

 

読みやすい配色を考えよう。

背景と同化した色の文字では可読性は悪いのは分かります。

では逆に読みやすい色は背景に対して色相、明度、彩度のコントラストの差が高いほど見やすくなります。

161111-02

上段・下段の文字色は同じですが、背景色を変えると見え方は大きく変わります。

対比が大きければ大きいほど文字が目立つようになります。

 

ハレーションに気を付けよう。

161111-03

この配色目がちかちかしませんか?これは組み合わせの悪い配色例で、「ハレーション」と言います。疲労感や不快感を感じさせてしまいます。

基本的にはこのハレーションが起こる配色は避けなければなりません。

 

色が持つイメージ

色には様々なイメージや感情を想起させる事ができます。基本的な色のイメージや感情について解説して参ります。

 

 

161111-04

赤と言えばどの様なイメージを持ちますか?情熱や炎など暖色系ならではのイメージがあります。
赤色は気分を高揚させたり、インパクトを持たせたり、目立たせたりする力があります。

 

赤が持つイメージ
情熱、喜び、生命、アクティブ、祝い、怒り、危険、暴力、恐怖、セール、太陽、炎

 

161111-05橙色は赤と黄色の中間色に位置しています。明るめの色合いで同じく暖色系の色合いです。
ビタミンカラーと呼ばれることもあり万人受けしやすい色です。

 

橙が持つイメージ
陽気、元気、明るさ、暖かさ、親しみ、派手、傲慢、わがまま、かぼちゃ、火、紅葉、夕日

 

161111-07

有彩色の中で一番メイドの高い色合いです。赤と同じく注意を促したり、集中力を高めたりする効果もあります。
子供向けのイメージや明るい印象などを持ちやすい色です。

 

黄が持つイメージ
陽気、躍動、明るさ、幸福、楽しさ、幼稚、未熟、雷、バナナ、月、カレー

 

ピンク

161111-06女性的なイメージで、柔らかくて優しい印象があります。
春の印象や愛や恋などの心理描写にも使われます。

 

ピンクが持つイメージ
優しさ、女性的、甘い、恋、愛、いやらしさ、弱い、媚び、桜、桃

 

161111-08どこか神秘的な色合いなイメージを持つ紫は暖色の代表でもある赤と寒色の代表でもある青が混ざった色合いで、
高貴な印象や上品な印象に見られやすい色です。色の明度によっては不健康さや下品さにも見えかねないので使い方は慎重に扱いたい色です。

 

紫が持つイメージ
高貴、高級、優美、美意識、下品、不健康、慢心、嫉妬、悪、ブドウ、茄子、醤油、宝石

 

161111-09寒色である青は冷静さや冷血さなど冷たいイメージや空や海などの自然を連想させる色合いです。
興奮を落ち着かせたり、冷静な印象から赤とは真逆の心理効果も働きます。

 

青が持つイメージ
海、空、夏、信頼、誠実、安心、清潔、潔さ、冷血、切なさ、夜、寂しさ、地球、宇宙、デニム、魚

 

161111-10自然なオーラをまとう緑は木や森などの自然を連想させるには一番と言える色合いです。
緑は自然と同じくリラックス効果や、心を穏やかにさせる効果などもあります。

 

緑が持つイメージ
自然、健康、森、木、安らぎ、平和、若い、田舎、苦さ、公園

 

161111-11こちらも自然に近い色合いを持つイメージの色相です。
ナチュラルなイメージやリラックスなどのイメージを持つので自然系のデザインに最適です。

 

茶が持つイメージ
落着き、ぬくもり、堅実、老い、頑固、木、土、コーヒー、チョコレート

 

161111-12無彩色の黒は引き締まった印象のある色合いです。
高級感を出したり、見方によってはネガティブな印象になる。

 

黒の持つイメージ
高級感、上品、スタイリッシュ、男性的、闇、夜、恐怖、抑圧、カメラ、タイヤ、ピアノ

 

161111-13無彩色の一つである白は黒とは真逆な印象を持たせることができます。季節感でいえば冬、寒色である青などの色を組みわせるとより寒さや冬の漢字を強調することができます。

 

白の持つイメージ
清潔、高級感、純白、純粋、シンプル、理想、信頼、虚無、孤独、冷たさ、雪、雲、砂糖、病院、紙

 

最後に

いかがでしたでしょうか?色には様々な力を秘めています。デザイン上手になるには配色のテクニックと基本をしっかりとおさえてデザインをしていかなければなりません。
是非今回の配色テクニックや、色のイメージを活用していいデザインを制作していきましょう。

関連記事

  1. Facebookページの作り方(2016年版)

  2. デザインとは何だろう?

  3. やっぱり読みやすい!明朝体の基礎 / デザイン基本の「き」

  4. お客様とつながる!集客に適したもう一つのLINE【LINE@】

  5. 宝の持ちぐされにならないホームページ活用方法

  6. 超便利!パソコンがなくてもワードプレスが更新ができる!hpbpadアプ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA