SlideShare una empresa de Scribd logo
1 de 53
Descargar para leer sin conexión
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端末対応のアプ
リが紹介されているので是非見てみてください。

Más contenido relacionado

La actualidad más candente

壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...
壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...
壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...メンズカジュアル・セレクトショップ【ナクール】
 
iroha×下着でオシャレ女子の心をくすぐろう♥
iroha×下着でオシャレ女子の心をくすぐろう♥iroha×下着でオシャレ女子の心をくすぐろう♥
iroha×下着でオシャレ女子の心をくすぐろう♥stucon
 
近畿大学山縣ゼミ10thメンバー募集紹介スライド
近畿大学山縣ゼミ10thメンバー募集紹介スライド近畿大学山縣ゼミ10thメンバー募集紹介スライド
近畿大学山縣ゼミ10thメンバー募集紹介スライドMasayuki Yamagata
 
ゼロからの漆
ゼロからの漆ゼロからの漆
ゼロからの漆Kenji Toki
 
横浜道場スプリント わくわくルンルン横浜道場 ふりかえり
横浜道場スプリント わくわくルンルン横浜道場 ふりかえり横浜道場スプリント わくわくルンルン横浜道場 ふりかえり
横浜道場スプリント わくわくルンルン横浜道場 ふりかえりAkira Kato
 
女子スーツ
女子スーツ女子スーツ
女子スーツKat0etsuk0
 
去年の11/10のKOFで万年筆実験の話しをしてきました!
去年の11/10のKOFで万年筆実験の話しをしてきました!去年の11/10のKOFで万年筆実験の話しをしてきました!
去年の11/10のKOFで万年筆実験の話しをしてきました!Tomoko Sato
 
はなまるが欲しいから Milkcocoaでどうにかしてみた!
はなまるが欲しいから Milkcocoaでどうにかしてみた!はなまるが欲しいから Milkcocoaでどうにかしてみた!
はなまるが欲しいから Milkcocoaでどうにかしてみた!angie angie
 
とんちきでもmilkcocoaでなんとかできた件について
とんちきでもmilkcocoaでなんとかできた件についてとんちきでもmilkcocoaでなんとかできた件について
とんちきでもmilkcocoaでなんとかできた件についてyaksk
 

La actualidad más candente (12)

壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...
壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...
壊して、直して、装飾するハンドメイドな逸品デニム « オリハシ日記 « 武蔵小杉のセレクトショップ【ナクール】 Nakool-attack the min...
 
Portfolio
PortfolioPortfolio
Portfolio
 
iroha×下着でオシャレ女子の心をくすぐろう♥
iroha×下着でオシャレ女子の心をくすぐろう♥iroha×下着でオシャレ女子の心をくすぐろう♥
iroha×下着でオシャレ女子の心をくすぐろう♥
 
宇城先生0611 fix
宇城先生0611 fix宇城先生0611 fix
宇城先生0611 fix
 
近畿大学山縣ゼミ10thメンバー募集紹介スライド
近畿大学山縣ゼミ10thメンバー募集紹介スライド近畿大学山縣ゼミ10thメンバー募集紹介スライド
近畿大学山縣ゼミ10thメンバー募集紹介スライド
 
ゼロからの漆
ゼロからの漆ゼロからの漆
ゼロからの漆
 
横浜道場スプリント わくわくルンルン横浜道場 ふりかえり
横浜道場スプリント わくわくルンルン横浜道場 ふりかえり横浜道場スプリント わくわくルンルン横浜道場 ふりかえり
横浜道場スプリント わくわくルンルン横浜道場 ふりかえり
 
女子スーツ
女子スーツ女子スーツ
女子スーツ
 
去年の11/10のKOFで万年筆実験の話しをしてきました!
去年の11/10のKOFで万年筆実験の話しをしてきました!去年の11/10のKOFで万年筆実験の話しをしてきました!
去年の11/10のKOFで万年筆実験の話しをしてきました!
 
はなまるが欲しいから Milkcocoaでどうにかしてみた!
はなまるが欲しいから Milkcocoaでどうにかしてみた!はなまるが欲しいから Milkcocoaでどうにかしてみた!
はなまるが欲しいから Milkcocoaでどうにかしてみた!
 
とんちきでもmilkcocoaでなんとかできた件について
とんちきでもmilkcocoaでなんとかできた件についてとんちきでもmilkcocoaでなんとかできた件について
とんちきでもmilkcocoaでなんとかできた件について
 
はじめてのMilkcocoa
はじめてのMilkcocoaはじめてのMilkcocoa
はじめてのMilkcocoa
 

Destacado

色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座Mariko Yamaguchi
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜Yuudai Tachibana
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】MOCKS | Yuta Morishige
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうToshiaki Sasaki
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版MOCKS | Yuta Morishige
 
配色について考えよう~文字編~
配色について考えよう~文字編~配色について考えよう~文字編~
配色について考えよう~文字編~ggk-documents
 
しょぼいプレゼンをするな!
しょぼいプレゼンをするな!しょぼいプレゼンをするな!
しょぼいプレゼンをするな!yodoko tanaka
 
いろのいろいろ
いろのいろいろいろのいろいろ
いろのいろいろsekaiya
 
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション配色を楽にするコミュニケーション
配色を楽にするコミュニケーションKunio Sakamoto
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみただいすけ ふるかわ
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書Daisuke Miyazaki
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論tsukasa obara
 

Destacado (15)

色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
Human eye
Human eyeHuman eye
Human eye
 
色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜色で失敗しない為に 〜理論に基づく配色フロー〜
色で失敗しない為に 〜理論に基づく配色フロー〜
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
 
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼうWebデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
 
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 
配色について考えよう~文字編~
配色について考えよう~文字編~配色について考えよう~文字編~
配色について考えよう~文字編~
 
パーソナルカラー入門
パーソナルカラー入門パーソナルカラー入門
パーソナルカラー入門
 
しょぼいプレゼンをするな!
しょぼいプレゼンをするな!しょぼいプレゼンをするな!
しょぼいプレゼンをするな!
 
いろのいろいろ
いろのいろいろいろのいろいろ
いろのいろいろ
 
配色を楽にするコミュニケーション
配色を楽にするコミュニケーション配色を楽にするコミュニケーション
配色を楽にするコミュニケーション
 
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみたプログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
 
青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書青年海外協力隊・フィールド調査団の最終報告書
青年海外協力隊・フィールド調査団の最終報告書
 
とある色の決め方
とある色の決め方とある色の決め方
とある色の決め方
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 

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