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

Webデザイナーのための
配色セオリー
伊達千代
2013/10/4
13年10月4日金曜日

自己紹介
伊達千代（だてちよ）
グラフィックデザイナー／ライター
電子製品メーカーデザイン室勤務を経て独立
株式会社TART DESIGN OFFICE代表

配色のセオリーとは

問題1
この色を人に伝えたいとき、
どの表現を選びますか？
下から選んでください。
1. 空気の澄んだ田舎で
見る夕焼けの赤
2. 鮮やかで人目を惹き、
情熱を感じさせる赤
3. #F44053または
R:249/G:89/B:101
4. やや橙よりの赤
彩度/高、明度/低め

配色とは
無限とも言える「色」の中から「色」を探し出す作業

配色で多い問題
センスが悪いといい配色はできない？
色を選ぶ判断基準はどこにある？
他の作業者やクライアントとどうやって
イメージを共有する？
セオリーを知って
効果的で、効率的で、自信の持てる配色を！

配色のセオリーとは
色の持つ、あるいは色と色の組み合わせ
によって起きる普遍的な「効果」
色を選ぶ際の基準（効率）
配色を裏付ける言葉と説得力
（プロとしての責任を果たす）

プロとして配色に責任を持つこと
なぜその「色」なのか説明できる
その色によってどんな効果が生まれるか
を計算し、配色による利益をもたらす
効率のよい配色を行う
裏付け・調査（確認作業）をする

授業概要
正確な色の表現
色の属性／色の名前
色の持つ働きと機能
色の持つイメージ／誰もが見やすい配色／調和のとれ
た配色／強調のための配色
配色の実践
配色トレーニング／便利なツール／イメージマップ

正確な色の表現

色を表す言葉（属性・色相）
色相
色相が近い・遠い
（離れている）
補色

色を表す言葉（属性・明度）
明度
明度が高い明度が低い
明るい暗い

色を表す言葉（属性・彩度）
彩度
彩度が高い彩度が低い
鮮やか鈍い
純色無彩色

色を表す言葉（属性・彩度と明度）
純色
無彩色
高
明度
低
低彩度高

A B
C D
色を三属性で表してみよう

色の名前の例（名称・自然・文化）
とき（鴇）色
つつじ（躑躅）色
紅海老茶
こうじ（柑子）色
中黄（ちゅうき）
若竹色
白群（びゃくぐん）
露草色
しょうぶ（菖蒲）色
チャイニーズレッド
シーグリーン
ナイルブルー
ウイスタリア
ローズレッド
パールグレイ

色の名前を知る
http://www.colordic.org/w/

問題2
色と名前との組み合わせを
正しくつないでください
1. 鶸色（ひわいろ）
2. 金茶（きんちゃ）
3. 煤竹色（すすたけいろ）
A
B
C

色の働きと機能

気持ちが前向きになる
暖かく感じる
食欲を増進させる
集中力を高める
血圧を下げる
食欲を減退させる
疲れをいやす
鎮静作用、緊張緩和作用
穏やかな気持ちになる
集中力を発揮させる
記憶力を高める
注意を促す
清潔な印象
軽く見える
純粋さを感じる
気持ちを引き締める
暗い気持ちになる
重く見える
赤
青
緑
黄
白
黒

R
BG
YR
G
RP
B
Y
GY
P
PB
暖色
寒色

問題3
どちらの色の組み合わせの方が見やすいですか？
また、その理由も答えてください
A B

視認性

視認性
http://www.verticalgardendesign.com/

視認性
配色を考える上でもっとも重要
視認性を決めるのは「明度差」
強調したい順に明度差がつくように配色
をする
ユニバーサルの観点においても重要

誘目性

誘目性
http://www.sullivannyc.com/

誘目性
誘目性の高い色は、赤∼黄色の彩度の高
い色
色を組み合わせる際に明度差をつけるこ
とで、より誘目性は高まる

進出色・後退色
http://www.established1986.com/#/Home

http://www.moozedesign.com/

