レッスン・学び

少しの工夫であなたの資料がもっとステキに!                    ワンポイントデザインレッスン~色の心理効果と相性編~

いつもお世話になっております。NEXTシステムズの河村です。
先月のブログ掲載から始めたワンポイントデザインレッスンですが、今回は「色の心理効果と相性編」です。
出来るだけコンパクトに解説を行う都合上、説明をかなり省略する箇所もあります。
しっかり学びたいよ!という方は最後に参考文献を載せていますのでぜひ買って勉強してみてくださいね♪

色の連想

人間は色を認識した時、色々なことを感じます。
例えば、真っ赤な料理を見た時に辛そうと感じたり、澄んだ海や空を見て爽やかな気持ちになったりします。
人間は認識した色からそれに関係したものやイメージを思い浮かべる事ができ、それらは「色の連想」と呼ば
れています。
例としてこちらの決算報告書を見てください。

左の決算報告書は黄色を基調に、右の決算報告書は灰色をベースにしています。
どちらの決算報告書の方が信用できそうですか?
どちらも書いてあることは一緒なのですが、色によって印象がガラッと変わります。
黄色は活動的、明るさ、無邪気といった印象を与えてくれる色です。
灰色は落ち着きや、上品さ、安定感といった印象を与えてくれる色です。
今回は銀行の決算報告書です。銀行には誠実さや経済基盤としての安定性が求められます。
その為、どちらかと言うと右の決算報告書の方が信用できる気がしますね。
では次にこちらの保育園の入園案内ポスターを見てください。

これらの入園募集ポスターは先ほどの決算報告書と同様に左が黄色ベース、右が灰色ベースになっています。
どちらの入園ポスターを張り出している幼稚園に子どもを預けたいでしょうか?
先程の決算報告書とは打って変わって左の入園ポスターを出している幼稚園の方が、子どもが健やかに育ちそう、
元気な子どもが集まりそう、といった好印象を与えてくれますね。
このように色にはそれぞれ連想されるイメージがあり、求められているシチュエーションや物事によって色を
使い分ける事で貴方の作る資料に対しての印象をグッと高めてくれます。

色の相性とセパレーション

資料を作るうえで同じ色だけを使い続ける人は滅多にいないと思います。
理由としては同じ色ばかりでは、単調な印象となり飽きられてしまうからです。
前回の記事で紹介した、デザインの4大原則の1つである「コントラスト」にて違う色を使えば資料に対してメリハリをつける事が出来るという事をご紹介したと思います。
ですが、ここで気を付けてほしい事は色にはそれぞれ相性があると言う事です。
例として病院に貼られていそうなポスターを用意しました。

左のポスターはデザインの4大原則である「反復」と「コントラスト」を付けようとした結果、非常に見づらいポスターになっています。
「緊急時には」と「サイトURL」に使われている赤は背景色と色が近すぎてよく見ないと文字を認識できませんし、
コントラストを付けようとして差し込んだ青は色の対比が強すぎて少し見苦しい印象ですね。
対して右のポスターの「緊急時には」に、左のポスターと同じ色を使っていますが、文字の周りを白色で縁取りしているおかげではっきりと色を認識できますし、コントラストも色の対比が大きすぎない黄色を使う事で見苦しさを感じさせません。
このように色同士の相性によって見やすい、見づらいが変わってくるのです。
また、右のポスターの様に色が近すぎて色同士の境目が分からない場合は色同士の境目に別の色を入れ込んであげる事で色を分離させる事が出来ます。このことをセパレーションと呼びます。セパレーションはコントラストを調整する役目があり、強すぎる対比を弱めたり、逆に弱すぎる対比を引き締めて強めたりする効果が有ります。

もし自分の作った資料がコントラストの付けすぎで見づらい、反復を意識しすぎて色が似通ったせいでコントラストが弱く可読性が下がった、という時は是非このセパレーションを試してみては如何でしょうか?

おわりに

以上でワンポイントデザインレッスン~色の心理効果と相性編~、は以上となります。
短いもので次回のワンポイントデザインレッスンにて最終回となってしまいます。
最後は「フォントの種類と選び方編」となっていますので最後まで是非お付き合い頂ければと思います。
次回の記事でお会い致しましょう、それでは~(/・ω・)/

参考文献

文部科学省後援 色彩検定公式テキスト
内閣府公認公益社団法人 色彩検定協会 発行
https://www.aft.or.jp/pages/official-product-orders

関連記事

新着記事
トピックス
  1. 福岡が盛り上がっている!NEXTシステムズと、さくらインターネットの取り組みとは?

  2. NEXTシステムズ×さくらインターネット

  3. イベントレポート〜「さくらのクラウド」の開発秘話とこれからWebアプリにチャレンジするお話し〜

  1. 【士魂商才】「捨ててもいいか」:〔GoodMorningMail(第236 号)〕

  2. あらためて「NEXTシステムズ」について、 NEXTシステムズのこれまで、今、そして、これから。(その3)戦略の基盤「パートナシップ」

  3. 【SaaS Bank】DX人材スキル研修公開のお知らせ

TOP