Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

今日話すこと

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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


Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

弊社はどうなのか?

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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


Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

fin