色と人の感覚とウェブデザインのはなし

あったかく感じる色



色覚といって、色には人に与える印象があります。
これは、誰もがそう感じるというものではないのですが、
（それこそ、育った環境から、目のスペック、その人の精神的な部分に至るまでゆらぎがあり・・）
「ほぼ多くのひとが感じる」というレベルで、感じ方をある程度グループ分けすることができます。

たとえば、このグループは「暖かい」「活動的」「元気」なイメージがあります。
もうすこしオレンジになると、「親しみやすい」というイメージにもなります。

この色グループはポジティブな印象を与えやすい色と言えます。



落ち着く色



グリーン系、ブルー系の色は、落ち着く色グループです。
会社のコーポレートサイトや、鉄道系ウェブサイトでメインカラーによく使われます。
キーワードで言うと、
「信用のある」「落ち着く」「優しい」「癒し」といったイメージになります。



見えない色



色は付いているんだけど、人が「見えない」と認識する色です。
たとえば、このブログもそうですし、白ベースで作られたウェブサイトでよく罫線や
枠の設定に使われます。
主張がとても低く、背景にも使え、非常に使いやすい色です。
マンガなどでいうアミカケ・スクリーントーンのようなイメージでもあります。

黒から白にかけて明るくなる無彩色を使いこなせば、空間のコントロールも楽になるでしょう。



危険な色・警告する色



イエローと、黒。赤と黒。こういった組み合わせは危険な色と認識されます。
黒と黄色の三角コーン、電柱などにもありますよね。赤も、信号の「止まれ」など警告する色です。

ただ、最近は世の中に刺激が溢れているからか、こういった色を意図的に取り入れ
印象付けようという動きもあります。



空間を表す色



これらは、前面にくるオブジェクトの大きさによって、空間を表す色となります。



これらの図形をみて、どんな風に感じますか？

右側は、奥行きがあり、一番奥に出口があるように見えます。
左側は、たとえば箱を上から見て、中に空間があるように見えます。
これが、空間です。
黒が奥や、内側。白は光になります。



CYMK



プリンターや印刷などで使われる色の表現方法のCYMK。
これらの色は、インクの混ざりのない色とされていますので非常に強い印象を与えることが出来ます。
印刷風のデザインをする際に、こういった色をアクセントに使うと
アナログ感がでます。



RGB




液晶ディスプレイや、デジタルカメラなどでも使われている色の定義の原色です。
モニターにおいては、一番強く印象づけて色を表現できますので
使いすぎは大変なことになりますが、アクセントに使うと強力な表現となるでしょう。
家電系のウェブサイトのバナー画像などは、この色（もしくはこの周辺の色）で
塗ってしまうことも多いようです。



北欧系の色



いまちょっと北欧ブームですよね。
FrancFrancなども、これに似た色合いの商品が多いですね。




可愛い色



基本的に可愛いとされているいろは、明度と彩度が高く、
少しグレー寄りにするとできあがります。
グレーのバランスが多すぎると、あっというまにくすんだ色に。




合わせやすい色



ベージュやグレーなど、白の配合が高く（モニタ上ではこの意味はちょっと語弊がありますが）、
とにかく白に近い色は、非常に扱いやすく、
今までご紹介した色とも合わせやすいことが多いです。
たとえばベージュでも黄色寄り、赤寄り、緑寄り、無彩色などなどありますので
同じ系統で合わせるか、反対色を持ってくれば整います。
化粧で言うところのベース。主張しないからといって無ければよいということはなく
これらの見えるか見えないかの色を調整することで
空間を締めたりすることができるかとおもいます。

余談ですが、わたしは、こういった色のほうを慎重に選んでいる気がします。





グループに分けて、色で差別化してみる





ものごとを対比したいときに使いやすい色の差別化の例です。
白と黒。
赤と青。
ピンクと緑。

反対の位置にある色を置くことで、それぞれが目立っていながらも
「違うグループである」という印象を与えてくれます。




グループに分けて、似たようなまとまりであると表現してみる



薄いグレーと、濃いグレー。
赤と、オレンジ。
濃いブルーと、明るいブルー。

これら対になった色は、「同じグループ分けである」と認識されているはずです。
明度や彩度をすこしだけ変化させた色を使うと、
先ほどとは逆に、要素をまとめ上げることが出来ます。




ウェブデザイン上でのＢＯＸにおける色の処理



簡易な表現となりますが、いままで説明したものを
ウェブデザイン上で実践する際、
背景に薄い色を、ヘッダーなどの装飾に濃い色を持ってくると
自動的にヘッダーへ目線が向かい、
必要な情報があれば読んでもらえるように誘導できます。




明るさと暗さで差別化する



図はグレーで表現しましたが、これは他の色合いでも同じ印象を作れます。

右は、白い部分がメインコンテンツ、グレーの部分がナビゲーションとした図です。
濃い部分に自動的に目線が行くはずです。
ウェブサイトの概要や、メニュー、コンテンツ一覧をみて、メインコンテンツを見る
といったシナリオが予測できますね。

左は、上の部分にもグレーのエリアを置きました。
ウェブサイトのデザインでいうところのヘッダーエリアですね。
ヘッダーエリアと、ナビゲーションエリアは同じ色のトーンなので
グループとして認識されますね。
また、白は前に出ますので、コンテンツも見過ごすこともないでしょう。



色を怖がらない、色を意識する


私がウェブデザインの勉強をはじめたとき、
「苦手な色」というものがありました。

「赤は血の色だから」
「ブルーは男の子ものだから」
「オレンジはカッコワルイ」

みたいな、印象のズレを抱いていたからです。


でも実際、今回の例でいうと「赤」という色は
元気になれる色であり、減色であり、警告色なんですよね。

色というのは、その色自身に１つの意味があるのではなくて
周りの環境や、表現によって
様々な印象を与えることが出来るのです。

色を怖がらず、偏見を持たず、様々な視点から観察することで
すてきな色の使い方ができるようになるのではないでしょうか。


みなさんも色と向き合ってみてはいかがでしょうか。
私と違う答えであっても構いません。
自分のセオリーを見つけてください。




※今回の記事は、印象を表現したかったので、簡易的な色表現となっています。
※カラースケールもきちんと測定していないのですこしズレはあるかとおもいます。
※色の環境として、日本を想定しています。
※セーフカラーでない色もたぶん含まれているので、モニタによって見えない色が有る場合があります。
　その際はご了承ください＞＜。