Downloaded 12 times
Accsell008
- 1.
- 2. ChatWork株式会社 守谷 絵美 • ChatWork株式会社 •デザイナー（UI/各種制作物作成） • emi.moriya emim • note（個人のはてなブログ） • deCAFE（ワークショップイベントを主催） • ChatWork Creator's Note（ChatWork社のブログ） 2
- 3.
- 4.
- 5. ChatWork株式会社 今回お話しする内容 1. 「デザインをする」ということとデザイナー職 2. アクセシビリティのイメージ 3.デザイナーが取り組めるアクセシビリティ 1. 色編 2. その他編 4. まとめ 5
- 6.
- 7.
- 8. ChatWork株式会社 会場の職種比率は？ • デザイナー • ディレクター／プロジェクトマネージャー •コーダー／エンジニア • マーケッター • その他……？ 8
- 9.
- 10.
- 11.
- 12. ChatWork株式会社 アクセシビリティとは 「伝える」こと 12 Photo : GirlsWhispering By Kevin Shorter
- 13. ChatWork株式会社 伝えたい人に伝えたいことを 「届ける」手助けをする 13 デザインの役割 Photo : GirlsWhispering By Kevin Shorter
- 14.
- 15. ChatWork株式会社 15 • サービスやコンテンツを「提供」している人すべてが 「デザイン」をしている •デザイナー職は制作時に無意識にアクセシビリティに 対応できると良い • クライアントなどのステークホルダー（決裁者） への説得材料としても使えるかも…… デザイナー職以外も届けている
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. ChatWork株式会社 21 Photo :The story teller By PERSPECTIVphoto
- 22. ChatWork株式会社 22 Photo :Knowledge is Tiring By CasualCapture
- 23. ChatWork株式会社 23 Photo :Towcester Boots By 8354422@N02
- 24. ChatWork株式会社 ……と私は考えます 24 これらもアクセシビリティ Photo : TowcesterBoots By 8354422@N02
- 25.
- 26.
- 27.
- 28.
- 29.
- 30. ChatWork株式会社 30 Photo :The story teller By PERSPECTIVphoto 意味を伝える
- 31. ChatWork株式会社 31 Photo :Knowledge is Tiring By CasualCapture 足りない情報を補足
- 32. ChatWork株式会社 32 Photo :Towcester Boots By 8354422@N02 起きることを予告
- 33. ChatWork株式会社 33 問題解決の手助け Photo :Towcester Boots By 8354422@N02
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. ChatWork株式会社 指針として向き合う • 「初心者」にこそ参考にしてもらいたい • 「これさえ守れば」OKととらえる •書いてあることは割と基本的なお作法のみ （セッション 1でやった……はず） 39
- 40. ChatWork株式会社 デザインに関連する要件 • ウェブコンテンツに関する要件 • 7.1知覚可能にする原則 • 7.2 操作可能に関する原則 • 7.3 理解可能にする原則 • 7.4 頑健性に関する原則 40
- 41. ChatWork株式会社 色の使用に関する達成基準 • 7.1.4（識別可能に関するガイドライン）以下項目 • コンテンツを,利用者にとって見やすくしたり 聞きやすくしたりする。 これには, 前景と背景とを区別 することも含む。 41
- 42. ChatWork株式会社 前景と背景とを区別 • 7.1.4.3 最低限のコントラストに関する達成基準 •テキスト及び画像化された文字の視覚的な表現には, 少なくとも 4.5:1 のコントラスト比がなければ ならない。 42
- 43. ChatWork株式会社 4.5:1とは • (L1+0.05)/(L2+ 0.05)=4.5以上 •L1は前景または背景色の明るい方の相対輝度である。 及び、 • L2は前景または背景色の暗い方の相対輝度である。 43 G18: テキスト（及び画像化された文字）とその背景の間に、少なくとも4.5:1以上のコントラスト比 をもたせる｜WCAG 2.0 実装方法集
- 44. ChatWork株式会社 相対輝度とL1,L2比率 • テキスト（及び画像化された文字）とその背景の間に、少なくとも4.5:1以上のコントラスト比をもたせる • 以下の公式を用いて、各文字（すべて同一ではない限り）の相対輝度を測る： •色の相対輝度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B と定義されている。この場合のR, G 及 び B は： • RsRGB <= 0.03928 の場合：R = RsRGB/12.92、それ以外の場合： R = ((RsRGB+0.055)/1.055) ^ 2.4 • GsRGB <= 0.03928 の場合：G = GsRGB/12.92、それ以外の場合：G = ((GsRGB+0.055)/1.055) ^ 2.4 • BsRGB <= 0.03928 の場合：B = BsRGB/12.92、それ以外の場合：B = ((BsRGB+0.055)/1.055) ^ 2.4 また、RsRGB, GsRGB, 及び BsRGBは以下のように定義される： • RsRGB = R8bit/255 • GsRGB = G8bit/255 • BsRGB = B8bit/255 "^"記号は指数演算子である。 • 注意：エイリアス文字では文字の端から2ピクセルの部分の相対輝度の値を使用する。 44 G18: テキスト（及び画像化された文字）とその背景の間に、少なくとも4.5:1以上のコントラスト比 をもたせる｜WCAG 2.0 実装方法集
- 45.
- 46. ChatWork株式会社 L1（明るい方） • RGB =255, 255, 255 • RsRGB = 1.00 = 255/255 • GsRGB = 1.00 = 255/255 • BsRGB = 1.00 = 255/255 • (0.2126 * 1.00) + (0.7152 * 1.00) + (0.0722 * 1.00) = 1 46 ((RGBsRGB+0.055)/1.055)^2.4 } Color Contrast Analyzer
- 47. ChatWork株式会社 L2（暗い方） • RGB =0, 71, 157 • RsRGB = 0.00 = 0/255 • GsRGB = 0.28 = 71/255 • BsRGB = 0.62 = 157/255 • (0.2126 * 0.00) + (0.7152 * 0.063723) + (0.0722 * 0.342391) = 0.070295 47 Color Contrast Analyzer ((RGBsRGB+0.055)/1.055)^2.4 }
- 48. ChatWork株式会社 (L1+0.05)/(L2+0.05) >= 4.5 •(1+0.05)/(0.070295+0.05) = 8.728542 48 OK!
- 49. ChatWork株式会社 49 正直クラクラしてきます… Photo :Sleepy By Tomas
- 50. ChatWork株式会社 • Colour ContrastAnalyser http://www.paciellogroup.com/ resources/contrastanalyser/ • ColorTester http://alfasado.net/apps/colortester- ja.html 50 ツールで提供されています
- 51.
- 52.
- 53. ChatWork株式会社 ColorTester • (1+0.05)/(0.070295+0.05) =8.728542 53 OK!
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64. ChatWork株式会社 知覚可能にする • アイコンの改編 • 小さいサイズで並んだ時に 同じ色のものが複数だと 区別がつかない問題打開 •テキストのコントラスト比の 担保 64
- 65.
- 66. ChatWork株式会社 ZAPA GS • 黄金比や白銀比を計測 66 黄金比・白銀比計算ツール「ZAPAGS」:airappli.com
- 67.
- 68. ChatWork株式会社 ImageOptim、ImageAlpha 68 ImageOptim — betterSave For Web ImageAlpha — image minifier (like JPEG with transparency!)
- 69. ChatWork株式会社 その他できる整備 • 「変化するもの」への表現 • 速度、色差 •想像できるリンク（ラベル） • 情報を整理して見せる • デザインの原則と言われるもの • 色、レイアウト、サイズ、構成 69
- 70. ChatWork株式会社 • 視覚情報（デザインの原則）が心理面に及ぼす関係 • 参考書籍 •『インタフェースデザインの心理学 ――ウェブやアプリに新たな視点を もたらす100の指針』 http://www.oreilly.co.jp/ books/9784873115573/ 構成（デザイン）が与える影響 70
- 71. ChatWork株式会社 規格に書かれていないこと • 色にまつわるイメージ • 国によって捉え方の違うことがある（色彩学） •『色と意味の本』 最近買って面白かったです http://filmart.co.jp/books/ design/2014-4-22tue/ 71
- 72.
- 73. ChatWork株式会社 高齢者・障がい者のため？ • 必ずしも高齢者・障がい者のためではない • 想定外の利用法 •プロジェクター表示 • スマートフォンでの表示 • 暗い／明るい場所でのアクセス • これから出てくる未知のデバイスなどなど…… 73
- 74. ChatWork株式会社 色覚特性保持者の割合 • 日本では • 男性の20人に1人／女性の500人に1人 •日本全体では320万人以上 • 世界では2億人を超える人数 • 血液型がAB型の男性の比率に匹敵 74 色弱者について — NPO法人カラーユニバーサルデザイン機構／色弱・色盲相談窓口／特定非営利活動 法人 Color Universal Design Organization
- 75.
- 76.
- 77. ChatWork株式会社 まとめ • ユーザーが一番最初に接触する部分の設計をするのが デザイナーの仕事 • アクセシビリティとは •「伝える」を手助けをするもの • 基本的な原則に沿っていれば達成できる • 1〜100できるのを待たなくてOK 77
- 78.
- 79. ChatWork株式会社 ターゲットを見失わない • アクセシビリティの「規格」に引きずられすぎない • ターゲットユーザーを見極める •子供の場合 • 20代〜30代の場合 • 高齢者の場合 • できるところから取り入れる 79
- 80. ChatWork株式会社 アクセシビリティは • 「伝える」こと • デザインの役割は、それを助けること •難しいことをたくさんやるのではなく、 普段からみんなが少しずつ取り組んでいくこと 80
- 81.
- 82.