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

関連記事

  1. Web関連

    【Web制作会社が教える】10分でわかる!?フラットデザイン実践のポイント

    ファッションと同じように、webデザインにも、その時期ごとの流行があり…

  2. Web関連

    売れるキャッチコピーを作る法則とは…

    皆さん、こんにちは。展示会で呼び込みをしてました坂元です。突然ですが…

  3. Web関連

    Webサイトの表記ゆれ。あなたは気にしますか?

    こんにちは。デザイナーの小島です。皆さんは「表記ゆれ」という言…

  4. Web関連

    プロジェクトマネジメントについて考えてみよう

    プロジェクトマネジメントの歴史って以外に浅いことを皆さんはご存知でしょ…

  5. Web関連

    整理術を磨くと仕事だけでなくWeb制作の効率も上がる?!佐藤可士和から学ぶ仕事の取り組み方~第1回~…

    私たちの身の回りにはデザインされているもので溢れています。商品…

  6. Web関連

    売り上げの上がるECサイトを作りたい

    売上をアップさせるショッピングサイトを制作します「どのように売上を…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    「モノ消費」よりも心に残る「コト消費」が広がる理由は?
  2. Web関連

    知らずに利用しているキュレーションサービス!
  3. Web関連

    やっぱりスニーカーが好き!オススメスニーカーECサイト3選!
  4. Web関連

    動画制作のちょっとしたコツ
  5. Web関連

    お値段以上?シェアリングエコノミー
PAGE TOP