デザインで使う「色」について考えよう Web touch meeting #66

7,325 views

Published on

Published in: Design

デザインで使う「色」について考えよう Web touch meeting #66

  1. 1. 26 April 2014 Aika Kohama | Web Touch Meeting #66 Think about a color
  2. 2. 1. いろいろな色の見え方 2. 色覚の種類 3. カラーユニバーサルデザインとは 4. 実際に気をつけたいこと 5. これから必要なこと 6. さいごに Today I’ll talk about… 今日お話すること今日お話すること
  3. 3. 広島市在住 / フリーランス 元アパレル販売員。2008年頃に転 職。普段はデザインやコーディング、 WordPressなどをさわっている事が 多い。ほとんど独学。 妖精が見える女の子のママ。 • 現場でかならず使われているCSSデザインのメソッド • Web Designing 2014年3月号「パララックスを究める」 Aika Kohama 著書 (共著)
  4. 4. いろいろな色の見え方 Recognition of various colors
  5. 5. とっても余談ですが…
  6. 6. 広島ファッションビジネス専門学校 出身 (現 小井手ファッションビューティ専門学校)
  7. 7. 広島ファッションビジネス専門学校 出身 (現 小井手ファッションビューティ専門学校) 高等課程ですが…
  8. 8. バイトと遊びに明け暮れる毎日 学校へはほとんど行っておりません…。
  9. 9. そんな私が受けた中で とても印象的だった授業
  10. 10. 景気や出来事と流行色の関係
  11. 11. 景気や出来事と流行色の関係 ©earth music&ecology
  12. 12. 景気や出来事と流行色の関係 ©earth music&ecology 最 近 わ た し が か わ い い と 思 っ た 靴 で す (笑 )
  13. 13. 景気や出来事と流行色の関係 ©earth music&ecology 不況になると暗く目立たない色が流行しはじめ、 さらにつらく、厳しい世の中で人々の不安が大き くなるとパステルカラーなど優しい色が流行しは じめる。
  14. 14. パステルカラーずっと流行ってるね (シャーベットカラーとかマカロンカラーとか名前を変えて)
  15. 15. 本題に ©earth music&ecology
  16. 16. 例えばこの靴の色が ©earth music&ecology
  17. 17. P型(1型) こんな見え方だったり
  18. 18. こんな風に見える人もいます (ちょっと画像が汚くてごめんなさい) T型
  19. 19. 色覚の種類 Type of color perception
  20. 20. 色が見える仕組み 光 水晶体 網膜 視神経 色の三原色
  21. 21. C型 P型 D型 T型 A型 (強・弱) (強・弱) 3種の視細胞を持つ一般的な色覚特性 赤の波長を受ける視細胞がないか特性が異なる 青の波長を受ける視細胞がないか特性が異なる 緑の波長を受ける視細胞がないか特性が異なる 3種類の視細胞のうち1種類しか持たない、または 全てが無いため、色を明暗でしか感じることができない。 考えよう学校のカラーユニバーサルデザイン 97ページより
  22. 22. カラーユニバーサルデザインとは? What is color universal design?
  23. 23. カラーユニバーサルデザイン CUD:シーユーディー
  24. 24. 「ユニバーサルデザイン」の中の 「色による情報伝達」 に関するもの
  25. 25. 例えば… 色だけで認識できない人の ために文字が重ねてある。 (これはちょっと緑が微妙ではある…)
  26. 26. めざましじゃんけんしたことある? © Fuji Television Network, inc. All rights reserved. き ち ん と 配 慮 さ れて る !
  27. 27. カラーユニバーサルデザインの 3つのポイント できるだけ 多くの人が 見分けやすい 配色を選ぶ 色を見分け にくい人にも 情報が伝わる ようにする 色の名前を 用いた コミュニ ケーションを 可能にする ※CUDO「カラーユニバーサルデザイン検証合格基準2011版」より
  28. 28. 実際に気をつけたいこと What we want to keep in mind
  29. 29. 配色について 見分けにくい色の組み合わせを避ける
  30. 30. 配色について 色覚の多様性に配慮した 案内・サイン・図表等用のカラーユニバーサルデザイン推奨配色セット http://jfly.iam.u-tokyo.ac.jp/colorset/ 見分けにくい色の組み合わせを避ける
  31. 31. 線のスタイルを増やす 色の認識だけに頼らない
  32. 32. 線のスタイルを増やす 色の認識だけに頼らない
  33. 33. ハッチング(地紋)処理をする 情報を正確に伝えるための配慮
  34. 34. ハッチング(地紋)処理をする 情報を正確に伝えるための配慮
  35. 35. 色名を添える ECサイトなどでの配慮 earth music&ecology ハイカットスニーカー 価格 8,424円(税込) カートに入れる カートに入れるカートに入れる カートに入れるカートに入れる カートに入れる ©earth music&ecology
  36. 36. 色名を添える ECサイトなどでの配慮 ©earth music&ecology
  37. 37. 色名を添える ECサイトなどでの配慮 earth music&ecology ハイカットスニーカー 価格 8,424円(税込) カートに入れる カートに入れるカートに入れる カートに入れるカートに入れる カートに入れる ピンク ライトイエロー ミント ©earth music&ecology
  38. 38. http://crosscollection.com/ap/f.html?md=f04&id=CC0113147H&brc=CC010&spc=CRC&colvar=
  39. 39. これから必要なこと What is needed for the future
  40. 40. Webやアプリでの配慮 印刷物、広告での配慮
  41. 41. 教育現場での配慮
  42. 42. 教育現場での配慮 学習理解を公平にするため
  43. 43. 教育現場での配慮 学習理解を公平にするため 子どもたちが安心して過ごせるように
  44. 44. これからは教育の場も どんどんデジタル化される 時代がくる
  45. 45. 誰に伝えたいのか 何を見てほしいのか ※カラーユニバーサルデザインの手引き 10ページより
  46. 46. さいごに To end…
  47. 47. 色覚の差は、私たちが ひとりひとり持つ 個性や特性のひとつ
  48. 48. みんながお互いの 個性や特性を認め合い 配慮できたら…
  49. 49. もっと安心して 楽しく過ごせるはず
  50. 50. 私はまわりの方々の知識によって救われました I was saved by knowledge
  51. 51. ありがとうございました Thank you! http://aika.nu | @katie2010116
  52. 52. Books 参考書籍 カラーユニバーサルデザインの手引き http://www.amazon.co.jp/dp/4316803735 考えよう学校のカラーユニバーサルデザイン http://www.amazon.co.jp/dp/4316803484/
  53. 53. Sites 参考サイト NPO法人 カラーユニバーサルデザイン機構(CUDO) http://www.cudo.jp/ 東京大学 分子細胞生物学研究所 脳神経回路研究分野 http://jfly.iam.u-tokyo.ac.jp/colorset/ ツールの紹介 http://www.cudo.jp/colorud/simulation/tools ツールの紹介ではAdobe PhotoshopやIllustratorでのシュミ レーション方法へのリンクや、iOS・Android端末対応のアプ リが紹介されているので是非見てみてください。

×