デザイン・イラストの配色の基本

books 1825557  34 - デザイン・イラストの配色の基本

こんにちは、美大卒・元アパレル店員の
ゆっきー(@elcielo_design)です。

今回は デザイン・イラストで大切な
「配色」についてお話しようと思います。

スポンサーリンク

配色の役割

デザイン・イラストの配色の役割は
その対象の特徴・印象を表す役割です。

デザインする・イラストを描くときに
テーマとなる色を決めて、

ルールに従って配色をしていくと
より良いデザインやイラストなどを
生むことが可能になってきます。

今、デザインやイラストを学んでいる人
または、配色を学びたい人などは
特に知っておいた方が良い

「配色の考え方」「色の印象」
ついて紹介していこうかなと思います。

スポンサーリンク

配色の考え方

デザインする際やイラストを描く際
色を単に沢山使ったり、割合がおかしいと
デザインやイラストの印象やイメージを
崩してしまうことに繋がります、、

特にグラフィック・webデザインでは
ポスター、パッケージやサイト上などに
異なる色を沢山使用することで
まとまりない印象を見る人に与えかねません。

コツは、使う色の数を絞り込み
色の割合をしっかり決めることですね。

配色に慣れていない人は、
使用する色の数は、2,3にすることで
まとまりあるかっこいいデザイン・イラストに
寄せていくことができます。

そして、もう1つ重要なのは配色の割合。

配色の割合に関しては
有名なものがあるので次に紹介しますね。

「70:25:5」の比率

color2 300x119 - デザイン・イラストの配色の基本

有名な配色比率の紹介で、
ベースカラー、メインカラー
アクセントカラーの3色を使ったもの。

この3つの配色1つでデザインやイラストの
人に与えるイメージや印象が全く変わります。

一般的には

  • ベースカラー:70%

  • メインカラー:25%

  • アクセントカラー:5%

の配色の割合がいいとされています。

メインカラーは色彩用語で
アソートカラーやサブカラーとも
呼ばれるので注意が必要。

デザインやイラストの制作の際に
この配色比になるよう調節することで
バランスのとれた・綺麗な配色の
デザインやイラストになります。

次に3つのカラーの役割について
それぞれ詳しく紹介しますね。

ベースカラー

ベースカラーは、配色するときに
一番大きな面積を占めるものになります。

70%の色を占めるため、
全体のイメージや印象の基盤です。

webサイトやポスターなら背景や余白
キャラクターデザインなら身体などに
あたる色になりますね。

デザインにおいてはメインカラー
アクセントカラーを妨げないように
無彩色(白、黒、灰色)の使用が多いです。

なぜなら、文字を読みやすくするため
明度の低い無彩色を使うからです。

ベースカラーはデザインを一番
大きく左右する色なので、
最初にこの色を決めましょう。

メインカラー

メインカラーは、配色のとき
全体の25%を占める色になります。

ベースカラーの次に面積は大きくて
役割としてベースカラーを補う色です。

この色はベースカラーと似ている色なら
デザイン自体にまとまった印象を与え、

逆に、異なる色を使えば
デザインに躍動感などを与えることが可能。

アクセントカラー

アクセントカラーは、配色のとき
残り5%を占める色になります。

その名の通りアクセントになってくる色。

ベースカラーやメインカラーとは
色相・彩度が違う色を使うことが多いです。

また、色合いが強くても
配色の割合が少ないので上手く調和します。

面積は少ないですが一番目に付く色なんで
着目させたいコンテンツなどに使いましょう。

配色選び・色の印象

配色の割合を紹介しましたが、
次はどうやってカラーを決めて
いけばいいか迷いますよね?

その答えは、ベースカラーを
始めに決めると良いです。

今回はベースカラーの選択の際、
役に立ってくる「色の印象」
各色ごと紹介していこうと思います。

「もう色のイメージや印象は分かっている」
っていう人も改めて確認して見てください。

赤色

赤のイメージ(象徴)
暖かい・前向き・情熱的・愛情・恋・生命
衝動的・活動的・地獄・暴力・破壊

  • 燃えるような活発で情熱的なイメージ。

  • 気分を高揚させ元気を与える、恋の色。
  • 暴力や破壊といったイメージから
    見る人の闘争心を出させる。

  • 食欲を増進させたり
    時間の経過を早く感じさせる効果。
  • 目を引き関心を集めれる色のため
    アクセントカラーとしての利用も多い。

橙色(オレンジ色)

