Suche senden
Hochladen
アクセシビリティキャンプ東京 第6回テーマ「色」について
•
11 gefällt mir
•
3,242 views
ア
アクセシビリティキャンプ東京実行委員会
Folgen
Design
Melden
Teilen
Melden
Teilen
1 von 44
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
MRとは?HoloLens(ホロレンズ)とは?〜概念からデバイス、8つの活用事例まで〜
MRとは?HoloLens(ホロレンズ)とは?〜概念からデバイス、8つの活用事例まで〜
Shota Yoshizawa
Fanfarra Lothar
Fanfarra Lothar
guest6a11e3
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
Empfohlen
MRとは?HoloLens(ホロレンズ)とは?〜概念からデバイス、8つの活用事例まで〜
MRとは?HoloLens(ホロレンズ)とは?〜概念からデバイス、8つの活用事例まで〜
Shota Yoshizawa
Fanfarra Lothar
Fanfarra Lothar
guest6a11e3
2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
Marius Sescu
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
Expeed Software
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
Pixeldarts
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
Skeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
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 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
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
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 Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
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...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
ChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
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 Routes
Project for Public Spaces & National Center for Biking and Walking
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 Presentation
Erica Santiago
Weitere ähnliche Inhalte
Empfohlen
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
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 2024
Albert Qian
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
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
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 Intent
Lily Ray
How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
Introduction to Data Science
Introduction to Data Science
Christy Abraham Joy
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
Vit Horky
The six step guide to practical project management
The six step guide to practical project management
MindGenius
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...
Applitools
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
ChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
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 Routes
Project for Public Spaces & National Center for Biking and Walking
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 Presentation
Erica Santiago
Empfohlen
(20)
PEPSICO 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)
How 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 Insights
Trends 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 summary
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
Google'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
Introduction to Data Science
Introduction to Data Science
Time Management & Productivity - Best Practices
Time Management & Productivity - Best Practices
The 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...
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 Work
ChatGPT 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 Routes
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 Presentation
アクセシビリティキャンプ東京 第6回テーマ「色」について
1.
第6回 アクセシビリティキャンプ東京 色 color 2013年6月14日 アクセシビリティキャンプ東京 実行委員会
2.
「色」とは? • 色の三属性 – 色相・明度・彩度 •
色の物理的性質 – 波長・強度・純度 • 視細胞のうち、錐体が色を見分ける – 明るい時しか知覚できない Photo by Chevre http://pl.wikipedia.org/wiki/Grafika:Kredki_Foto.jpg
3.
色が無いのに色がある? • ベンハムのこま – 物理的性質と感覚のズレで色覚現象 http://plaza.rakuten.co.jp/hatenaclub/diary/200808290000/
4.
なぜ色を使う? • 色の違いは200ミリ秒以内に判別でき、 人が注意を払おうと気づく(中略) よりも短い時間です – ビューティフル ビジュアライゼーションより
5.
なぜ色を使う? • 「人間の知覚に基づく色空間は、どのよ うに切り取ったとしても3つの次元を持」 つのでHSBやRGB(見たことない)の各 次元に変数を割り当てられるからだと 思っています • 教えて、黒澤さん!
6.
色で見分ける
7.
事例:地下鉄 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
8.
事例:京急 優等列車は種別ごと に種別色(停車駅表 参照)を定めており、 英語での案内にはそ の色を用いる場合も ある。 http://ja.wikipedia.org/wiki/%E4%BA%AC%E6%80%A5%E6%9C%AC%E7%B7%9A
9.
事例:レーン表示 http://usability.ueyesdesign.co.jp/diary/697.html 車線毎にアスファルトが塗り分けられて います。右折レーンがブルー、直進可能 な車線はピンク、左折のみの車線は着色 無し、というルールなんですかね?
10.
事例:自転車のライト http://hanasawa.com/archives/1555 車両に付けるライトは周囲に自分の 存在・場所・進行方向を知らせるものです。 (中略) 赤いライトを前につけると、 周囲に進行方向を誤認させ事故を誘発することになる。
11.
色がどう見えているか?
12.
色がどう見えているか? • 20人に1人、色覚障害を持ったユーザーが居る ‒ 色で表現できることは多い。 しかし、色が伝わらない状況も多い ‒
どういう根拠でシミュレーションしてる? • 視覚の変化はどう訪れるか? ‒ 先天性 ‒ 加齢で角膜黄変や視力低下 → 色の恒常が働く ‒ 病気で急変 → 徐々に変化する場合より大変そう • その状態をどう呼ぶか? ‒ 色覚特性?色覚異常?色盲?色弱?
13.
事例:ゴッホの絵 ともすれば「正常色覚の人の方が(色を見て理解するという点では)色覚異常 の人より優れている」と思いがちな私たちに、ある点では「色覚異常の人の方 が正常色覚の人より優れている」ことを示す実例のひとつだと言うことができ るかもしれない。 http://asada0.tumblr.com/post/11323024757
14.
事例:肉 http://www.shirashiki.ehimeclay.com/wp-content/uploads/n1-tokachi03.jpg 赤い生肉に火が通って茶色くなる変化は わかりづらいと思うんですが、どうなんだろう?
15.
色への依存
16.
色への依存とは? • 色だけに依存したコンテンツとは何か? ‒ 色でしか伝えられない情報は存在するか? ‒
問題は解消できるか? ‒ そもそも依存しないようにできるか? • 多様なメディア、プロダクトにおける 色弱者の見え方、困りごと ‒ 街の看板表示や家電製品の表示が わかりづらかったり? ‒ 色を使った資料作成が難しかったり?
17.
事例:ロンドンの地下鉄 http://www.tfl.gov.uk/gettingaround/14091.aspx
18.
事例:ロンドンの地下鉄 http://www.tfl.gov.uk/gettingaround/14091.aspx
19.
事例:津波警報 • 禁転載、らしいので… ‒ http://jfly.iam.u- tokyo.ac.jp/color/tsunami/
20.
事例:色のめがね http://asada.tukusi.ne.jp/chromaticglass/j/ 「色のめがね」は、スマート デバイスのカメラとスクリー ンを使用し、科学的な理論に 基づいた手法により、見えに くい色の一部をリアルタイム に見えやすい色に変更した上 で、オリジナル画像と交互に 表示することによって、色を わかりやすくします。
21.
色の印象と選択
22.
色の印象と選択 • 文化・地域(国内・海外)・性別・ 年代での、色のイメージの違いは? ‒ グローバルデザインの時の色は? ‒
参考になる資料はある? ‒ コーポレートカラーの策定は? • デザイナーは色をどう決める? ‒ 自分の好みで色を決定しがち? ‒ 色への役割のもたせ方は?
23.
事例:女性向けEC http://fril.jp/
24.
事例:高級志向の歯科医院 http://www.dc-kawamura.com/
25.
事例:ツブカラ http://www.tubucolor.net/
26.
アクセシブルな色
27.
アクセシブルな色 • プロセス、取り組み ‒ 普段の業務でどの程度気にしている? ‒
どのように配慮している? ‒ 「不適切な配色」があることは知っているが、 実際のデザイン時にどうすれば? ‒ 効果測定はどうしてる? • 関係者の説明のために数字がほしいとき • ウェブやデジタルメディア ‒ 閲覧環境による変化を軽減する方法はないか? ‒ アクセシビリティー、ユーザビリティーを 左右する色使いについての事例を知りたい
28.
アクセシブルな色 • WCAG2.0 や
JIS-X8341-3:2010 を踏まえ: ‒ 等級Aではカラーコントラストの規定がないが それでいいのか ‒ コントラスト比が4.5:1、もしくは7:1あれば 問題なく読めるのか。 人によって読みにくいということはないのか ‒ 隣接する前景色や背景色のコントラスト比は どうしたらいいのか ‒ コントラストを考えるときの「大きな文字」とは どれくらいからなのか
29.
アクセシブルな色 • WCAG2.0 や
JIS-X8341-3:2010 を踏まえ: ‒ WCAG 2.0の「1.4.1 色の使用」(レベルA)を達成す るために円グラフなどの色の凡例に縞々やドットな どのパターンをつけるという方法がありますが、色 覚異常の方に判別がしづらい色、あるいは明度が まったく同じ色でその縞々やドットのパターンを 作ってしまったら、利用者によって、また白黒印刷 したときなどにパターンが判別できない事態が起こ るのではないか、ということが気になります。
30.
例えば、こういう時 http://jfly.iam.u-tokyo.ac.jp/color/
31.
チェックと問題解決
32.
Five Simple Step -
Colour Accessibility http://www.fivesimplesteps.com/products/colour-accessibility
33.
色覚問題に関する指導の手引き http://www.nig.ac.jp/color/monbushou_tebiki_1.html
34.
カラーユニバーサルデザイン機構 http://www.cudo.jp/
35.
カラーユニバーサルデザイン ガイドブック http://www.pref.fukushima.jp/kenmin/u_d/fud/cud/cud_02.html
36.
WE ARE COLORBLIND http://wearecolorblind.com/
37.
色弱模擬フィルタ http://www.variantor.com/jp
38.
Photoshop http://www.adobe.com/jp/joc/pscs4/showcase/vol02/tips/ カラーユニバーサルデザインとその実践例
39.
視覚以外での色の伝達
40.
事例:色を音で表現する • http://www.youtube.com/watch?v =N8eHCAwGUfo
41.
事例:カラートーク 色名を知りたい物体の表面に、カラートーク本体をあて、 ボタンをワンプッシュ。センサーが測定して、そのデータ により系統的に分類してある色を選びだし、色名を音声で お伝えします。 http://www.hokkei.co.jp/c_1.html
42.
事例:色のイメージを伝える • 本書の題名になっている『今日の風、なに色?』は、 伸行が言った言葉からとっています。 眼が見えない伸行に色というものを理解させるために、 「りんごの赤」「バナナの黄色」などと教えていました。 すると伸行は 「じゃ、今日の風はなに色?」 と聞いてきたのです。 眼が見えない伸行にとっては、 大好きな食べ物に色というものがあるなら、 同じく大好きな風に色があっても 不思議はありません。(本書より)
43.
赤丼・青丼・白丼・黒丼 • 赤丼:鮭、いくら • 青丼:青魚 •
白丼:しらす、イカ、鯛 • 黒丼:まぐろ(!)
44.
さあ、みんなで考えよう! 色とは? 見分ける どう 見える? 色依存 印象と 選択 アクセ シブルな 色 チェック と問題 解決 視覚 以外の 伝達
Jetzt herunterladen