1. Home
  2. Archive
  3. Webデザインのお勉強 第2回 色の基本

Webデザインのお勉強 第2回 色の基本

前回の記事からずっと色について勉強してきましたが、色って深いです。。。でもセンスより知識や経験でどうにかなるものだと感じました。そういうわけで色に関する本当に基本的なところを今回はまとめてみます。

HSBによる色表示

HSBとは色彩、彩度、明度の頭文字を取ったものでそれぞれの意味は下記のとおりです。

色相（Hue）
赤、青、緑などの色み。0度から360度の角度で表せれる。0度が赤で、順に橙、黄緑、緑、青緑、青、青紫、紫、赤紫と変わっていって360度でまた赤に戻る。
彩度（Saturation）
色の鮮やかさの度合い。0%から100%で表され、0%では無彩色（グレイ系）となり、100%で最も鮮やかになる。
明度（Brightness）
色の明るさの度合い。0%から100%で表され、0%が最も暗く、100%が最も明るい。0%のときは色相と彩度に関係なく黒となる。

色が与えるイメージ

配色をするとき手がかりにするといのは色が与えるイメージです。下記、wikipediaからの引用です。
色 - Wikipedia

白
善（主にキリスト教圏）、雪、無、清潔、純粹、無罪 など
黒
悪（主にキリスト教圏）、死、男、武勇、汚濁、夜、有罪、無 など
褐（茶）
土、豊穣、糞 など
赤（赤）
血、生、火、力、女、情熱、危険、熱暑 太陽（日本）など
橙
温暖、快活 など
黄
太陽、穀類、金、注意、臆病、色欲（中国） など
緑
植物、自然、安全、幼稚、真面目、嫉妬（アメリカ）など
青
水、冷静、知性、憂鬱、寒冷 など
紫
王位、高貴（中国）、貴重 など
金
神、宝、光、命、 など

下記ページではさらに細かく分類してまとめてあります。
言葉からの色彩イメージ - 基礎からわかるホームページの配色

配色の手順

配色を行う上で、ベースカラー（75%）、サブカラー（25%）、アクセントカラー（5%）という面積比で配色するのが一般的です。3色では足りないことも当然出てくるので サブカラーを分割したり、補助カラーを使用したりして調節していきます。

大切なのは、しっかりと目的を定めて論理的に色の選定を行うことです。そうすることでセンスだけに頼らない配色を行うことができます。

1.ベースカラーの選定

ベースカラーはサイトのイメージカラーになる重要な色です。製作するサイトのイメージに合っているか、競合サイトと同系の色でないかなどを考慮して慎重に選定する必要があります。

2.サブカラーの選定

サブカラーはベースカラーを補助する役割の色です。ベースカラーと調和する色を選定するのが重要です。下記ページが参考になります。
色彩設計と調和 - 基礎からわかるホームページの配色

3.アクセントカラーの選定

アクセントカラーはワンポイントで用いる色で、ベースカラーとサブカラーから離れた色を選びます。HSBを全部動かすと共通性が保てなくなるので全部動かさず、2つを動かして選ぶよいです。

文字の見やすさ

文字の見やすさはWebサイトで情報を伝える上で最も大切なことです。文字を見やすくするためには背景色と文字色の明度差を大きくすればよいとされています。

また、文字の見やすさはアクセシビリティを考慮する必要があります。色弱の人や白黒環境の人でも文字を識別できるようにしないといけないわけです。

そのような環境での見え方をテストするには下記サイトでテストすることができます。また、文字の見易さに関してもかなり詳しく解説されています。
色の組み合わせチェック - 読みやすい前景色と背景色 - kanzaki.com

参考

トラックバックURL

http://webtech-walker.com/archive/2007/08/17004604.html/trackback

※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。

コメントフォーム

※HTMLタグは使用できません。