無料会員制サイト

アフィリエイトで購買意欲を高める配色の方程式

色の方程式

アフィリエイトでは様々なことを考えながら記事を書いていきます。

色は読者の深層心理に無意識に訴えかける非常に重要な要素と言われていますが、記事を書く時に見落としがちなものです。

印刷物とWebの色の違い
  • 印刷物は「CMYK」で色を表現する
  • Webでは「RGB」で色を表現する

何だか難しそう・・・
そう思われるかもしれませんが、配色にも方程式のようなものが存在するのです。

その方程式を理解することができれば、読者の購買意欲を高めることも期待できるのです。

今回はアフィリエイト記事を書く時に気をつけたい、配色の方程式について紹介していきます。

深層心理

全く意識していなくても、人間は色でイメージを連想すると言われています。

連想する物質 連想する感情
レッド

炎、太陽、リンゴ、いちごなど

暑い、暖かい、情熱的、行動的など

オレンジ

炎、太陽、夕日、オレンジフルーツなど

暖かい、元気、明朗、若いなど

イエロー

炎、太陽、レモン、月や星、光など

暖かい、暑い、活発、元気など

グリーン

木、葉、芝など

自然、安心、生命力、平静など

ブルー

水、海、湖、空、雨、地球など

冷たい、クール、冷静、清潔など

紺色

水、海、湖、夜空など

冷たい、慎重、信頼、重圧、知性など

ブラック

夜空、雨雲など

冷たい、暗い、静か、重いなど

ホワイト

雪、紙、空気など

清潔、明るい、冷たい、冷静、静か

このように色を使い分けることで、文章で伝えるよりも人間の無意識に訴えることができます。

さらに色の不思議なところは、年齢や環境によっても受ける印象が変わってくることです。

年齢別で別れる色のイメージ

なぜ年齢で色の好みが変わるのか?
それは人間の視覚が年齢と共に変化するからです。

年齢によって好まれる色
約0~6歳

約7~20歳

約7~20歳に好まれる色

約21~35歳

約21~35歳に好まれる色

約36~55歳

約36~55歳に好まれる色

約55歳以上

約55歳以上に好まれる色

このように色の好みは成長と共に変化しまが、 変化するには変化するなりの理由があります。

6歳未満の子供

6歳未満の子供は微妙な色の違いを認識するのが難しいため、あざやかで色相がハッキリした配色が好まれやすい。

10代~20代

10代~20代も鮮やかな色が好まれやすいが、嗜好の範囲が広がってくるため個人差が大きくなってくる。
彩度や明度を変化させたペールカラーが受け入れられやすい。

50代以上

高齢世代では彩度の低い色合いの嗜好性が高くなる。
コントラストはっきりとした配色を心がけるようにする。

色の好みには個人差があります。
自分の好みだけで色を決めていると、気が付かない内に読者を不快にさせているかもしれません。

まだまだある色の不思議あれこれ

年齢や年代で色の好みは変化して行くと書きましたが、色に関しては不思議なことばかりです。

当然ですが男女によっても色の好みは変わります。

女性の場合

女性には赤やピンク、オレンジなどの赤色系が好まれる傾向があります。
女性の色の好み

男性の場合

男性は青や紺色など青色系が好まれる傾向があります。
男性の色の好み

また、季節によっても色の好みが変化していきます。

  • 春は柔らかいペールカラー
  • 夏には鮮やかな純色系か冷たさを感じさせる青系
  • 秋にはオレンジや深緑など自然をイメージした色
  • 冬は白やグレーの他に温かみのあるオレンジや黄色

更に不思議なのは国籍や環境などによっても色の好みは変わります。

  • 国籍や居住地に酔っても色の好みは変わると言われている
  • 寒い地方に住んでいる人は青や紫などの寒色系を好む傾向にある
  • 暖かい地方に住んでいる人は暖色系を好む傾向にありる

アフィリエイター必見!Webデザイン配色の基本

配色の基本

最初に理解しなければいけないのは、あなたの環境と読者の環境とでは色の見え方が微妙に違うことが多々あることです。

あなたが考えて選んだ色が、完璧に読者に伝わる事は無いと思ってください。

たとえ完璧な色を再現できなくても、読者の深層心理に訴えかけるのが配色の方程式です。

この配色の方程式をマスターするだけで、あなたの記事を読者が気持ちよく読み進めてくれるようになるでしょう。

次からは具体的な方程式について説明してききます。

3つの基本的な属性で決まる配色

色相環と明度と彩度

まずは上の画像をご覧ください。
これは色相環と明度と彩度の関係を表しています。

色のバリエーションは無限にありますが、3つの基本的な属性で決まります。

色相(色相環)
色相の変化は段階的な色の変化を輪で表現します。
明度

色相の中から最も鮮やかな色を基準に、黒と白を混ぜて色を明るくしたり暗くしたりすることです。

最も明度が明るいと白に近い色になります。
最も明度が暗いと黒に近い色になります。

彩度
色相の中から最も鮮やかな色を基準に、グレー(灰色)を混ぜていきます。
彩度が低くなるにつれてグレーに近くなっていきます。

ちょっと分かりづらいと思いますので、もう少し具体的に説明してみます。

