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

Transcript

1. ユーザーのペルソナを元にした アクセシビリティガイドラインを作 りたいというアイデア ニフティ株式会社 HOTAKE a.k.a 関歩武
2. 自己紹介 後述するポイントサイトの開発、運用 フロントエンド関係は業務ではあまり触れてい ません 自分で興味があり勉強しています NAME: HOTAKE(関 歩武)
3. 担当サービス 運営実績20年以上、累計会員数330万人以上の「ポイントサイト」 の紹介
4. 今日話すこと
5. 今日話すこと 社内のWEBアクセシビリティガイドラインを作りたいよねという話
6. Webアクセシビリティってなんだ? Webアクセシビリティ = Webページにある情報や機能の利用しやすさ 様々な人々 様々な状況(デバイス)
7. Webアクセシビリティってなんだ? Webアクセシビリティ = Webページにある情報や機能の利用しやすさ 様々な人々 様々な状況(デバイス) どのような人、状況でも利用しやすい システムにする ↓ Webアクセシビリティを高めること
8. 政府のサイトの使いやすさにも関わっている
9. 君はどれくらいアクセシビリティの理解あるの? 何冊か本読んだり、した程度のペーペー 見えにくい、読みにくい「困った!」 を解決するデザイン 
 デザイニング
 Webアクセシビリティ 
 インクルーシブ HTML+CSS&JavaScript 

10. 全ての人に使いやすいという理念にマジ共感 心持ち的には…
11. 弊社はどうなのか?
12. 社内でのアクセシビリティガイドライン 2009年に作られたものがある メンテナンスされていない
13. あらためて広めたいと思った ただ、回線の会社だし結構幅広いユーザーに使用されるサービスが多い 改めてここら辺に力を入れるようにできたら良いよなぁ
14. どんなことをやってきたか - 社内勉強会 - 社内LT、外部LT - 社内ツールで使ったりとか
15. 広まったと言えるか ちょこちょこ、気にかけている人は出てきている感じがある。 ただ、自分含めて業務に取り入れられている人は…
16. で、ガイドラインですよ 各社色々なガイドラインを公開したりしている 改めてこういうの作って社内で使えるようにすると良いかな f社 Y社 C社
17. 実際に政府のガイドラインをみてみる
18. ただ、このガイドラインを 提示してやってくれるか🤔
19. 会社の発展のためにやらないといけない 機能追加開発A やらないといけない案件開発 B やらないといけない案件開発 C アクセシブルな実装作業 やらないといけない案件開発 D やらないといけない案件開発 E
20. ビジネスサイドの人 エンジニアの人 それ会社的に何でやんの ? 利益になるのか? 気にかける意味あんの ?
21. もう一度政府のガイドラインをみてみる
22. 図もあってわかりやすいけど… 結構専門家向けな気がする 具体的に何に繋がるのかわからない
23. 世にガイドラインは結構存在する、けど 基本的に専門家向け、優しくてもエンジニアやデザイナー向け • タイトル(例: エラーメッセージはわかりやすく通知する) • ルールの説明 ◦ どういうことをやらないといけないのか ◦ なんのためなのか • 実際の実装方法 ビジネスサイドや知識ない人でもわかるようなものが少ない へぇー…そうなんだ
24. 会社内に広げるには少し違うな
25. 最近こんな本を読んだ この本、すごくよかった こういうユーザのこういう困ったを 解決するためにこういうデザインをすると 良いですよ、みたいなことが書いてある 実際のユーザが見える!! 見えにくい、読みにくい「困った!」を解決するデ ザイン

26. W3Cのサイトにも例が存在する W3Cにもユーザの実例をまとめたものがある
27. これ良いな 実際のユーザを想像して、やらないといけないことがわかるし、 どんなユーザに自分のサイトが使いにくいと思われるのか?みた いなところも確認しやすい
28. ここら辺をもとに、もう少しHTML/CSS/TS(JS)で の実装方法などを追加して、ユーザの種別から 確認できるガイドラインを作ったら良いかも
29. それでやりたいと思っていること ユーザをベースとしたガイドラインの作成 例えば年代別で以下のようにユーザのペルソナを作って、別々にページを用意して、そ こからやらないといけないアクセシビリティの実装方法やルールに繋げていく • 太郎くん(5歳) ◦ 幼稚園に通っていて、ひらがなを描けるようになってきた。会話では難しいことはわからないがある 程度の意思疎通ができる • 敏夫さん(30歳) • 文枝さん(60歳)
30. これによって • どういうユーザのためにその施策を行うのか説明できる ◦ このページでいう〇〇さんのようなユーザのために施策を行います • 年齢のデータなどとの関連性から説明できる ◦ 弊社のシステムでは 50代の人が多いのでその人たちのためにこのページに書かれているこの理 由でこの施策を行います 事業における必要性をビジネスサイドにも説明して、 アクセシブルな開発がしやすくなる
31. まずはさっきの本やサイトをベースに社内の勉強会で発表しな がら意見を聞いてまとめていきたい💪
32. fin