1. 【Webデザインのスキルをレベルアップ!】色の組み合わせと配色のコツ

【Webデザインのスキルをレベルアップ!】色の組み合わせと配色のコツ

by daita
 Webデザインで目を引くのは、やはりその様々な色使いです。同じデザインであっても、色の組み合わせによっては異なった雰囲気を演出することができます。また同じ配色なはずなのに、まったく印象が異なるサイトもあります。ここではWebデザインをレベルアップさせる色の選び方や、配色のコツについて説明します。




メインカラーとサブカラーを決めること


 メインカラーのないデザインは、ぼやけた印象になります。まずは「この色を使う!」というメインになる色を決めましょう。コカコーラやマクドナルドではコーポレーションカラーの赤が大きく使われています。企業サイトや銀行、地方自治体など堅めのサイトでは青やグリーンがサイトのメインカラーとしてよく用いられ、10代~20代の女性向けサイトでは、ピンクがよくメインカラーに選ばれる傾向があります。季節によってデザインを変えたいポートフォリオのサイトや、季節限定のキャンペーンページなどの場合は、その季節を喚起させる色を選びましょう。
メインカラーのほかに、使いたい色、似合いそうな色も2~3色ほど選んでおくようにしてください。これがメインを彩るサブカラーになります。サブカラーは虹を思い起こし隣接する色から選んだり、同系色で青み黄み赤みが多少異なる色を選んだり、同色で彩度明度のみが違う色を選んだり、メリハリをつけるために補色や黒を入れたりと、いろいろなやり方があるので、吟味しながら選ぶと良いでしょう。



メインカラーとサブカラーの彩度と明度を調整する


 色味の違いを色相と言い、また、暗さを明度、鮮やかさを彩度と言います。
色相がまったく同じでも、明度と彩度を変えれば異なる色になります。使いたい色が複数あり色相がまるで違う場合、そのまま使うとチグハグになったり目がチカチカしたり、どこかしらヤボったい印象になりがちですが、彩度を合わせると統一感があるWebデザインになります。また明度が全て同じだと、非常に見にくい画面になります。可視性が低くなるとバナーやアイコンなどのクリック率が落ちますので、メインカラーとサブカラーの間で、ある程度明度はきちんと分けましょう。「モノクロでもきれい」を心がけると、明度調節が上手くいきます。



背景を考える


 同じデザインで同じメインカラーサブカラーでも、背景色が違うとサイト全体の印象がまったく異なってきます。
白は清潔や堅実、清浄などのイメージがあり、他の色を引き立てます。青・緑も同様に調和や治療、リラックスなどのイメージを喚起するでしょう。黒は高級感を醸し出すため、高額な電化製品やモード系ファッションブランドサイトなどでよく用いられています。
また同じ配色でも、背景に写真を使ったり、テクスチャを使ったりすることで、印象をぐっと鮮やかにすることができます。






 ここでは、Webデザインをするときの色の組み合わせと配色のコツを紹介しました。配色のコツを覚えて、様々な色の組み合わせにチャレンジし、Webデザインを楽しみましょう。


U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する