久保清隆のブログ
ライフハック、健康、旅行など、役立つ情報を書きます。
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以上が望ましい
- 明度差
- 模様をつける
- 棒グラフ、円グラフなど、グラフ系は多くの色が使われる事が多い。
- 似ている色を隣に置いたり、明度や彩度を変えただけではわかりやすいとは言えない。
- 色の名前を表示する
- 隣に色の名前も一諸に表示させておくとわかりやすい
※視覚障害者へ配慮したウェブサイトに関しては、バリアフリーWebデザインガイド（トップページ）参照
より詳しく勉強するための参考書籍・サイト
デザイン、色彩、配色について勉強したい人のための本と記事。
- デザインの考え方と色彩
ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎
- 作者: オブスキュアインク
- 出版社/メーカー: MdN
- 発売日: 2008/11/21
- メディア: 大型本
- 購入: 1人クリック: 53回
- この商品を含むブログ (5件) を見る
Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS)
- 作者: Andy Clarke,株式会社ミツエーリンクス,木達一仁,今里了次
- 出版社/メーカー:毎日コミュニケーションズ
- 発売日: 2009/02/24
- メディア: 単行本（ソフトカバー）
- 購入: 4人クリック: 101回
- この商品を含むブログ (10件) を見る
- 配色
- 作者: 高坂美紀
- 出版社/メーカー:ソーテック社
- 発売日: 2009/03/14
- メディア: 単行本（ソフトカバー）
- 購入: 1人クリック: 5回
- この商品を含むブログ (3件) を見る
Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)
- 作者: 坂本邦夫
- 出版社/メーカー:毎日コミュニケーションズ
- 発売日: 2007/08/31
- メディア: 単行本（ソフトカバー）
- 購入: 5人クリック: 111回
- この商品を含むブログ (13件) を見る
- 色彩に関して基礎から学べるページ
- 色彩検定の勉強法の記事
色彩について基礎を網羅的に学ぶには、色彩検定を勉強するのがオススメ。
配色、色彩心理、ファッション、インテリア、エクステリアについて学ぶことができる。
お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。
