ライティング

【色彩心理学】"色"がブログの文章に与える効果って?

【色彩心理学】

ライティング初心者「色って文章にどんな影響を与えるの?色ごとに解説してよ!あと、見やすい配色とかも知りたいな。」

今回はこのような質問に答えていきます。

この記事を読むと…?

  • 色が文章に与える効果がわかる
  • 文字が見やすくなる背景色の選び方がわかる

今回は、"色の意味""色が読者にどんなイメージを与えるか"を、図解で詳しく解説していきます。

色に対するイメージは全世界で共通しており、あの世界的にも有名なNASAでさえ色に注目しているので、学んでおいて損はないです。

それでは、授業開始!




色を使いこなせないと周りに勝てません

色を使いこなせないと周りに勝てません

ブログなどの「コンテンツマーケティング」では"色"を使いこなせないと、周り(競合)に勝てず置いて行かれます。

理由は、"色"の力はブログ界に浸透しているから。

大半の人は"色"を意識している

おそらく、大半の人は"色"というものを意識しています。
理由は簡単で"色"が読者に与える影響は大きいからですね。

企業のサイトやロゴも、機能や情報の充実に加えて、色もこだわっています。

企業のロゴに使われている色

  • au(オレンジ)
  • みずほ銀行(青)
  • ソフトバンク(グレー)

SNSやネットでも"色"に関する発信は多め

たくさんの需要があるため、SNSやネット上でも"色"に関する発信はわりと多め。

つまり、多くの人が"色を使いこなそうとしている"わけです。

画像のように、ネット上にある記事の数を見れば、一目瞭然ですね。

[文章 色] で検索した場合

[文章 書き方]で検索した場合

[文章 書き方] の記事数が約2700万件、対して[文章 色] の記事数が1億件。

約4倍もの記事数が投稿されており、それだけ色に関する情報に需要があるということがわかりますね。

色に関する基本知識

色に関する基本知識

色に関する基礎的な知識です。

※色を熟知されている方や一度見たことのある方は、この部分を飛ばすことができます。

原色

原色

原色は、赤、青、黄の3つで、すべての色の元となる色です。
他の色を混ぜても作ることはできません。

二次色

二次色

二次色は、紫、緑、オレンジの3つで、原色同士を組み合わせることによって作られる色です。

画像(カラーホイール)を見てもらえばわかる通り、原色と原色の間に位置します。

ゆうき
2つの原色を混ぜると、二次色が出来上がるのか〜

赤+青=紫

青+黄=緑

黄+赤=オレンジ

三次色

三次色

三次色は、二次色を原色寄りにした色。黄緑や赤紫など、名前に色の名前が2つ入っています。

また、三次色も、2つの原色を混ぜることによりできる色です。

2つの原色を混ぜると、二次色になっちゃうよ?

三次色と二次色の違いは、2つの原色の割合ですね。

二次色は2つの原色を同じ割合(50%:50%)混ぜることによってできます。

一方で三次色は、2つの原色のどちらかを、多い割合混ぜることで出来上がります。

純色

純色

純色は、白や黒が加わっていない色。よく、「真っ青」や「真っ赤」といった言い方をしますが、それこそが純色です。

パステルカラー

パステルカラー

純色に白を加えるとパステルカラーが出来上がります。あなたも一度は聞いたことがあるのではないでしょうか?

パステルカラーは、原色よりも淡く、明るく、濃さもそこまでありません。中には、白に限りなく近いものまで存在します。

影

パステルカラーと反対に、純色に黒を加えると、影が出来上がります。

「純色が影に隠れるとできる色」といったイメージですね。

"色"が文章に与える効果【15色紹介します】

感情があるのも、色の面白いところです。

また、男女で色に対する認識は違うので解説していきます。

青

良いイメージ

  • 静けさ
  • 冷静さ
  • 平和
  • 忠誠心
  • 信頼
  • 爽快感
  • 鎮静作用

悪いイメージ

  • 冷たさ
  • 恐怖

青色ってどんな色?

ゆうき
青は、良いイメージを多く持っていて、男女ともに人気!

しかし、使いすぎることによって「冷たく感じる」「恐怖を感じる」といったイメージを読者に持たれる可能性もあり、注意が必要です。

青を使っているもの

  • ジム
  • スパ
  • 病院

ターコイズブルー

ターコイズブルー

良いイメージ

  • 自由
  • スピリチュアル
  • 治癒
  • 保護
  • 洗練

悪いイメージ

  • 嫉妬

ターコイズブルーってどんな色?

ターコイズブルーは「自由」の色。

それゆえに「感受性」「独自性」「想像」といったクリエイティブな印象を持たれていますね。

ところが「自由」も限度を超えてしまうと「迷い」になってしまいます。
程よく使用したいですね。

緑

良いイメージ

  • 新鮮
  • 健康
  • 豊か
  • 癒し
  • 地球

