WWW studio：配色の決定

トップページ > ロジックオブデザイン【目次】 > レイアウト【目次】 > 配色の決定

配色の決定

配色はレイアウトを決定する上で非常に重要な要素です。配色でユーザに与える印象はまったく違うものになりますし、まちがった配色をすれば分かりにくい、読みにくいレイアウトになってしまいます。しかし配色作業は非常に難しく、「なんとなくデザイン」になってしまいやすい作業です。このトピックスでは配色に対するいくつかのポイントを紹介します。それでは実際に配色する前に色の要素とHTMLにおける色の表現方法について少し説明しましょう。

色の要素とHTMLにおける色の表現方法

色の要素

色には色相、彩度、明度という三つの要素があります。これらの要素のバランスによって色が決まるのです。下の図を見てください。

これはグラフィックソフトでよく見るカラーパレットです。右のパレットの横方向が色相、縦方向が彩度、左のパレットは右のパレットで選択された色の明度を表しています。これらの要素は簡単にいうと以下のようなものです。

色相	色味の違いを表す要素です。赤や青などの色を決定するのはこの要素です。
彩度	色の鮮やかさを表す要素です。彩度の高い色は鮮やかになりギラギラしますが、彩度の低い色はくすんで見えます。
明度	色の明るさを表す要素です。明度の高い色は白っぽい色、低い色は黒っぽい色になります。

HTMLにおける色の表現方法

HTMLでは#006633のように、この3つの要素を16進数2桁ずつで表し色の指定を行っています。ちなみに#は色の宣言であることを表します。

16進数についての解説は省きます。詳細についてはこちらを参照してください。
→IT用語辞典 e-words：16進数

Webセーフカラーというものを聞いたことありますか？上の表現方法のなかでもどのような環境でも同じように表示される色のことです。具体的には00、33、66、99、cc、ffの組み合わせで決定する色のことになります。

といってもWebセーフカラーだからといって必ずしも安全というわけではありません。 OSのWindowsとMacでは色が微妙に違うことがあります。あくまでも1つの指針としてWebセーフカラーを捕らえたほうが無難です。ボクはとくに意識はしていません。コードが簡単なので使ってはいますが。

配色のポイント

配色もただ無計画に進めるのではなく、いくつかのポイントを守って計画的に進めるとスムーズに、目的にあった、統一感をくずさない配色が可能になります。以下のポイントを参考にしてみて下さい。

テーマカラーとベースカラーを決める
あなたのWebサイトのカラーパレットを作成する
可読性を考慮する
色の組み合わせによる印象を知る

テーマカラーとベースカラーを決める

まずはテーマカラーとベースカラーを決めましょう。最初にこの2つを決めることで後の要素の色決定がスムーズに進みます。テーマカラーとはサイトの重要な要素などのカラーで、ベースカラーはサイトの背景色などのカラーです。これらの色を決めてから、細かい文字の色や見出しの色などを決めるとよいでしょう。

ちなみにWWW studioはテーマカラーを#ff6633、ベースカラーは#ffffffです。好きな色がオレンジなので(^-^)

あなたのWebサイトのカラーパレットを作成する

Webサイト制作を進めていく中で便利なのが、そのサイトのカラーパレットをつくる方法です。グラフィックソフトのなかで自分のカラーパレットを作る方法もありますし、メモに書き留めておく方法もあります。特にHTMLを手打ちで行っているときなど、色指定であの色のコード何だっけ？なんて思うことありますからね。

できればきちんとしたカラーシートを作って、手元においておくのがオススメです。サイト全体、コンテンツごとに使用する色を書きとめ、できれば色見本もセットで印刷しておくのです。PCで作業するときはもちろん、 PCを起動していなくても配色作業や確認ができるので大変便利ですよ。

可読性を考慮する

可読性を考慮することは大変重要なことです。どんなにキレイな色でも読みづらい、分かりにくいものではユーザは離れていきます。可読性をあげるためには適度なコントラストをとる、鮮やか過ぎる色は使わないというポイントを守ってください。詳しくは背景と文字の関係を考えるを参照してください。

ちなみによく見る白背景に黒文字という組み合わせ。コントラストがはっきりしているので可読性はたしかに高いかもしれませんが、目にはあまりよくありません。個人的に白背景にはグレーの文字がオススメです。コントラストは高すぎず、低すぎずをこころがけましょう。

色の組み合わせによる印象を知る

色の組み合わせによって、ユーザが受ける印象は変わります。この組み合わせを知ることが、効果的な配色の第一歩だと思います。ただし、これが絶対というものではないということは頭においてください。配色は印象を決定する1要素にすぎません。あくまでもレイアウトや各要素、配色の関係で印象は決まるのです。