制作講座.初心者のためのネットショップ開業総合支援講座
| カラーの基礎知識 |
カラーはデザインの中でも重要な要素を占めますが、ここでは色に関する基礎的な知識をご紹介します。人は網膜細胞で光を感じると、その信号が脳に伝えられ、脳がその信号を処理して色を認識します。一般に人の五感の内、視覚が87%を占めると言われ、更にこの視覚は色55%、形状45%の割合で印象が決まるとも言われます。
人の識別能力が特に高く、敏感とされる緑系色でさえ、網膜の感度に個人差があり、見え方に差があります。例えば、高齢者の水晶体が白濁し、黄変化が進んだ場合、黄色と白などの明度差が少ない色の組合わせは明るさが不十分だと高齢者は判別が困難になります。
また、ダークグレーと黒との見分けがつきにくい場合は青紫系の色が判別できるよう背景色と文字色とのコントラストを大きくし、主に明度差を大きくするのが効果的です。
このように色の感じ方は多種多様な要素が複雑に絡みあって一様ではありませんが、色の属性(色相・明度・彩度)を理解することで基本的な配色が考えやすくなります。
| カラー属性 |
色相
白から灰・黒までの色を無彩色、それ以外を有彩色と言い、その有彩色の色合いを色相と言います。また、右回りの環状に赤・橙・黄・黄緑・緑・青緑・青紫・紫・赤紫の順で並べたものを色相環と言います。このうち、赤から黄の範囲を暖色系、緑から青の範囲を寒色系と呼び、その特性面から前者を膨張色、後者を収縮色と呼ぶこともあります。
色相環で180度に相対する色同士を補色関係にあると言いますが、この配色は強い対比が生じ、どぎつい感があるので、配色面や位置関係の均衡に配慮が必要です。
| このような配色は文字列を浮かせたようにみせかける効果があります! |
明度
白から黒までのグレースケールを基準とした色の明るさを明度と言いますが、この度合いは白に近づくほど明度が高くなり、逆に黒へ近づくほど明度が低くなります。例えば、赤に白を混ぜたピンクは元の赤より明るく、赤に黒を混ぜた茶系色は元の赤より暗くなります。赤の純色と黄色をグレースケールで対比すると赤より黄の方がより明るいグレーに見えます。このように、同一彩度でも色相によって明度が違う場合があります。
彩度
色の鮮やかさの度合いを示し、彩度が最高の色を純色と言います。従って、無彩色の彩度はゼロになります。つまり、純色に無彩色を混ぜると鮮やかさが徐々に消えて無彩色に近づき、彩度が低下します。| WEBセーフカラー |
8ビットカラーの内、WinとMacのシステムパレットに共通する216色はIEやNNのブラウザでも同じ色彩で表現されるため、WEBセーフカラーと呼び、この色を16進数で表すと赤・緑・青の各指定値が00・33・66・99・cc・ffの6種類の組合せになるので、これらの6×6×6=216色は容易に区別できます。
セーフカラー以外を使用した場合は自動的に近似色に置換され、意図した色にならない場合もありますので、サイトの基本色はWEBセーフカラーの使用が望ましいでしょう。
一般的に基本となる背景や文字の色指定はスタイルシートで指定しますが、次の方法でも使用されます。
色名指定<font color="red">
指定可能な色は原則16色だけですが、それ以外の色でもブラウザによって対応している場合があります。また、色名は140種類あり、大文字・小文字の区別なく指定できます。RGB値指定<font color="#ff0000">
「#」に続きRed・Green・Blueの順に混色割合を00〜ffまでの16進数2桁づつ計6桁のRGB値で指定します。赤・緑・青の度合いを10進数で示すと各色0〜255までの256階調で表現できます。RGB値を最大値の255で表す#ffffffが純白色、最小値の0で表す#000000は純黒色、#ff0000は赤のffが最大値、緑及び青が00の最小値なので純赤色になります。| 配色イメージ |
トップページの配色によっては、コンテンツを閲覧することなく離脱されることがあります。このように第一印象に強い影響力を及ぼす配色はサイトイメージを左右する重要な要素になります。例えば、自然界の色として人に影響すると考えられる基本色は次のようなイメージがあります。
- 火や血をイメージする赤は「活動」と「怒り」を表現します。
- 海や空をイメージする青は「冷静」と「悲しみ」を表現します。
- 木や森をイメージする緑は「調和」と「安らぎ」を表現します。
- 大地や豊穣をイメージする黄色は「躍動」と「幸福感」を表現します。
同系色の場合は薄色を背景色、濃色をアイキャッチーやテキストカラーに使用するのが基本です。テレビCMの色使いはサイトの配色に役立ちますので、参考になります。
| 配 色 | カラーイメージ |
| 暖色系 | 外交的、生命、情熱、行動的などを象徴する。 |
| 寒色系 | 内向的、理知的、抑制などを象徴する。 |
| 濃暗色系 | 彩度や明度が比較的高く、ややくすむ色は自然界に多い色のためアースカラーと言い、重厚、渋み、沈着などを象徴して年齢層の高い男性的なイメージがある。 |
| 淡明色系 | 軽薄、優しさ、柔軟、上品さなどを象徴し、安心感があって女性に好まれるが、コントラストの低い配色は弱々しいイメージになって印象度が低下する。なお、純色の明度を高めた淡い色調はパステルカラーと呼ばれる。 |
| モノトーン系 | 無彩色なのでどんな色とも相性がよく、配色によって印象を変えやすい性質がある。グレー系は銀色とのイメージもあって金属、調和、ハイテク、知的などを象徴する。 |
配色の専門サイトにMariのいろえんぴつや色の性質とカラーチャートの入門サイトであるColor's、ホームページ作成に役立つカラー配色事典、Coloring Roomなどがあります。
また、WinとMacの共通パレットや指定色から背景と文字の配色が簡単に比較できるSuper Color Chart、和名色や配色の情報量が豊富な原色大辞典もお奨めサイトの一つです。
