優れた配色の基本！センス不要の配色の黄金比

ホームページをデザインし始めた頃、背景色や文字色を選んでデザインを始めると、どうもパッとしなかったり、他の綺麗なサイトと同じレイアウトなのに、自分のデザインの方が少しダサいと感じることが多いと思います。

こんな経験から自分は、センスがないんだと落ち込む人もいるのですが、
実は、配色にはメインカラー、ベースカラー、アクセントカラーの3つがあり、
この配分には黄金比があるのです。

この黄金比のルールに乗っ取ってデザインすることで、比較的センスのいい色合いになります。

また色には綺麗に見える組み合わせがあります。

そこで今回はその黄金比率と、メインカラー、ベースカラー、アクセントカラーについての紹介と、綺麗な色の組み合わせを選んでくれるサイトの紹介をしたいと思います。

各色の役割の紹介と黄金比



メインカラー
メインカラーとは一番ユーザーに持って欲しい色のイメージの事です。
黄金比はページ全体の25%です。

この色によってテーマやサイトの方向性が大きく変わってきます。
また、この色は明度が高すぎると印象に残りづらい事や、文字の可読性が下がってしまうため、明度の低い色を選びましょう。

ベースカラー
ベースカラーとは、背景色など比較的広い範囲に使われる色の事です。
黄金比はページ全体の75%です。

この色はメインカラーの引き立て役になるため、蛍光色のような色や暗すぎる色はNGです。

メインカラーの明度をあげたパステルカラーや、明度の高い、無彩色や濁った有彩色を選ぶのがオススメです。

アクセントカラー
アクセントカラーは、部分的に使う色のことで、ちょっとしたラインや、小さなボタンやアイコンに使います。
黄金比としては全体の5%になります。

アクセントカラーは、色相環で一番離れた色を選ぶのがオススメです。


色の組み合わせの選び方

色の組み合わせにはいくつかの種類があります。
ですが初心者がその色を自分で選定するのは難しいです。

そこで各サイトが提供している、カラーパレットツールを利用してみましょう。




PALETTABLE
http://www.palettable.io/

自動で選ばれる色の中から好きか嫌いかで選ぶことのできるカラーパレットツールです。




coolo
https://coolors.co/

自分でいくつか好きな色を選んでその色をロックできます。
そして気に入った色をロックした状態でスペースキーを押すことで、自動で他の配色を選んでくれます。




Adobe Color CC
https://color.adobe.com/ja/create/color-wheel/

こちらは、色選定の様々なロジックから自動で色を調整してくれるツールになっています。
基本知識として、色相環に対する理論を学んでから活用するとより効果的になると思います。


まとめ

配色は初めは難しいと思います。
配色が上手くなる方法はたくさんのサイトを見て、このサイトの配色が綺麗と思ったサイトをまとめて、配色に悩んだ時に、その中から選ぶようにすると、いつの間にか配色がうまくなったり、
ユーザーにどんな印象を持って欲しいから、メインカラーは○○でなどを心がけながら配色することによって、より効果のあるホームページが出来上がると思います。