SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen
第6回 アクセシビリティキャンプ東京
色
color
2013年6月14日
アクセシビリティキャンプ東京 実行委員会
「色」とは?
• 色の三属性
– 色相・明度・彩度
• 色の物理的性質
– 波長・強度・純度
• 視細胞のうち、錐体が色を見分ける
– 明るい時しか知覚できない
Photo by Chevre
http://pl.wikipedia.org/wiki/Grafika:Kredki_Foto.jpg
色が無いのに色がある?
• ベンハムのこま
– 物理的性質と感覚のズレで色覚現象
http://plaza.rakuten.co.jp/hatenaclub/diary/200808290000/
なぜ色を使う?
• 色の違いは200ミリ秒以内に判別でき、
人が注意を払おうと気づく(中略)
よりも短い時間です
– ビューティフル
ビジュアライゼーションより
なぜ色を使う?
• 「人間の知覚に基づく色空間は、どのよ
うに切り取ったとしても3つの次元を持」
つのでHSBやRGB(見たことない)の各
次元に変数を割り当てられるからだと
思っています
• 教えて、黒澤さん!
色で見分ける
事例:地下鉄
http://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC%E5%9C%B0%E4%B8%8B%E9%89%84%E4%B8%B8%E3%83%8E%E5%86%85%E7%B7%9A
事例:京急
優等列車は種別ごと
に種別色(停車駅表
参照)を定めており、
英語での案内にはそ
の色を用いる場合も
ある。
http://ja.wikipedia.org/wiki/%E4%BA%AC%E6%80%A5%E6%9C%AC%E7%B7%9A
事例:レーン表示
http://usability.ueyesdesign.co.jp/diary/697.html
車線毎にアスファルトが塗り分けられて
います。右折レーンがブルー、直進可能
な車線はピンク、左折のみの車線は着色
無し、というルールなんですかね?
事例:自転車のライト
http://hanasawa.com/archives/1555
車両に付けるライトは周囲に自分の
存在・場所・進行方向を知らせるものです。
(中略)
赤いライトを前につけると、
周囲に進行方向を誤認させ事故を誘発することになる。
色がどう見えているか?
色がどう見えているか?
• 20人に1人、色覚障害を持ったユーザーが居る
‒ 色で表現できることは多い。
しかし、色が伝わらない状況も多い
‒ どういう根拠でシミュレーションしてる?
• 視覚の変化はどう訪れるか?
‒ 先天性
‒ 加齢で角膜黄変や視力低下 → 色の恒常が働く
‒ 病気で急変 → 徐々に変化する場合より大変そう
• その状態をどう呼ぶか?
‒ 色覚特性?色覚異常?色盲?色弱?
事例:ゴッホの絵
ともすれば「正常色覚の人の方が(色を見て理解するという点では)色覚異常
の人より優れている」と思いがちな私たちに、ある点では「色覚異常の人の方
が正常色覚の人より優れている」ことを示す実例のひとつだと言うことができ
るかもしれない。
http://asada0.tumblr.com/post/11323024757
事例:肉
http://www.shirashiki.ehimeclay.com/wp-content/uploads/n1-tokachi03.jpg
赤い生肉に火が通って茶色くなる変化は
わかりづらいと思うんですが、どうなんだろう?
色への依存
色への依存とは?
• 色だけに依存したコンテンツとは何か?
‒ 色でしか伝えられない情報は存在するか?
‒ 問題は解消できるか?
‒ そもそも依存しないようにできるか?
• 多様なメディア、プロダクトにおける
色弱者の見え方、困りごと
‒ 街の看板表示や家電製品の表示が
わかりづらかったり?
‒ 色を使った資料作成が難しかったり?
事例:ロンドンの地下鉄
http://www.tfl.gov.uk/gettingaround/14091.aspx
事例:ロンドンの地下鉄
http://www.tfl.gov.uk/gettingaround/14091.aspx
事例:津波警報
• 禁転載、らしいので…
‒ http://jfly.iam.u-
tokyo.ac.jp/color/tsunami/
事例:色のめがね
http://asada.tukusi.ne.jp/chromaticglass/j/
「色のめがね」は、スマート
デバイスのカメラとスクリー
ンを使用し、科学的な理論に
基づいた手法により、見えに
くい色の一部をリアルタイム
に見えやすい色に変更した上
で、オリジナル画像と交互に
表示することによって、色を
わかりやすくします。
色の印象と選択
色の印象と選択
• 文化・地域(国内・海外)・性別・
年代での、色のイメージの違いは?
‒ グローバルデザインの時の色は?
‒ 参考になる資料はある?
‒ コーポレートカラーの策定は?
• デザイナーは色をどう決める?
‒ 自分の好みで色を決定しがち?
‒ 色への役割のもたせ方は?
事例:女性向けEC
http://fril.jp/
事例:高級志向の歯科医院
http://www.dc-kawamura.com/
事例:ツブカラ
http://www.tubucolor.net/
アクセシブルな色
アクセシブルな色
• プロセス、取り組み
‒ 普段の業務でどの程度気にしている?
‒ どのように配慮している?
‒ 「不適切な配色」があることは知っているが、
実際のデザイン時にどうすれば?
‒ 効果測定はどうしてる?
• 関係者の説明のために数字がほしいとき
• ウェブやデジタルメディア
‒ 閲覧環境による変化を軽減する方法はないか?
‒ アクセシビリティー、ユーザビリティーを
左右する色使いについての事例を知りたい
アクセシブルな色
• WCAG2.0 や JIS-X8341-3:2010 を踏まえ:
‒ 等級Aではカラーコントラストの規定がないが
それでいいのか
‒ コントラスト比が4.5:1、もしくは7:1あれば
問題なく読めるのか。
人によって読みにくいということはないのか
‒ 隣接する前景色や背景色のコントラスト比は
どうしたらいいのか
‒ コントラストを考えるときの「大きな文字」とは
どれくらいからなのか
アクセシブルな色
• WCAG2.0 や JIS-X8341-3:2010 を踏まえ:
‒ WCAG 2.0の「1.4.1 色の使用」(レベルA)を達成す
るために円グラフなどの色の凡例に縞々やドットな
どのパターンをつけるという方法がありますが、色
覚異常の方に判別がしづらい色、あるいは明度が
まったく同じ色でその縞々やドットのパターンを
作ってしまったら、利用者によって、また白黒印刷
したときなどにパターンが判別できない事態が起こ
るのではないか、ということが気になります。
例えば、こういう時
http://jfly.iam.u-tokyo.ac.jp/color/
チェックと問題解決
Five Simple Step
- Colour Accessibility
http://www.fivesimplesteps.com/products/colour-accessibility
色覚問題に関する指導の手引き
http://www.nig.ac.jp/color/monbushou_tebiki_1.html
カラーユニバーサルデザイン機構
http://www.cudo.jp/
カラーユニバーサルデザイン
ガイドブック
http://www.pref.fukushima.jp/kenmin/u_d/fud/cud/cud_02.html
WE ARE COLORBLIND
http://wearecolorblind.com/
色弱模擬フィルタ
http://www.variantor.com/jp
Photoshop
http://www.adobe.com/jp/joc/pscs4/showcase/vol02/tips/
カラーユニバーサルデザインとその実践例
視覚以外での色の伝達
事例:色を音で表現する
• http://www.youtube.com/watch?v
=N8eHCAwGUfo
事例:カラートーク
色名を知りたい物体の表面に、カラートーク本体をあて、
ボタンをワンプッシュ。センサーが測定して、そのデータ
により系統的に分類してある色を選びだし、色名を音声で
お伝えします。
http://www.hokkei.co.jp/c_1.html
事例:色のイメージを伝える
• 本書の題名になっている『今日の風、なに色?』は、
伸行が言った言葉からとっています。
眼が見えない伸行に色というものを理解させるために、
「りんごの赤」「バナナの黄色」などと教えていました。
すると伸行は
「じゃ、今日の風はなに色?」
と聞いてきたのです。
眼が見えない伸行にとっては、
大好きな食べ物に色というものがあるなら、
同じく大好きな風に色があっても
不思議はありません。(本書より)
赤丼・青丼・白丼・黒丼
• 赤丼:鮭、いくら
• 青丼:青魚
• 白丼:しらす、イカ、鯛
• 黒丼:まぐろ(!)
さあ、みんなで考えよう!
色とは?
見分ける
どう
見える?
色依存
印象と
選択
アクセ
シブルな
色
チェック
と問題
解決
視覚
以外の
伝達

Weitere ähnliche Inhalte

Empfohlen

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 

Empfohlen (20)

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 

アクセシビリティキャンプ東京 第6回テーマ「色」について