悪いイメージ

  • 嫉妬
  • 罪悪感
  • 未熟

緑ってどんな色?

ゆうき
緑は「自然」や「新鮮」と、フレッシュさをイメージさせてくれるね!

しかし、「若さ」をイメージさせるといった一面もあり、
それゆえに、「未熟さ」などのネガティブな印象も与えることがあります。

緑を使っているもの

  • 健康系のお店
  • 薬局の看板

黄

良いイメージ

  • 晴れ
  • エネルギッシュ
  • 暖かい
  • 嬉しい
  • 喜び

悪いイメージ

  • 無責任
  • 不安定
  • 恐怖

黄ってどんな色?

ゆうき
黄は明るく、元気を与えてくれるような色だね!

しかし黄には、以外にも「自尊心の問題」や「恐怖」といったマイナスの部分も存在します。

非常に強力な色です。デザインには、ほどよく使用するようにしましょう。

黄を使っているもの

  • 標識
  • スマイルフェイス
  • 子供のおもちゃ

紫

良いイメージ

  • 高貴
  • 高級
  • 大志
  • 成熟

悪いイメージ

  • 気分屋
  • 不機嫌

紫ってどんな色?

紫は「青」の冷静さと「赤」のパワーを兼ね備えた色。

中でも、淡い紫は「リラックス効果」や「心を開かせる効果」があるため、カウンセラーの制服などに使用すると良いかもしれませんね。

紫が使用されている例

  • カウンセラーの制服

ピンク

ピンク

良いイメージ

  • 女性
  • 慈愛
  • 幸せ

悪いイメージ

  • 弱さ
  • 未熟さ

ピンクってどんな色?

ピンクといえば「女性」や「愛」をイメージする人も多いかと。

他にも、ピンクには人を落ち着かせる効果があり、刑務所で受刑者を落ち着かせるときに用いられたりします。

ところが、この効果は一度だけで、二度目以降は興奮させてしまう色になるので注意。

ピンクが使われているもの

  • 病院
  • 幼児のおもちゃ
  • ハート

赤

良いイメージ

  • 情熱
  • エネルギー
  • 購買意欲

悪いイメージ

  • 怒り
  • 危険
  • 警告

赤ってどんな色?

赤は非常にパワフルでダイナミックな色です。

デパートなどのバーゲンセールのロゴに赤色が使われているのは、赤に「購買意欲」を高める効果があるからなんです。

日常でも多く見かけ、親しみやすさもありますが、赤が持つパワーに攻撃性を覚えることもあります。

ゆうき
使いすぎには注意だね!

赤が使われているもの

  • 信号
  • ハート
  • バーゲンセール広告

オレンジ

オレンジ

良いイメージ

  • 勇気
  • 信頼
  • 友好的

悪いイメージ

  • 無知
  • 怠惰

オレンジってどんな色?

オレンジは、「赤」の力強さと「黄」の親近感をあわせ持った、素晴らしい色です。

また、オレンジは「食欲をそそる色」としても知られ、食べ物のパッケージに使われることもしばしば。

一方で、オレンジのデメリットとして"安っぽいイメージ"というデータも出ています。

オレンジが使われているもの

  • 食品パッケージ

茶

良いイメージ

  • フレンドリー
  • アウトドア
  • 長寿

悪いイメージ

  • 独断的

茶ってどんな色?

茶は安定しており、テキストの色に使っても違和感を感じない色です。

しかし、安定している分、退屈な色とも感じることもできるため、メインカラーとして使う際には、アクセントとなる他の色と一緒に使うといいかもしれません。

とはいえ、茶をメインカラーとして使っているサイトは多く存在するので、深く考える必要はないですね。

茶を使っているもの

  • キャンプ場
  • 家具
  • コーヒーショップ

金

良いイメージ

  • 知恵
  • 繁栄
  • 貴重
  • 伝統的

悪いイメージ

  • 自慢

金ってどんな色?

金は神々しく、キラキラした色であり、豊かさや富というイメージを持たれています。

一方で、傲慢さ、自己中心さ、独善的などの悪いイメージを持たれることもあり、使いすぎには注意が必要です。

金が使われているもの

  • 高級品
  • トロフィー
  • 指輪

銀

良いイメージ

  • グラマラス
  • ハイテク
  • 優雅

悪いイメージ

  • 優柔不断
  • 鈍い
  • 不得手

銀ってどんな色?

銀は、神秘的で優雅な色。
自分の中にある、閉ざされたものを解放してくれる力もあります。

そんな銀にも「優柔不断」「鈍臭い」「憂鬱」などの悪いイメージがあるので、使いすぎには注意してください。

白

良いイメージ

  • 善良
  • 無邪気
  • 純度
  • 新鮮さ
  • 簡単

悪いイメージ

  • 隔離
  • 原始
  • 空虚

