2011年1月25日火曜日

暗色部分を活かしてイメージを構築する方法

スポンサーリンク


絵画では、一般的に全体のバランスを重視します。
例えば中の色を外に使い、外の色を中に使うという塩梅。

この方法を用いれば、文字色などの暗色部分を活かしてイメージを構築することができます。
なお、この記事は前回の記事を一歩進めた内容でもあります。


色のバランスをとる方法の一例


中の色を外に。外の色を中に。

という方法がありまず。
絵画技法としてはごく単純で、背景色に使った色をメインに使い、メインの色を背景色に使うというようなことです。

もちろん単色に塗りつぶすだけではただのっぺりとした色面が出来上がるだけ。
明るい部分だったり、暗い部分だったりと要所要所にそれぞれの色をのせていきます。

イメージとしては点描の絵画を思い浮かべていただくと良いかもしれません。

中と外に同じ色を使う理由

なぜ中と外に同じ色を使うのか。

それは画面全体のバランスをとりつつ色彩豊かにする為です。

塗り絵のような色の置き方では、色が互いに衝突しやすくバラバラにみえます。
しかし、お互いの色をお互いにのせることで相互に浸食され、適度な融和感が生まれます。
結果として色が入り組むので色彩が豊かになり、表情豊かな仕上がりになります。

暗色に色味を加える方法


WEBサイトに置換えると、明るい色面には当然テーマとなるカラーを使いイメージの統一をはかります。
しかし、文字色やボーダーなどは無彩色の黒やグレーである事が多いのではないでしょうか?

中と外の色を相互に取り入れると、さらにイメージをコントロールしやすくなります。

色味を付ける

具体的には、黒やグレーの部分に、明るい色面で用いたキーカラーの色味を加えます。

例えば、

  • 青系のキーカラーサイトは僅かにグレーや黒に青味を
  • 赤系のキーカラーサイトは僅かにグレーや黒に赤味を

といった具合です。

ドロップシャドウも同じで、無彩色にするより同系色の暗い色にしてしまえば統一感が増します。

逆の色をつける

統一感を重視した為にぼんやりとしてしまった場合は、アクセントとして反対色や補色の色味を暗い部分に用いる方法もあります。

この場合も僅かに色味をのせるのであれば、非常に微妙ながら画面を引き締める事が出来るでしょう。

同系色も同様ですが、僅かにと言うのがポイントです。
やりすぎればやかましくなってしまいます。

サンプル


以下に実例を示します。

分かりやすいように色味を強く出していますが、もっと微妙な方がすっきりとするはずです。
明確に分かるレベルだと文字色としてはうるさくなりすぎますから。

サンプル4種

基本として、最初は無彩色のグレーを。

無彩色グレー(#424242)の文字と図形です。

このブログは青系統なので、同系色で安定したイメージにする場合。

青系グレー(#393942)の文字と図形です。

文字を目立たせるため、アクセントとして赤系統に変更する場合。

赤系グレー(#423738)の文字と図形です。

奇抜な印象をつくるために、黄系統に変更する場合。

黄系グレー(#423E38)の文字と図形です。


通常であれば色味を加えることなく決定される文字色。
この文字色に色味を出せば、それだけでページ全体の印象をかえることが可能です。

基準となるグレーの濃さが可読性を確保してさえいれば、色味を加えても明度差が保たれるために可読性が落ちません

状況にもよりますが、ページの世界観を作り上げる為に有効な方法です。

結び


原色の文字色は目に痛いですが、わずかに感じられる色味は表現を豊かにします。
むしろ、文字単体を見ても気付かないぐらいがよいかもしれません。

ページ全体をパッと見た時に全体として想定したイメージを無意識に感じられる状態が最善かと思います。

今回は文字色ですが、もちろん他にも適用できます。
アクセントとしていれる幾何学的なパターンや見出しの装飾など、普段は無彩色の黒やグレーを使いやすいう部分であれば機能します。

色がバラバラに見えたり、味気ない場合に試してみてはいかがでしょうか?

おまけ

文字色を変えるボタンをつけました。
青系統のこのブログに文字色がどういった印象の変化を与えるかご覧下さい。

なお、分かりやすいように前述のサンプルよりも強めに色をのせています。
実際に導入する場合には、もっと僅かな変化の方が良い結果が出るはずです。




スポンサーリンク

0 件のコメント :

コメントを投稿