Webデザインにおける「配色のポイント」

2016.08.09

WEB

Webデザイン

Webサイトをデザインするときの色選びは、そのサイトの印象を大きく左右するのでとても重要です。しかし、コーディングで指定できる色はおよそ1,670万色もあり、その膨大な数の色の中から適した色を選択することは難しく、悩むことが多いかと思います。色の組み合わせ方によってもまたイメージが変わってきます。
そこで今回は、色の持つイメージやWebサイトデザインにおける配色時のポイントなどをご紹介していきます。

アイキャッチ画像

INDEX

色の持つイメージ「色が与える印象とは？」
彩度と明度（トーン）を調整してみよう
ベース・メイン・アクセントカラーを決めよう
背景と文字の配色で気を付けること
さいごに

色の持つイメージ「色が与える印象とは？」

赤のイメージ	赤は炎、太陽といった「エネルギッシュ」なイメージを与える色です。活力のある色なので、目立たせたいときによく使用されます。
青のイメージ	青は水や空といったものを連想し、「クール」「誠実」「信頼」「知的」といったイメージがあります。企業サイトでよく好まれ使用されることが多いです。
緑のイメージ	緑は草木などの自然を連想し、「癒し」の効果があります。赤と青の中間色というのもあり刺激が少なく優しい色です。自然を連想させるので癒しの効果があります。
黄のイメージ	黄色は有彩色の中で最も「明るく元気」な印象です。刺激があり認識しやすい色ですので、注意をうながすときに使用すると効果的です。
黒のイメージ	黒は後退色のため他の色を目立たせ引き締めてくれます。「重厚間」があり「神秘的」な印象もあるため高級感を出したいときに使用されます。
白のイメージ	白は「清潔」な印象を与えます。膨張色なので空間を広く感じさせてくれます。どんな色とも合うので使用しやすい色です。

彩度と明度（トーン）を調整してみよう

彩度（鮮やかさ）は高ければ派手な印象に、低ければ地味な印象になります。
明度（明るさ）は高ければ明るく軽い印象に、明度が低ければ暗く重い印象になります。
このように、彩度と明度で表現する色の調子のことを「トーン」と呼びます。

青を例として彩度と明度を調整してみます。

blog009

彩度を高くしたもの

blog003

インパクトのある派手な印象になります。

彩度を低くしたもの

blog004

渋くておとなしい印象になります。

明度を高くしたもの

blog005

軽くて柔らかい印象になります。

明度を低くしたもの

blog006

重厚感があり堅実的な印象になります。

彩度と明度を低くしたもの

blog007

重厚感に渋みが加わり、伝統的な印象になります。

ベース・メイン・アクセントカラーを決めよう

基本的に「ベースカラー」「メインカラー」「アクセントカラー」を意識して配色を考えます。
※必ずしもこの型にはまる必要はありません。

岡崎市民病院様の場合 http://www.okazakihospital.jp/	ベースカラー	白
	メインカラー	青
	アクセントカラー	オレンジ、緑