webデザインを考える時に役立つ配色の仕方!

WEB制作・開発実例・コラム
2018.04.13

こんにちは!
今日は、webデザインを考える時に必要な配色の仕方や、配色に役立つwebツールについて紹介していきたいと思います!

色相環とは?

色相環とは、色を環状に並べたものです。細かく並べていくと24色の色で並べられているのですが基本は6色の色で出来ています!
この色相環は、ただ適当に色が並べられているのではなく、上図のように隣り合う色が類似色になり、向かい合う反対の色が補色となるように並べられています。丸の一番上の部分に赤色が来て左が青色、右に黄色が来ることだけ覚えていれば、あとは青と黄色の間だから緑が配置されるな・・(青色と黄色を混ぜ合わせると緑色になるため)と理解できるので簡単に色相環を覚えることができます。

補色

補色とは色相環でいうとお互い反対側にある色同士で、反対側にあるから全く合わないのか?と思われるかもしれませんが、実は補色は一番お互いの色を引き足せる配色なのです。
例えば赤色の補色は緑色ですが、このカラーリングどこかで見たことがありませんでしょうか?そうなんです。クリスマスカラーなんですね。あのクリスマスといえば赤と緑!といった強いインパクトを与えるカラーリングは補色同士でできた配色なのでした。配色で迷った時は色相環を思い出して補色を選んで見るといいかもしれません。

明度

明度とは色の明るさのことをさします。影の部分と明るい部分の差、明度差を大きくすると力強い印象になりますし、明度差を低くすると上品で落ち着いた印象を持たせることができます。

彩度

彩度とは、色の鮮やかさを指します。彩度が高ければ明るい印象になりますし、彩度が低ければ色は渋い色になり落ち着いた色合いになりますね。高級な料亭、ホテルなど上品なサイトを作るサイトは少し彩度を落として見ると、よりブランドの良さを伝えることができると思います。

デザインの配色ルール

配色を考える時に考えたいルールとして、ベースカラー、メインカラー、アクセントカラーというものがあり、

  • ベースカラー(背景色など):70%
  • メインカラー(主役の色):25%
  • アクセントカラー(サイトのアクセントになる色):5%

この比率が調和の取れる配色とされています。ベースカラーはサイトの背景色などに使われる色で、白色や灰色黒色など落ち着いた色合いのものが比較的多く見られますね。メインカラーはそのサイトを印象付ける重要な色です。ブランドやコーポレートのロゴの色をメインカラーにすることはブランドやコーポレートのアイデンティティを表現するのに最適な配色と言えます。

配色を考える時に役立つWEBサービス

colicious

coliciousは、クリックorエンターキーを押すごとに美しい色を提案してくれるツールです。
緑色にしようと思ってもなかなかいい緑色が見つからないなど悩んだ時に美しい色を教えてくれます!

Adobe Color CC

Adobe Color CCはカラーリングをweb上で作成することができ、色々な人が作成したカラーリングをテーマ別に探すことができるツールです。日頃のインプットとしてもチェックしていくことで、配色の力も培っていけます。

uigradients

uigradientsは、グラデーションの美しい配色を提案してくれるツールです。便利なのは、カラーだけでなくcssでのコードも表示してくれることです。

コラム

最新コラム

人気コラム

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)