はじめまして！
現役カフェオーナーのアンナです。
私は現在もカフェのメニュー表や各種SNS、サイトなどに使用する画像をほぼすべて自分で作り続けています。
デザインに関して素人でも、自分でそれなりのものを作れるように！
実践したことや勉強したことなどを発信していきます。
チラシやSNSの投稿画像、Webサイトなど
様々なデザインを作成するときには必ず『カラー』を決めますよね。
どこにどんなカラーを使うか、適当に決めてないですか？
実は配色の基本ルールを意識するだけでかなり素人っぽさがなくなり、見やすくてオシャレなデザインに近づきます！
この記事では、ノンデザイナーが知っておきたい配色の基本ルールについて解説していきます。
使うカラーの数は少なくする
3～5色を使うことが一般的ですが、ノンデザイナーは多くても4色までにしておくのがおすすめです。
ここで気を付けて欲しいのは
文字や背景に使う色も含めて3～4色にする
ということです。
初心者は文字と背景の他に3～4色選んでしまうという失敗をしやすいです。
実際、わたしも初期の頃にこの失敗をしました…
なので、色を使うのがとても大変でした…
カラーの比率と名称
デザインではカラーの比率を70：25：5にするとよいと言われています。
それぞれをベースカラー、メインカラー、アクセントカラーと呼びます。
ベースカラー（70％）
背景などの広範囲に使用する色です。
例えば、Webサイトのベースカラーが明るい青色であれば、サイト全体に明るく爽やかな印象が与えられます。
一方、深い茶色やグレーのような暗いベースカラーは、シックで落ち着いた雰囲気を醸し出すことができます。
ビジネス系のサイトなどではよくブラックや青系のベースカラーが使われますし、女性向けのナチュラルな雰囲気のサイトではベージュ系が使われることがよくあります。
メインカラー（25％）
メインカラーは、デザインの中で特に目立つ役割を持つ主要な色を指します。つまり、デザインの中心となる重要な色と言えます。
メインカラーはデザインの要素の中で最も目立つ色であり、ブランドのアイデンティティを象徴し、ユーザーに強い印象を与える役割を果たします。
一般的に、ブランドのロゴや主要なビジュアル要素にメインカラーが用いられ、他の色との調和を考えながら選ぶことが重要です。
例えばLINEのメインカラーは緑色です。アプリのアイコンや未読メッセージの通知の色などは緑ですよね。
実際にアプリを開いてみると、意外と緑が使われている面積は多くないことに気がつくかと思います。それでも、LINEといえば緑！というイメージがあります。
このような色をメインカラーと呼びます。
アクセントカラー（5％）
全体の中で最も少ない代わりに目立つカラーです。
特に強調したいポイントや、クリックしてもらいたい場所などによく使用されます。
LINEで言えば赤色の未読通知の部分です。
文字色
文字の色は基本的に白か黒になることが多いかと思います。
ベースカラーと明暗さを大きくつけることで、読みやすい字になります。
色の心理的効果
色には人に与えるイメージがそれぞれあるのをご存知ですか？
「自分がこの色好きだから！」
なんて理由だけでカラーを選ばないようにしましょう。
例えば
赤: 情熱的で力強いイメージ。エネルギッシュで注意を集める効果があります。また、赤は恐怖や危険を表す色としても知られています。
青: 穏やかで安定感のある色です。リラックス効果があり、落ち着きや信頼感を与えます。知性や洞察力を連想させることもあります。
緑: 自然や健康を象徴する色であり、癒しの効果があります。リフレッシュやリラックスに適した色とされ、安心感を与えることもあります。
黄色: 明るく活気のある色で、幸福感や希望をもたらします。元気付ける効果があり、創造性や知的好奇心を刺激するとされています。
オレンジ: 友好的で社交的な印象を与えます。エネルギッシュで元気付ける色であり、行動力を高める効果があります。
ピンク: 優しさや愛情を象徴し、ロマンチックな雰囲気を醸し出します。女性らしい印象を与えます。
ブラウン: 地に足のついた感じを与え、安定感や温かみを持ちます。自然やシンプルなイメージを連想させることがあります。
あくまでも大まかにですが、こんな風に色によって印象が変わります。
明度と彩度が与える印象
明度は色の明るさ、彩度は色の鮮やかさを表します。
素人は細かいことを覚えなくてもOKです！
ざっくりと「明度や彩度が高いと明るい印象」「低いと落ち着いた印象」というように頭の片隅に置いておいてください。
明度や彩度の調子を「トーン」と呼びます。
季節別に考えるとわかりやすい
明度や彩度の理屈などはわからなくても、季節によってイメージする色のトーンが違うのはわかりやすいかもしれません。
例えば着る服がブルー系だったとしても季節によって若干トーンが違いますよね。
与えるイメージも春は優しく明るいイメージで、夏は元気で明るいイメージなど
明度と彩度の違いで与えるイメージが変わってきます。
かけ離れたトーンは違和感が生まれる
春っぽいカラーと秋っぽいカラーの服を合わせて着ると違和感を感じるのは想像しやすいかと思います。
デザインにおいても、色のトーンを合わせてあげることが大切なのです。
カラーコードを知っておこう
チラシなどを作るときに毎回「こんなような色だったな」と、適当に色を選択していませんか？
もしそうだとしたら、カラーコードの存在を知っておきましょう！
それぞれの色は16進法で表すことができるようになっています。
自分のお店で使うカラーが決まったら、カラーコードを控えておきましょう。
無料デザインツールのCanvaでしたら、ブランドキットにカラーを登録しておくことで、様々なデザインに簡単に登録したカラーを使うことができるようになります。
素人がオシャレなカラーを選ぶにはどうしたらいい？
色が与えるイメージがいろいろあったり、相性のいい色や悪い色があることはなんとなく理解できましたか？
さて、ここで大きな問題が出てくると思います。
そんなこと言われたって、色の相性とかわからん！
結局どうしたらいいの！？
ってなってますよね。
素人がお店のブランドカラーを決めるときには、プロを参考にしましょう。
詳しくはこちらの記事を参考にしてみてください。
まとめ
ノンデザイナーでも知っておくべき配色の基本ルールは、とにかく75:25:5！！
ここだけはしっかり覚えておきましょう！
たくさんの色を使うのは避けて、3〜4色でデザインを作るようにしましょう。
