▶︎イラスト ▶︎デザイン

デザインとイラスト制作で役立つカラーの配色方法まとめ【色の勉強】

2020年5月3日

デザインとイラスト制作で役立つカラーの配色方法まとめ

デザインって苦手でいまいちカッコよく・かわいくならない…。フォントや背景の色って何をえらべば良いか悩む。色を組み合わせる時の相性がわからない

 といった経験はデザインやイラストを制作する中でありますよね?

 

そこで今回の記事でご紹介するのは、

「色の3属性、進出色・後退色、コントラスト・アクセント」です。

デザイン・イラスト・ブログなどWEB制作に役立つ重要な内容です。

 

色の知識や相手に与える心理的な効果を勉強するのとしないでは、普段のファッションやデザイン、会社での資料作りに大きく影響が出ます。

 

紹介する内容、色を学習していくと「センスが無い」状態から卒業できるようになりますよ!

こんにちは!マサカ(@masaka_blog)です。

僕はデザインとカラーを勉強したく色彩検定の資格を取りました。 現在、マサカは色彩検定2級を取得しています。学生時代は「自分には配色のセンスない…」と諦めて、気づけば社会人になりました。色彩検定の資格を取ってからは、色の理論や知識が入ったことで色への苦手意識はなくなりました。

 

仕事でもイメージしたい色をえらべるようになりました。

勉強した結果、描く速度やデザイン・広告全体のクオリティを上げられました。

 

学校の授業や趣味でデザインを勉強している方、デザインに関連したお仕事をしている方の手助けになれれば嬉しいです!

 

1. 覚えておきたいカラーの基本「色の3属性」

色えらびに大切な要素で「色の3属性」というものがあります。

 

 画像編集ソフトを操作する上でよく使用する言葉(機能)です。
覚えると役立つ機会が多くてとっても便利な内容ですので、1つずつ覚えていきましょう。

 

色の3属性

◎色相…色味をあらわす

◎明度…色の明るさをあらわず

◎彩度…色の鮮やかさをあらわす

 

3つです。

 

色相・明度・彩度の3つの数字の大きさで色味をあらわします。

 

色相・明度・彩度の「色の3属性」は

デジタルイラスト制作ソフトのCLIP STUDIO PAINT(クリップスタジオペイント)や画像編集ソフトPhotoshop(フォトショップ)のメニューの色調補正でもお馴染みの項目です。

 

まずは3属性の色相からご紹介します。 

色の3属性「色相」:色味をあらわす

「色相」は赤っぽい、青っぽいなどの色味そのものをあらわします。

 

◎虹色で表す「色相環」とは色相をリング状に虹色の7色

 

紫に、赤紫を足して並べたものを「色相環」と呼びます。

色相環チャート画像 

◎補色の関係性

色相環の輪で向かい合う色のことを「補色」と呼びます。この補色の関係性を使い、色を配置すると画面にメリハリが出ます。

 

黄色を中心に考えた場合に「黄色」と向かい合っていて、もっとも離れている色相の「青紫」が補色です。

補色解説画像

補色の色の組み合わせを使うと、色の対比になるので画面にメリハリが出せます!

 

色の3属性「明度」:色の明るさをあらわす

「明度」は色の明るさをあらわします。 

明度の高いものは明るく、低いものは暗い色に見えます。

 

同じ色相でも明度を変えることで与えるイメージが変わります。
どんな絵にするのか目的に合わせて色をえらびましょう。

 

イラスト・デザインに軽さや明るさを出したい場合には明度の高い色をえらびます。
反対に重厚感や落ち着きを出したい場合は明度の低い色をえらぶと良いです!

 

【色のイメージ】

白(ホワイト)………上品さ、穏やかさ

黒(ブラック)………重厚感、高級感

明度解説画像

 

色の3属性「彩度」:色の鮮やかさをあらわす

「彩度」は色の鮮やかさをあらわします。

彩度が一番高い色は、他の色の混ざりがない状態です。
彩度が高いと鮮やかに、彩度が低いとおちついた渋いくすんだ色に見えます。

 

彩度の高い色は、小さな面積でも人の目を惹く色になります。絵にアクセントを付けたい時や、目立たせたいところに高い彩度の色を使っていきましょう!

彩度解説画像

 

色の明るさをあらわす明度と、色の鮮やかさを表す彩度のバランスのことを「トーン」と呼びます。

※この場合のトーンは、マンガなどで使われる言葉とは意味が異なります。

 

使う色全体を同じトーンにまとめると、デザインは統一感のある配色に変わります。

 

逆に差し色に色の差が大きいトーンを合わせると、お互いのカラーを引き立たせることができます。

「決まったイメージにまとめたいな」という時は、色のトーンをまとめていきましょう!

 

まとめ

◎色相環で向かい合う補色を使うとメリハリが出る。

