どうもtttです。
この前、月100万円越えのコンサル生が作ったサイトを見てると、『おいおい・・・これはエグいでぇ・・・』と感じる絶望的な配色をしてたんですよ。
『これは言わなアカンな』ってことで、こういう風に色を決めると良いですよとアドバイスしたんです。
そしたら、アッという間にエエ感じに生まれ変わったんですよね。
『配色の勉強をしようと思ってたので助かりました！』とメチャ感謝されました。
こ・・・これは皆にも教えてあげた方が良いに違いない！！
ってことで今回は、
- 配色センスや色に対する知識がゼロで困ってる
- イメージはあるけど何からやったら良いのか分からない
- 自分が作ったブログやサイトがダサくてダサ死しそう
こんな感じのお悩みをサクッと解決していきます。
この記事を読み終えたとき、『お前のブログはもう・・・エエ感じになっている・・・』（あべし！！）
目次
配色の決め方とコツ
配色をバシッと決めるには、まず相性が良い３色を選ぶこと。そして、その選んだ色を配色比率「70:25:5」の法則に乗っ取って使えば基本的に上手くいきます。
これがコツですね。
なんて言うと、『おいおいtttさんよ・・・随分難しそうやな・・・』状態かもしれませんが安心してください。色の知識ゼロでも、ちゃんとエエ感じになる方法をこれから伝授します。とりあず今は、『なんかそういうのがあるんだね』程度でOKです。
んじゃ話を戻しまして、ザックリ説明しておくとこんな感じですね。
■相性が良い色とは？
カンタンに言うと、一緒に使っても問題のない色の組み合わせのことです。
■配色比率「70:25:5」の法則とは？
見た目が美しいページは、全体の70％がベースカラー、25%がメインカラー、5%がアクセントカラーで構成されているという法則です。
まぁ要は、相性が良い「ベースカラー」「メインカラー」「アクセントカラー」を選べばエエ感じになりまっせ！！ってこと。
エエ感じにするための手順は以下の３STEPですね。
では、１STEPずつ解説していきます。
STEP1：ザックリと色の種類を決める
まず、アナタが使いたい「ベースカラー(背景)」「メインカラー(見出しなど)」「アクセントカラー(強調したい所)」これ等の色の種類を決めましょう。
色の種類ってのは、「オレンジ系」とか「ブルー系」とかそういうのですね。
まぁ大体は、「ベースカラー(背景)」が白系に設定されてるので、「メインカラー(見出しなど)」と「アクセントカラー(強調したい所)」を決めればOKです。
（ブログに使われているカラーコードを正確に知りたい場合は、ColorPick Eyedropperを使うべし）
で、もし、メインカラーが決められないってときは、「ベージュ系」か「グレー系」にしておくと良いですね。この2種類は控えめなので変になりにくいです。あと、アクセントカラーで迷ってる場合は、「赤系」か「オレンジ系」にしておけば大丈夫。赤やオレンジは目を引くのでオススメですよ。
ちなみに、私のブログだと、ベースカラー(背景)が白系。メインカラー(見出しなど)は黒系。そして、アクセントカラー(強調したい所)は赤系って感じです。
色の種類が決まったら先に進んでください。
STEP2：とあるサイトを使って具体的な色を決める
とあるサイトってのは、coolorsというサイトです。
このサイトがマジで優秀。スペースキーを押すだけで相性が良い色を自動生成してくれます。
使い方は超カンタン。まずは青枠で目立ってる【Start the generator!】って所をクリックしてください。すると、こんな画面になります。
お次は、一番左のカラーコード（6桁の英数字）の部分に、ベースカラー(背景)のカラーコードを入力します。
今回は、背景が真っ白だったと仮定して【ffffff】と入力しておきます。
入力が終わったら【鍵マーク】を押してロックしておきましょう。
これで準備完了です。
後はスペースを押して、STEP１で決めておいた系統の色が出るまで回すだけ。『おぉ！！この色エエな！』という色が出るまで回し続けましょう。
とりあえず、今回はメインカラー(見出しなど)が「ベージュ系」で、アクセントカラー(強調したい所)が「赤系」ってことでやってみます。
こんな感じになりました。どう頑張ってもOh no...になりようがない配色になってますね。
アナタもこんな感じでやってみてください。
STEP3：決めたカラーを実際に使ってみる
後は実際に選んだ色を使ってみて、『おー エエやんか！！』と思ったら終了です。
で、もし、ちょっと微妙かな・・・と思うならロックを外して再度スペースで色を選び直す。そして、実際に使ってみる。これの繰り返しですね。
一応この流れで「ベースカラー」「メインカラー」「アクセントカラー」は揃います。ただ、画像や表を挿入することを考えると、もう1～2色選んでおいた方が良いですね。
私のブログで言うなら、「グリーン系」と「ブルー系」です。
こんな感じで５色選んでおくと、統一感のあるデザインに仕上がりますよ。
ね？めちゃカンタンやろ？
初心者がよくやってしまう配色の失敗例５つ
ココからは、実際に私が見たことがある「初心者がよくやってる配色の失敗例５つ」をシェアしておきます。
やらかしてる場合は修正のために。そして、今から配色を決めようと思ってる場合は、やらかさないために役立ててください。
①好きな色をノリで使いまくる
これは結構多いですね。
そのときのノリで食材をブチ込む母親の手料理が残念な味になっちゃうのと一緒で、色もノリでブチ込むとドンドンおかしくなっていきます。
気を付けましょう。
②色使いに一貫性が無い
これもまぁまぁ多いです。
強調箇所を順番に「赤下線⇒オレンジ下線⇒黄色下線⇒緑下線」みたいにやってるサイトとかありました。虹ですか？状態。
一貫性の無さは読者さんを混乱させるだけなので、気を付けましょう。
③リンクカラーと同じような色を装飾に使う
これも多いかなー。
例えば、リンクカラーと同じような色で、大事な部分に下線を引く・・・とかね。
これも読者さんを混乱させるので、気を付けましょう。
④見えにくい色の組み合わせを使う
これは、たまーに見ますね。
例えば、枠の背景色が「青」で、文字が「紫」・・・とかね。あと、「緑と茶」「赤と緑」の組み合わせもエグいことになります。
こんな感じ ⇒ エグい エグい エグいで
エグすぎぃ！！まぁでも、ここら辺はcoolorsを使うと大丈夫かな。
⑤そもそも、色が見えにくい
これは超レアですけど、白背景に薄い黄色で文字を色付けしてる・・・みたいな人がたまにいるんです。
こんな感じ ⇒ (´◉◞౪◟◉)＜ イエーイ！
もしかしたら、見せたくないのかもしれない。
まぁほぼやってる人はいませんけど、注意はしておきましょう。
最後に
正直、デザインなんてものは、「目が痛くて見てられない」「読んでて不快感がある」「どこが大事なのかわからない」ここら辺を避けることができれば何でもOKです。
だって、大事なのは間違いなく"デザイン"ではなく、"内容"ですしね。
実際、この記事を書くきっかけとなったコンサル生は、デザインがOh no・・・状態でも月100万円以上稼いでるわけです。
これが何よりの証拠ですね。
（ここら辺の話は、【結論】クリックされやすい広告はバナー？テキスト？それともボタン？ で深く語ってるので、そちらをチェックしてください。）
てなわけで、デザインは程々に。そして、コンテンツ作りは本気でやってきましょう。
ではまた。
メルマガ講座では、今まで鳴かず飛ばずだった方たちが結果を出せるようになった「9割の人ができていない"正しいアフィリエイトの取り組み方"」を語ってんで。
成功するために必須のプレゼントも渡してるから、しっかり学んでや。
当ブログで良く読まれている記事一覧はこちら
コメントフォーム