menu

最近では無料で簡単にサイトを作ることのできるツールが沢山ありますが、いざ自分で作る!となるとデザインに頭を悩ませる人も少なく無いと思います。
同じ内容をアピールするにも、サイトの「配色」一つで全く異なる印象を受けますよね。
一見、「配色」というと高度なデザイン技術を必要とする様に思われますが、ルールさえ覚えてしまえば初心者でも自由自在な配色が可能です。
自分の伝えたい内容をよりダイレクトにユーザーへアピールするためにも配色のルールについて簡単に学んでみましょう。

今回はシリーズ【第一回】「色の三属性・色相」についてです。

【色の三属性について】

「色の性質」は「色相」「明度」「彩度」の3つの要素でできています。
この3つの要素のことを「色の三属性」と呼び、それぞれを調節することにより私たちは様々な色合いを作っているのです。

■色相とは?

色相とは、赤・青・黄色といったいわゆる「色み」の変化のことを指します。
この色相の中で最も基本的な色は、「赤」「黄」「青」の三原色と呼ばれる色です。

<色の三原色>

色の三原色
そしてこの「赤」「黄」「青」の3原色の間に「橙」「緑」「紫」の3色を並べると以下のようになります。

色相環

色相を最初に学習するにあたっては、ひとまず「赤」「橙」「黄」「緑」「青」「紫」の6色を覚えておくと便利です。
この6色の関係性を覚えておくことで、初心者でも簡単に「法則に則った配色」をすることができます。
では次の項目で配色の法則について触れていきます。

■反対色、類似色、同系色

色相関図の反対側にある色のことを「反対色」(補色)、隣にある色を「類似色」と言います。
そして、同じ色相に「黒」や「白」を混ぜあわせた色を「同系色」と言います。

反対色類似色
同系色

■色相の効果的な活用方法

色自体には主に2つの効果があります。
1つ目はクールでかっこいいイメージを作り出す、寒色系(青色など)の効果
2つ目は温かみがあり、活気のあるイメージを作り出す暖色系(赤・橙・黄)の効果です。
伝えたいイメージに沿って、暖色系・寒色系を使い分けてみましょう。

また、色相差をコントロールすることでも印象を変えることができます。
例えば、類似色でまとめると統一感や親しみのあるデザインになり、反対色を加えるとインパクトのある印象的なデザインに仕上げることができます。

↓色相差のない類似色だけの配色は統一感があるが締りがないようにも思える。非日常的な印象を受ける。
色相差のない類似色だけの配色は統一感があるが締りがないようにも思える。非日常的な印象を受ける。

↓緑の反対色である赤が加わることで全体に緊張感が生まれ、インパクトの有る印象的な配色に。このように、反対色を用いることで生き生きとしたインパクトの有る印象を作り出すことができる。
緑の反対色である赤が加わることで全体に緊張感が生まれ、インパクトの有る印象的な配色に。このように、反対色を用いることで生き生きとしたインパクトの有る印象を作り出すことができる。

以上、色相の説明となります。
色相の特性を活かしてPOPやサイトの表現を更に楽しんでみてくださいね。

■今回の記事のまとめ

色の三属性とは…「色相」「明度」「彩度」

色相…「色味の変化」のこと。最も基本的な色は「三原色」と呼ばれる「赤」「青」「黄」

反対色(補色)…色相環図の反対側にある色

類似色…色相環図で隣りにある色

同系色…同じ色相に「黒」や「白」を混ぜあわせた色

  

この記事を書いた人:中林 沙妃

口コミまってます

お役立ち情報

記事一覧

Exaについて

Exa(エグザ)は、店舗や企業を紹介する、地域情報掲載型ポータルサイトです。
日本全国の飲食店やアパレルショップ、雑貨店など、様々な業種の店舗情報を都道府県別に掲載し、紹介しています。

ページ上部へ戻る