デザイン

デザイン

商品の印象は色で決まる!デザインする上で知っておくべき「カラーセオリー」とは

本記事は、Theory of Colours
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

551 views

読了時間 : 約3分27秒

色はインターフェースをデザインする上で大切な役割を果たします。例えば、ある色がある人に響いてあるリアクションを起こしたとします。しかし、その同じ色に対するほかの人のリアクションはその人の文化や経験、趣味などによって異なってきます。実は、意外にも私たちは日常生活で様々な色と触れ合っています。周りにあるものに目を向けてみると、色の種類の多さに驚くかもしれません。

 

デザインをする上で、色を選択するプロセスはとても重要です。色は個人の気分や態度によって様々な効果があります。Color comによる調査によると、ある商品に対して人は約90秒で無意識的に見解をしており、その見解のうち60-90%は色をベースにして判断しているということがわかりました。なぜデザインする上で色が重要視されているのか納得できますね。

 

カラーセオリーは、科学でもあり芸術でもあり、カラーコンサルタントなどカラーセオリー一本で生きている人たちもいます。色が大半の人に与える効果を知っておくことは、クライエントのニーズにより答えられるようになるためデザイナーにとって貴重な専門知識になります。ここでは色を使ったデザインやデザインプロセスの基本的なコンセプトを紹介します。

 

カラータイプ:

 

色にはprimary、secondary、tertiaryカラーの3種類のタイプが存在します。Primary カラーは赤・黄色・青で、secondary カラーは緑・オレンジ・紫、tertiary カラーは黄色-オレンジ・赤-オレンジ・赤-紫・青-紫・青-緑・黄色-緑です。カラーウィールに載っている色はだいたいこの12色です。

 

 

Primary カラー

 

Primaryカラーは基本の色として知られていて、ほかの色を混合させても作ることができない原色のことです。人間は三色視なため、原色である黄色、赤、青は視覚の基本です。Primaryカラーは他の色がのベースになります。

 

Secondaryカラー

 

Secondaryカラーは二つのprimaryカラーが同じ量分混ざったらできる色のことです。例えば、黄色と赤を混ぜるとオレンジ、赤と青を混ぜると紫、青と黄色を混ぜると緑になります。カラーウィールではprimaryカラーの間に位置します。

 

Tertiaryカラー

 

PrimaryカラーとSecondaryカラーを混ぜるとできるのがtertiaryカラーというものです。カラーウィールではprimaryカラーとsecondaryカラーの間にあります。黄色-オレンジ・赤-オレンジ・赤-紫・青-紫・青-緑・黄色-緑が例です。

 

カラーウィール:

 

カラーウィールを色々な場所で見たことがあるかもしれません。カラーウィールとは、それぞれの色がどのように関連していてどのような組み合わせにすれば素敵なカラフルなデザインが出来上がるかを手助けしてくれるものです。カラーウィールはprimaryカラーから成り、primaryカラーのコンビネーションでsecondaryカラーができあがり、secondaryカラーが組み合わさってtertiaryカラーができる一連の流れが表示されています。カラーウィールは1666年にニュートンによって作られました。現代では色の組み合わせを確認するための大切なツールとなっています。

 

カラーハーモニー:

 

カラーハーモニー(調和のとれた色)とは、デザインにおいてユーザーの知覚にとって一番有効的で魅力的な色のアレンジメントのことです。色が整理されていると見ている側に平穏さや満足感を与えることができます。反対に、色が不協和な場合、見ているユーザーは混沌状態に陥り、不快感を覚えます。よって、カラーバランスはユーザーが商品やサービスを購入する決断へ繋げるためにはとても大切なものなのです。

 

・モノクロマティック – 一色で色合い・濃淡・トーンのバリーエションの組み合わせ

 

・アナロガス – カラーウィール上隣同士で、類似した色・色合いの組み合わせ

 

・コンプリメンタリー – カラーウィール上で正反対の色の組み合わせ

 

・トリアディック – 等しい距離にある3色の組み合わせ

 

 

カラー心理学:

 

カラー心理学とは、色が人間の気分や行動に与える影響について研究する学問です。まず人間が目で色を知覚すると、脳にある内分泌系に信号を送ります。内分泌系は気分の変化の原因ともいわれているホルモンの分泌が行われる場所です。カラー心理学は様々な業界でたくさんの人に愛される商品を作る上で必要不可欠な学問になってきています。

 

 

カラーモデル:

 

カラーモデルとは、色を定義する手段の一つです。このモデルを使うことによって、ある色がどのようにデスクトップのスクリーンや紙面で見えるかがわかります。

 

CMYK

 

CMYKモデルは主に印刷物に使われています。シアン、マジェンタ、黄色と黒の割合で色が作られていて、商用のプリンターや事務所や局、また家のプリンターなどでも使われているモデルです。これらの4つの色は雑誌や本、またパンフレットなどの色を忠実に再現するために必要な色です。シアン、マジェンタ、黄色と黒を色々な割合で組み合わせることによって、色がたくさんあるような錯覚が起きます。CMYKはサブトラクティブなカラーモデルです。白は紙の自然な色ですが、黒は全てインクが混ざった結果の色です。

 

 

RGB

 

RGBモデルはスクリーンベースのデザインで主に使われています。0から225の値がそれぞれ赤、緑、青の薄い色に使定されています。もし純青を作りたい場合、赤の値を0、緑の値を0、青の値を225に設定します。黒を作る場合、赤、緑、青の値はそれぞれ0にし、白を作る場合はそれぞれの値を225に設定します。RGBはCMYKとは反対でアディティブなカラーモデルとして知られています。

 

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