Movatterモバイル変換

初心者向けデザイン講座第三回目「色編」 1!

今回のテーマは…「色」2!

今日の流れ1.色の基礎知識−色相、彩度、明度について3!2.デザインをする上での色の扱い−CMYK,RGBって？3.色が与えるイメージ−各色が人に与える一般的なイメージ4.実際の配色方法−どのように色を選べばいいのか？

まず覚えておくのが色には…。5!有彩色と無彩色があるということ。

色を表現するための主なモノサシは…6!色相彩度明度

赤、黄、青、緑などといった色み（色あい）を表す。虹は「赤→橙→黄…」と一定の順番で色が変わるが、この虹と同じ順番に色相をわっか状に並べたものを「色相環」という。「色相環」で近い一にあるほど類似性があったり、離れていると補色の関係であったりと、色相同士の関係がわかる。 7!色相

色の明るさを表す言葉。明るい色ほど白に近づき、暗い色ほど黒に近づいていく。9!明度

10!明度純色例：赤の場合

色の鮮やかさの度合いを表す言葉。彩度は色みが強く鮮やかな色ほど高く、純色に近づいていき、色みが弱くなるほど無彩色(グレー)に近づいていく。11!彩度

12!彩度純色例：赤の場合

13!つまり色というのは…色相という「色み」があり…。各色に明度・彩度の違いで色の幅がある。

14!ちなみに…この明度と彩度を組み合わせた概念を…「トーン」といいます。彩度明度

15!グラフィックデザインでは…。クライアントの要望を適切に表現する為に、適切な「色み」、「トーン」を選ぶ事が重要となる。

―デザインをする上での色の扱い。16!

17!Adobe Illustratorのカラーパレットにある「CMYK」,「RGB」などの違いを知っておく事がグラフィックデザイナーには必須条件となります。

18!・グレースケール「無彩色」（黒∼白）のみを扱う際に使う設定。・HSBH(色相)、S(彩度)、B(明度)で色を調整する設定。

19!・RGBR(Red:赤)、G(Green:緑)、B(Blue)の3原色で加法混色を使い色を調整する設定。・CMYKC(Cyan)、M(Magenta)、Y(Yellow)、K(Key plate)の4色で減法混色を使い色を調整する設定。この2つの違いを覚えておく事が重要!!

20!RGB赤、緑、青の光の3原色を使って幅広い色を再現する方法。PCのディスプレイやテレビなどで使われる。加法混色という手法により。各色を混ぜていくほど白に近づいていく。R(Red) G(Green) B(Blue)

21!CMYKシアン、マゼンタ、イエローのインクを使い、減法混色で色を再現する方法。理論上はCMYを混ぜれば純粋な黒が出来るが、技術上不可能なため、K(ブラック)を足して色を再現する。印刷物に使われる手法。C(Cyan) M(Magenta) Y(Yellow)

22!RGBカラーモード→Webやゲーム、映像などのスクリーンやディスプレイなどで使用するデザインの場合使用する。※Webデザインの場合ユーザーの使っているPCのディスプレイ機能によって色が変わる→これを解決するのがWebセーフカラーCMYKカラーモード→チラシや名刺、パンフレットなどの印刷物のデザインの場合使用する。つまり…この使い分けを正しく行いましょう。

23!RGBとCMYKの再現色の範囲人間の可視色域 RGBの再現色域CMYKの再現色域

24!RGBとCMYKの再現色の範囲人間の可視色域 RGBの再現色域CMYKの再現色域RGBとCMYKの再現色域に差がある。→CMYKの方が再現色域が狭い。

25!この再現色域の違いにより初心者デザイナーが陥るミス。↓PCで表示しているデータをプリントしたら色がくすんでしまう。

26!PCのディスプレイ→RGBカラーで表現される。紙への印刷→CMYKカラーモードで表現される。なぜこのような事が起こるのか。

27!PC(RGB)では表示できても紙への印刷(CMYK)では表示出来ない色があるということ。つまり…

28!印刷物のデザインをする場合は、各印刷所などが発行している、「色見本帳」を参考にデータを作る。これをなくす為に…。

―色が与えるイメージ29!

色は見る人に様々な心理的・生理的効果を与える働きがある。30!

暖色と寒色31!オレンジや赤のシャツを見ると暖かそうに、青のシャツを見ると涼しそうに感じるように色には温度感がある。

暖色と寒色32!暖色(赤∼黄)寒色(青緑∼青)中性色(黄緑∼緑)中性色(紫)

代表的な色のイメージ33!

赤 ■ ■ ■34!■具体的なイメージ・太陽・血・りんご・炎・口紅・消防車■抽象的なイメージ・愛・歓喜・情熱・強い・派手・危険・怒り・闘争的・活動的

ピンク ■ ■ ■35!■具体的なイメージ・桜・桃・撫子・春・女性・赤ちゃん■抽象的なイメージ・幸福・優しい・かわいい・甘い・若い・柔らかい・開放的・弱い・わがまま

だいだい ■ ■ ■36!■具体的なイメージ・炎・夕日・オレンジ・柿・にんじん・ビタミン■抽象的なイメージ・温かい・親しみやすい・明るい・快活・楽しい・健康・安い・低俗

黄 ■ ■ ■37!■具体的なイメージ・光・金・バナナ・レモン・信号・子供■抽象的なイメージ・希望・喜び・幸福・躍動・暖かい・にぎわい・注意・警告・騒がしい