橙色のイメージ(象徴)
活発・元気・好奇心・推察力・活動・楽しい
深い知識・家庭的・幸福感・社交的・暖かさ
仕事・自由

  • 赤色と黄色の中間色で
    イキイキと元気を与えるカラー。

  • 幸福感、元気、明るい、親しみなど
    基本的にポジティブな印象を与えれる。
  • 温かみがあり、見る人に開放感を与え
    陽気で楽しい気分(気持ち)にさせる。

  • ビタミン的で温暖な色。
  • 薄い色は人肌、濃い色は夕日を連想。

  • 赤と同じで食欲を促進させるため
    食品パッケージのベースカラーで多い。

黄色

黄色のイメージ(象徴)
光・明るい・希望・好奇心・向上心・楽しい
危険・緊張・軽快・軽率・知識・カジュアル
幸福・活発

  • 陽の光が降り注ぐようなイメージ。

  • 心を弾ませ、楽しい気分にする効果があり
    ハッピーにさせたい時に利用される。

  • 暖色系の中で一番明るい色で
    集中力を高めたり気分を明るくする効果。

  • 活発的で注意を引きつける。
  • 認識しやすい色のため
    「注意や警戒」を連想させたい時に使う。

緑色

緑色のイメージ(象徴)
自然・安らぎ・穏やか・若さ・健康・平和・協調
調和・癒し・新鮮・安全・バランス・リラックス

  • 自然でみずみずしい草木のイメージ。

  • 気持ちを穏やかにさせる。

  • 見る人の興奮を静め、
    目の疲れを癒し、集中力を高める。

  • 生命的でリラックス効果がある色。
  • 健康や教育、エコがテーマのサイトで
    ベースカラーとして使われるのが多い。

青色

青色のイメージ(象徴)
冷たい・冷静・若さ・爽やか・寂しさ・知的
開放感・安心感・安全・理性・誠実・清潔・夏

  • 信頼と忠実さなどを感じさせるイメージ。

  • 冷静でスピード感を与える、知性的な色。
  • 集中力を高める、興奮を抑える効果。

  • 赤とは逆で、時間経過を遅く感じさせる。
  • 空や海といった広大な自然を連想。

  • 航空会社などのイメージカラーとして
    利用されることも多い。

  • 嫌う人が少ない色として好感度は高く、
    デザインするとき好まれる人気の色。

紫色

紫色のイメージ(象徴)
上品・優雅・魅力的・不安・宇宙
霊的・非現実的・高貴・神秘的・ミステリアス

  • 大人っぽく高貴なイメージ。

  • 感性を高めるパワーがありそうに見える。
  • 神秘的で気品ある色。

  • 芸術的要素が強くスピリチュアルな際使用
  • 他の色と比べイメージされるものは少なく
    抽象的なものをデザインに使われやすい。

  • ミステリアスや神秘のイメージがあるので
    占いサイトの色に多い。

灰色(グレー)

灰色のイメージ(象徴)
調和・上品・落ち着き・薄暗い・憂鬱
不安・安定・迷い・過去・思い出

  • 黒と白の中間色で
    多くの色と協調し合う便利な色。

  • ネガティブな暗い印象が多いが
    バランスを取れる色として多用される。

  • 色的に平凡な印象を与えるが、
    サイトの背景などでは重宝される。

黒色(ブラック)

黒のイメージ(象徴)
暗闇・神秘・威厳・高級感・男性的
沈黙・絶望・悪・自信・恐怖・死

  • 灰色と同じ無彩色で格好良さや
    重さを表現したいとき利用される色。

  • 様々な色を吸収して遮断する色と知られ
    他の色を引き締める。

  • Webデザインでは、高級感やクールさ、
    男性的な印象を与えたいときなどに
    ベースカラーとして使用される。

  • 死を表す色でもあるので負のイメージを
    表現しないといけなときに使える。

ベースカラーが決まった後は

デザインやイラストの用途や目的に沿った
ベースカラーが1色を決めた後は、
メインカラー、アクセントカラーを決めます。

この2色も色の印象を考えながら
必要な色を選ぶのですが、

なかなか三色のバランスを何もなしに
考えるのは難しいので
Web配色ツールを使うと便利です。

関連記事

配色をするにあたって

配色の考え方と印象を紹介しましたが
どう感じたでしょうか?

良いデザイン・イラストなのかは
「配色の比率と色の選択」
大切なポイントになってきますね。

何か色を選ぶ際、感覚で色を決めていた人は、
この機会に比率や色の印象を考えて
デザインやイラストを製作してみてください。

関連記事

スポンサーリンク

シェアする