配⾊理論とカラー設計

Webデザイン・UIデザインをこれから学びたい方、エンジニアの方、経営者の方向けの基礎知識をまとめました。

Transcript

1. 配⾊理論とカラー設計 デザイン基礎講義 currently v 1.1
2. マンセル表⾊系 アメリカの画家・マンセルが考えた色のものさし 「表⾊系」とは⾊彩を数理的に精密に記述する体系のこと
3. マンセル表⾊系 アメリカの画家・マンセルが考えた色のものさし 「表⾊系」とは⾊彩を数理的に精密に記述する体系のこと
4. ジャッドの⾊彩調和原理 配⾊理論 捕色の組み合わせ・同系色の組み合わせ オストワルトの⾊彩調和論 ビレンの⾊彩調和論 シュヴリュールの⾊彩調和論 ムーン＆スペンサーの⾊彩調和論 ヨハネス・イッテンの⾊彩論 その他にも沢⼭の⾊彩理論がある。
5. ジャッドの⾊彩調和原理 秩序の原理 一定の法則によって規則的に選ばれた⾊は調和する なじみの原理 ⾃然界の⾊、⾒慣れている配⾊は調和する 類似性の原理 共通性がある⾊同士は調和する 明瞭性の原理 配⾊する⾊の関係があいまいでなければ調和する
8. なじみの原理 自然界の色、見慣れている配色は調和する Adobe Color CC （旧Adobe Kuler） カメラで撮った画像から調和する⾊を⾃動的に抽出する アプリ。 参考：
9. ヨハネス・イッテンの⾊彩論 １．印象（視覚的） ２．表現（感情的） ３．構成（象徴的） 色彩は、美学的に「３つの観点」 から探求できる
10. ヨハネス・イッテンの⾊彩論 １．印象（視覚的） ２．表現（感情的） ３．構成（象徴的） ⻘は、「目⽴つ」から（視覚的） ⻘は、「爽快感がある」から（感情的） ⻘は、「海を連想する」から（象徴的）
11. ⾊相のイメージ効果 色（色相）は、人に心理的影響を与えることが できる。そしてある程度の傾向がある。 色の効果の一つとして知っておくと、有効な配 色の選択肢にすることができる。 潔白 男性的 情熱 沈静 元気 自然 親しみ 高貴
12. ⾊相のイメージ効果 白＝「潔白」「清潔」「明るい」「正義」「無」など 光の反射が最も⾼い⾊であり、明度が⾼く、軽さを感じさせる効果 がある。どんな⾊とでも合う万能な⾊。 相性の悪い⾊の組み合わせにも白を挟むと⾃然とうまくいく。 ⿊＝「男性的」「⾼級」「威厳」「死」「恐怖」など 光を吸収する⾊であり、堅く重く感じさせる効果がある。有彩⾊を 最も引き⽴たせる⾊。 赤＝「情熱」「危険」「愛」「革命」「活気」など 気持ちを前向きにし、アクティブにする。彩度の⾼い⾚は最もがい きやすい。売上が伸びる⾊として、チラシによく使われる。 一般的に修正指示はこの⾊で入れる。 ⻘＝「鎮静」「爽快」「清涼」「空」「海」「⽔」など 精神を沈静化させ落ち着かせ、集中⼒を⾼める効果がある。太陽光 の陰の部分は⻘みがかって⾒える。ビジネスの象徴としてよく使わ れる。
13. ⾊相のイメージ効果 ⻩色＝「元気」「活発」「明るい」「陽気」「快活」など ⻩⾊は⾒ているだけで⼼を弾ませ、楽しい気分にさせる効果がある。 純⾊中で明度が最も⾼く、明るく輝く⾊。 緑＝「⾃然」「平和」「安全」「環境」「⽣命⼒」など 神経を鎮静させ、緊張を緩和させる効果がある。目を休める等、人の 体にやさしい⾊。 エコや⾃然の象徴。 オレンジ＝「親しみ」「喜び」「にぎやか」「活⼒」「好奇⼼」など ビタミンカラーと呼ばれ、気持ちを陽気にする効果がある。ポジティ ブな印象が強いため、⾊々なシーンで使いやすい⾊。 白地に文字⾊でこの⾊を使うと可読性が⾼くないので注意が必要。 紫＝「⾼貴」「優雅」「神秘」「知的」「不思議」など ⻘と⾚という相反する⾊が共存しているため「⾼貴と下品」「神秘と 不安」など⼆⾯性をもっている。 ⾃然界に少なく、染料が効果だった ため昔から⾼貴な人を象徴する⾊として使われた。
14. 他にも色々あるが、 まずは、これらを参考に カラー設計を⾏う。
15. 配⾊の注意点 彩度の⾼い色は、使⽤を避ける。 彩度の⾼い赤 彩度の⾼い⻘ 彩度を⼀段 落とす 彩度を⼀段 落とす #ff0000 #0033ff #fc2222 #3338fe 例） 理由： →ユーザに対してギラついて⾒づらいから →彩度が⾼い原⾊を使うと素人っぽいデザインに⾒えるから
16. PSでの⾊指定 右上の色は⼀番彩度が ⾼いので使わない
17. Webのカラー設計 メインカラーを １⾊選ぶ １． 配⾊理論を 参考にサブカラー の候補を選ぶ ２． 配⾊理論を参考に アクセントカラー の候補を選ぶ ３． Webのカラー設計は、他の媒体、プロダクトと違い、 独特のカラー設計法が確⽴させている。 配色を画⾯レイアウトやコンテンツと⼀緒に考えない。独⽴して考える。
18. Webのカラー設計 １．メインカラー（１〜２⾊） ２．サブカラー（１～２色） ３．アクセントカラー（１～２色）
19. Webのカラー設計 サイトの目的や コンセプトに最も合 致する配⾊を選ぶ ４． 文字⾊やグレーを 決める ５． 明度差のある同系 ⾊を決める ６． 完成
20. 事 例
21. ある絵画教室のサイトを 制作します。 サイトの目的 ⾒込み客 １．新規顧客の開拓 ２．既存顧客のサポート ４０代から７０代の男⼥。 絵を描くことに興味のある人 または過去に習った経験のある人 今ほかの教室へ通っている日人 目的や客層を考慮し、Ｗｅｂのカラー設計 の手順に従って配色を決めていきます。
22. １．メインカラーを１⾊選ぶ がブランドカラー ＝メインカラー
23. ２．配⾊理論を 参考にサブカラーの候補を選ぶ ↓メインカラー ヘクサードで選ぶ 明度差で選ぶ
24. ３．配⾊理論を参考に アクセントカラーの候補を選ぶ ↓メインカラー トライアドで選ぶ オポーネントで選ぶ
25. ４．サイトの目的やコンセプト に最も合致する配⾊を選ぶ 背景７：カラー３ メイン７、サブ２アクセント１
26. 決めるのは、全体の色だけではない。 文字の色、テーブルに使うグレーなど 使⽤が想定できるほかの配色も細かく 決めること。
27. ５．文字⾊やグレーを決める ６．明度差のある同系⾊を決める このようにして決めた対象のサイト独⾃の⾊⾒本を ＜カラープラン＞または＜カラースキーム＞と呼ぶ。
28. 実際のサイトに適用したところ
29. １．彩度が⾼い原色は使わない （20%程度再度を下げるか上げるかする） →彩度が⾼い原⾊を使うと素人っぽい デザインになってしまいます。 →ユーザに対しては、ギラついて⾒づらい 画⾯に⾒えます。 まとめ：Ｗｅｂのカラー設計のポイント ２．背景色に純粋な白、テキストに純粋な⿊は使わない （3〜5%程明度を落とした白・⿊にする） →純粋な白・⿊は明度差があり過ぎてコントラスト が⾼すぎます。 “配⾊“は、センスや感覚ではなく、理論的に選ぶこと。 センスや感覚で配⾊すると、お客様や周りのスタッフも“感覚的に好き”“嫌い”と と感覚的にコメントされます。こうなると、なかなか決まらずらちがあかなくな るので注意が必要です。⾃分が配⾊の説明ができるよう理論武装する必要がある のです。
30. 配⾊ツール ネット上には無料で使える配⾊ツールが沢⼭あります。 参考にために利用してみるのは、 いいことですが、あまり頼りすぎると 本末転倒になってしまう恐れがあるので、 注意が必要。
31. ムーン＆スペンサーの⾊彩調和論をベースにした配⾊ツール。 シンプルで使いやすい。 HUE/360 http://hue360.herokuapp.com/
32. 画像から調和する⾊を拾ってくれ、保存ができる。 Adobe Color CC https://color.adobe.com/ja/create/color-wheel/
33. 今回習得した配⾊理論のいくつかが実際に試せるツール。 前の配⾊に戻せるアンドゥ機能がありがたい。 Paletton Color Scheme Designer http://paletton.com/