読者です 読者をやめる 読者になる 読者になる

30sec

デザインを中心に。30秒ぐらいで読めるブログ

イマイチな配色、さよなら!初心者でもわかる色選びのセオリー

f:id:ogawanaohiro:20150524142051j:plain

意外と時間のかかる「色選び」。あんなに時間をかけたのにイマイチパッとしない...という経験をしたことはありませんか?

本日はそんな色選びのセオリーについて考えていきます。

もくじ

  • カラーに3つの役割を与える
  • 色を選ぶ
  • 最近のWEBサービスの特徴


カラーに3つの役割を与える

カラーを3つの役割をあたえ、つかう割合を決めましょう。

 ①メインカラー(主役色):25%
 ②ベースカラー(背景色):70%
 ③アクセントカラー(アクセント色):5%
f:id:ogawanaohiro:20150524142114p:plain
引用:http://seguimi.blog.fc2.com/blog-entry-105.html

色を選ぶ

上記でご紹介した①→②→③の順番に色を選びましょう。

メインカラーは「サービスのブランド」にふさわしい印象の色、ベースカラーは「白、グレー、メインカラーの明度を高め、彩度を低くした色」、アクセントカラーは「メインカラーの補色」がセオリーです。

f:id:ogawanaohiro:20150524142142p:plain
引用:http://www.slideshare.net/marippe/ss-9003317

色をもっと加えて活気を出したい!という場合は、カラーを分割して追加しても大丈夫です。

f:id:ogawanaohiro:20150524142409p:plain
引用:http://www.slideshare.net/marippe/ss-9003317

カラーを分割した場合、「色相が同じでトーンが異なる色」か、「トーンが同じで色相が異なる色」を選ぶと調和が崩れません。

最近のWEBサービスの特徴

アクセントカラーがないことが多々あります。「全体に活気をもたらすこと」がアクセントカラーの役割ですが、人物画像やインタラクションで代替しているように感じます。

f:id:ogawanaohiro:20150524142721p:plain
引用:https://business.antenna.jp/

AntennaのWEBサイトはメインカラーが黄色、ベースカラーが白と色が少ないようだが、MVで動画を用いており、活気がある。動画に出現する色との調和もはかれています。

ogamo:)

広告を非表示にする