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
【ペルソナマーケティング】と【ホームページ制作の関係性】
コンサルティング
デザイン
ビジネス
マーケティング
公開日: 2017年01月18日
最終更新日: 2017年01月18日
【ペルソナマーケティング】と【ホームページ制作の関係性】
オンスタ運営

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
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

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デザイナー、DTPデザイナーが取れる資格まとめ
デザイン
公開日: 2019年03月30日
最終更新日: 2022年01月17日
Webデザイナー、DTPデザイナーが取れる資格まとめ
オンスタ運営

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
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】8選
Webデザイン
デザイン
公開日: 2019年03月18日
最終更新日: 2022年01月17日
「アイデアの参考に!」現役デザイナーが選ぶ【参考サイト】8選
オンスタ運営

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
ロゴマークの基礎知識 その③
デザイン
ロゴ制作
公開日: 2017年09月21日
最終更新日: 2017年09月21日
ロゴマークの基礎知識 その③
オンスタ運営

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
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
エンジニア
オンライン学習
オンライン学習キャンペーン情報
デザイナー
デザイン
プログラミング
制作
公開日: 2019年11月07日
最終更新日: 2022年01月17日
残り5時間!Udemyで新規受講生向けのセール実施中!新規ユーザー向けに対象コースが¥1,320から
  • # Python
  • # 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
シンプルなデザインについて考えてみる
Webデザイン
デザイン
公開日: 2017年07月25日
最終更新日: 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
よく使われるA4パンフレットの折り加工の種類
デザイン
パンフレット
公開日: 2017年08月02日
最終更新日: 2017年08月02日
よく使われるA4パンフレットの折り加工の種類
オンスタ運営

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
企業様必見!DTP広告の活用方法!
デザイン
パンフレット
公開日: 2017年12月02日
最終更新日: 2017年12月02日
企業様必見!DTP広告の活用方法!
オンスタ運営
全記事一覧

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

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

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

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