白ってどんな色?

白は、病院や結婚式で使われることが多く「純白」「無垢」「無菌」を連想させる色です。

しかしながら、悪いイメージを連想させることもあり、「死」や「悲しみ」の色としても知られています。

白が使われているもの

  • 結婚式
  • 病院
  • タクシー運転手の手袋

グレー

グレー

良いイメージ

  • 信頼性
  • 知性
  • 堅実

悪いイメージ

  • 憂鬱
  • 悲しい
  • 曖昧

グレーってどんな色?

グレーは「白」と「黒」という対照的な色を混ぜた色のため、"中性的な色"という印象を持たれています。

一方で「喪失感」「落ち込み」などのマイナスの面も持ち合わせているため注意です。

とはいえ、あらゆる製品に使われているなど、汎用性に長けている色だと言えます。

グレーが使われているもの

  • 企業のサイト(apple 等)

黒

良いイメージ

  • 優雅
  • ドラマチック
  • 上品

悪いイメージ

黒ってどんな色?

黒は、色の中でもトップクラスのパワーを持つ色です。

黒といえばテキストに使うのが一般的。
しかし、スーツや車などにも使用され、幅広く活用されています。

黒が使われているもの

  • 業務用の服装
  • 高級車
  • リムジン

色の組み合わせを選ぶときに使える知識

色の組み合わせを選ぶときに使える知識

色にはそれぞれ、意味があることがわかったと思います。

だいたいわかったよ!え〜と、じゃあ僕は、この色と・・・
おっとっと!色の意味やイメージがわかったからといって、自分が使う色をテキトーに選んではダメだよ!
ゆうき
そうなの…?

上記の通り、自分の使いたい色を"テキトーに"に選んでいいわけではありません。

色には"組み合わせ方"があり、「映える組み合わせ方」や「美しい組み合わせ方」が存在するので、ここで解説します。

コントラスト

コントラスト

コントラストとは簡単にいうと、2つの色の対比のことですね。

コントラストが高いと2つの色は簡単に区別でき、
反対にコントラストが低いと2つの色の区別は難しくなります。

背景に対して見やすい文字にするには

  • 暗い背景に明るい文字
  • 明るい背景に暗い文字

この関係がベストです。

コントラストの高低ってどうやって調べるの?

コントラストの高低を調べるにはグレースケールを使うと便利です。
グレースケールを使用するとこんな感じになります

グレースケールを使用した時に、

同じような色=低コントラスト

違う色=高コントラスト

このようになります。

補色(反対色)を使う

補色(反対色)を使う

補色とは、カラーホイール上で反対側に位置する色のことです。

視覚的に"緊張感"を生み出すので、海外では、ウェアに補色を使用しているチームも少なくはないですね。

メインカラーと補色の割合は【7:3】がオススメ

メインカラーと補色の割合は【7:3】がオススメです。

どうして?

人間は、2色の割合が【5:5】だと苦痛に感じるからですね。

メインカラーを使いつつ、アクセントとして少しだけ補色を使うと、効果的な配色にすることができます。

類似色

類似色

類似色はカラーホイール上で隣り合っている色のことです。

類似色は繊細で美しいコンテンツを作り上げることができるが、低コントラストとなるため、背景と文字の配色には向いていません。

トライアド、テトラード(正方形)、テトラード(長方形)

トライアド、テトラード(正方形)、テトラード(長方形)

トライアド:カラーホイールの周りに等間隔に配置された3色の組み合わせ

テトラード(長方形):2組の補色を組み合わせた、合計4色

テトラード(正方形):テトラード(長方形)と同じく合計4色だが、4色は等間隔に並んでいる

この3つの配色は、気をつけて使用しないと視覚的にうるさくなってしまいます。

2色での配色と同じように、1色をメインカラーとして、他の2色(または3色)をアクセントとして使用するようにしましょう。

スプリッドコンプメンタリー(分裂補色配色)

スプリッドコンプメンタリー(分裂補色配色)

名前が難しそう…

一見難しそうな名前ですが、配色の方法は簡単なので安心してください。

スプリッドコンプメンタリーとは、"ある1色"と"その色の補色の両隣の色"の合計3色の組み合わせのこと。

例:赤をメインカラーとする場合、赤の補色(緑)の両隣の色(青緑、黄緑)をアクセントとして選ぶ

補色ほど緊張感を出すことはできないが、色に多様性を持たせることができるので便利です。

まとめ:色を使いこなしてレベルアップしましょう

まとめ:色を使いこなしてレベルアップしましょう

色はあなたが思っている以上に、読者に対して影響を及ぼします。

もしもあなたが、ブログやコンテンツを作成するときには、この記事を教科書がわりにして見てはいかがでしょうか?

それでは、また次の授業でお会いしましょう。

-ライティング
-,

© 2021 ライティングの時間 Powered by AFFINGER5