今さらきけないあの法則
★今回は、配色のお話★
今回のキーワードは「70・25・5」
見覚えのある数字ではないでしょうか?
あなたもきっと知っていることだと思いますが、たまに基本に変えると詰まっていたものも進むことがありますので、そうだったなと思いながら読んでいただけると嬉しいです!
〜配色の基本とは〜
配色の基本のお話をさせていただきます。
「70・25・5」
これは配色の割合を表した数字です。
数字はそれぞれ
70 → メインカラー
25 → サブカラー
5 → アクセントカラー
を指します。
色には心地のよい配色がありますが、その配色に近づくヒントが「70・25・5」なのです。
色は単色だけでは限界があります。
だからこそ私たちは、伝えたいイメージを作り出すために色と色を組み合わせて使いますよね。
ハロウィンだったらオレンジと紫と黒のように...
オレンジ色だけでは、みかんや太陽などハロウィンの他にもいくつか定番イメージがあるものです。
色を組み合わせることでより伝えたいイメージが形作られます。
うまくできた配色は、より伝えたいものが分かりやすくなりますし、伝えたい物事に奥行きを出すこともできます。
2Dのものを3Dにして示すような感じです。(わかりにくかったらごめんなさい)
違和感ある配色でお客さんの目を奪う方法もありますが、まずは配色の基本ができていないと何が違和感なのか分かりませんよね。
そして、効果的な違和感は、整ったものをベースにするからこそできるもの。
そのために配色の基本は重要です。
〜配色の方法〜
さて、ここからは配色の方法をお伝えしていきます!
ここまでに、配色する色の割合を思い出していただけたと思います。
その上で、ここからは選ぶ色はどのように決めたらよいかという内容です。
メインカラー・サブカラー・アクセントカラーの準備にお話を進めていきましょう!
①メインカラー
まずはメインカラーを決めましょう!
表したい色の大まかなイメージだと思ってください。
あなたが与えたいイメージに近い色を選ぶとよいでしょう。
メインカラーはベースとなる色です。
その作品で一番多く使う色となります。
②サブカラー
メインカラーを決めたら次はサブカラーを決めます。
サブカラーにはメインカラーの同系色や反対色を。
メインカラーを引き立てるような色を選ぶのがおすすめです。
したがって、反対色とはいっても彩度が同じ色では喧嘩してしまいますので、明度とトーンでメインカラーと仲良くできるような色を選びましょう。
③アクセントカラー
最後にアクセントカラーを決めます。
アクセントカラーは必ずしもなければならないというわけではありませんが、あれば全体がしまって味がでます。
伝えたい印象を邪魔せずに目を引けるような色合いがおすすめです。
メインカラーを全体の70%使い、
サブカラーは全体の25%、
アクセントカラーは全体の5%に。
このように覚えておけばバランスよく心地よい配色ができあがるはずです。
たとえば、あなたがスイカの販促物を作ることになったとします。
まず考えていただきたいのが、それを見た人にどんな印象を持ってほしいかということ。
スイカの甘くてジューシーな様子を伝えたいなら
メインカラーに赤色
サブカラーに緑色
アクセントカラーに黒色や黄色を。
スイカの新鮮さやスイカから連想される元気のよさを伝えたいなら
メインカラーに少し濃いめの緑色
サブカラーに赤色や黄色
アクセントカラーに黒色を
選ぶなど...
与えたい印象によった配色選びは変わってきます。
70・25・5の法則
色に迷走したときはぜひ思い出してみてくださいね。
〜まとめ〜
・配色の基本は70・25・5
・どんなイメージを与えたいかを考えてからメインカラー・サブカラー・アクセントカラーの配色を考える。
・メインカラーには伝えたいイメージに近い色を
サブカラーはメインカラーが引き立つような同系色や反対色を
アクセントカラーは、全体を引き締める色を
PS.
70・25・5にこだわりすぎてもあまりよくない場合もあります。
かっちりと「こうでなきゃ!」とはならないで、だいたいの目安に使っていただければと思います。
✳︎✳︎✳︎✳︎✳︎
デザインを科学しつくりあげ、ムダになりそうなものへ新しい価値と売上を。
#色カラー
#サイトの配色
#広告の配色
#カラー配色
#webデザインでも使える配色
#色の基本
#基礎情報
#今さらきけない配色の法則
#デザインで付加価値をつける
#売上を上げる
この内容は、あくまで個人の経験や学習によるものですので、すぐに売り上げが上がる確実な方法などとは捉えず、こんな考え方や方法もあるという目で読んでいただけると幸いです。
抹本