ブログ
基本配色を学ぶ VOL01「配色の選び方」
初めましてデザイナーのセキです。 勉強会や普段から勉強している内容をこの場を借りて、 一緒に学ばせていただければなと思っております。
カラーの配色はデザイナーにとって欠かせない要素の一つです。 色の配色で悩んだ経験はデザイナーの誰もがあるものだと思います。 今回は、先日デザイナーの勉強会で議題になった基本的な配色の方法をまとめてご紹介させていただきます!
テーマカラーは「3色」が基本
配色決める時は、まずテーマカラーを決めます。 基本的なテーマカラーは「ベースカラー」「メインカラー」 「アクセントカラー」の3色です。 各比率をベースカラー70%、メインカラー25%、アクセントカラー 5%の割合にすると、美しい配色に仕上げられると言われています。
ベースカラー
配色の中で最も大きな面積を占める色でメインとアクセントのカラーを引き立たせる余白や背景などに用いることが多い色です。
メインカラー
デザインをもっとも印象づけさせる主役的なカラーのことです。 「メインカラー」はWEB制作用語で色彩用語では、 サブカラーやアソートカラーと呼ばれています。
アクセントカラー
全体の5%と少ない使用量ですが、最も目立つ色で、 全体を引き締めることができます。 重要な部分やボタンなどに使われることが多いです。
色の意味合いについて
色は感情や結びつきを表現できます。 色の意味は、国や文化よって異なる場合があります。 人の心理にも働きかける効果があると言われ、「カラーセラピー」というものがあるくらい、色は人に及ぼす影響は大きいのです。 ここでは色の意味や心理的なイメージについて軽く触れていきたいと思います。
赤
【連想語】 太陽、炎、血、消防車、ポスト、口紅、トマト、リンゴ、バラ、 情熱、愛情、革命、争い、怒り
【色の効力】 心身に活力と自信を与えエネルギッシュな行動力と積極性を助長します。
黄
【連想語】 レモン、バナナ、ヒマワリ、カナリア、ひよこ、光、卵、児童の 傘、注意、ユーモア、幼さ、希望、明るさ
【色の効力】 自尊心を高め、人とのコミニュケーションや知的好奇心を刺激します。黄色は神経を象徴する色です。
青
【連想語】 空、海、地球、宇宙、制服、ジーンズ、清凉飲料水、理想、信頼、 理性、平和、冷静、憂鬱
【色の効力】 内へとエネルギーを向かわせる色で、精神性と関わりの深い色で す。洞察力や観察力を高め、目に見えないものにも重要な価値が あることに気づかせてくれます。
白
【連想語】 真珠、ウエディングドレス、白鳥、塩、ウサギ、天使、白衣、雲、 紙、雪、無垢、清潔、空虚
【色の効力】 汚れのない白は純粋と尊い神の色です。 成長とアイディアへ導き、自分の人生についてリセットさせる時間とスペースを与えてくれます。
黒
【連想語】 カラス、黒髪、石炭、瞳、ピアノ、タキシード、タイヤ、喪服、 霊柩車、恐怖、不吉、暗闇、死
【色の効力】 守護と厳格を表す闇の色です。あらゆる刺激を敏感に受け止めやすい人や自身のない人を守り落ち着かせます。 使いすぎると、後退とマイナス思考を招くことにつながります。
(色彩センス プロのための実践的色彩ガイド /パイインタ-ナショナル/リアトリス・アイズマンより引用)
制作が捗る便利なカラーツール
様々な配色がある中で、適切な配色をするのはとても難しいです。 私もよく悩みます。 そんな時に覚えておくと便利なカラーツールをいくつか紹介したいと思います。
Adobe COLOR CC
「カラーホイール」では好きな配色を作成することができます。 このツールですごいところは、様々なユーザーが作った配色を 見れるのと、画像をアップロードすることで自動的にバランスよく カラーパレットを作ってくれる優れものなんです! Photo shopやIllustratorとも連携でき、至れり尽くせりなツールです。
Color Supply
補色や類似色、3色配色などデザインに効果的な配色を作成でき、 グラデーションやアイコンなどで色の確認ができるので、制作の 時に役立つカラーツールです。
colormind
こちらは、なんと人工知能がカラーパレットを生成してくれるカラーツールです。ボタンを押すだけで調和の取れた、色をランダムに選んでくれます。アイディアが出ないときにボタンをポチポチしてみると意外な発見があったりするので重宝しています。 こちらのツールも画像アップロードで色検索できます。
最後に。
いかがでしたでしょうか? 今回は基本の一部分について触れてみましたが、 色にはそれぞれ意味合いがあり、国によっても捉え方が違ったりと 実に奥の深い世界ですね… より詳しいカラーの話も後々この場を借りて、一緒に学ばせていただきたいと思ってます!! お付き合いありがとうございました!