ブログ

イラレのイラストに自然な陰影を与える配色のコツ

color-12

こんにちは、デザイナーのTantanです。
今回は、Illustratorで作成したイラストを題材に、立体感を演出する配色のコツをお伝えしたいと思います。

素材

ちょっとだいぶ早いですがクリスマスプレゼントのイラストです。
色-07
遠近グリッドを使って書いています。遠近グリッドの使い方はこちらをどうぞ「Illustratorチュートリアル 遠近グリッドの使い方!」 遠近グリッドは簡単に3D風のイラストが描けて便利なのですが、自動でライティングやシェーディングをしてくれる3Dソフトと違って、色は自分で決めなければいけません。そのため、光源の位置・コントラストの強さ・反射光の具合などを意識する必要があります。

失敗例

あまり深く考えず配色すると、「箱は赤でー、紐は緑、リボンはゴールドでー、背景はどの色ともかぶらない紫がいいかなー」という感じで色を決めてしまって、、、
色-10
はい、できあがり!
さすがにちょっと気持ち悪いでしょうか。色彩感覚は人それぞれなので、「これでいいじゃん」という人もいるかもしれませんが、一応ダメな例として説明させていただきます。

色を使いすぎ

赤、緑、黄色、紫と、色相がバラッバラな4つの色を使っていて、それぞれが主張しています。たくさん色を使うのは難易度が高いので、配色が苦手な人は色数を抑えたほうが無難です。

彩度が調和していない

右側面の渋い赤と、鮮やかすぎる緑リボンが目に痛いです。

固有色の明度を変えただけ

赤い箱は、赤にグレーを混ぜただけ、黄色いリボンは黄色にグレーを混ぜただけの色で立体感を表現しているため、単調な印象になり、それぞれのパーツがバラバラに見えます。

修正版

色-02
一応これで、無難な見慣れたクリスマスカラーになりました。

色数を抑えた

基本的に赤と緑のみの配色にしました。

彩度を揃えた

右側面の渋い赤と調和するよう、緑の色も面ごとに彩度を調整しました。

固有色の明度を変えただけ

これについては変えていません。陰影は明度だけで調整しています。このままでも無難にはなっていますが、少しだけ色相も変えて変化をつける方法を次項で紹介します。

陰影と色相

ナチュラル・ハーモニー

色-01
いかがでしょうか。「前のほうが一般的なクリスマスカラーらしくて良い」という意見もあるかもしれませんが、立体の配色としては厚みが増した感じがしないでしょうか。暗いところは青っぽく、明るいところは黄色っぽくしました。基本的に暖色は前に出て見え、寒色は後ろに引いて見える特徴があるので、立体感を強調する意味もあります。さらに、暖色は日光があたって暖かく、寒色は日が当たらない寒い部分、という印象も加わるので人の感覚にも合致します。(実際の日光では明るいところが黄色く見えたりはしませんが、温度の印象です。)これをナチュラル・ハーモニーと言うそうです。
これを逆にするとどうでしょう。

コンプレックス・ハーモニー

色-09
明るいところに青みを足し、暗いところに黄色を足しました。逆にするとちょっと妙な感じになったのがおわかりいただけますか。こちらはコンプレックス・ハーモニーと言うそうです。ナチュラル配色の日光を受けたような輝きとくらべて、コンプレックス配色は不自然な感じがします。見慣れない配色ですが、うまく使えば斬新な印象を与えられる場合もあるようです。奇をてらわず自然な立体感を出したい場合はコンプレックス・ハーモニーは避け、ナチュラル・ハーモニーを意識するといいでしょう。

色は世界観で変わる

先ほどの無難なクリスマスカラーに戻ります。
色-02
これも悪くはないのですが、なんとなく単調な印象があります。絵の具で絵を描く時によく言われる注意点に「チューブの色をそのまま使うな」というのがあります。チューブの色のままでは、12色とか24色だけしか表現できません。ですが、世の中の様々な物はそれだけでは表しきれない多種多様な色彩を持っています。かぼちゃの緑とほうれん草の緑は同じ「緑」と言っても微妙に違うでしょうし、ひとつのかぼちゃでも明るい日差しの中で見たときと暗い室内で見た時の色はちがうでしょう。「赤と緑のプレゼントボックス」と言っても、どんな赤とどんな緑なのかは作品の世界観によって変わるものです。
雰囲気を変えたサンプルを作ってみました。

レトロでマットな雰囲気

色-05
イメージは、昔のディズニー映画のような「ダークトーンでちょっと怖いような雰囲気もありつつ、くすんだ優しい色」です。具体的にイメージするものがあると、配色は決めやすいと思います。ちょっと怖い雰囲気、ということで側面は明度低めにしています。

ポップで軽めの雰囲気

色-08
もうひとつ作ってみました。こちらは「未来的で華やかなかわいい印象」を目指しました。単体で見ると「赤と緑」と言うよりは「ピンクと黄緑」かも知れませんが、世界観によってはこういうカラーリングもありだと思います。側面は青っぽい反射光を受けている感じにしてみました。こういう、色相を変えた色をたくさん足すと、色々な光が影響しあう色彩豊かな世界観が表現できます。逆に色をあまり足さなければ、落ち着いた雰囲気になります。

ナチュラルで優しい雰囲気

色-06
牧歌的な世界観を意識した配色です。彩度を低めにして、茶色っぽくしています。側面はあまり暗くせず、素朴な印象を目指しました。

ハイコントラスト

色-03
側面を大胆に暗くし上面の赤が引き立つようにしてみました。真っ暗なところで一方向から光があたっているようなライティングを意識しました。右側の側面はもはや濃赤ではなく黒です。真夜中の子供部屋にプレゼントが置かれ、両親がそっとドアを締める直前という雰囲気です。光の強さをコントロールすることで、物の置かれている状況をドラマチックに演出することもできます。

まとめ

  • 立体風イラストの配色を無難にまとめるならまず色数を減らし、彩度を揃える
  • 通常はナチュラル・ハーモニーを意識し、明るい部分を暖色寄りに、暗い部分を寒色寄りにする
  • 暖色や寒色をたくさん足すと色彩豊かな印象、控えめにすると落ち着いた印象になる
  • 彩度を高くすると派手で現代的な印象、彩度を低くするとレトロな印象やナチュラルな印象になる
  • コントラストを高くするとドラマチックに、コントラストを低くすると平和で素朴な印象になる

配色が創りだす印象は他にもまだまだあると思います。ぜひ自由に試してみてください。

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. 40f8970f6d4d71678b9f13c00265354d_s Atomで書いたコードに見えないTofu(豆腐)が紛れ込んだ時の…
  2. eyecatch7-1 【カープ】#6 この鈴木誠也が見たかった!!
  3. carp_1-1 【カープ】#2 広島、5月5日以来23日ぶり首位奪回!!
  4. desk 知識や技術と同じくらい大事なのはディスプレイと椅子
  5. news_study 第94回「WEB TOUCH MEETING」に登壇予定です
  6. IMG_0826 濃厚魚介スープが旨い!!永斗麺でサンマラーメンいただきました
  7. blog_twitter 東京と地方はどっちが仕事しやすい?
  8. blog_twitter エム・フィールド広島オフィスのオンオフ

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP