2011年3月24日木曜日

WEBデザインに濃淡を取り入れる

スポンサーリンク

Webサイトに色を用いる場合、一番気にするのは色相でしょうか。
赤にするか青にするか。
はたまたテクスチャを乗算で重ねてのっぺり感をなくすか。

これらはピンポイントでは役に立ちますが、広い面に対して使うとどぎつくなることがあります。
そんな時は濃淡を利用すればうまくいくかもしれません。



濃淡とは




濃淡とは、読んで字の如く色の濃さを表す言葉です。

一見薄い濃いの変化としか捉えられませんが、意味する所はそれだけではありません。
メインコンテンツやサイドバーなどのゾーンを明確にしたいときには力強い味方になってくれます。

なお以下に挙げる効果は、あくまで特定のバランスが存在することが前提です。

具体的に言えば、文字色と背景色の濃淡の差が同じではない事です。
もしも文字色と背景色の濃淡に差が無い場合は、濃淡の効果は薄くなります。
文字でなくとも同様で最低限2つの部分には濃淡の差が必要です。

距離感



濃淡によってデザインに距離感を持ち込む事ができます。
つまり、遠近法です。

濃い色は手前に見えますし、薄い色は遠くに見えます。
水墨画を見ればその効果を知る事ができるでしょう。

ちなみに、これは空気遠近法として使われる方法。
遠くの景色がぼやけて見える様を再現しています。

重要度



「SALE」や「危険」などの文字には鮮やかな赤や濃い黒が使われます。
もしも薄い色でこれらの文字を書いたらどうなるでしょう?

濃い色に比べて注意を引かないはずです。

基本的に注意を引きたい部分は他より濃い色を用いますが、適用する分量が重要になります。
全面が濃い色であれば、どこが重要かわからなくなるからです。

刺激



距離感や重要度などの効果をもたらす原因となるのが、濃淡による刺激です。

濃い色は目に強い刺激を与え、薄い色はあまり刺激を与えません。
刺激が強いからこそ他よりも注意を引き、手前に感じます。
薄い色はその逆。

重要度の部分でも少し触れましたが、全体に対して均一な濃さを用いるデメリットがここにあります。
全てが濃い色では刺激が強すぎて不快感を与え、薄い色は刺激が弱く印象までも薄くしてしまうからです。

WEBサイトで濃淡を利用する


では、濃淡の利用する方法をいくつか挙げてみます。
もしも全体がごちゃごちゃするという場合には、試してみても損は無いはずです。

例としてナビゲーションとコンテンツに濃淡を用いてみます。

文字色

一番手軽で効果が高いのは、文字色に濃淡の差を出す事です。



WEBサイトが見せるべきはナビゲーションではなくコンテンツの内容です。
ナビゲーションの文字色を薄くしコンテンツの文字色を濃くすれば、自然とコンテンツに視線が惹き付けられます。

ここでもう一工夫すると更に濃淡の差を活かせます。
コンテンツの文字色を最大限の濃さにしない事です。

例えば、色味を無くしてモノトーンで文字色を決定するとします。
その際に本文中で強調したい部分が合った場合、基本の文字色がややグレーであれば#000などの濃い色を用いる事で強調できるからです。
濃淡を濃くした上で{font-weight:bold;}を設定すれば自然な形で強調箇所を作る事ができます。



また、更に強調したい箇所に対して色味を加えるという選択肢も残せます。



ライン



borderなどで用いるラインは、簡単ながら重要な要素です。
ラインがある事で列や行が明確になるからです。

ラインも文字色と同じでナビゲーションには薄い色を用い、メインコンテンツには濃い色を用います。

具体的には、見出しなどでラインを使う場合に濃い色を使います。
サイドナビゲーションのラインの色を抑えれば、それだけ見出しを目立たせる事ができます。

背景色



背景色にも同じ事が言えるのですが...適用が難しい部分です。

確かに大きな色面として存在する部分に濃淡を付けると、濃い方が目立ちます。
しかし、その場合文字色を黒ではなく白で考えなければなりません。

デザインの方向性によっては黒背景に白文字も良いでしょうが、白背景に黒文字の組み合せに比べて使いにくい組み合せでしょう。

実際に用いる場合には、背景色の濃淡差を小さくし、文字色とのバランスを重視する方が良いと思います。
言い方を変えれば、文字色をどれだけ背景色にとけ込ませるかを意識するべきです。



コンテンツ内


コンテンツとナビゲーションについて書きましたが、もちろんコンテンツ内の部分に対しても使えます。

単純に枠でかこむだけが情報を切り分ける方法ではありません。
濃淡を意識すれば、文字を色面として扱う事ができ、色面に差異を付ける事によってレイアウトが可能です。

ただし、濃淡の数を使いすぎると効果が薄れます。
1画面で4段や5段を超える濃淡の差を付けると、強調したい順序や意図が散漫になるからです。

結び


いくつか例を挙げつつ書いてみました。

以前も背景色と文字色に関する記事は書いていますが、今回は全体ではなくパーツ同士の関係性に視点をあててみました。

無意識に色相で変化や区切りをつけようとしたくなりますが、色相を変えずに濃淡を使う事を考慮してみてはどうでしょう?
意外とすんなり問題点が解決するかもしれません。

スポンサーリンク

0 件のコメント :

コメントを投稿