緑 ■ ■ ■38!■具体的なイメージ・自然(山、森、草原、植物など)・信号・ピーマン・きゅうり■抽象的なイメージ・安全・平和・公平・生命・再生・癒し・新鮮・若い・未熟

青 ■ ■ ■39!■具体的なイメージ・空・海・水・夏・制服・信号■抽象的なイメージ・冷たい・静か・冷静・信頼・誠実・知性・爽快・憂鬱・孤独

紫 ■ ■ ■40!■具体的なイメージ・ぶどう・なす・スミレ・あじさい・ラベンダー・着物■抽象的なイメージ・高貴・神秘・古典的・和風・不吉・大人・死・悪魔・高級

□41!■具体的なイメージ・雪・雲・花嫁・ミルク・うさぎ・白衣 ■抽象的なイメージ・純粋・無垢・清潔・潔白・未来・新しい・善・真理・緊張

灰色 ■ ■ ■42!■具体的なイメージ・ビル・アスファルト・冬・ネズミ・大人・曇り空 ■抽象的なイメージ・あいまい・洗練・都会的・渋い・控えめ・上品・落ち着き・不安・不正

黒 ■43!■具体的なイメージ・闇・フォーマル・髪・カラス・葬儀・ファッション ■抽象的なイメージ・強い・高級・クール・恐怖・悲しい・死・反抗・不吉・威圧的

これらのイメージから適切な色みを選ぶ事が大切。44!

①色相を基準とした配色。46!

①色相を基準とした配色。47!色相環の角度の違い(色相差)により配色が分類される。

①色相を基準とした配色。48!例：赤を基準とした場合。 ■色相に共通性のある配色色相差0(同一色相)色相差1色相差2∼3全体的にまとまりのある配色となる。

①色相を基準とした配色。49!例：赤を基準とした場合。 ■色相にやや違いのある配色色相差4∼7色みに差があるため、変化を感じる配色となる。

①色相を基準とした配色。50!例：赤を基準とした場合。 ■色相に対照性のある配色色相差8∼10色相差が大きくアクセントの際に使われる。色相差11∼12(補色配色)

②トーンを基準とした配色。51!

②トーンを基準とした配色。52!■ドミナントカラー同一色相でトーン(明度・彩度)の違う色で配色する方法。同一色相で配色されるため、どのトーンを使用しても統一感を出すことがでいる。

②トーンを基準とした配色。53!■ドミナントトーン同じトーン(明度・彩度)の違う色相で配色する方法。同一トーンで配色されるため、多色の色相をつかっても統一感がでる。

③実践的な配色55!今まで学んできた色の知識をもとに、実際のグラフィックデザインをする上での配色の考え方を知る。

③実践的な配色56!デザインするものをベースカラー、メインカラー、アクセントカラーの3つの割合でわける。ベースカラー70％メインカラー 25％アクセントカラー 5％

③実践的な配色57!ベースカラー70％メインカラー 25％アクセントカラー 5％ ■ベースカラー背景などの大きい面で使われる色。■メインカラー文字などのメインとして使われる色。■アクセントカラー特に強調したい部分に使われる色。

③実践的な配色58!ベースカラー70％メインカラー 25％アクセントカラー 5％ ■メインカラーの選び方・自分(クライアント)が伝えたいコンセプトなどを適切に表せる色を選ぶ。・文字などに使われるため、可読性を意識してあまり明度の高い色を選ばないようにする。可読性が低い可読性が低い可読性が低い可読性が低い

③実践的な配色59!ベースカラー70％メインカラー 25％アクセントカラー 5％ ■ベースカラーの選び方・背景などの広い色面に使われるので、白や明度が高く彩度が低いトーンのものを選ぶ方が良い。このあたりのトーンが良い。テキストテキストテキストテキストテキストテキスト × ×

③実践的な配色60!ベースカラー70％メインカラー 25％アクセントカラー 5％ ■ベースカラーの選び方先ほどのドミナントカラーのようにメインカラーと同じ色相のトーンを使うと統一感が出る。→ → → メインカラーメインカラーメインカラー

③実践的な配色61!ベースカラー70％メインカラー 25％アクセントカラー 5％ ■アクセントカラーの選び方強調色なので、メインカラーと補色(色相環で正反対の位置の色)となる色を選ぶ。

③実践的な配色62!ベースカラー70％アクセントカラー 5％ ■3色以上のカラーを使う場合。メインカラーやベースカラー、アクセントカラーの比率は変えずに、「ドミナントカラー」や「ドミナントトーン」の理論を使って分割していく。メインカラー 25％

63!今までの文字や形と同様にグラフィックデザインではこれらの知識を元にクライアントの求める適切な色を「選ぶ」能力が大切となります。

ありがとうございました!!!!!!65!

参考資料「色の事典」色彩活用研究所サミュエル監修西東社「センスのいらない配色講座」Mariko Yamaguchi-Slideshare-http://www.slideshare.net/marippe/ss-900331766!

Movatterモバイル変換

Change Language

「初心者向けデザイン講座」 -東洋美術学校（第三回目：色編）

Recommended

More Related Content

What's hot

Viewers also liked

Similar to 「初心者向けデザイン講座」 -東洋美術学校（第三回目：色編）

More from schoowebcampus

「初心者向けデザイン講座」 -東洋美術学校（第三回目：色編）