＜WEB作成に役立つ＞ これだけは知っておきたい、「色」あれこれ

こちらの記事も読まれています
コーポレートサイトに必要なコンテンツは？たった5ページも充実したホームページ制作が可能です
ランディングページとWebサイトの違いとは？目的に合ったものを作ろう！
自社の採用情報サイトは必要？優秀な人材獲得のためのWebプロモーション

そもそも「色」とは？

色とカンタンに言いますが、
そもそも「光」がなければ何も見えません、当然の話ですね。

そこで色を語るのに不可欠なのが「光」です。

皆さんは
「光源色」と「物体色」
という言葉を耳にしたことはありますか？

光源色～光を発しているもの・そのものが発色している（太陽、電灯等）～ が
物に当たって反射しますが、
この時、物体に吸収されずに反射し、私たちの目（網膜）に入ってくるものが
物体色（表面色と透過色に分かれる）です。

各物体ごとに吸収する波長が異なるので、反射する際、
それぞれ違う色となって私たちの脳に認識されます。

この時の刺激が皮膚や視覚野に入ることにより、
人間の身体や精神に色々な影響を与えることが検証されています。

色の基準

光源の波長の強さがそれぞれ違うため、
昼間は白く見える壁が夕陽に照らされてオレンジに見えたり、
蛍光灯の下に置いた観葉植物とロウソクを灯した状態で見る観葉植物も同じ色には見えません。

このように照らす光が色の見え方に及ぼす性質を「演色性」といいます。

演色性は評価数が決められており、
自然光で見た色に近い光源（分光分布）ほど「演色性が良い」といい、
反対の場合は「演色性が悪い」といいます。

色の属性

演色性とは別に、世界共通の色彩の表示方法として「マンセル表色系」があります。

マンセル表色系は色を

• 色相（色の様相／いろあい）
• 明度（色の明るさ）
• 彩度（色の鮮やかさ）

の3つの属性に分けてそれぞれの段階で表現をします。

色相

色の違いを指すもので「赤」や「青」など
私たちが所謂「色」と呼んでいるのが色相の事です。

明度

色の明るさの度合いを言います。
明度が高いほど明るく、低いほど暗くなります。
数値で表すと100%が白、0%が黒になります。

彩度

色の鮮やかさの度合いを言います。
数値で表すと色味がない白・黒・灰―無彩色は0、
中心軸（無彩色／下図参照）から離れるほど大きくなり最大で純色になります。

人間が識別する色は年齢や性別、国別さらには心理的な要素も加わり
個人差があるので、客観的に表現することはとても難しいのです。
ですので、このような表色系の基準を採用する事で色のグローバルな認識を共有しています。

色が与える影響・異なる受け取り方

表色系が多くの国に普及している現在、
赤は赤、青は青と色（色相）として認識されますが、実は国によって
色彩心理という点で少し解釈が異なってきます。

日本での一般的な色に対してのイメージ

国によって違う「色」のイメージ

日本のみならず、多くの国で「白」で思う浮かべるイメージのひとつに
「純白、清潔、潔白」などがありますが
中国やベトナム、ヒンドゥーでは「不吉、死」を連想させるそうです。

黄色は日本だと「明るい、危険、電気」のような印象を受けますが
エジプトで「幸運」、西洋で「喜び、希望」といった
ポジティブなイメージに対し

欧米では「卑劣、臆病」、中国では「セクシー、卑猥」といった
ネガティブなイメージが大半です。
中国の黄色が日本で使われる「ピンク」と似た意味なんですね。

ちなみにピンクに対しセクシーや卑猥な連想を抱くのは
日本だけだそうです。

男性と女性でも見える色に違いが！

実は男性よりも女性の方が色を識別する能力が高いらしく
女性が29色見分ける事ができる一方、
男性はというと、なんと7色だけ…

特に青～緑～黄の識別が男性は劣るそうです。

目の構造に男女差はないので、これは男性ホルモンが関与すると言われています。
反対に、男性は女性より動体視力が優れているとの事です。

カラーマーケティング

赤の影響

色は特定のイメージを抱く以外に
身体に直接影響することが分かっています。
それでは、具体的にどのような影響を及ぼすのでしょうか？

ここでは説明しやすい赤を例にお話します。

赤は波長が長い（屈折率が低い）ので、
「進出色※」に分類され、前方に飛び出しているように見えます。
つまり、見ている側の近くに感じるのです。

※暖色系　反対は「後退色」（寒色系）を指す

また、交感神経を刺激することが検証されており
真っ赤な空間にいると、心拍数が高くなり、体感温度（2～3℃）が上がるそうです。

この赤による高揚感を取り入れたのが
「カラーマーケティング」で、
赤を使用することにより、売り上げが数十パーセントアップすると言われています。

