WEB制作者なら最低限知っておくべき色彩心理とWEBセーフカラー、WEBセーフカラーを出力するRubyコード

色彩は、Webサイトが

- どのように際立つか
- ユーザの目にとまるか
- ユーザーにどのような感情を芽生えさせるか
- ユーザがどんな動作をするか

に大きな影響を与える。
ユーザの属性に合わせて適切な色彩を使うことは、売上を増大させたり、滞在時間を長くしたり、直帰率を下げることにつながる。

また、Webサイトだけでなく、

- ファッション
- インテリア
- エクステリア(住まいの外観)
- 広告、商品

などにも使えるので、汎用性のある知識だと思う。

色彩心理

色	プラスの心理的影響	マイナスの心理的影響
赤	情熱的　活動的　晴れやか　暖かい　元気の良い　購買欲求	安っぽい　派手　危険　暴力
青	さわやか　清らか　清涼感　すっきり　クール　閑静	憂鬱　寂しい　冷淡　未熟　無機質
黄	若々しい　陽気　明るい　楽しい	うるさい　目立つ　幼稚　警戒
緑	ナチュラル　新鮮　穏やか　すがすがしい	毒　田舎　疲れ　未熟
紫	高貴　優雅　神秘的　厳粛　神聖　ゴージャス　個性的	不安　嫉妬　不健康　不満
橙	親しみ　健康的　開放的　食欲増進　フレッシュ　気軽	安っぽい　混雑　攻撃　わがまま
桃	女性的　ロマンチック　優しい　幸福　かわいい　エレガント	幼稚　甘え　媚　非現実
茶	落ち着いた　穏やか　古風　慎重　丈夫　地味　堅実	けちの色と言われている
黒	フォーマル　格調高い　洗練された　高級　重厚感	不吉　暗い　悪　絶望　劣等感　負け
白	すっきり　クリア　清涼　上品　高貴　すがすがしい	厳しい　空虚　孤独　冷たい　別れ

最近の色彩活用の傾向

Webサイト

インターネットは何色？ブログは赤で、ゲームサイトは緑 - ITmedia ニュースによると、

- ブログでは赤
- グローバルサイトでは青
- デザイン系サイトではグレーや黒
- ゲーム関連サイトでは緑

が多く使われているらしい。サイトを新しく作る際の参考になると思う。

流行っていると思う色(Webサイトに限らず)

今、流行っていると思う色はアレ - Business Media 誠によると、

	2008年2月	2008年9月	2009年3月
１位	黒系(26%)	黒系(15%)	紫系(20%)
２位	白系(14%)	紫系(10%)	ピンク系(17%)
３位	紫系(12%)	ピンク系(10%)	黒系(10%)

最も好きな色

こちらも、今、流行っていると思う色はアレ - Business Media 誠によると、

	2008年2月	2008年9月	2009年3月
１位	青系(23%)	青系(19%)	青系(24%)
２位	黒系(11%)	黒系(13%)	黒系(12%)
３位	赤系(9%)	赤系(10%)	ピンク系(11%)

WEBセーフカラー

WEBセーフカラーとは、8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色のこと。以前は、ページの背景色や文字色には、できるだけWEBセーフカラーを使用した方がよかった。なぜなら、WEBセーフカラーを使用すれば、表示の際に色が予想外に変換されてしまうことが少なくなり、より多くの環境で意図通りの色を表示できるからだ。
しかし、現在のディスプレイは65,536色（16ビット）や16,777,216万色（24ビットまたは32ビット）が標準的な最大表示可能色である。また、画像にJPEG形式を使う場合やアンチエイリアス処理（画像の境界を背景を融合するようにし、ピクセルのギザギザを目立たなくする処理）を施す場合は、Webセーフカラー以外の色が使われていることから、Webセーフカラーは目安と考えればよくなっている。

WEBセーフカラーを出力するRubyコード

Rubyを使ってWEBセーフカラー一覧を16進数表示形式で作成した。

結果は下の写真のようになる。

