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種の視細胞を持つ一般的な色覚特性
赤の波長を受ける視細胞がないか特性が異なる
青の波長を受ける視細胞がないか特性が異なる
緑の波長を受ける視細胞がないか特性が異なる
3種類の視細胞のうち1種類しか持たない、または全てが無いため、色を明暗でしか感じることができない。
考えよう学校のカラーユニバーサルデザイン 97ページより
カラーユニバーサルデザインとは?What is color universal design?
カラーユニバーサルデザインCUD:シーユーディー
「ユニバーサルデザイン」の中の「色による情報伝達」
に関するもの
例えば…
色だけで認識できない人のために文字が重ねてある。(これはちょっと緑が微妙ではある…)
めざましじゃんけんしたことある?
© Fuji Television Network, inc. All rights reserved.
きちんと配慮されてる!
カラーユニバーサルデザインの3つのポイント
できるだけ多くの人が見分けやすい配色を選ぶ
色を見分けにくい人にも情報が伝わるようにする
色の名前を用いたコミュニケーションを可能にする
※CUDO「カラーユニバーサルデザイン検証合格基準2011版」より
実際に気をつけたいことWhat we want to keep in mind
配色について見分けにくい色の組み合わせを避ける
配色について
色覚の多様性に配慮した案内・サイン・図表等用のカラーユニバーサルデザイン推奨配色セット
http://jfly.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://jfly.iam.u-tokyo.ac.jp/colorset/
ツールの紹介http://www.cudo.jp/colorud/simulation/tools
ツールの紹介ではAdobe PhotoshopやIllustratorでのシュミレーション方法へのリンクや、iOS・Android端末対応のアプリが紹介されているので是非見てみてください。