テーマカラーを決めよう！WEBデザインに必要な色の属性とは？

WEBページをデザインするうえで、テーマカラーを決めるというのはとても重要です。
気まぐれに色を決めていると、ちぐはぐな印象になったりまとまりがない文章に見えたりします。
また、目に飛び込んでくる色の情報が多すぎると、見ている人が混乱してしまいます。
まずは、持たせたい印象やテーマに合ったイメージを考えて、WEBページのメインカラーを決めていきましょう。
今回は、谷宜樹がWEBページで使われる色の考え方について解説していきます。

■色の属性を理解しよう！

WEBページなどに使われる色は、「色相」「彩度」「明度」の3つによって印象が変わります。
それぞれどんな特徴があるか見てみましょう。

・色相
「赤」「青」などの色の区別のことです。
「赤みがかかった」「青ざめた」「緑がかった」という表現があるように、色相は色味と色調を左右します。
例えば、同じピンクでも赤みが強ければ明るいピンクに、青みが強ければ紫にも見える暗いピンクになりますね。
また、色相には「色相環」というものがよく使われます。
「赤・オレンジ・黄色・黄緑・緑・青・紫」という虹のようなものをイメージしてみてください。
近い色を順番に並べていって輪にすると、色相環ができあがります。
対になっている色は真逆の性質を持つ色、「補色」です。
例えば赤と緑、黄色と紫、オレンジと青は補色の関係になります。
補色を使うことでお互いの鮮やかさを強調することができるでしょう。

・彩度
色の鮮やかさ、くすみを表します。
彩度を高くすれば、より鮮やかになります。
「ビビッド」と表現されることもありますね。
鮮やかな色味にすれば、人の目を惹く効果があるでしょう。
彩度を低くすれば、くすんだような落ち着いた色味になっていきます。

・明度
色の明るさ、暗さを表します。
彩度はその色の濃さが変化しますが、明度は色に当たる照明の強さが変化するイメージです。
明度を上げれば明るい色になっていき、どんどん白に近づきます。
反対に明度を下げれば暗い色になっていき、どんどん黒に近づきます。

■クライアントからの指示を理解しよう

WEBデザインでは、クライアントから一度提案したデザインの変更を求められることもあるので、色相・彩度・明度の意味を正しく理解しましょう。
例えば、ピンクを
「色相はそのままで、明度を上げてほしい」
「色相を青よりに変更、明度は下げてほしい」
という要望があります。
それぞれどんな風に色が変わるのか想像できますか？
編集ツールでは色相・彩度・明度をスライドバーで調節できるものがあります。
実際に使ってみて、どんな風に色が変わるのか確かめてみましょう。

今回はWEBページのデザインの基本、色に関連する解説でした。
次回からも、谷宜樹がWEBデザインの要素をお話ししていきます。