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

関連記事

  1. Web関連

    出会いと別れの時期に!ギフトWebツールまとめ

    こんにちは、デザイナーのイゲタです。あれ、もう11月...あ、…

  2. Web関連

    セキュリティ対策はクラウドストレージでも必須!!

    データの保存や共有などにとても便利なクラウドストレージ。中でも無料で使…

  3. Web関連

    スマホアプリとネット注文で追加オーダーをGET!

    皆さん!とうとうこの季節がやって来ましたね!そうです!「食欲の春」です…

  4. Web関連

    WordPressをCMSとして活用するためのプラグイン Advanced Custom Field…

    こんにちは! 最近、会社の近くの吉そばに週5で通っているSEの岸沢です…

  5. Web関連

    スマホサイトを作るときに気を付けるべきこと

    皆さんはどんな時にスマホでWebを閲覧しますか?「通勤・営業で電車…

  6. Web関連

    インターネットから必要な情報を選び出そう

    先日風邪を引いてしまったIAの加藤です。今の時代分からないことは、検…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    CMSとしてのWordPress導入 その2
  2. Web関連

    Webサイトに関する昨今のトレンドあれこれを集めてみた!
  3. AI関連

    環境問題をAIの活用によって解決する|グリーンAIとは(その1)
  4. Web関連

    これでトイレ問題解決?トイレ空き状況をスマホで確認ができる!?
  5. Web関連

    web制作の新常識!?常時SSL化のススメ
PAGE TOP