読者です 読者をやめる 読者になる 読者になる

久保清隆のブログ

ライフハック、健康、旅行、ビジネス、広告など、役に立つような情報を書きます。

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

Ruby/Rails デザイン

色彩は、Webサイトが

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

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


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

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

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

色彩心理

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

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

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

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

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

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

2008年2月 2008年9月 2009年3月
1位 黒系(26%) 黒系(15%) 紫系(20%)
2位 白系(14%) 紫系(10%) ピンク系(17%)
3位 紫系(12%) ピンク系(10%) 黒系(10%)
  • 最も好きな色

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

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




WEBセーフカラー

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

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

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

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

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 -%>

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

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

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

  • 下記の計算を基準に見えにくい配色をしていないかチェック(赤(R)、緑(G)、青(B)の0〜255の数値をもとに計算)
    • 明度差
      • 明度差は( R×299 + G×587 + B×114 )/1000 で計算する
      • 明度差は125以上が望ましい
    • 色相差
      • 色差は、RGBそれぞれの前景色と背景色の差を取り、合計したもの
      • 色差は500以上が望ましい
  • 模様をつける
    • 棒グラフ、円グラフなど、グラフ系は多くの色が使われる事が多い。
    • 似ている色を隣に置いたり、明度や彩度を変えただけではわかりやすいとは言えない。
  • 色の名前を表示する
    • 隣に色の名前も一諸に表示させておくとわかりやすい

視覚障害者へ配慮したウェブサイトに関しては、バリアフリーWebデザインガイド(トップページ)参照

より詳しく勉強するための参考書籍・サイト

デザイン、色彩、配色について勉強したい人のための本と記事。

  • デザインの考え方と色彩


ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎

ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎

Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS)

Webデザイン プロフェッショナルワークフロー・バイブル (Web Designing BOOKS)

  • 配色

Webデザイン 色の辞典 魅せるWebサイト 売れる配色

Webデザイン 色の辞典 魅せるWebサイト 売れる配色

Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)

Webプロフェッショナルのための黄金則 Web配色デザインのセオリー (Web Designing BOOKS)

色彩について基礎を網羅的に学ぶには、色彩検定を勉強するのがオススメ。
配色、色彩心理、ファッション、インテリア、エクステリアについて学ぶことができる。



お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。
ブログランキング・にほんブログ村へにほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ プログラム・プログラマへ人気ブログランキングへ