誰かのためのアクションは伝わる 色覚検証ページの作成を通じて #GAADjp

722 Views

May 19, 21

スライド概要

2021年5月21日のオンラインセミナー「GAAD Japan 2021」のスポンサーLTのスライドです。

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

誰かのための アクションは伝わる ~⾊覚検証ページの作成を通じて~ ヤフー株式会社 中野 信 ©Yahoo Japan

2.

⾃⼰紹介 • 中野 信(なかの まこと) • 広告事業のデザインと UIガイドラインの策定・運⽤と アクセシビリティの向上に関わっています • アクセシビリティ推進WG • 第10代⿊帯(アクセシビリティ) • ウェブアクセシビリティ基盤委員会 作業部会1(理解と普及) • HCD-Net認定 ⼈間中⼼設計専⾨家 ©Yahoo Japan 2

3.

今⽇のセッションのポイント ©Yahoo Japan 3

4.

「アクセシビリティ」の取り組みを知らない⼈は まだまだ多いので、 不完全でもそれを伝えることは⼤事である ©Yahoo Japan 4

5.

取り組み ©Yahoo Japan 5

6.

取り組み • ヤフーとLINEの経営統合ページの⾊覚検証とその取り組みを公開 ©Yahoo Japan 6

7.

取り組み https://events.z-holdings.co.jp/tougou/ ©Yahoo Japan 7

8.

https://events.z-holdings.co.jp/tougou/color.html ©Yahoo Japan 8

9.

経緯 ©Yahoo Japan 9

10.

経緯 最初の話 ⾊覚多様性の検証を ⼿伝って欲しい ぜひ! ©Yahoo Japan 10

11.

経緯 最初の話 ⾊覚多様性の対応ページを 追加して欲しいと⾔われたけど どうする? あえて追加しなくても よいのでは…? ©Yahoo Japan 11

12.

経緯 なぜ塩対応だったか? • ⾊覚多様性にすでに配慮していたため • → ⾊だけで情報を区別しない設計をしていた • 本来期待されている「⾊覚多様性の配慮」と異なるため • → カラーユニバーサルデザインを⾏っているわけではなかった ©Yahoo Japan 12

13.

経緯 なぜ塩対応だったか? • ⾊覚多様性への配慮はアクセシビリティ向上の⼀部であるため • → 網羅的に向上して初めて対外的に⾔えると考えていた • 障害や問題に個別対応することは今の潮流ではないため • → ユニバーサルデザインの考え⽅が主流であると考えていた ©Yahoo Japan 13

14.

経緯 なぜ塩対応だったか? • 「ウェブアクセシビリティ⽅針」をすでに公開していたため • 「対応したこと」を伝えることは当事者の利益にはなりにくいため ©Yahoo Japan 14

15.

経緯 しかし ⾊覚多様性のページを作りましょう ©Yahoo Japan 15

16.

©Yahoo Japan 16

17.

施策 ©Yahoo Japan 17

18.

• ⾊覚検証のページを作成 • 各種検証 • ⾊覚検証 • コントラスト検証 • 動画のハーディングチェック ©Yahoo Japan 18

19.

⾊覚検証 • シミュレーターによる検証 • • Sim Deltonism ロービジョンの社員による検証 ©Yahoo Japan 19

20.

コントラスト検証 • ツールによる検証 • contrast ©Yahoo Japan 20

21.

動画のハーティングチェック • ⾚⾊閃光 • ツールによるチェック • PEAT(Photosensi9ve Epilepsy Analysis Tool) ©Yahoo Japan 21

22.

検証対象 • ヤフーLINE経営統合記念ページ • 超PayPay祭り関連ページ • スマホ避難シミュレーション • 防災は、チカラになる。3.11企画 • CM・ウェブ広告(動画) • コーポレートの統合記念特集企画ページ ©Yahoo Japan 22

23.

結果 ©Yahoo Japan 23

24.

結果 検証結果 • 元来、⾊だけで情報区分していなかったので⾊覚多様性による問題はなし • コントラストでいくつか懸念があったテキストを修正 • • 写真の上に配置されている • 動画の上に配置されている • 透過するモーダル 動画の点滅を可能な範囲で修正 • ⾚と緑の点滅 • 演出で⼤きく画⾯が変わるカット ©Yahoo Japan 24

25.

結果 「⾊覚多様性について」ページ作成 • 「⾊覚多様性」という存在を気付いてもらえた • アクセシビリティの取り組みがより多くの⼈に伝わった ©Yahoo Japan 25

26.

⼤きな会社が発信して社会に浸透させていくのはよいのでは 「⾊覚多様性」いい⾔葉だ ちゃんと考えて⾊付けされているんだね ⾚と緑で⼼配してたけど、きちんと配慮されている 良い取り組み 素晴らしい! 検証⾃体が⾯⽩い 公開してくれるのすごい ©Yahoo Japan 26

27.

GMOペパボのCDOにもほめられた! ©Yahoo Japan 27

28.

まとめ ©Yahoo Japan 28

29.

「アクセシビリティ」の取り組みを知らない⼈はまだ多い 不完全であってもコツコツやることが⼤事 誰かのために何かしようという思いは伝わる ©Yahoo Japan 29

30.

まとめ まとめ • 情報発信の取捨選択を⼤局観でできる経営陣すごい • 後出しにも関わらず可能な限り修正や調整をしてくれたみなさんありがとう! • ⾊設計とコントラスト調整⼤事 ©Yahoo Japan 30

31.

告知 ©Yahoo Japan 31

32.

告知 ヤフーでは⼀緒に活動してくれる⽅を募集しています ©Yahoo Japan 32

33.

©Yahoo Japan 33