fc2ブログ

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

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

color.png

前回は空白のお話をしましたが、
今回は色のお話です。

空白・ホワイトスペースの扱いと、色の扱いはとてもよく似ています。
また、ホワイトスペースだけでなく、色も一緒にコーディネートすることで
よりわかりやすくウェブデザインを行うことができるようになります。

空白・ホワイトスペースよりも、人間の「目」と、「モニタ」というスペックに関わる部分ですので
あくまでも筆者の考え方として参考にしていただけると嬉しいです。







あったかく感じる色

color_01.png

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

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

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



落ち着く色

color_02.png

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



見えない色

color_03.png

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

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



危険な色・警告する色

color_04.png

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

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



空間を表す色

color_05.png

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

color_11.png

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

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



CYMK

color_06.png

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



RGB

color_07.png


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



北欧系の色

color_08.png

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




可愛い色

color_09.png

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




合わせやすい色

color_10.png

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

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





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


color_12.png


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

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




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

color_13.png

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

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




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

color_14.png

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




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

color_15.png

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

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

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



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


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

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

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


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

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

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


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




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


関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/17-5eb52525
Listed below are links to weblogs that reference
色と人の感覚とウェブデザインのはなし from バニデザノート

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

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items