◎明度が高いものはあかるく、低いものは暗く見える。

◎彩度が高い色は鮮やかに、低いものは落ち着いて見える。

◎色のトーンを揃えると、デザイン全体の統一感が出せる。

 

2. 色の与えるイメージ・感情を比較:暖色と寒色

色の与える効果で身近な例で、どんなものが思い浮かぶでしょうか?

 

たとえば一般道路や高速道路などの道路標識がよい例です。
道路の情報を正しく運転手に伝えるために、道路標識には色の効果・コントラストの差が大きい配色が使われています。

 

道路情報の案内の背景は、安心感や落ち着きを与えるイメージの青や緑です。

反対に、注意喚起や禁止を示す標識はよく目立ち、緊張感を与える赤や黄色が使われています。

 

では大きく2つの色の系統を比較してみましょう。

暖色と寒色(進出色と後退色)

◎赤・橙・黄色系統は「暖色」と呼びます。

 

暖かみや興奮をイメージさせて、同じ大きさにした違う色を並べた時に
「暖色」は手前にあるように大きく感じます。(進出色)

 

◎反対に青・緑系統は「寒色」と呼びます。

 

寒さ・冷たさや心を落ち着かせるイメージの色で、
寒色は
他の色よりも後ろにあるように小さく感じます。(後退色)

 

同じ大きさでも手前に大きく感じる色のことを進出色、反対に後退して小さく感じる色のことを後退色と呼びます。

暖色寒色画像
 

たとえばフルカラーのイラストで、キャラクター・人物の背景に
「暖色」を使うことで
絵の全体が明るく目立つ印象になります。

 

反対に背景に「寒色」を使うと、落ち着いたイメージに変わりますね。

 

キャラ・人物は「暖色」を多めに使用していて、背景部分は「寒色」という
組み合わせだと
色の差が生まれてキャラの部分を目立たせます。

 

伝えたいイメージに合わせた色を選びましょう!

 

色の心理的効果については別記事にて詳しく紹介しています。

 

3. 人を惹きつける配色の方法とは?コントラストとアクセント

色の差を大きくすることで、文字の可読性やマークの視認性は変わります。

 

たとえば文字と背景の色の差が少なければ、どうなるかというとその文字・文章は読みにくくなってしまいます。 

白い紙や背景に薄いイエローの文字やマークを入れると、色の差が少なく非常に読みにくいです。

 

広告・制作物で見る人に読みやすい、伝えやすいものを作るにはどうするか?

を考えた時に重要な要素「コントラスト」と「アクセント」をご紹介します。

 

惹きつける配色方法:コントラストとアクセント

◎コントラスト

いくつかの色の組み合わせでできる色の差のことを呼びます。

 

2つの色を並べた時に色相・明度・彩度のコントラストが大きいと、色同士が引き立て合います。
前の項目で解説しました「補色」の色の組み合わせは非常に目立ちます!

 

コントラストの例:黒と黄色、白に赤などの組み合わせ。

◎アクセント

画面の一部に全体の色と比べ、違いの大きい色や文字を置くことを呼びます。

 

コントラストの差が大きい色を線やアイコン、タイトルの文字などに使うと、 その色に視線が自然に集められてデザイン性が上がります!
広告・デザインの意図やターゲットを考えてカラーのバランス、配色を決めていきましょう。

 

記事のまとめ

今回のまとめを3つ復習です。

1.色をあらわす色相・明度・彩度の3属性

2.暖色と寒色などの色が与えるイメージ

3.視認性を上げるコントラストとアクセント

 

色はどの数字の大小で表されるのか、色によってどのようなイメージを持たせるのか、見やすくするにはどうするかを知った上でのデザインのレイアウトは今までとは違うものになります。

 

ご紹介しました「色の3属性」「色のイメージ」「コントラスト」の考え方は

◎イラストや漫画を描く時

◎印刷物、WEBページの広告レイアウトを考える時

また日常の洋服えらびやお部屋のインテリアデザインにも知識は活用できますね!

 

色について深く勉強していきたいと思った方は、色彩検定という色の専門知識を習得できる資格があります。

▶︎色彩検定の公式ページへのリンク

【実体験あり】デザインのための色彩検定合格のメリット・デメリット
【色彩の教科書】取っておくと便利?色彩検定合格のメリット・デメリット

続きを見る

デザイン全般とファッションやインテリアなど多岐に渡って勉強できます。

 

WEB・デザイン・ファッション系に就職・転職を目指したい方は、資格を取らないまでも関連の書籍を読んでおくだけでも損はないです。

 

カラーの配色方法の記事が、今後の制作活動の手助けになれば幸いです。

パルミーリンク

-▶︎イラスト, ▶︎デザイン

Copyright © マサカブログ , All Rights Reserved.