見出し画像

デザイナーが学んだ色についてのまとめ

こんにちは。デザイナーのmiyaです。
突然ですが、みなさんは、デザインでの色の決め方で気をつけていることはありますか?
色についてこれまで自分のやってきた経験での学びをまとめたいと思います。

70:25:5の法則

ご存知の方も多い「70:25:5の法則」です。
これは、ベースカラー70%:メインカラー25%:アクセントカラー5%のことで、色々なデザインを見ていくと、この法則で作られているものがとても多いです。
基本的にこの法則に当てはめられるように、3色までにするとデザインがごちゃごちゃせずに綺麗にまとまります。

ただ、この法則もコンセプトとあわせて考えると良いと思います。
子供向けなデザインなどは、あえて色数を増やして賑やかな雰囲気にしたりします。色が増えすぎるとゴチャゴチャなイメージにもなってしまうのでそこを注意しつつ配色を行う必要があります。


色の持つイメージ

画像10

白 - white -

白色は、昔から神聖な色とされ、白い動物は神様の使いと言われていたり、神職の方の着物などで使われてきました。

純粋、無垢、清潔、未来、善などの抽象的なイメージがあります。

Webサイトなどでは、ベースカラーやボタンのテキストに白色を使用することが多いです。暗めの画像などとも相性が良く、使い勝手も神です!


画像3

はいいろ - gray -

灰色は、白でも黒でもない曖昧なイメージを持つ色です。どちらでもないからこそ、周りの色を引き立てる調和に長けた色とも言われ、とても使い勝手の良い色でもあります。

曖昧、落ち着き、控えめ、上品、調和などの抽象的なイメージがあります。

Webサイトなどでは、どんな色とも調和できるため薄い灰色はベースカラーとして使われることが多いです。


画像2

黒 - black -

黒色は、とても強い色です。
重さや収縮のある色のため、その部分を考慮して使う必要があります。

高級、クール、恐怖、悪、威圧などの抽象的なイメージがあります。

Webサイトなどでは、真っ黒だとコントラストがキツくなるので本文は真っ黒にしていないことが多いです。noteも#222にしているようですね。
LPなどでメッセージを強くしたい時には、あえて真っ黒を使ったりしています。


画像4

あお - blue -

青色は、世界中で愛されてきた色です。
日本でも、浮世絵などで古くから愛されている色でもあります。

冷たい、冷静、信頼、知性、誠実などの抽象的なイメージがあります。

Webサイトなどでは、理性や信頼のイメージも持っているので、IT系の会社でよく使われています。
販売を行うLPには、色の持つ感情の昂りを抑え平常心にさせる効果があるため、CTAなどでの使用はあまりしない方が良いかもしれません。


画像5

むらさき - purple -

むらさき色は、青と赤の中間色で、神秘的な色です。

高級、大人、神秘的、悪魔、二面性、ムードなどの抽象的なイメージがあります。

Webサイトなどでは、美容系のサイトや和風なサイトで使用することが多いです。二面性がある色なので、使い方が難しい色でもあります。


画像6

ももいろ - pink -

もも色は、健康や可愛らしさ、幸福を感じさせる色です。
日本では、桜のイメージもあり、昔からみんなに愛されてきた色でもあります。

優しい、幸福、可愛い、弱い、柔らかいなどの抽象的なイメージがあります。

Webサイトなどでは、女性的なイメージのある色なので、特に美容系のサイトで使用されることが多いです。


画像7

あか - red-

赤色は、昔からパワーや生命力を表す、白と黒に並ぶ強い色です。
血の色でもあるため、動物的に危険な色としてとても注意をひく色です。

愛、情熱、派手、危険、怒り、強いなどの抽象的なイメージがあります。

Webサイトなどでは、目を引くというポイントからエラー系で使用されたり、通知のバッジなどにも使われています。興奮色のため、LPで使用されていることが多いです。


画像8

おれんじ -  orange -

おれんじ色は、赤と黄色の混色で果物にも多いビタミンカラーです。
親しみやすいイメージのため、人気の高い色でもあります。

温かい、健康、安い、親しみ、明るい、楽しいなどの抽象的なイメージがあります。

Webサイトなどでは、強くなりすぎず、親しみあるカラーのため様々なサイトでよく使われています。LPのCTAなどでもよく使われています。


画像9

きいろ -  yellow -

黄色は、白に続くもっとも明るい色です。
穀物の色のイメージから豊穣を象徴する色でもあります。

希望、喜び、賑わい、注意、注意、警告などの抽象的なイメージがあります。

Webサイトなどでは、文字要素として使うことは可読性の低さからあまり無く、ベースの色などで使用されていることが多い色だと思います。重くないのでベタ塗りでも使用しやすく、ポップな印象を与えることができます。


画像10

みどり - green -

みどり色は、自然を感じさせる癒しの色です。
環境保護などの姿勢を表すシンボルカラーとなっています。

安全、生命、新鮮、若い、癒し、公平、再生などの抽象的なイメージがあります。

Webサイトなどでは、安らぎ、健康、自然、安心などのコンセプトもので良く使われているイメージです。安心感からCTAでも使用することもできますが、鎮静の作用もあるため、どういったアクションを促したいかで検討することが良さそうです。


いかがでしたでしょうか?
書いていたら少し長くなってしまったので、今回は色の基本のみにしました。基本の内容なので、少し物足りない方もいらっしゃったかもしれませんね。

色にも、様々なイメージがあるため、そこもデザインに落とし込んであげると配色で迷うことが少なくなります。

色にこだわったサイトやLP作成に、ご興味ある方はこちらからご連絡ください。