三角形を使って配色を決めるトライアドの実例

トライアド

この辺から色は方程式と言う話になってきます。
画像のように「トライアド」を使うことで、配色に悩む必要はありません。

色相環の配置を元にして等間隔の位置にある3色、あるいは4色を使用することで調和の取れた配色になります。

トライアドの配色例
トライアド1
トライアド2
トライアド3
トライアド4

どうでしょう、納得していただけましたか?

次は4色にチャレンジしてみましょう。

四角形を使って配色を決めるテトラードの実例

テトラード

こんどは画像のように四角形を使って調和の取れた配色を選んでみましょう

テトラードの実例
テトラード1
テトラード2
テトラード3

アフィリエイト記事を書く時に気をつけなければいけないのは、何度も言いますが色には自分の好みが反映されてしまいます。

記事だけではなくサイトを作成する時も、自分の感覚で色を選んでいませんか?

アフィリエイトする商品やターゲットによって、方程式を使って調和の取れた配色を心がけるようにしましょう。

補色と類似色の上手な使い方

類似色と補色

色の方程式は、まだまだ存在しますが、ここで紹介するのは大きく分けて2つだけ。
それは「類似色」と「補色」です。

類似色とは

色相環上で隣り合った近い位置にある色を「類似色」と言います。

最も調和の取れた色合いになりますので、悩んだら「類似色」を選べば間違いはないでしょう。

補色とは

色相環の対角線にある色を「補色」と言います。

通常、色相環で離れた色を使うことはありませんが、「補色」に関しては互いの色味を引き立てる効果が期待できます。

紹介したように「類似色」と「補色」を上手に組み合わせることで、より読者の心理に訴えかけるコンテンツが作成できるようになります。

ただ「補色」は使いすぎると逆効果になりますので注意しましょう。

色の透明度が読者に与える微妙な影響

色の基本RGB

今まで色には「色相、明度、彩度」という3つの要素が影響すると言ってきました。

しかし、もう1つ「透明度」という要素があるのです。
この「透明度」を理解できれば、更に読書に読みやすい記事を書く事ができます。

もう一度、復習してみましょう。

Webの色の表現は「RGB」
  • R=レッド(赤)#d50000
  • G=グリーン(緑)#00c853
  • B=ブルー(青)#2962ff

RGBの色の指定方法は16進数、256段階で表現されます。

何だか難しいそうに聞こえますが答えは簡単。

RGBで黒を表現するには「#000000」、白は表現するには「#FFFFFF」のように記述します。

つまり「#」から始まる6桁の英数字で色を指定することができます。

もちろん、私も全ての色を記憶しているわけではありません。
そんな時に便利なのがWebサービスです。

無料のWebサービスで全色完全制覇

色に関する便利なWebサービスを紹介します。

原色大辞典の特徴

原色大辞典

原色大辞典

  • RGBのコードが全て紹介されている
  • 使いたい色の明度、彩度を確認できる
  • 使いたい色の補色まで確認できる

至れり尽くせりのサービスなのですが、残念なのが透明度を指定することが出来ません。

RGBカラーで透明度を指定する時は、「#000000」のような16進数では表現できないので256段階で色を指定しなければいけません。

更に透明度を指定するには「RGB」+「A(Alpha)」で表現します。

256段階で色を指定する場合
  • 白⇒ rgb(255,255,255)
  • 黒⇒ rgb(0,0,0)

そして透明度を指定するには「RGB」+「A(Alpha)」で表現します。

256段階の色に透明度を指定
  • 白⇒ rgba(255,255,255,0.5)
  • 黒⇒ rgba(0,0,0,0.5)

上の例では「RGB」+「A(Alpha)」

256段階の色に透明度を指定
  • Aの値が0=完全に透明
  • Aの値が1=透明にしない

つまりAの値を0~1の間で指定することで透明度を調整することができます。

あ~面倒くさい、安心して下さい。
便利過ぎるWebサービスがまだまだ存在するんです。

動画で紹介するカラーコード変換ツールの使い方

世の中には本当に便利なサービスがたくさんありますよね。

それでは例のごとく、使い方は動画で紹介します。

色の基本セオリーをマスターしてライバルを引き離せ

色の基本セオリー

色には基本的なセオリーが多く存在します。

多くの色の中から調和の取れたカラーを組み合わせることで、読者が見やすい記事を書く事ができるようになります。

ペースカラーとサブカラー、アクセントカラーの3色を基準に配色を考えるようにしましょう。

そして色で悩んだら、まずは色の方程式を思い出してください。

色の方程式の復習
  • 色の色相と明度と彩度
  • トライアドの配色例
  • テトラードの配色例
  • 類似色と補色の使い方
  • 色の透明度の指定方法

方程式に当てはめることで、自分本位の色使いではなく読者視点の色使いができるはずです。

これだけ書いても色の全てを紹介できたとは思っていません。
本当に色とは奥深い世界なんですね。

今回の記事が少しでも参考になれば幸いです。

それでは次回の記事をお楽しみに、さようなら!

経験ゼロだった普通の人が1年で年収1,000万円?!

ゼロから始めて1年間で100万PV達成。秘密の集客術を無料公開

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください