Design デザイン・UI

 
デザイン・UI学び

5分で学べるカラーデザインの基礎!

みなさま、こんにちは!

デザインを考える際の重要な要素のひとつとして「カラー」があります。
私もデザインを学びはじめたばかりのひよっこ。今回はカラーデザインの基礎中の基礎をご紹介します。

ママでも、在宅フリーランス。
楽しくやりがいのある仕事、自分らしい生き方。仕事も家庭も大切にするためのすてきな生き方を始めてみませんか?

RGBとCMYKってなにが違うの?

rgb-cmyk

RGBとは光の3原色のこと。主にWebデザインで使用。

赤(Red)、緑(Green)、青(Blue)の3色の頭文字をとってRGB。光の3原色と呼ばれるこの3色を使ってさまざまな色をつくりだすことができます。3色を等量で混ぜ合わせると白になるという特徴が。
WEBサイトなどパソコンのディスプレイで表示されるものはすべてRGBカラーで制作されています。

CMYKとは色の3原色のこと。主にグラフィックデザインで使用。

色の3原色であるC(シアン:cyan)、M(マゼンタ:Magenta)、Y(イエロー:Yellow)にBlackのKを組み合わせてCMYK。こちらは3色を等量ずつ混ぜ合わせることで徐々に暗くなっていき、最後は黒になります。
印刷物制作の際に使用されています。

色の三属性とは

色には「色相」「明度」「彩度」の3つの属性があります。まずはカラーデザインの基礎である三属性を知っていきましょう。

色相とは色味のこと

pccshue
色相とは、いわゆる赤・青・黄色・緑といった色味のことを指します。上は色相を円状に配置した「色相環」と呼ばれるもの。
色相環上で、あるひとつの色と反対に位置する色のことを「補色」と言い、お互いの色をより引き立てあうことができます。

また、色によっても与える印象が異なるので、与えたい印象からを色選びをしてみてもいいですね!

  • 赤……情熱や愛情・活動的。(怒り・危険も意味し警告色とも呼ばれています)
  • オレンジ……陽気・元気・楽しさ・暖かさ・派手。
  • 黄色……快活・躍動・希望・幸福・明るさ・あでやか・ほのぼの・まぶしさ。
  • 緑……健康・自然・若さ・新鮮・有望・平静・平和・やすらぎ。
  • 青……冷たさ・爽やか・誠実・静けさ・寂しさ・透明感・清潔。
  • 紫……高貴・不安・不健康・優雅・嫉妬・神秘・ミステリアス
  • 黒……高級感、上品、男性的、モダン、クール、不安。
  • 白……純粋・善・平和・敬意・無機質・明るい・無限。

 

明度とは色の明るさのこと

meido

「明度」とは色の明るさのことです。黄色と緑であれば黄色の方がより明るい色です。つまり、明度が高いほど白に近づき、低くなるほど黒に近くなります。
上の画像では、右が明度高め。左が明度が低めです。明け方と夕方のような違いになりましたね。

「彩度」とは色の鮮やかさのこと

saido

彩度は色の鮮やかさを意味します。上の画像だと右が彩度高め、左が彩度低めになります。
今回のイチゴのケーキだと彩度高めの方がより鮮やかでおいしそう♪彩度を低めにするとスモーキーで柔らかな印象に。彩度はもっとも低くするとモノクロになりますよ。

 

まとめ

そもそも、Webデザインで使う色味と、グラフィクデザイン(雑誌、パンフレット、名刺等)で使う色味は違うのです!!RGBとCMYKの違いは、初心者の方はぜひ押さえておきたいポイントです。

RGB:Webデザイン

CMYK:印刷するもの

まずは、ここだけでも覚えておきましょう!

ママでも、在宅フリーランス。
楽しくやりがいのある仕事、自分らしい生き方。仕事も家庭も大切にするためのすてきな生き方を始めてみませんか?

筆者も、そんなことは意識せずにフォトショップで名刺を作成して、RGBカラーを使用していましたので、当然印刷した時に色味が変わってしまいました。

ただ、当時はRGBとCMYKの違いではなく、プリンターの故障のせいにしてました。。(笑)

懐かしい過去の思い出ですね。

この記事を書いた人


近藤れおな(こんどう・れおな)
青山学院大学卒業後、株式会社パソナ入社。人材コンサルタントとして、大手通信会社や外資系ホテルの採用・育成に携わる。 大学時代からパソコンは友達で、サイト制作やブログ作成・youtubeに熱狂する。 元々、ミュージシャンになりたかったが、巡り巡ってアイドルのプロデュースやマネジメントをするようになる。 育成・Web・音楽を軸に多方面で活躍中。尊敬する人物はイチローと松本人志。
タグ

自分を変えるチャンス、チャレンジするタイミングです。
始めてみるなら、未経験からでもWebデザイナーや動画クリエイターのプロを
目指せるスクールがデジハリのスタジオ横浜です。!
 最新記事