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

関連記事

  1. Web関連

    動画配信サービスhuluってどんなもの?

    最近流行り(?)のhulu。テレビと共同で作品を作ったり、限定映画を配…

  2. Web関連

    Webサービスで地域を盛り上げる!

    地域活性化と聞いたときに、どんな取り組みのことを思い浮かべますか?5秒…

  3. Web関連

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

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

  4. Web関連

    スマホアプリ「パズドラ」ブームが再熱したので広めたい!

    今回のテーマは、スマートフォンアプリ「パズル&ドラゴンズ(パズドラ)」…

  5. Web関連

    Webエンジニアだからこそ知りたい!巷で人気の3Dホログラム技術!

    最近、Mステで初音ミクが出演しました。初音ミクはクリプトン・フューチ…

  6. SNS関連

    WebサービスInstagram(インスタグラム)の恐るべき経済効果!

    しまむらパトロール(しまパト)という言葉をご存知ですか?私がこの言…

おすすめ記事

最近の記事

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

アーカイブ

  1. AI関連

    デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロナにおける最新技術の…
  2. Web関連

    O2Oが広まった理由と影響
  3. Web関連

    擬人化ソーシャルゲームと経済の関係
  4. Web関連

    マーケティングオートメーションの素敵なアプローチがHAPPY!をもたらす?
  5. SNS関連

    Instagramユーザーにおすすめ!大流行の変装アプリ3選!
PAGE TOP