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

61,788 views

Published on

schoo WEB-campus
http://schoo.jp/class/236

Published in: Business
2 Comments
60 Likes
Statistics
Notes
No Downloads
Views
Total views
61,788
On SlideShare
0
From Embeds
0
Number of Embeds
53,174
Actions
Shares
0
Downloads
5
Comments
2
Likes
60
Embeds 0
No embeds

No notes for slide

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

  1. 1. Webデザイナーのための 配色セオリー 伊達千代 2013/10/4 13年10月4日金曜日
  2. 2. 自己紹介 伊達千代(だてちよ) グラフィックデザイナー/ライター 電子製品メーカーデザイン室勤務を経て独立 株式会社TART DESIGN OFFICE代表 13年10月4日金曜日
  3. 3. 配色のセオリーとは 13年10月4日金曜日
  4. 4. 問題1 この色を人に伝えたいとき、 どの表現を選びますか? 下から選んでください。 1. 空気の澄んだ田舎で 見る夕焼けの赤 2. 鮮やかで人目を惹き、 情熱を感じさせる赤 3. #F44053または R:249/G:89/B:101 4. やや橙よりの赤 彩度/高、明度/低め 13年10月4日金曜日
  5. 5. 配色とは 無限とも言える「色」の中から「色」を探し出す作業 13年10月4日金曜日
  6. 6. 配色で多い問題 センスが悪いといい配色はできない? 色を選ぶ判断基準はどこにある? 他の作業者やクライアントとどうやって イメージを共有する? セオリーを知って 効果的で、効率的で、自信の持てる配色を! 13年10月4日金曜日
  7. 7. 配色のセオリーとは 色の持つ、あるいは色と色の組み合わせ によって起きる普遍的な「効果」 色を選ぶ際の基準(効率) 配色を裏付ける言葉と説得力 (プロとしての責任を果たす) 13年10月4日金曜日
  8. 8. プロとして配色に責任を持つこと なぜその「色」なのか説明できる その色によってどんな効果が生まれるか を計算し、配色による利益をもたらす 効率のよい配色を行う 裏付け・調査(確認作業)をする 13年10月4日金曜日
  9. 9. 授業概要 正確な色の表現 色の属性/色の名前 色の持つ働きと機能 色の持つイメージ/誰もが見やすい配色/調和のとれ た配色/強調のための配色 配色の実践 配色トレーニング/便利なツール/イメージマップ 13年10月4日金曜日
  10. 10. 正確な色の表現 13年10月4日金曜日
  11. 11. 色を表す言葉(属性・色相) 色相 色相が近い・遠い (離れている) 補色 13年10月4日金曜日
  12. 12. 色を表す言葉(属性・明度) 明度 明度が高い明度が低い 明るい暗い 13年10月4日金曜日
  13. 13. 色を表す言葉(属性・彩度) 彩度 彩度が高い彩度が低い 鮮やか鈍い 純色無彩色 13年10月4日金曜日
  14. 14. 色を表す言葉(属性・彩度と明度) 純色 無彩色 高 明度 低 低 彩度 高 13年10月4日金曜日
  15. 15. A B C D 色を三属性で表してみよう 13年10月4日金曜日
  16. 16. 13年10月4日金曜日
  17. 17. 色の名前の例(名称・自然・文化) とき(鴇)色 つつじ(躑躅)色 紅海老茶 こうじ(柑子)色 中黄(ちゅうき) 若竹色 白群(びゃくぐん) 露草色 しょうぶ(菖蒲)色 チャイニーズレッド シーグリーン ナイルブルー ウイスタリア ローズレッド パールグレイ 13年10月4日金曜日
  18. 18. 色の名前を知る http://www.colordic.org/w/ 13年10月4日金曜日
  19. 19. 問題2 色と名前との組み合わせを 正しくつないでください 1. 鶸色(ひわいろ) 2. 金茶(きんちゃ) 3. 煤竹色(すすたけいろ) A B C 13年10月4日金曜日
  20. 20. 色の働きと機能 13年10月4日金曜日
  21. 21. 色の働きと機能 気持ちが前向きになる 暖かく感じる 食欲を増進させる 集中力を高める 血圧を下げる 食欲を減退させる 疲れをいやす 鎮静作用、緊張緩和作用 穏やかな気持ちになる 集中力を発揮させる 記憶力を高める 注意を促す 清潔な印象 軽く見える 純粋さを感じる 気持ちを引き締める 暗い気持ちになる 重く見える 赤 青 緑 黄 白 黒 13年10月4日金曜日
  22. 22. 色の働きと機能 13年10月4日金曜日
  23. 23. 色の働きと機能 13年10月4日金曜日
  24. 24. 色の働きと機能 R BG YR G RP B Y GY P PB 暖色 寒色 13年10月4日金曜日
  25. 25. 問題3 どちらの色の組み合わせの方が見やすいですか? また、その理由も答えてください A           B 13年10月4日金曜日
  26. 26. 視認性 13年10月4日金曜日
  27. 27. 視認性 http://www.verticalgardendesign.com/ 13年10月4日金曜日
  28. 28. 視認性 配色を考える上でもっとも重要 視認性を決めるのは「明度差」 強調したい順に明度差がつくように配色 をする ユニバーサルの観点においても重要 13年10月4日金曜日
  29. 29. 誘目性 13年10月4日金曜日
  30. 30. 誘目性 http://www.sullivannyc.com/ 13年10月4日金曜日
  31. 31. 誘目性 誘目性の高い色は、赤∼黄色の彩度の高 い色 色を組み合わせる際に明度差をつけるこ とで、より誘目性は高まる 13年10月4日金曜日
  32. 32. 進出色・後退色 http://www.established1986.com/#/Home 13年10月4日金曜日
  33. 33. 進出色・後退色 http://www.moozedesign.com/ 13年10月4日金曜日
  34. 34. 進出色・後退色 寒色系の色や彩度・明度の低い色は奥に 下がって見え、暖色系の色や彩度・明度 の高い色は手前に飛び出して見える 目立たせたい部分と、他との差を付けた い場合に有効なセオリー 13年10月4日金曜日
  35. 35. 配色の手順 イメージ 調和メリハリ 13年10月4日金曜日
  36. 36. 調和のとれた配色とは 色相/彩度を える 色相をバランスよく組み合わせる トーンを える 無彩色の活用 色数を絞る 13年10月4日金曜日
  37. 37. 色相/彩度の統一 http://www.hyundai-veloster.eu/ 13年10月4日金曜日
  38. 38. 色相配色 13年10月4日金曜日
  39. 39. 色相配色 http://www.sturdy-style.com/ 13年10月4日金曜日
  40. 40. トーン配色 ビビッドストロング ダルグレイッシュ ブライト ライト ペール ライト グレイッシュ ベリーペール ディープ ダーク ダーク グレイッシュ http://www.sikiken.co.jp/pccs/pccs04.html 参考:日本色研事業株式会社 13年10月4日金曜日
  41. 41. トーン配色 http://www.rolanddg.co.jp/metallicworld/ 13年10月4日金曜日
  42. 42. 無彩色の活用 13年10月4日金曜日
  43. 43. 無彩色の活用 http://www.apple.com/jp/ 13年10月4日金曜日
  44. 44. 色数をしぼる http://www.kazepro.com/ 13年10月4日金曜日
  45. 45. 問題4 見本のデザインで調和のとれた配色の ために使われている手法は? 13年10月4日金曜日
  46. 46. 配色の手順 イメージ 調和メリハリ 13年10月4日金曜日
  47. 47. UIと配色 http://www.apple.com/jp/ 13年10月4日金曜日
  48. 48. カラーイメージの定着 http://www.daichi.or.jp/ 13年10月4日金曜日
  49. 49. グローバルカラー・パーソナルカラー 配色には、その「場」にふさわしい色の 使い方がある よりグローバルな観点が求められるもの (公共性・アクセシビリティ・UI)にと っての「色」は、優先度が低い 「色」は、パーソナルなもの 13年10月4日金曜日
  50. 50. 強調のためのセオリー 対比 13年10月4日金曜日
  51. 51. 明度対比 13年10月4日金曜日
  52. 52. 色相対比 http://www.windowsphone.com/en-us 13年10月4日金曜日
  53. 53. 彩度対比 http://craftingtype.com/ 13年10月4日金曜日
  54. 54. 面積対比 13年10月4日金曜日
  55. 55. 問題5 見本のデザインで強調のため に使われている配色手法は? 13年10月4日金曜日
  56. 56. 配色の実践 13年10月4日金曜日
  57. 57. 配色の手順 イメージ 調和メリハリ 13年10月4日金曜日
  58. 58. 配色のトレーニングとは? 13年10月4日金曜日
  59. 59. イメージの言語化 例:スイーツのような甘い配色 最近流行の、カラフルに着色された カップケーキのような配色 甘いものは快楽でもあり、背徳的 でもある。どこかに辛味も? 13年10月4日金曜日
  60. 60. イメージの言語化 13年10月4日金曜日
  61. 61. イメージの言語化 13年10月4日金曜日
  62. 62. イメージスケール あどけない 子供らしい ユーモラスな たのしい ポップな カジュアルな にぎやかな 強烈な 行動的な エネルギッシュな たくましい 野性的な 豪華な ぜいたくな 魅惑的な 温厚な くつろいだ 家庭的な のんびりした 甘美な ロマンチックな 清麗な うるおいのある 新鮮な 洗練された スマートな 知的な 風流な エレガントな 気品のある 女らしい 清潔な さわやかな 青春の 若々しい 明快な スピーディな モダンな 合理的な 緻密な おごそかな 風格のある 本格的な 貫録のある 伝統的な 味わい深い ダンディな 真面目な 優雅な やすらいだ あどけない 子供らしい ユーモラスな たのしい ポップな カジュアルな にぎやかな 温厚な くつろいだ 家庭的な のんびりした 甘美な ロマンチックな 清麗な うるおいのある 新鮮な 洗練された スマートな エレガントな 気品のある 女らしい 清潔な さわやかな 青春の 若々しい 明快な 優雅な やすらいだ http://www.ncd-ri.co.jp/ 参考:日本カラーデザイン研究所 13年10月4日金曜日
  63. 63. 問題6 見本のデザインの配色イメージを 自分なりに「言葉」で表してください http://www.benitos-hat.com/ 13年10月4日金曜日
  64. 64. イメージマップ 13年10月4日金曜日
  65. 65. イメージマップ 13年10月4日金曜日
  66. 66. Kuler https://kuler.adobe.com/ 13年10月4日金曜日
  67. 67. まとめ 「色」を言葉で表すことの重要性 「説得力」のための配色セオリー イメージの具体化、調和と強調の循環 配色スキルは磨くほど高くなる 13年10月4日金曜日
  68. 68. プロとして配色に責任を持つ なぜその「色」なのか(理由) その色によってどんな効果が生まれてい るのか(メリット) プロらしさ(説得力) 裏付け(調査) 13年10月4日金曜日
  69. 69. 任意のWebサイト(紙でもディスプレイ などでもOK)の色のイメージを言語化 課題/配色の分析をしてみよう 13年10月4日金曜日
  70. 70. 質疑応答 13年10月4日金曜日
  71. 71. END 13年10月4日金曜日

×