カラーとして目に飛び込み、購買意欲を高める効果があるということで
バーゲンセール会場など赤や暖色の色使いが多いのです。

色の多用にご注意！

ただ、ここで気を付けたいのは
「なんでもかんでも赤にすればいい」ということではない事です。

興奮を増長するあまり、長時間、広い面積で赤を見続けるとイライラしたり、
怒りっぽくなったりするそうです。
（余談ですが、闘牛は赤に興奮するのではなく、布の動きに反応するそうです）

赤よりも黄色の方が目立つ気がするけど？

波長が一番長い赤が一番目に飛び込むのかと思ったら
実は隣り合わせると黄色の方が前に出ているように見えませんか？

黄色の方が赤より波長が短いのになぜ？
実は色相以外に「明度」が関係してくるのです。

黒と白では白が前に見えるのは、単純に明度の違いからです。
同じように赤と黄色でも赤は黄色に比べると明度は低くなるので
並べてみると後退しているように感じるのです

70：25：5の法則

売れる色・赤の多用もそうですが
効き目がある色を多く使えば良い、ということはありません。

ホームページ制作に限らず
デザイン一般の配色の法則に「70：25：5の法則」というものがあります。

• 70%　ベースカラー
• 25%　メインカラー
• 5％　　アクセントカラー

クライアントの要望がある場合などは、また違った話になってくるのですが
とにかく色使いに迷ったら
基本3色、この配分でデザインをするとすっきりとした仕上がりになります。

色使いが苦手なデザイナーさんは
始めのうちはベースカラーは無難に白か薄いグレーを選ぶことをおすすめします。

よく、補色を遣えば色がお互い鮮やかに映えると思って
緑＋赤 や 黄色＋紫 を使いたがる方がいますが
WEBデザインでは彩度の高い色の補色を使うと、逆にまとめるのが難しくなるので
トーンは少し落とすことをお勧めします。

↑左と右の色相環図、どちらが使いやすい色相かもうお分かりですね？

Photoshopのカラーピッカーでいうと右上ゾーンは使用しない方が無難です。
彩度の高い色の利用は難易度が高いので
色使いに自信がない方は使わない方が賢明でしょう。

3色だけではなく、もっと様々なカラーも使いたい、
けれども具体的にどうしたら良いかイメージが沸かない、
そんな方には

●Adobeコントラストチェッカー
https://color.adobe.com/ja/create/color-wheel/（外部サイト）
が視覚的・直観的に使いやすいのでお勧めです。

特にカラーを使うのが苦手な方は「類似色」を選択すると、色使いの失敗を減らせると思います。

業種別で使う色

「飲食関係は暖色・医療関係は寒色、製造業は暗めの重い色」
など良く聞く話ですが、
たとえば日本赤十字病院は正反対とも言える赤を使用しています。

これは業種のイメージより
「日本赤十字病院」というブランディングを優先しているからです。

サイトにおいて、何を優先するかにより使う色も変わってきます。

既成概念にとらわれて
「これは●●だから、必ずこの色を使わなくてはいけない！」
と言う考えは捨てる事も大切です。

モノが売れる「販売色」がある！

売れている商品には決まって使われている色があります。

その色はズバリ

「赤」「青」「白（シルバー含）」「黒」

です。

４大販売色とも言われ、
商品のみならず、ロゴマークにも当てはまります。

売れる理由

なぜこの4色が＜売れる色＞なのか？
理由は私たちの「歴史」「生死」に関係します。

■赤　…　太陽や火、血
■青　…　生命の源である海、空
■黒　…　夜、暗闇
■白　…　雪、昼間、死

上記の4色は太古の昔から生活を共にしてきた
切ってもきれない共存してきた「色」であり、
深層心理に組み込まれ必要不可欠・必然な色と本能で認識してるからです。

年齢によって違う「好きな色」

世代が違っても共通する「色」

売れる色に加え、ぜひ知っていていただきたいのが

●年齢による色の好みの変化
https://iro-color.com/questionnaire/result/color-preference-by-age.html
（外部サイト）

おもしろいことに
どの世代でも上位は青・水／桃・赤　色だという点です。
これは先に述べました４大販売色に通じますね。

ですので、販売する商品の購入層が分かれば
3位以降の好きな色の順位を参考にするのも売り上げアップに役立つかもしれません。

色使いが苦手な人はとにかく、色数を少なく・割合を70：25：5で決まり！

「絶対」はない

色々述べてまいりましたが
もちろん、どれも「こういう方法もある」という話であり、
「絶対的法則」ではありません。

ただ、迷うようであれば
このコラムを参考にしていただけたら幸いです。