Page Top

Page Top

∞

配色について

こんにちは。WEBデザイナーの篠田です。

本日は配色について記載いたします。

 

①色の3属性

色には3つの属性があります。

1つは「色相」色味の違いを表します。

色相が異なる色は赤、青、黄色といった固有の色名で呼ぶことができます。

2つ目は「明度」。明度は色の明るさです。明度が高いという場合は色相に白を足した色になります。

反対に明度が低い場合は、色相が黒っぽい色になります。

3つ目は「彩度」です。彩度は色の鮮やかさのことです。

彩度をあげると、色がグレーに近づきます。

 

②組み合わせの良い色

色は好きな色をただ組み合わせただけでは、あれ?なんか変、、、

と思う事がありませんか?

実は、色を組み合わせるときには、ルールがあります。

下記でまとめてみました。

①類似色…隣り合わせた色相(黄緑、黄色、オレンジなど)から色を選び配色する

②モノクロマティック…同じ色相から選んだ色(青っぽい白、青、青っぽい黒など)の、明度、彩度が違う色を配色する

③無彩色(白、黒、グレー)と有彩色(赤、青など)をあわせる

④トライアド、テトラード…色相環の上で等間隔に離れた色同士(紫、青、黄緑、オレンジなど)を色のトーンをあわせた配色する

 

③色を強調する、重要度を示す

色には情報を意味づけしたり、意味を強める機能もあります。

重要度は背景色を白に設定している画面において明度の低い色ほどくっきり見える傾向にあります。

白いキャンバスに白っぽい赤の文字を書いても見えづらいですよね。

逆に白いキャンバスに、黒っぽい赤の文字のほうが見えやすいとは思いませんか?

また、彩度が高い色ほど重要度が高く感じられます。

はっきりした色ほど手前に見えるという人間の特性を利用する方法です。

文字の太さも強調するための手段の一つですね。

皆さんも今後、色について悩むことがあれば、

色相、彩度、明度を意識し、ルールを活用いただけると幸いです

 

いかがでしたでしょうか。

明日はレイアウトの決定について記載いたします。

よろしくお願いいたします。

Instagram
Twitter
Facebook
LINE
Twitter
Facebook
LINE
LINE
contactform contactform