Webデザイン知識│東京のWeb制作会社のWebデザイン関連

Columnコラム

Webデザイン

デザイナーが押さえておきたいweb配色パターン

デザイナーが押さえておきたいweb配色パターン

2015/06/25
このエントリーをはてなブックマークに追加

誰もが一度はぶつかるwebデザインの配色。
これを知っているだけで損しない!デザイナー方向けの配色パターン集です!

色に秘められた意味(イメージ)を知って、活用していきましょう。
これであなたもグッとくるデザインが作れます!

色の持つイメージ

普段デザインをやっている時に切っても切り離すことのできないもの、「配色」です。
普段の生活で自分の服をコーディネートするときには服の色合いを自然と気を付けている方は多いのではないでしょうか。

服の色合いというのもつまりは配色。
ついつい自分の趣味に偏ってしまう傾向があると思います。
色が与える印象や主色に合わせた配色パターンをしっかり理解し、あなたのデザインを一味違うものにしましょう!

赤 → 生命・活動的・情熱的・興奮

赤は、「興奮」「生命」「情熱」の印象を与えやすい主色です。
欲求を喚起する色として使われます。
例えば、あの有名なケンタッキー、コカ・コーラなど、、、人の食欲を掻き立てる色合いをしています。
URLhttp://tatin.jp/

webcolorsakamoto_15062001.png■ cc3333;  ■ ff3333;  ■ ffffff;

webcolorsakamoto_15062002.png

■ cc0000; ■ ff99cc; ■ ffcccc;

webcolorsakamoto_15062003.png

紫→想像力・賢さ・魅力的・神秘

紫は、「想像力」「賢さ」「魅力」の印象をあたえる主色です。
日本では昔、紫は高貴な色とされていて、高級なイメージも与えることがあります。
アメリカのYahoo!はメインカラーに使っています。
URLhttps://www.yahoo.com/

webcolorsakamoto_15062004.png

■#8C1274   ■#000000   ■#E7CEE2

webcolorsakamoto_15062005.png

■#8F776A   ■#901DDB   ■#E23079

webcolorsakamoto_15062006.png

青→信用・信頼・強さ・平和・安全

青は、「信頼」「平和」「安全」の印象を与えます。
みなさんも病院のサイトが青系統の色でデザインされていると、安心、清潔なイメージが湧きませんか?
SNS、銀行なども青を使い、信頼を強くアピールしています!
URLhttp://www.mizuho-fg.co.jp/saiyou/index.html

webcolorsakamoto_15062007.png■#F3F3E8   ■#005331   ■#FFF100

webcolorsakamoto_15062008.png

■#8AC7DE   ■#D9EB52   ■#F26B7A

webcolorsakamoto_15062009.png

緑→穏やかさ・調和・健康・成長

緑は、「調和」「健康」「成長」の印象を与えます。
環境をイメージするのはもちろんですが、人を癒やす色としても知られています。
ナチュラルな感じを出したいときにはぜひ使ってみましょう!
URLhttp://www.heiwadai-dental.com/

webcolorsakamoto_150620010.png

■#F3F3E8   ■#005331   ■#FFF100

webcolorsakamoto_150620011.png

■#259959   ■#ABD406   ■#FFD412

webcolorsakamoto_150620012.png

配色のときに気をつけること

配色パターンの次は、配色するときの色の「差」に気をつけましょう。
ポイントは、2つあります。
・暖色系同士、あるいは寒色系同士を組み合わせないこと
・明度の似た色を組み合わせないこと

例えば、暖色と暖色を合わせると似た色になるので、区別がしづらい、
字が読みにくいという問題が起こります。
同系色でも明度の違う色であれば、明暗がはっきりしているのでどんな人が見てもわかりやすい配色になります。
(一般的には、明度の違う色を組み合わせることが主流らしいですね。)

これは、暖色と寒色の組み合わせでも同様で、明度が違うだけで比較的に区別しやすい!
明るい赤と暗い青の2色では、はっきりとした色の差があるのでユーザーに取ってわかりやすい配色になるのです。

以上のことを気をつけるだけで、見やすい違和感のない配色を作ることができます。

まとめ

いかがでしたでしょうか。
デザインでは配色を気をつけることによってユーザーに与える印象は大きく変わります。
デザインする目的や背景に合わせて配色を考えてみましょう。

色が与える印象をうまく利用してデザインしていくことで、グッと来るデザインが出来ますよ!

関連するサービス

Webデザイン

デザインガイドライン作成

レスポンシブWebデザイン

UI/UXデザイン

text_totop