Web関連

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

0

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

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

色の持つイメージ

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

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

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

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

■ cc3333;  ■ ff3333;  ■ ffffff;

■ cc0000; ■ ff99cc; ■ ffcccc;

 

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

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

■#8C1274   ■#000000   ■#E7CEE2

 

■#8F776A   ■#901DDB   ■#E23079

 

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

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

■#F3F3E8   ■#005331   ■#FFF100

 

■#8AC7DE   ■#D9EB52   ■#F26B7A

 

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

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

 

■#F3F3E8   ■#005331   ■#FFF100

 

■#259959   ■#ABD406   ■#FFD412

 

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

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

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

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

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

まとめ

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

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

関連するサービス

Webデザイン

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

レスポンシブWebデザイン

UI/UXデザイン

0

ARを活用したビジネス前のページ

善し悪しが2分されるパララックスデザインってどう思います?次のページ

ピックアップ記事

  1. AIに求められているものは、実は意外な物だった
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. 新しい販売形態であるDtoCについて考えてみる
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    WEBサイトにおけるセキュリティ対策

    こんにちはサーバーエンジニアの橋本です。先日インターネットで調…

  2. Web関連

    世界の「美しい女性」の基準

    皆さん、ご存知ですか?毎年おこなわれている、「世界で最も美しい顔1…

  3. SNS関連

    SNSから自社サイトへの流入を増やしたい!- Twitter活用編-

    BtoB、BtoCに関わらず、Webサイト内にSNSボタンを設置してい…

  4. Web関連

    人材不足の解決策!? “HRテック”が人事業務を変える

    HRテックとは?HRテック(エイチアール・テック/HRTech)と…

  5. Web関連

    毎日見たくなるオウンドメディアサイトとは?

    自社でメディアを持つことを指す言葉「オウンドメディア」、今では多くの企…

  6. Web関連

    マーケターの常識!?プライベートDMPとオープンDMPの違い

    マーケティングに関わるようになり、「プライベートDMP」、「オープンD…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. サービス・新技術

    凄すぎた!CES2020に登場したVRゴーグル
  2. サービス・新技術

    【3分で解説】これから始まる自動車教習所のオンライン学科教習。知っておくべき3つ…
  3. Web関連

    お値段以上?シェアリングエコノミー
  4. Web関連

    パンフレット・カタログ制作とホームページ制作を別会社に依頼するリスクは?
  5. Web関連

    ダイバーシティはビジネス以外でも使える!?
PAGE TOP