寒色系の色や彩度・明度の低い色は奥に
下がって見え、暖色系の色や彩度・明度
の高い色は手前に飛び出して見える
目立たせたい部分と、他との差を付けた
い場合に有効なセオリー

配色の手順
イメージ
調和メリハリ

調和のとれた配色とは
色相／彩度をえる
色相をバランスよく組み合わせる
トーンをえる
無彩色の活用
色数を絞る

色相／彩度の統一
http://www.hyundai-veloster.eu/

色相配色

色相配色
http://www.sturdy-style.com/

トーン配色
ビビッドストロング
ダルグレイッシュ
ブライト
ライト
ペール
ライト
グレイッシュ
ベリーペール
ディープ
ダーク
ダーク
グレイッシュ
http://www.sikiken.co.jp/pccs/pccs04.html
参考：日本色研事業株式会社

トーン配色
http://www.rolanddg.co.jp/metallicworld/

無彩色の活用

無彩色の活用
http://www.apple.com/jp/

色数をしぼる
http://www.kazepro.com/

問題4
見本のデザインで調和のとれた配色の
ために使われている手法は？

UIと配色
http://www.apple.com/jp/

カラーイメージの定着
http://www.daichi.or.jp/

グローバルカラー・パーソナルカラー
配色には、その「場」にふさわしい色の
使い方がある
よりグローバルな観点が求められるもの
（公共性・アクセシビリティ・UI）にと
っての「色」は、優先度が低い
「色」は、パーソナルなもの

強調のためのセオリー
対比

明度対比

色相対比
http://www.windowsphone.com/en-us

彩度対比
http://craftingtype.com/

面積対比

問題5
見本のデザインで強調のため
に使われている配色手法は？

配色の実践

配色のトレーニングとは？

イメージの言語化
例：スイーツのような甘い配色
最近流行の、カラフルに着色された
カップケーキのような配色
甘いものは快楽でもあり、背徳的
でもある。どこかに辛味も？

イメージの言語化

イメージスケール
あどけない
子供らしい
ユーモラスな
たのしい
ポップな
カジュアルな
にぎやかな
強烈な
行動的な
エネルギッシュな
たくましい
野性的な
豪華な
ぜいたくな
魅惑的な
温厚な
くつろいだ
家庭的な
のんびりした
甘美なロマンチックな
清麗な
うるおいのある
新鮮な
洗練された
スマートな
知的な
風流な
エレガントな
気品のある
女らしい
清潔な
さわやかな
青春の
若々しい
明快な
スピーディな
モダンな
合理的な
緻密な
おごそかな
風格のある
本格的な
貫録のある
伝統的な
味わい深い
ダンディな
真面目な
優雅な
やすらいだ
あどけない
子供らしい
ユーモラスな
たのしい
ポップな
カジュアルな
にぎやかな
温厚な
くつろいだ
家庭的な
のんびりした
甘美なロマンチックな
清麗な
うるおいのある
新鮮な
洗練された
スマートな
エレガントな
気品のある
女らしい
清潔な
さわやかな
青春の
若々しい
明快な
優雅な
やすらいだ
http://www.ncd-ri.co.jp/
参考：日本カラーデザイン研究所

問題6
見本のデザインの配色イメージを
自分なりに「言葉」で表してください
http://www.benitos-hat.com/

イメージマップ

Kuler
https://kuler.adobe.com/

まとめ
「色」を言葉で表すことの重要性
「説得力」のための配色セオリー
イメージの具体化、調和と強調の循環
配色スキルは磨くほど高くなる

プロとして配色に責任を持つ
なぜその「色」なのか（理由）
その色によってどんな効果が生まれてい
るのか（メリット）
プロらしさ（説得力）
裏付け（調査）

任意のWebサイト（紙でもディスプレイ
などでもOK）の色のイメージを言語化
課題／配色の分析をしてみよう

質疑応答

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

More from webcampusschoo

More from webcampusschoo (20)

Recently uploaded

Recently uploaded (11)

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