デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

デザイン理論の基礎

 

本記事ではデザイン・アートの基本中の基本、「配色・色彩・彩度明度」という色にまつわる基礎知識をスクーの授業を元にご紹介。中学校の美術の時間に少し取り組んだくらいで、美術系の大学や専門学校に通っていないと触れる機会がない色についての知識。情報を正しく伝達するデザインをするために、誰もが知っておきたい理論ありきの配色選びを東洋美術学校の授業、『明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】から学んでいきます!

 


■目次

1.配色ってなに?

2.色相、色相環ってなに?

3.明度ってなに?

4.彩度ってなに?


 

1. 配色ってなに?


”種々の色を取り合わせること。色のとり合わせ。”(wikipedia「配色」より引用)

色相・明度・彩度という色の三属性、モノサシを調整し、然るべきところに置くこと。

デザインや、イラストレーションに取り組むときに専門知識があると拠り所になりそうです。WEBデザイナー学部でWEBデザインをしていくと、バナーやロゴのデザイン、また、サイトのビジュアルデザインをするときに、配色の知識があると効果的なデザインを作ったり、デザインについてクライアントへ説明ができるなどで学習の成果が得られそうですね。

 

2. 色相、色相環ってなに?


「色相」について

デザイン理論の基礎

(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

赤、黄、青、緑などといった色み(色あい)を表します。「虹色」をわっか状に並べたものを中学校や高校での美術の時間に見た記憶がある人も多いのでは? 色相は英語では「hue」と言います。我々が、「空=青」「森=緑」というように思い浮かべるるそれぞれの色を区別できるのは色相(色合い)があるからです。これからご紹介する、「色相/明度/彩度」は「色合い/明るさ/鮮やかさ」と言い換えると覚えやすいですね。

 

色相環(=虹色をわっか状にならべたもの)について

虹と同じ順番に色相をわっか状に並べたもの。12色や24色のものがあったりします。この円環に近いと、似ている色で、一方離れていると補色の関係(反対色と呼ぶこともあります)と言います。補色の関係の配色をすると目立たせる効果を発揮します。赤と緑などは補色の関係にあるので、セブン-イレブンのロゴは補色関係にあると言えますね。

ちなみに、デザイナー御用達の(HUE/ 360)というツールは、色相環で配色を自動で選んでくれます。色相環を頭に入れながらも迷ったら「HUE/ 360」を使ってみてもいいかもしれませんね。

色相環|デザイン理論の基礎

(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

※ここに白や黒がないのは、有彩色のみの構成になっているせいだそうです。

 

3. 明度ってなに?


明度について

色の明るさを表す言葉。明度は英語では「value, brightness」と言いいます。明るい色ほど白に近づき、暗い色ほど黒に近づいていきます。明度は次にご紹介する「彩度」とセットで使われたりします。デザインの現場だと、クライアントから「明度下げて、彩度上げてくださ〜い」などと指示されることがあります。即座に応えられるように、下の図を参考にしながらPhotoshopを触ったりしながらチェックしてみてくださいね。

↓の図だと、縦のラインが明度を示していますね。

色相環|デザイン理論の基礎

(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

 

4. 彩度ってなに?


彩度について

色の鮮やかさを表す度合を表す言葉です。彩度「chroma, saturationは色みが強く鮮やかな色ほど高く、純色なビビッドな色に近づいていき、色みが弱くなるほど無彩色(白黒・グレー)に近づいていきます。色は「有彩色」のようにカラーがある色とグレーや白黒といった、「無彩色」に分けられます。

縦のラインが明度だったのに対し、こちらは横のラインで、彩度を示していますね。ちなみに、これら明度と彩度を組み合わせた概念が「トーン」と言われるものです。

色相環|デザイン理論の基礎

(引用:明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】

 

他にもあるよ! スクーの配色にまつわる授業



Webデザインのための配色セオリー

色の働きと機能についての授業。

「この色ってどんな意味?」「効果的な色の組み合わせは?」ということに興味がある方にオススメです。

 

色を変えれば、その資料はもっと伝わる

複雑な知識を身につけなくてもできる、簡単な色のまとめ方についての授業。

自分で見ても資料がイマイチなのは理解できるのに、解決方法の糸口が全くつかめない方にオススメです。

 


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!



スクー教務課 瀧野

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×