デザインで使う「色」について考えよう 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：シーユーディー

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

に関するもの

例えば…

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

めざましじゃんけんしたことある？

© 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端末対応のアプリが紹介されているので是非見てみてください。