MENU

ピストグループ株式会社 | WEB配色で参考にしたい!色が持つイメージとそれを応用したテクニック
おしゃれなデザインを設計する上で欠かせない色の見本のご紹介を致します。あなたの伝えたい内容をちゃんと色で表現できていますか?
22814
single,single-post,postid-22814,single-format-standard,ajax_updown_fade,page_not_loaded,,select-theme-ver-2.2,wpb-js-composer js-comp-ver-4.5.2,vc_responsive

WEB配色で参考にしたい!色が持つイメージとそれを応用したテクニック!


本記事で学べる内容

色のもつ意味合いを知れる

配色のお悩み解消

WEBデザインをする上で、配色というのは最も頭も悩ませる関門ではないでしょうか? 頭の中で、なんとなく出来上がった配色をいざ形にしてみると『全くサイトにマッチしていない』という事態におちいり、結局作り直すことに。

なんてことにならないように、今回は色の持つ意味合いや、配色パターンをご紹介したいと思います。

思い通りのものが制作できるよう、参考にして頂ければ幸いです。

目次

1.各色のもつ意味合い

・1-1.赤色【愛・情熱・興奮・果敢】

・1-2.オレンジ色【暖かい・快活さ・大胆・親しみ】

・1-3.黄色【幸福・好奇心・危険・明るさ】

・1-4.緑色【自然・平和・穏やか・癒し】

・1-5.青色【安全・冷静・清潔・信頼】

・1-6.紫色【芸術・魅力・神秘・優雅】

・1-7.無彩色【高級感・上品・美しさ・中立】

2.印象に残す配色テクニック

・2-1.優先順位を設定して、目立たせる配色テクニック

・2-2.視線の基本移動の特性を利用した配色

・2-3.グラデーションを利用した、視線誘導

3.まとめ

1.各色がもつ意味合い

その色が持つ意味合いと、デザインのコンセプトがマッチしていなければ思ったような結果は期待できません。まずは、色そのものが持つ意味合いをご紹介していこうと思います。

1-1.赤色【愛・情熱・興奮・果敢】

赤色は太陽や火などを連想させたり【愛・情熱・興奮・果敢】といった生きる力や性を表していることから、精神を興奮させる・元気を出すという効果があります。そのため、欲求を喚起させるためによく使われます。

五感のなかで、視覚と関係が深いのは赤色です。視界に飛び込んでくる赤色は必然的に目を引き印象に残ります。

はあえて、無彩色をベースにしてメインカラーやアクセントカラーに赤を入れると、引きしまった印象でオシャレになります。

1-2.オレンジ色【暖かい・快活さ・大胆・親しみ】

オレンジ色は、赤色と黄色の中間に位置する色で【暖かい・快活さ・大胆・親しみ】といったイメージがあります。オレンジ色は色の中でも嫌う人が少なく、暖色系では1,2を争う万人受けする色であるため親しみやすいサービスや商品にはピッタリです。

また、オレンジ色は食欲を促進させる色としても有名です。ですので、飲食店や商品のパッケージなどにオレンジ色が使われたものが多いのもそのせいです。

1-3.黄色【幸福・好奇心・危険・明るさ】

黄色は有彩色で一番明るい色で【幸福・好奇心・危険・明るさ】など集中力を高めたり、気分を明るくする効果があり、他にも注意を促すといった警戒色の効果もあるため、よく工事現場や、踏切などでよく見かけることがあると思います。五感のなかで特に聴覚と関係が深く、黄色い声援という言葉があるように、明るい声やよく通る音のイメージは黄色につながります。

1-4.緑色【自然・平和・穏やか・癒し】

【自然・平和・穏やか・癒し】というような、安心感や安定、調和を表す色です。木や森などの自然の色でもあるので気持ちを穏やかにしリラックスさせる効果があります。黄色と青の混色でも作られることもあり、両方の色と似たイメージも持っています。また協調性を表し、運気が上昇し、資金が集まる色とも言われています。

1-5.青色【安全・冷静・清潔・信頼】

青色は情熱を意味する赤色とは反対に【安全・冷静・清潔・信頼】といったイメージがあります。空や涼しさをイメージさせる色であることから航空会社や清涼飲料水などのロゴや商品デザインに使われています。体に必要不可欠な水とをイメージする色ということもあり、人気の高い色の系統で嫌う人が少ないという特徴があります。

1-6.紫色【芸術・魅力・神秘・優雅】

想像力をかきたてたり、感受性を高める効果があり【芸術・魅力・神秘・優雅】など、芸術的な意味合いがある色です。青と赤が混ざり合い多彩な色合いが生み出される紫は、感性を鋭くしインスピレーションを高めてくれます。相反する、赤と青という色が共存しているため【高貴と下品】【神秘と不安】など二面性を持っている色でもあります。

1-7.無彩色【高級感・上品・美しさ・中立】

無彩色は、彩度もしくは色相を持たない色で主に白と黒そしてその二つによって作り出されるすべてのグレーです。【高級感・上品・美しさ・中立】といったイメージがあるので、落ち着いた上品なイメージに仕上げたいときに有効です。逆に目立たせたい、注意を引きたい内容のものとは不釣り合いになってしまう場合があるので注意が必要です。

2.印象に残す配色テクニック

次に、配色をうまく利用する事で、注目してもらい印象に残すための配色テクニックをご紹介いたします。

2-1.優先順位を設定して、目立たせる配色テクニック

全体のレイアウトを決める際に、色合いや美しさも大事ですが、どの情報を伝えたいか、いかに伝えるかが重要です。

すでに、制作物の内容・レイアウトが決まっている状態であればワイヤーフレームに番号をつけて情報の優先順位を書きこんでいくことをオススメします。

そして、最も伝えたい情報に誘目性の高い色を用い、大きく使う事で、視線を誘導する事ができます。

【例:①のメインビジュアルに注目させたい場合】

誘導性の高い色合いを配色。近接するコンテンツにも同系統の色を使用することで視線を集中させる。

2-2.視線の基本移動の特性を利用した配色

視線の基本移動は

・左→右

・上→下

・左上→右下

この特性を利用した配色で注目させたい情報に視線を誘導する事ができます。逆に、注目させたいコンテンツと色合いがばらつくと情報が読み飛ばされてしまう可能性があります。

2-3.グラデーションを利用した、視線誘導

グラデーションを利用すると、段階的な色の変化に合わせて視線も誘導することができます。視線の移動の流れにグラデーションを載せて配色をすると、配色は安定します。

上から下へと暗くなるグラデーションの方向と、テキストの方向を一致させることで、読みやすくなります。

 

※ グラデーションが強すぎると文章が読みづらくなるので注意して下さい。

3.まとめ

いかがだったでしょうか?

デザインするさいに必ず困るのが配色ですが、色の持つ意味やテクニックを少し知っているだけで、ユーザーに対して伝えたい情報をきちんと伝える事ができ、良い印象を与えることが可能となります。

今後配色に困った時は、ぜひ参考にしてみてください。

この記事をシェアする