Upgrade to Pro — share decks privately, control downloads, hide ads and more …

配⾊理論とカラー設計

F1e359b5fb3358d9051bcfaf43a4e3af?s=47 Designsprint
December 15, 2016

 配⾊理論とカラー設計

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

F1e359b5fb3358d9051bcfaf43a4e3af?s=128

Designsprint

December 15, 2016
Tweet

Transcript

  1. 配⾊理論とカラー設計 デザイン基礎講義 currently v 1.1

  2. マンセル表⾊系 アメリカの画家・マンセルが考えた色のものさし 「表⾊系」とは⾊彩を数理的に精密に記述する体系のこと

  3. マンセル表⾊系 アメリカの画家・マンセルが考えた色のものさし 「表⾊系」とは⾊彩を数理的に精密に記述する体系のこと

  4. ジャッドの⾊彩調和原理 配⾊理論 捕色の組み合わせ・同系色の組み合わせ オストワルトの⾊彩調和論 ビレンの⾊彩調和論 シュヴリュールの⾊彩調和論 ムーン&スペンサーの⾊彩調和論 ヨハネス・イッテンの⾊彩論 その他にも沢⼭の⾊彩理論がある。

  5. ジャッドの⾊彩調和原理 秩序の原理 一定の法則によって規則的に選ばれた⾊は調和する なじみの原理 ⾃然界の⾊、⾒慣れている配⾊は調和する 類似性の原理 共通性がある⾊同士は調和する 明瞭性の原理 配⾊する⾊の関係があいまいでなければ調和する

  6. None
  7. None
  8. なじみの原理 自然界の色、見慣れている配色は調和する Adobe Color CC (旧Adobe Kuler) カメラで撮った画像から調和する⾊を⾃動的に抽出する アプリ。 参考:

  9. ヨハネス・イッテンの⾊彩論 1.印象(視覚的) 2.表現(感情的) 3.構成(象徴的) 色彩は、美学的に「3つの観点」 から探求できる

  10. ヨハネス・イッテンの⾊彩論 1.印象(視覚的) 2.表現(感情的) 3.構成(象徴的) ⻘は、「目⽴つ」から(視覚的) ⻘は、「爽快感がある」から(感情的) ⻘は、「海を連想する」から(象徴的)

  11. ⾊相のイメージ効果 色(色相)は、人に心理的影響を与えることが できる。そしてある程度の傾向がある。 色の効果の一つとして知っておくと、有効な配 色の選択肢にすることができる。 潔白 男性的 情熱 沈静 元気

    自然 親しみ 高貴
  12. ⾊相のイメージ効果 白=「潔白」「清潔」「明るい」「正義」「無」など 光の反射が最も⾼い⾊であり、明度が⾼く、軽さを感じさせる効果 がある。どんな⾊とでも合う万能な⾊。 相性の悪い⾊の組み合わせにも白を挟むと⾃然とうまくいく。 ⿊=「男性的」「⾼級」「威厳」「死」「恐怖」など 光を吸収する⾊であり、堅く重く感じさせる効果がある。有彩⾊を 最も引き⽴たせる⾊。 赤=「情熱」「危険」「愛」「革命」「活気」など 気持ちを前向きにし、アクティブにする。彩度の⾼い⾚は最もがい

    きやすい。売上が伸びる⾊として、チラシによく使われる。 一般的に修正指示はこの⾊で入れる。 ⻘=「鎮静」「爽快」「清涼」「空」「海」「⽔」など 精神を沈静化させ落ち着かせ、集中⼒を⾼める効果がある。太陽光 の陰の部分は⻘みがかって⾒える。ビジネスの象徴としてよく使わ れる。
  13. ⾊相のイメージ効果 ⻩色=「元気」「活発」「明るい」「陽気」「快活」など ⻩⾊は⾒ているだけで⼼を弾ませ、楽しい気分にさせる効果がある。 純⾊中で明度が最も⾼く、明るく輝く⾊。 緑=「⾃然」「平和」「安全」「環境」「⽣命⼒」など 神経を鎮静させ、緊張を緩和させる効果がある。目を休める等、人の 体にやさしい⾊。 エコや⾃然の象徴。 オレンジ=「親しみ」「喜び」「にぎやか」「活⼒」「好奇⼼」など ビタミンカラーと呼ばれ、気持ちを陽気にする効果がある。ポジティ

    ブな印象が強いため、⾊々なシーンで使いやすい⾊。 白地に文字⾊でこの⾊を使うと可読性が⾼くないので注意が必要。 紫=「⾼貴」「優雅」「神秘」「知的」「不思議」など ⻘と⾚という相反する⾊が共存しているため「⾼貴と下品」「神秘と 不安」など⼆⾯性をもっている。 ⾃然界に少なく、染料が効果だった ため昔から⾼貴な人を象徴する⾊として使われた。
  14. 他にも色々あるが、 まずは、これらを参考に カラー設計を⾏う。

  15. 配⾊の注意点 彩度の⾼い色は、使⽤を避ける。 彩度の⾼い赤 彩度の⾼い⻘ 彩度を⼀段 落とす 彩度を⼀段 落とす #ff0000 #0033ff

    #fc2222 #3338fe 例) 理由: →ユーザに対してギラついて⾒づらいから →彩度が⾼い原⾊を使うと素人っぽいデザインに⾒えるから
  16. PSでの⾊指定 右上の色は⼀番彩度が ⾼いので使わない

  17. Webのカラー設計 メインカラーを 1⾊選ぶ 1. 配⾊理論を 参考にサブカラー の候補を選ぶ 2. 配⾊理論を参考に アクセントカラー

    の候補を選ぶ 3. Webのカラー設計は、他の媒体、プロダクトと違い、 独特のカラー設計法が確⽴させている。 配色を画⾯レイアウトやコンテンツと⼀緒に考えない。独⽴して考える。
  18. Webのカラー設計 1.メインカラー(1〜2⾊) 2.サブカラー(1~2色) 3.アクセントカラー(1~2色)

  19. Webのカラー設計 サイトの目的や コンセプトに最も合 致する配⾊を選ぶ 4. 文字⾊やグレーを 決める 5. 明度差のある同系 ⾊を決める

    6. 完成
  20. 事 例

  21. ある絵画教室のサイトを 制作します。 サイトの目的 ⾒込み客 1.新規顧客の開拓 2.既存顧客のサポート 40代から70代の男⼥。 絵を描くことに興味のある人 または過去に習った経験のある人 今ほかの教室へ通っている日人

    目的や客層を考慮し、Webのカラー設計 の手順に従って配色を決めていきます。
  22. 1.メインカラーを1⾊選ぶ がブランドカラー =メインカラー

  23. 2.配⾊理論を 参考にサブカラーの候補を選ぶ ↓メインカラー ヘクサードで選ぶ 明度差で選ぶ

  24. 3.配⾊理論を参考に アクセントカラーの候補を選ぶ ↓メインカラー トライアドで選ぶ オポーネントで選ぶ

  25. 4.サイトの目的やコンセプト に最も合致する配⾊を選ぶ 背景7:カラー3 メイン7、サブ2アクセント1

  26. 決めるのは、全体の色だけではない。 文字の色、テーブルに使うグレーなど 使⽤が想定できるほかの配色も細かく 決めること。

  27. 5.文字⾊やグレーを決める 6.明度差のある同系⾊を決める このようにして決めた対象のサイト独⾃の⾊⾒本を <カラープラン>または<カラースキーム>と呼ぶ。

  28. 実際のサイトに適用したところ

  29. 1.彩度が⾼い原色は使わない (20%程度再度を下げるか上げるかする) →彩度が⾼い原⾊を使うと素人っぽい デザインになってしまいます。 →ユーザに対しては、ギラついて⾒づらい 画⾯に⾒えます。 まとめ:Webのカラー設計のポイント 2.背景色に純粋な白、テキストに純粋な⿊は使わない (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/