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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

1!

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

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

―色の基礎知識。
4!

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

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

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

8!
色相環(12色)

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

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

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

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

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

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

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

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

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

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

19!
・RGB
R(Red:赤)、G(Green:緑)、
B(Blue)の3原色で加法混色を使
い色を調整する設定。
・CMYK
C(Cyan)、M(Magenta)、
Y(Yellow)、K(Key plate)の4色
で減法混色を使い色を...

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

B(Blu...

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

22!
RGBカラーモード
→Webやゲーム、映像などのスクリーンやディスプレイ
などで使用するデザインの場合使用する。
※Webデザインの場合ユーザーの使っているPCのディ
スプレイ機能によって色が変わる→これを解決するのが
Webセーフカラ...

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!

―実際の配色技法
45!

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

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

①色相を基準とした配色。
48!
例：赤を基準とした場合。

■色相に共通性のある配色
色相差0(同一色相)
色相差1
色相差2∼3
全体的にまとまりのある配色となる。

①色相を基準とした配色。
49!
例：赤を基準とした場合。

■色相にやや違いのある配色
色相差4∼7
色みに差があるため、変化を感じる配色となる。

①色相を基準とした配色。
50!
例：赤を基準とした場合。

■色相に対照性のある配色
色相差8∼10
色相差が大きくアクセントの際に使われる。
色相差11∼12
(補色配色)

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

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

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

③実践的な配色
54!

③実践的な配色
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色以上のカラーを使う場合。
メインカラーやベースカラー、アクセントカラーの
比率は変えずに、「ドミナントカラー」や「ドミナ
ントトーン」の理論を使っ...

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

質疑応答
64!

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

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

色彩センスのいらない配色講座 by Mariko Yamaguchi 3066460 views
Webデザインのための配色セオリー by webcampusschoo 102705 views
[データマイニング+WEB勉強会][R勉強会] はじめてでもわかる統... by Koichi Hamada 15507 views
青年海外協力隊・フィールド調査団の最終報告書 by Daisuke Miyazaki 186054 views
色で失敗しない為に〜理論に基づく配色フロー〜 by Yuudai Tachibana 573045 views
「宇宙起業家」養成カリキュラム--3限目：宇宙技術と商業宇宙プロジェク... by schoowebcampus 1085 views

View on Slideshare

1 of 66 Ad

View on Slideshare

1 of 66 Ad