MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
色の機能と与える印象を知って、上手に配色しよう!

色の機能と与える印象を知って、上手に配色しよう!

公開日:2017年06月21日
最終更新日:2017年06月21日
オンスタ運営
デザイン
デザイン
ホーム > 全記事一覧 > お知らせ > 色の機能と与える印象を知って、上手に配色しよう!
このエントリーをはてなブックマークに追加
色の機能と与える印象を知って、上手に配色しよう!
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは、デザイナーのさとおです。

突然ですが、みなさんは色について不思議に思ったことはありませんか?

少し前に話題になりましたが、実はかき氷のシロップは全て同じ味なのだそうです!!

赤はイチゴ味、黄色はレモン味、黄緑はメロン味…と思って選んで、その味をしっかり感じながら食べていた今まではなんだったんでしょうか…笑

このように、見た目による錯覚で味覚にまで影響を及ぼす色!

今回は、それほどまでに凄まじい影響力のある色について、その機能と与える印象について深掘りしてみようと思います。

 

色を使いこなして誘導しよう!

配色するにあたって、まず頭に入れておくべきことは、色が人にどう影響するのか、逆に人は色にどう影響されているのかということです。

色には「機能的に」使用する場合と「感覚的に」感情や記憶に訴えて使用する場合に分けられます。

普段デザイナーの方は、この作業を瞬時に判断して配色していると思います。

色をより戦略的に使いこなすべく、改めて一つ一つ確認してみましょう。 

 

1. 機能として

機能的に使用する場合の役割を大きく3つ挙げられます。

差をつけ、注目させる

注目を集めたい箇所にだけ色をつけてあげることで、何色であれ他の部分より目立たせることができます。

見つけやすくする

同等のコンテンツが数多く複雑に存在する場合など、その色をたどることで迷子になることを防ぎます。

グループに分ける

カテゴリ別に色を分類することで、文字情報を追うことなく一目で認識することができます。

 

2. 感覚として

「赤色」と聞いて、どんなことをイメージしますか?

これを読んでるあなたが日本人であれば、「情熱」「活発」などのイメージが浮かぶのではないでしょうか。

感情と記憶に基づくイメージ

上記のように、色にはそれぞれ感じ方の異なるイメージが存在し、また、不思議なことにほとんどの人とその考えは一致します。

例えば、開いたWebサイトがピンク色だった場合、直感的に「女性向け」かな?という印象を受けると思います。

そして実際に内容もほとんどがイメージ通り、女性向けの内容のサイトである場合が多いです。

これらは、私たちの生活の中にある「記憶」から得た感覚として、そのイメージが根付いているからだと思います。

この感覚的な色のイメージをデザイン媒体のイメージと掛け合わせることで、一目瞭然かつ直感的にイメージづけることができます。

文化的な影響

ここで一つ注意しておくべきことがあります。

日本やアメリカなどでは会社のカラーとしてよく用いられる「青色」は、東南アジアなどでは「悪魔」など邪悪な事柄をイメージするのだそうです。

このことから、育った環境や文化が違うと受け取る感情も異なるということも、頭に入れておく必要がありそうですね。

 

3. 錯覚を利用して

どちらが手前に見えますか?

右の青の長方形のほうが、左のオレンジの長方形よりも奥に入って見えますね。

赤色、オレンジ色、黄色などを「進出色」、青色、青緑色、青紫色は「後退色」と呼ばれており、同じ平面にあっても、色が違うだけで飛び出して見えたり、後ろに下がって見えたりします。

狭い部屋を寒色系のインテリアでまとめると、より広く見えるのはこのためと言えます。

次はこちら、どちらのほうが大きく見えるでしょうか?

中の長方形は同じサイズですが、左の白のほうが右の黒より大きく見えますね。

よく、白の服より黒の服を着たほうが細く見える!と言われていますが、これは錯覚によるもので、色の明度によって変わってきます。

実は囲碁の碁石は、白より黒を大きく作って、人の目には同じサイズに見えるように調整がされているとか!

いい仕事してますね!

このような錯覚を踏まえ、数値のみに頼ったデザインではなく自分の目で見て大きさや位置を調整する技術も、デザイン配色する際には大変重要なことです。

 

さいごに

いかがだったでしょうか?

これらの色の効果をうまく利用して配色し、またより理論的に配色提案したい時に役立てれば幸いです。

読んでいただきありがとうございましたー! それでは、また!

参考著書

http://naruhodo-design.com/


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
デザイナーとして向上するための本質を見極めるデザイン
デザイナー
デザイン
公開日: 2016年12月05日
最終更新日: 2022年01月17日
デザイナーとして向上するための本質を見極めるデザイン
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
入社前の時間を有効活用!新人デザイナーに贈る【入社までにやっておくと良い】3つのこと
デザイナー
デザイン
公開日: 2018年02月21日
最終更新日: 2018年02月21日
入社前の時間を有効活用!新人デザイナーに贈る【入社までにやっておくと良い】3つのこと
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webデザイナーがスキルアップするためのマーケティング(分析能力)基礎知識
デザイン
デザイナー
マーケティング
デザイン
Webデザイン
公開日: 2021年03月01日
最終更新日: 2021年03月01日
Webデザイナーがスキルアップするためのマーケティング(分析能力)基礎知識
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【ホームページ制作】~ターゲット設定はしない方がいい!?~
デザイン
コンサルティング
公開日: 2016年12月28日
最終更新日: 2022年01月17日
【ホームページ制作】~ターゲット設定はしない方がいい!?~
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ロゴマークの基礎知識 その②
デザイン
ロゴ制作
公開日: 2018年08月23日
最終更新日: 2022年01月17日
ロゴマークの基礎知識 その②
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
グリットデザインを使いこなそう!
デザイン
Webデザイン
公開日: 2018年08月10日
最終更新日: 2022年01月17日
グリットデザインを使いこなそう!
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
なんか物足りない…デザインにひと工夫!簡単テクニック10選
デザイン
Webデザイン
公開日: 2019年01月25日
最終更新日: 2022年01月17日
なんか物足りない…デザインにひと工夫!簡単テクニック10選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
デザイン
公開日: 2020年10月12日
最終更新日: 2020年10月12日
初心者デザイナーさんにオススメ!コンセプトから考える コーポレートロゴの作り方
h.yamaguchi

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】7選
デザイン
Webデザイン
公開日: 2018年04月18日
最終更新日: 2018年04月18日
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】7選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Webサイトで取り入れたい!効果的な「写真」の使い方
デザイン
Webデザイン
公開日: 2017年12月15日
最終更新日: 2017年12月15日
Webサイトで取り入れたい!効果的な「写真」の使い方
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。