配色は「好きな色」で決めない！

私が競合デザインから配色を分析する方法

はじめに

こんにちは、OHanaです🌼

前回は「参考デザインを分析する方法して、どう自分のデザインに落とし込むか」についてご紹介しました！

今回は、その中でも私が意識している「配色」についてお話しします。

デザインを始めた頃は私も、「なんとなく好きな色、良さそうな色」で配色を決めていました。

ですが、参考デザインを分析するようになってから、業界によって使われる色やトーンには共通点があることに気付きました💡

色には人に与える印象があります

色には「色彩心理」と呼ばれる、人に与える印象があります。

例えば、

• 赤は「情熱」「力強さ」
• 青は「信頼感」「誠実」
• ピンクは「やさしさ」「女性らしさ」
• 緑は「安心」「癒し」

など、色によって受ける印象は大きく変わります。

もちろん、デザインは色だけで決まるものではありませんが、「どんな印象を与えたいか」を考えるうえで、とても参考になります。

💡実際に美容系と転職系を比較してみる

私は配色を決めるとき、まず競合のデザインを5〜10件ほど集めます。

その中で、

• どんな色が多いか
• 彩度・明度はどうか
• 全体の雰囲気

を見ながら共通点を探しています。

例えば、美容系と転職系のデザインの配色ではこんな違いがあります⬇️

美容系

美容系のサイトやバナーでは、ベージュやくすみピンク、アイボリーなど、彩度を抑えた柔らかい色がよく使われています。

また、明度も高めで、全体的にやさしく上品な印象です。

これは、「癒し」「清潔感」「高級感」といったイメージを伝えるためだと考えています。

私も美容系のデザインを制作するときは、

「ピンクを使う」

ではなく、

"やわらかい印象になるトーン"

を意識して参考デザインを分析しています。

転職系

一方、転職サービスではブルーやネイビーが多く使われています。

彩度は美容系より少し高めで、メリハリのある配色が多い印象です。

これは、

• 信頼感
• 誠実さ
• 安心感

をユーザーに伝えるためではないかと思っています。

また、CTAボタンにはオレンジやグリーンなど、目を引くアクセントカラーが使われることも多く見られます。

色ではなく「トーン」を見るようになりました

以前の私は、

「美容＝ピンク」

「転職＝青」

程度にしか見ていませんでした。

しかし分析を始めてみると、

• 彩度は高い？低い？
• 明度は明るい？暗い？
• コントラストは強い？
• グラデーションはある？
• 全体の雰囲気は？

というように、

色そのものではなく"トーン"を見るようになります。

同じ青でも、鮮やかな青なのか、少しくすんだ青なのかで印象は大きく変わるからです。

まとめ

配色を決めるときは、「好きな色」を選ぶだけではなく、

「どんな印象を届けたいか」

という視点も大切だと感じています。

私もまだ勉強中ですが、競合のデザインを分析しながら彩度や明度、色の印象を意識するようになってから、配色で迷う時間が少しずつ減ってきました！

ぜひ参考デザインを見る際は、「何色を使っているか」だけでなく、「なぜこの色が選ばれているのか」という視点でも見てみてください🌼