Rubyのコード

rhtmlで書いた。

- safe_color.rhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>color varieties</title>
  <style type="text/css">
    td{width:100px;}
  </style>
</head>
<body>

<table >
  <tr>
    <td>
      <%= render :partial =>"show_safe_colors",
                  :locals => {:i => "0"} %>
    </td>
    <td>
      <%= render :partial =>"show_safe_colors",
                  :locals => {:i => "3"} %>
    </td>
    <td>
      <%= render :partial =>"show_safe_colors",
                  :locals => {:i => "6"} %>
    </td>
    <td>
      <%= render :partial =>"show_safe_colors",
                  :locals => {:i => "9"} %>
    </td>
    <td>
      <%= render :partial =>"show_safe_colors",
                  :locals => {:i => "12"} %>
    </td>
    <td>
      <%= render :partial =>"show_safe_colors",
                  :locals => {:i => "15"} %>
    </td>
  </tr>
</table>
</body>
</html>

- _show_safe_colors.rhtml

<% j = 0 -%>
<% k = 0 -%>
<% i = i.to_i %>

<% for j in 0..5 -%>
  <% for k in 0..5 -%>
    <% if i + j + k < 16 %>
      <% color_value2 = "#ffffff" %>
    <% else %>
      <% color_value2 = "#000000" %>
    <% end %>
    
    <% if i == 12 %>
      <% i = "c" %>
    <% elsif i == 15 %>
      <% i = "f" %>         
    <% end %>
    
    <% k *= 3 %>

    <% if k == 12 %>
      <% k = "c" %>
    <% elsif k == 15 %>
      <% k = "f" %>         
    <% end %>
    
    <% j *= 3 %>

    <% if j == 12 %>
      <% j = "c" %>
    <% elsif j == 15 %>
      <% j = "f" %>         
    <% end %>
    
    <% color_value = "#"+"#{i}"+"#{i}"+"#{j}"+"#{j}"+"#{k}"+"#{k}" %>
    
    <div style="background-color:<%= "#{color_value};" %> color:<%= "#{color_value2};" %>">
    <%= "#{i}"+"#{i}"+"#{j}"+"#{j}"+"#{k}"+"#{k}" %>
    </div>
    
    <% if k == "c" %>
      <% k = 12 %>
    <% elsif k == "f" %>
      <% k = 15 %>
    <% end %>
    
    <% if j == "c" %>
      <% j = 12 %>
    <% elsif j == "f" %>
      <% j = 15 %>
    <% end %>        

    <% if i == "c" %>
      <% i = 12 %>
    <% elsif i == "f" %>
      <% i = 15 %>
    <% end %>  
    
    <% k /= 3 %>
    <% k += 1 -%>
    
    <% j /= 3 %>
  <% end -%>

  <% j += 1 -%>
<% end -%>

誰でも見分けやすいように工夫した色見本

http://www.asahi.com/national/update/0609/TKY200906090193.html
http://jfly.iam.u-tokyo.ac.jp/color/CUD_set/
- 色覚障害や白内障の人のほか、一般の人にも色を実際に見てもらい、２千色以上から２０色に絞り込み
- 色覚障害は日本で推定３２０万人、白内障は目の中の水晶体が濁る病気でこちらも推定百数十万人
- これまで：赤と緑は色覚障害の人にとってまぎらわしく、黄色は白内障の人には明るすぎ
- 今回：赤はオレンジ寄りに、緑は青みを強く、黄色は濃くした。

色覚障害者のためのデザイン

色覚障がい者に配慮したWebサイトの作り方 | Webクリエイターボックス

下記の計算を基準に見えにくい配色をしていないかチェック(赤(R)、緑(G)、青(B)の0〜255の数値をもとに計算)
- 明度差
  - 明度差は( R×299 + G×587 + B×114 )/1000 で計算する
  - 明度差は125以上が望ましい
- 色相差
  - 色差は、RGBそれぞれの前景色と背景色の差を取り、合計したもの
  - 色差は500以上が望ましい