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

26 April 2014 Aika Kohama | Web Touch Meeting #66 Think about a color

1. いろいろな色の見え方 2. 色覚の種類 3. カラーユニバーサルデザインとは 4. 実際に気をつけたいこと 5. これから必要なこと 6. さいごに Today I’ll talk about… 今日お話すること今日お話すること

広島市在住 / フリーランス元アパレル販売員。2008年頃に転職。普段はデザインやコーディング、 WordPressなどをさわっている事が多い。ほとんど独学。妖精が見える女の子のママ。 • 現場でかならず使われているCSSデザインのメソッド • Web Designing 2014年3月号「パララックスを究める」 Aika Kohama 著書 (共著)

いろいろな色の見え方 Recognition of various colors

とっても余談ですが…

広島ファッションビジネス専門学校出身 (現小井手ファッションビューティ専門学校)

広島ファッションビジネス専門学校出身 (現小井手ファッションビューティ専門学校) 高等課程ですが…

バイトと遊びに明け暮れる毎日学校へはほとんど行っておりません…。

そんな私が受けた中でとても印象的だった授業

景気や出来事と流行色の関係

景気や出来事と流行色の関係 ©earth music&ecology

景気や出来事と流行色の関係 ©earth music&ecology 最近わたしがかわいいと思った靴です (笑 )

景気や出来事と流行色の関係 ©earth music&ecology 不況になると暗く目立たない色が流行しはじめ、さらにつらく、厳しい世の中で人々の不安が大きくなるとパステルカラーなど優しい色が流行しはじめる。

パステルカラーずっと流行ってるね (シャーベットカラーとかマカロンカラーとか名前を変えて)

本題に ©earth music&ecology

例えばこの靴の色が ©earth music&ecology

P型(1型) こんな見え方だったり

こんな風に見える人もいます (ちょっと画像が汚くてごめんなさい) T型

色覚の種類 Type of color perception

色が見える仕組み光水晶体網膜視神経色の三原色

C型 P型 D型 T型 A型 (強・弱) (強・弱) 3種の視細胞を持つ一般的な色覚特性赤の波長を受ける視細胞がないか特性が異なる青の波長を受ける視細胞がないか特性が異なる緑の波長を受ける視細胞がないか特性が異なる３種類の視細胞のうち１種類しか持たない、または全てが無いため、色を明暗でしか感じることができない。考えよう学校のカラーユニバーサルデザイン 97ページより

カラーユニバーサルデザインとは？ What is color universal design?

カラーユニバーサルデザイン CUD：シーユーディー

「ユニバーサルデザイン」の中の「色による情報伝達」に関するもの

例えば… 色だけで認識できない人のために文字が重ねてある。 (これはちょっと緑が微妙ではある…)

カラーユニバーサルデザインの 3つのポイントできるだけ多くの人が見分けやすい配色を選ぶ色を見分けにくい人にも情報が伝わるようにする色の名前を用いたコミュニケーションを可能にする ※CUDO「カラーユニバーサルデザイン検証合格基準2011版」より

実際に気をつけたいこと What we want to keep in mind

配色について見分けにくい色の組み合わせを避ける

配色について色覚の多様性に配慮した案内・サイン・図表等用のカラーユニバーサルデザイン推奨配色セット http://jﬂy.iam.u-tokyo.ac.jp/colorset/ 見分けにくい色の組み合わせを避ける

線のスタイルを増やす色の認識だけに頼らない

ハッチング(地紋)処理をする情報を正確に伝えるための配慮

色名を添える ECサイトなどでの配慮 earth music&ecology ハイカットスニーカー価格 8,424円（税込）カートに入れるカートに入れるカートに入れるカートに入れるカートに入れるカートに入れる ©earth music&ecology

色名を添える ECサイトなどでの配慮 ©earth music&ecology

色名を添える ECサイトなどでの配慮 earth music&ecology ハイカットスニーカー価格 8,424円（税込）カートに入れるカートに入れるカートに入れるカートに入れるカートに入れるカートに入れるピンクライトイエローミント ©earth music&ecology

http://crosscollection.com/ap/f.html?md=f04&id=CC0113147H&brc=CC010&spc=CRC&colvar=

これから必要なこと What is needed for the future

Webやアプリでの配慮印刷物、広告での配慮

教育現場での配慮

教育現場での配慮学習理解を公平にするため

教育現場での配慮学習理解を公平にするため子どもたちが安心して過ごせるように

これからは教育の場もどんどんデジタル化される時代がくる

誰に伝えたいのか何を見てほしいのか ※カラーユニバーサルデザインの手引き 10ページより

さいごに To end…

色覚の差は、私たちがひとりひとり持つ個性や特性のひとつ

みんながお互いの個性や特性を認め合い配慮できたら…

もっと安心して楽しく過ごせるはず

私はまわりの方々の知識によって救われました I was saved by knowledge

ありがとうございました Thank you! http://aika.nu | @katie2010116

Books 参考書籍カラーユニバーサルデザインの手引き http://www.amazon.co.jp/dp/4316803735 考えよう学校のカラーユニバーサルデザイン http://www.amazon.co.jp/dp/4316803484/

Sites 参考サイト NPO法人カラーユニバーサルデザイン機構(CUDO) http://www.cudo.jp/ 東京大学分子細胞生物学研究所脳神経回路研究分野 http://jﬂy.iam.u-tokyo.ac.jp/colorset/ ツールの紹介 http://www.cudo.jp/colorud/simulation/tools ツールの紹介ではAdobe PhotoshopやIllustratorでのシュミレーション方法へのリンクや、iOS・Android端末対応のアプリが紹介されているので是非見てみてください。

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

by Aika Kohama, Web Designer at NMJ Corp on Apr 27, 2014

Statistics

Views

Actions

2 Embeds 19

Accessibility

Categories

Upload Details

Usage Rights

Report content

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

https://twitter.com	16
http://s.deeeki.com	3