ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会

Transcript

1. ユーザーのペルソナを元にした
   アクセシビリティガイドラインを作
   りたいというアイデア
   ニフティ株式会社
   HOTAKE a.k.a 関歩武
   

   View Slide

2. 自己紹介
   後述するポイントサイトの開発、運用
   フロントエンド関係は業務ではあまり触れてい
   ません
   自分で興味があり勉強しています
   NAME: HOTAKE(関 歩武)
   

   View Slide

3. 担当サービス
   運営実績20年以上、累計会員数330万人以上の「ポイントサイト」
   の紹介
   

   View Slide

4. 今日話すこと
   

   View Slide

5. 今日話すこと
   社内のWEBアクセシビリティガイドラインを作りたいよねという話
   

   View Slide

6. Webアクセシビリティってなんだ?
   Webアクセシビリティ = Webページにある情報や機能の利用しやすさ
   様々な人々
   様々な状況(デバイス)
   

   View Slide

7. Webアクセシビリティってなんだ?
   Webアクセシビリティ = Webページにある情報や機能の利用しやすさ
   様々な人々
   様々な状況(デバイス)
   どのような人、状況でも利用しやすい
   システムにする
   ↓
   Webアクセシビリティを高めること
   

   View Slide

8. 政府のサイトの使いやすさにも関わっている
   

   View Slide

9. 君はどれくらいアクセシビリティの理解あるの?
   何冊か本読んだり、した程度のペーペー
   見えにくい、読みにくい「困った!」
   を解決するデザイン 

   デザイニング

   Webアクセシビリティ 

   インクルーシブ
   HTML+CSS&JavaScript 

   

   View Slide

10. 全ての人に使いやすいという理念にマジ共感
    心持ち的には…
    

    View Slide

11. 弊社はどうなのか?
    

    View Slide

12. 社内でのアクセシビリティガイドライン
    2009年に作られたものがある
    メンテナンスされていない
    

    View Slide

13. あらためて広めたいと思った
    ただ、回線の会社だし結構幅広いユーザーに使用されるサービスが多い
    改めてここら辺に力を入れるようにできたら良いよなぁ
    

    View Slide

14. どんなことをやってきたか
    - 社内勉強会
    - 社内LT、外部LT
    - 社内ツールで使ったりとか
    

    View Slide

15. 広まったと言えるか
    ちょこちょこ、気にかけている人は出てきている感じがある。
    ただ、自分含めて業務に取り入れられている人は…
    

    View Slide

16. で、ガイドラインですよ
    各社色々なガイドラインを公開したりしている
    改めてこういうの作って社内で使えるようにすると良いかな
    f社 Y社
    C社
    

    View Slide

17. 実際に政府のガイドラインをみてみる
    

    View Slide

18. ただ、このガイドラインを
    提示してやってくれるか🤔
    

    View Slide

19. 会社の発展のためにやらないといけない
    機能追加開発A
    やらないといけない案件開発 B
    やらないといけない案件開発 C
    アクセシブルな実装作業
    やらないといけない案件開発 D
    やらないといけない案件開発 E
    

    View Slide

20. ビジネスサイドの人 エンジニアの人
    それ会社的に何でやんの ?
    利益になるのか?
    気にかける意味あんの ?
    

    View Slide

21. もう一度政府のガイドラインをみてみる
    

    View Slide

22. 図もあってわかりやすいけど…
    結構専門家向けな気がする
    具体的に何に繋がるのかわからない
    

    View Slide

23. 世にガイドラインは結構存在する、けど
    基本的に専門家向け、優しくてもエンジニアやデザイナー向け
    ● タイトル(例: エラーメッセージはわかりやすく通知する)
    ● ルールの説明
    ○ どういうことをやらないといけないのか
    ○ なんのためなのか
    ● 実際の実装方法
    ビジネスサイドや知識ない人でもわかるようなものが少ない
    へぇー…そうなんだ
    

    View Slide

24. 会社内に広げるには少し違うな
    

    View Slide

25. 最近こんな本を読んだ
    この本、すごくよかった
    こういうユーザのこういう困ったを
    解決するためにこういうデザインをすると
    良いですよ、みたいなことが書いてある
    実際のユーザが見える!!
    見えにくい、読みにくい「困った!」を解決するデ
    ザイン

    

    View Slide

26. W3Cのサイトにも例が存在する
    W3Cにもユーザの実例をまとめたものがある
    

    View Slide

27. これ良いな
    実際のユーザを想像して、やらないといけないことがわかるし、
    どんなユーザに自分のサイトが使いにくいと思われるのか?みた
    いなところも確認しやすい
    

    View Slide

28. ここら辺をもとに、もう少しHTML/CSS/TS(JS)で
    の実装方法などを追加して、ユーザの種別から
    確認できるガイドラインを作ったら良いかも
    

    View Slide

29. それでやりたいと思っていること
    ユーザをベースとしたガイドラインの作成
    例えば年代別で以下のようにユーザのペルソナを作って、別々にページを用意して、そ
    こからやらないといけないアクセシビリティの実装方法やルールに繋げていく
    ● 太郎くん(5歳)
    ○ 幼稚園に通っていて、ひらがなを描けるようになってきた。会話では難しいことはわからないがある
    程度の意思疎通ができる
    ● 敏夫さん(30歳)
    ● 文枝さん(60歳)
    

    View Slide

30. これによって
    ● どういうユーザのためにその施策を行うのか説明できる
    ○ このページでいう〇〇さんのようなユーザのために施策を行います
    ● 年齢のデータなどとの関連性から説明できる
    ○ 弊社のシステムでは 50代の人が多いのでその人たちのためにこのページに書かれているこの理
    由でこの施策を行います
    事業における必要性をビジネスサイドにも説明して、
    アクセシブルな開発がしやすくなる
    

    View Slide

31. まずはさっきの本やサイトをベースに社内の勉強会で発表しな
    がら意見を聞いてまとめていきたい💪
    

    View Slide

32. fin
    

    View Slide