Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accsell008

3,626 views

Published on

Published in: Design

Accsell008

  1. 1. ChatWork株式会社 ひとりひとりが取り組む Webアクセシビリティ ChatWork株式会社 守谷 絵美 1
  2. 2. ChatWork株式会社 守谷 絵美 • ChatWork株式会社 • デザイナー(UI/各種制作物作成) • emi.moriya   emim • note(個人のはてなブログ) • deCAFE(ワークショップイベントを主催) • ChatWork Creator's Note(ChatWork社のブログ) 2
  3. 3. ChatWork株式会社 色とデザイナーとアクセシビリティ 3 http://c-note.chatwork.com/post/104660673565/color-contrast
  4. 4. ChatWork株式会社 色とデザイナーとアクセシビリティ • 「デザイナーにアクセシビリティの重要性を
 どう伝えたらいいのか」という話が上がっていたのに
 非常にショックを受けて書きました • すごい人でもなんでもないのにお話できることがある
 ということに「意義」があると思って
 今回、登壇を引き受けました 4 http://c-note.chatwork.com/post/104660673565/color-contrast
  5. 5. ChatWork株式会社 今回お話しする内容 1. 「デザインをする」ということとデザイナー職 2. アクセシビリティのイメージ 3. デザイナーが取り組めるアクセシビリティ 1. 色編 2. その他編 4. まとめ 5
  6. 6. ChatWork株式会社 ぜひ「いつもやっています!」
 と言いながら帰ってください 6 今回は初心者向けの 内容を中心にお話しします
  7. 7. ChatWork株式会社 「アクセシビリティ」に 取り組んでいますか? 7
  8. 8. ChatWork株式会社 会場の職種比率は? • デザイナー • ディレクター/プロジェクトマネージャー • コーダー/エンジニア • マーケッター • その他……? 8
  9. 9. ChatWork株式会社 アクセシビリティとは 9
  10. 10. ChatWork株式会社 Wikipedia 高齢者・障がい者を含む誰もが
 さまざまな製品や建物やサービス
 などを支障なく利用できるかどうか
 あるいはその度合いをいう 10
  11. 11. ChatWork株式会社 制作の現場では マシンリーダブル(ブラウザ及び
 アプリケーションなどの
 コンピューターが読み取りやすい 構造になっているコード)
  ||
 情報にアクセシブルである、
 アクセシビリティが担保されている 11 Photo : Computer Setup April 2010 By Paul Mayne
  12. 12. ChatWork株式会社 アクセシビリティとは
 「伝える」こと 12 Photo : Girls Whispering By Kevin Shorter
  13. 13. ChatWork株式会社 伝えたい人に伝えたいことを
 「届ける」手助けをする 13 デザインの役割 Photo : Girls Whispering By Kevin Shorter
  14. 14. ChatWork株式会社 届ける 14
  15. 15. ChatWork株式会社 15 • サービスやコンテンツを「提供」している人すべてが
 「デザイン」をしている • デザイナー職は制作時に無意識にアクセシビリティに
 対応できると良い • クライアントなどのステークホルダー(決裁者)
 への説得材料としても使えるかも…… デザイナー職以外も届けている
  16. 16. ChatWork株式会社 アクセシビリティを
 具体的に考える 16
  17. 17. ChatWork株式会社 17
  18. 18. ChatWork株式会社 18
  19. 19. ChatWork株式会社 19
  20. 20. ChatWork株式会社 20
  21. 21. ChatWork株式会社 21 Photo : The story teller By PERSPECTIVphoto
  22. 22. ChatWork株式会社 22 Photo : Knowledge is Tiring By CasualCapture
  23. 23. ChatWork株式会社 23 Photo : Towcester Boots By 8354422@N02
  24. 24. ChatWork株式会社 ……と私は考えます 24 これらもアクセシビリティ Photo : Towcester Boots By 8354422@N02
  25. 25. ChatWork株式会社 整備をする 25 デザイナー職のしごと
  26. 26. ChatWork株式会社 26 自分が居る場所はどこか
  27. 27. ChatWork株式会社 27 何をしたらいいか示す
  28. 28. ChatWork株式会社 28 どう準備すべきか予告
  29. 29. ChatWork株式会社 29 待つ位置を示す
  30. 30. ChatWork株式会社 30 Photo : The story teller By PERSPECTIVphoto 意味を伝える
  31. 31. ChatWork株式会社 31 Photo : Knowledge is Tiring By CasualCapture 足りない情報を補足
  32. 32. ChatWork株式会社 32 Photo : Towcester Boots By 8354422@N02 起きることを予告
  33. 33. ChatWork株式会社 33 問題解決の手助け Photo : Towcester Boots By 8354422@N02
  34. 34. ChatWork株式会社 どうしたら◯◯しやすくなるのか? 34 ビジュアル面で
  35. 35. ChatWork株式会社 35 指針となるのが 規格(WCAGやWebJIS)
  36. 36. ChatWork株式会社 36 難しい?/怖い?
  37. 37. ChatWork株式会社 AccSellのPodcastで
 「Web JISは簡単だ」と
 言った問題が取り上げられました 37 いやいや、簡単
  38. 38. ChatWork株式会社 小難しいという理由で
 脱落するのはもったいない! 38 いやいや、簡単
  39. 39. ChatWork株式会社 指針として向き合う • 「初心者」にこそ参考にしてもらいたい • 「これさえ守れば」OKととらえる • 書いてあることは割と基本的なお作法のみ
 (セッション 1でやった……はず) 39
  40. 40. ChatWork株式会社 デザインに関連する要件 • ウェブコンテンツに関する要件 • 7.1 知覚可能にする原則 • 7.2 操作可能に関する原則 • 7.3 理解可能にする原則 • 7.4 頑健性に関する原則 40
  41. 41. ChatWork株式会社 色の使用に関する達成基準 • 7.1.4(識別可能に関するガイドライン)以下項目 • コンテンツを, 利用者にとって見やすくしたり
 聞きやすくしたりする。
 これには, 前景と背景とを区別 することも含む。 41
  42. 42. ChatWork株式会社 前景と背景とを区別 • 7.1.4.3 最低限のコントラストに関する達成基準 • テキスト及び画像化された文字の視覚的な表現には,
 少なくとも 4.5:1 のコントラスト比がなければ
 ならない。 42
  43. 43. ChatWork株式会社 4.5:1とは • (L1+0.05)/(L2+ 0.05)=4.5以上 • L1は前景または背景色の明るい方の相対輝度である。
 及び、 • L2は前景または背景色の暗い方の相対輝度である。 43 G18: テキスト(及び画像化された文字)とその背景の間に、少なくとも4.5:1以上のコントラスト比 をもたせる|WCAG 2.0 実装方法集
  44. 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. 45. ChatWork株式会社 相対輝度とL1,L2比率 • 数式を試してみることにしました 45
  46. 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. 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. 48. ChatWork株式会社 (L1+0.05)/(L2+0.05) >= 4.5 • (1+0.05)/(0.070295+0.05) = 8.728542 48 OK!
  49. 49. ChatWork株式会社 49 正直クラクラしてきます… Photo : Sleepy By Tomas
  50. 50. ChatWork株式会社 • Colour Contrast Analyser
 http://www.paciellogroup.com/ resources/contrastanalyser/ • ColorTester
 http://alfasado.net/apps/colortester- ja.html 50 ツールで提供されています
  51. 51. ChatWork株式会社 ColorTester 51
  52. 52. ChatWork株式会社 ColorTester • 試しにやってみましょう 52
  53. 53. ChatWork株式会社 ColorTester • (1+0.05)/(0.070295+0.05) = 8.728542 53 OK!
  54. 54. ChatWork株式会社 余談)他の色の例 • 実はギリギリNG 54
  55. 55. ChatWork株式会社 色に関するこの他の
 シミュレータ及びツール 55
  56. 56. ChatWork株式会社 色覚タイプ別シミュレーション 56 色のシミュレータ
  57. 57. ChatWork株式会社 色のシミュレータ 57 一般型 P型 D型 T型
  58. 58. ChatWork株式会社 Photoshopにも 58
  59. 59. ChatWork株式会社 59 チャットワークへの
 具体的施策
  60. 60. ChatWork株式会社 具体的施策 1 60
  61. 61. ChatWork株式会社 具体的施策 1 61
  62. 62. ChatWork株式会社 62
  63. 63. ChatWork株式会社 具体的施策 2 63
  64. 64. ChatWork株式会社 知覚可能にする • アイコンの改編 • 小さいサイズで並んだ時に
 同じ色のものが複数だと
 区別がつかない問題打開 • テキストのコントラスト比の
 担保 64
  65. 65. ChatWork株式会社 「理解」を助ける 65 色以外にできる整備
  66. 66. ChatWork株式会社 ZAPA GS • 黄金比や白銀比を計測 66 黄金比・白銀比計算ツール「ZAPA GS」:airappli.com
  67. 67. ChatWork株式会社 ZAPA GS • 具体的施策 67
  68. 68. ChatWork株式会社 ImageOptim、ImageAlpha 68 ImageOptim — better Save For Web
 ImageAlpha — image minifier (like JPEG with transparency!)
  69. 69. ChatWork株式会社 その他できる整備 • 「変化するもの」への表現 • 速度、色差 • 想像できるリンク(ラベル) • 情報を整理して見せる • デザインの原則と言われるもの • 色、レイアウト、サイズ、構成 69
  70. 70. ChatWork株式会社 • 視覚情報(デザインの原則)が心理面に及ぼす関係 • 参考書籍 • 『インタフェースデザインの心理学
 ――ウェブやアプリに新たな視点を
 もたらす100の指針』
 http://www.oreilly.co.jp/
 books/9784873115573/ 構成(デザイン)が与える影響 70
  71. 71. ChatWork株式会社 規格に書かれていないこと • 色にまつわるイメージ • 国によって捉え方の違うことがある(色彩学) • 『色と意味の本』
 最近買って面白かったです
 http://filmart.co.jp/books/
 design/2014-4-22tue/ 71
  72. 72. ChatWork株式会社 これらの施策は 何のためにおこなうか 72
  73. 73. ChatWork株式会社 高齢者・障がい者のため? • 必ずしも高齢者・障がい者のためではない • 想定外の利用法 • プロジェクター表示 • スマートフォンでの表示 • 暗い/明るい場所でのアクセス • これから出てくる未知のデバイスなどなど…… 73
  74. 74. ChatWork株式会社 色覚特性保持者の割合 • 日本では • 男性の20人に1人/女性の500人に1人 • 日本全体では320万人以上 • 世界では2億人を超える人数 • 血液型がAB型の男性の比率に匹敵 74 色弱者について — NPO法人カラーユニバーサルデザイン機構/色弱・色盲相談窓口/特定非営利活動 法人 Color Universal Design Organization
  75. 75. ChatWork株式会社 の前に…… 75 まとめ
  76. 76. ChatWork株式会社 「アクセシビリティ」に 取り組んでいますか? 76
  77. 77. ChatWork株式会社 まとめ • ユーザーが一番最初に接触する部分の設計をするのが
 デザイナーの仕事 • アクセシビリティとは • 「伝える」を手助けをするもの • 基本的な原則に沿っていれば達成できる • 1〜100できるのを待たなくてOK 77
  78. 78. ChatWork株式会社 78 ただし、忘れがちなこと
  79. 79. ChatWork株式会社 ターゲットを見失わない • アクセシビリティの「規格」に引きずられすぎない • ターゲットユーザーを見極める • 子供の場合 • 20代〜30代の場合 • 高齢者の場合 • できるところから取り入れる 79
  80. 80. ChatWork株式会社 アクセシビリティは • 「伝える」こと • デザインの役割は、それを助けること • 難しいことをたくさんやるのではなく、
 普段からみんなが少しずつ取り組んでいくこと 80
  81. 81. ChatWork株式会社 ひとりひとりが
 それぞれのアプローチで 81
  82. 82. ChatWork株式会社 Thank you! ChatWork社では各職種募集しています 詳しくは採用情報ページで 82

×