こんにちは、
氷河期世代クリエイターのYOHEIです。
今回も前回にひきつづき、初心者向けのカラーデザイン（配色）のお話です。
Part2ということで、カラーデザイン（配色）についての知識をさらに深堀したいと思います。
色に意味ってありそうだけど、具体的に知りたいな
webのHTMLカラーコードって何だろう？
本記事は、こういった悩みの解決に役立つと思います。
本記事の内容
もくじ
1. 色が持つイメージを理解すれば、より効果的でおしゃれなカラーデザイン（配色）ができる
2. 配色を決める際に知っておきたい6つの対比現象
3. おしゃれな配色は、考えるよりすでにあるものを参考にする
4. Webのカラー表記について
5. まとめ：色についての知識を身につけて、おしゃれな配色を目指そう！
本記事の信頼性
この記事を書いている私は、デザイン歴20年ほどです。
カラーデザイン初心者の方に、できるだけわかりやすく紹介したいと思います。
（・o・）/
1. 色が持つイメージを理解すれば、より効果的でおしゃれなカラーデザイン（配色）ができる
色には、それぞれ一般的な意味・イメージがあります。
それを理解することで、より効果的でおしゃれな配色をすることができます。
今回は、代表的な16色のイメージと心理的な効果について紹介します。
【赤色のイメージ】熱い・強い・危険・情熱的・派手な・怒り・興奮・活動的・炎・リーダーシップ・エネルギッシュ など
【赤色の心理的な効果】血液、太陽、炎など生命に直結するイメージが強い。強さや自信を表したり、相手を威圧したりする効果がある。
【オレンジ色のイメージ】元気・暖かい・明るい・楽しい・親しみやすい・社交的・冒険心・わがまま・安っぽい・落ち着きがない など
【オレンジ色の心理的な効果】暖かみを感じさせるため、親しみやすさを与える効果がある。人間関係を良くしたい場合や仲間意識を表すのに有効な色。
【ピンク色のイメージ】かわいい・やさしい・甘い・幸福・ロマンチック・女性らしい・若い・優柔不断・甘え・子供っぽい など
【ピンク色の心理的な効果】かわいらしさや健康を連想させたり、幸福感を与える効果がある。優しさや幸せな気持ち、恋愛を表すに有効な色。
【黄色のイメージ】希望・ユーモア・好奇心・幼さ・ひらめき・暖かさ・幸福・喜び・エネルギー・賑やか・幼稚・注意・軽率 など
【黄色の心理的な効果】喜びや希望、幸福といったポジティブなイメージを表すのに有効な色。警戒色としての効果がある。
【黄緑色のイメージ】若々しい・フレッシュ・生命力・新しい・癒し・リラックス・再生・エコ・回復・平和・バランス・未熟 など
【黄緑色の心理的な効果】若々しさや生命力を表すのに有効な色。また、癒しやリラックスといったヒーリングを連想させるイメージに有効。
【緑色のイメージ】安心・安全・平和・公平・健康・癒し・落ち着き・自然 など
【緑色の心理的な効果】黄緑より落ち着きがあり、ニュートラルな印象や安心を表すのに有効な色。興奮を静める効果がある。
【青緑色のイメージ】浄化・柔軟性・清涼感・爽快・神秘・理性・創造・洗練・都会的・疲れ・孤独 など
【青緑色の心理的な効果】清潔感・清涼感・開放感だけでなく、自己表現や芸術的な感性のイメージがある色。また自然というより都会的なイメージを表すのに有効。
【水色のイメージ】自由・開放感・自然体・爽やか・理性・集中・冷静・繊細・変化・洗練・純粋・清潔・理想・孤独 など
【水色の心理的な効果】爽やかさや開放感・繊細さだけでなく、空や水のイメージのように変化を表すのに有効な色。気持ちを落ち着かせたり、開放感を与える効果がある。
【青色のイメージ】冷静・神秘的・孤独・冷たい・静か・知的・信頼・誠実・平和・自由・爽やか・憂鬱・探究心 など
【青色の心理的な効果】誠実や知的を表すに効果的な色で、企業のロゴなどに使用されていることが多い色。集中力を高めたり、興奮を抑えて気持ちを落ち着かせる効果がある。
【紫色のイメージ】高貴・芸術的・優雅・神秘的・女性的・古風・情緒不安定・ストレス・現実逃避・下品
【紫色の心理的な効果】高貴と下品、神秘と不安といった相反する意味を持ち、使用する場面でイメージが変わる色。想像力をかき立てたり、心と身体の回復を促す効果がある。
【茶色のイメージ】堅実・上品・落ち着いた・古い・自然な・保守的・成熟・地味・退屈 など
【茶色の心理的な効果】堅実や温もりだけでなく、伝統や歴史を表したりするときに有効な色。安定している印象を与え、緊張を緩和する効果がある。
【白色のイメージ】純粋・神聖・清潔・無垢・善・新しい・自由・平和・無・完璧・冷たい・空虚 など
【白色の心理的な効果】清潔な印象や新しさ、始まりを感じさせるのに有効な色。実際よりも軽く感じさせたり、広さを感じさせる効果がある。
【グレイ色のイメージ】調和・中立・洗練・おしゃれ・シック・落ち着き・曖昧・不安・陰気・悲しみ・無気力・シニア など
【グレイ色の心理的な効果】上品でお洒落な印象を与えるのに有効で、他の色との協調性が高い色。落ち着いた雰囲気を与える効果がある。
【黒色のイメージ】強さ・高級感・威厳・プロフェッショナル・シック・クール・孤独・恐怖・不吉・悲しさ
【黒色の心理的な効果】恐怖感や孤独を感じさせる反面、強さやかっこよさの象徴でもあり、おしゃれでクールな印象を与える色。また、高級感やプロフェッショナルな印象を与える効果がある。
【金色のイメージ】永遠・貴重・輝き・富・高級・豪華・才能・成功・頂点・勝利・派手・傲慢 など
【金色の心理的な効果】高級感があり、特別なものと認識させる効果がある色。使用する場面によっては、派手で成金や傲慢といったネガティブな印象も与える。
【銀色のイメージ】洗練・上品・都会的・金属・高級・才能・人工的・無機質・機械・輝き・未来・知性・協調性・二番手 など
【銀色の心理的な効果】銀色は灰色と同様に他の色との協調性が高い色で、上品で洗練されたシャープな印象を与える色。気持ちをリラックスやすっきりさせる効果がある。
2. 配色を決める際に知っておきたい6つの対比現象
次は配色する時に気をつける必要がある「6つの対比現象」を紹介します。
この現象は隣接する色の組み合わせによって起きる現象で、単色だけのときとは違う見え方をすることがあります。この現象の見え方をコントロールするためにも知っておく必要があります。
ちなみに対比とは、ある色が他の色に影響されて実際とは違った見え方になる現象のことで、同時対比と継時対比の二つの現象があります。
【同時対比】
2色以上の色を同時に見たときに起きる現象。
「明度対比」・「彩度対比」・「色相対比」・「補色対比」・「縁辺対比」の5種類がある。
【継時対比】
ある色を見た後に別の色を見ると、はじめに見ていた色の影響で本来の色とは違う色が見える現象。
では一つずつ見てみましょう。
明度対比（めいどたいひ）
中央の灰色は全く同じ色ですが、左の方が暗く感じ、右の方が明るく感じます。
このように周りの色の明度差によって、同じ色が違って見える現象が起きることを明度対比といいます。見た目の明るさ暗さを調整するときに、明度対比の効果について知っていると役立ちます。
彩度対比（さいどたいひ）
中央のオレンジ色は全く同じ色ですが、左の方はくすんでるように感じ、右の方が鮮やかに感じます。
周囲に彩度の高い色を置くと、中央の色は本来よりも彩度が低く見えます。逆に周囲に彩度の低い色を置くと、中央の色は本来よりも彩度が高く見えます。色を鮮やかに見せたい、またはくすんで見せたいといったときに彩度対比の効果について知っていると役立ちます。
色相対比（しきそうたいひ）
中央の黄色は全く同じ色ですが、左の方は緑色寄りの感じに見え、右の方が赤色寄りの感じに見えます。
色相対比は補色残像によって起こる現象で、周りの色の影響で色相がずれて見える現象を言います。また補色の組み合わせの場合は、色の境界にちらついて見えるハレーションという現象が起こり見づらくなります。その場合はどちらかの彩度を下げる等の調整で解消できます。
補色対比（ほしょくたいひ）
中央の赤色は同じ色ですが、緑に囲まれた赤の方が鮮やかに見えるます。
これは赤を囲んでいる緑が、赤を引き立たせる補色だからです。補色はお互いの色を引き立てる効果があります。
縁辺対比（えんぺんたいひ）
色と色を隣接して配置したとき、2つの色が接する縁に表れる対比効果のこと。
明るい色と暗い色が接する部分において、明るい色はより明るく見え、暗い色はより暗く見えます。
継時対比（けいじたいひ）
ある色を一定時間見た後にその色とは違う色を見ると、最初に見た色の残像が影響して本来の色とは違う色が見える現象のことです。
3. おしゃれな配色は、考えるよりすでにある配色を参考にする
結論：配色はゼロから考えるより、すでにある配色を参考にする方が良い。
なぜかというと、すでに色々な組み合わせの良い配色が存在しているからです。
また、美しく見える配色は先人が見つけていて、基本的にパターンは決まっています。
その配色パターンの中で少し色味を変えるなどする方が、失敗がなく効率も良いです。
効率が全てではないですが、まずは良い配色パターンを真似して感覚を身に付けることが上達への近道です。
ということで、おすすめの配色サンプルブックと、お役立ちアプリを紹介します。
おすすめの配色サンプルブック
どれもテーマやスタイル、イメージごとに配色サンプルが紹介されていて、初心者にもわかりやすくておすすめです。この中のどれか1冊を持っていると、配色するときに役立ちます。
配色に役立つサイト
任意の画像アップロードすると、その画像で使用している色を元に自動的にカラーパレットを作ってくれます。
色の名前とカラーコードが一目でわかるWEB色見本。
カラーチャートの任意の色をクリックすると、その色のHTMLカラーコードが表示されます。
4. Webのカラー表記について
最後にWebの配色をするときに知っておきたいことを紹介します。
Web上で色を表す場合、シアン00%といったような表記ではなく、＃ + 6桁の英数字を用いて表します。これをHTMLカラーコードといいます。
表記の仕方には決まりがあります。最初の2桁は赤色、真ん中の2桁は緑色、最後の2桁は青色の強さを表していて、それぞれの色の強度を、2桁の16進数で表します。なので、白色だと#FFFFFFになります。
といってもなかなか覚えるのも簡単ではないので、まずWebのカラーは16進数のコードで表されているということがわかれば問題ないです。
また、ワードプレスなどのWebで色を指定するときもコードを使って入力しますが、そのときに入力したい色のカラーコードがわからないといったことがあると思います。そんなときは、前項でも紹介した下記のサイトで簡単に調べることができるのでチェックしてみてください。
5. まとめ：色についての知識を身につけて、おしゃれな配色を目指そう！
今回は初心者向けカラーデザイン学習 #2として、配色するうえで最低限知っておきたい色についての基礎知識をさらに深掘りして紹介させていただきました。
今回の内容をおさらいとしてまとめました。
ということで今回の、初心者向けカラーデザイン学習 #2【配色でおしゃれに見せるヒント】は以上です。
今回の内容を知ったことで、色に関してかなりレベルアップしていると思います。
あとはサイトデザインや企画書などに実践していくのみです！
Do it!
ではでは。
（・o・）/
おすすめの配色サンプルブック