Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジ...
Search
ニフティ株式会社
PRO
July 21, 2023
Resources
Design
0
260
ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
ニフティ株式会社
PRO
July 21, 2023
Tweet
Share
Resources
レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
https://nifty.connpass.com/event/288706/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
Application Signalsで始めるSLO ユーザー満足度を数値化する第一歩
niftycorp
PRO
2
140
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
1
54
モニタリングダッシュボード に表示しておきたい情報 / NIFTY Tech Talk #21
niftycorp
PRO
1
86
PagerDutyを導入して変わったシステム運用とこれから / NIFTY Tech Talk #21
niftycorp
PRO
1
88
ゼロからボトムアップで始めるインナーソース ニフティのリアル事例 - InnerSource Gathering Tokyo 2024
niftycorp
PRO
2
190
FourKeysを導入したが生産性向上には至らなかった理由
niftycorp
PRO
7
5.4k
AWS Summit Japan 2024, AWS Game Day 振り返り - NIFTY Tech Talk #20
niftycorp
PRO
2
370
2つのスクラムチームの 調和的な協働・連携について - ニフティのスクラムトーク Vol. 3 / NIFTY Tech Talk #19
niftycorp
PRO
1
57
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
240
Other Decks in Design
See All in Design
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
410
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
120
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
160
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
470
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
2
190
Night Shift concept 9/15/2024
cpineda57
0
730
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
840
圧縮デザインスプリントによるオンボーディングの体験設計事例
hassy_pixiv
0
120
Credence
lratmansunu
0
330
Dreamia
elsh
0
150
富山デザイン勉強会_デザイナーの打ち合わせ術_打ち合わせをクリエイティブな時間にする方法.pdf
keita_yoshikawa
1
100
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
Gamification - CAS2011
davidbonilla
80
5k
Being A Developer After 40
akosma
85
590k
Designing Experiences People Love
moore
138
23k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
330
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Transcript
ユーザーのペルソナを元にした アクセシビリティガイドラインを作 りたいというアイデア ニフティ株式会社 HOTAKE a.k.a 関歩武
自己紹介 後述するポイントサイトの開発、運用 フロントエンド関係は業務ではあまり触れてい ません 自分で興味があり勉強しています NAME: HOTAKE(関 歩武)
担当サービス 運営実績20年以上、累計会員数330万人以上の「ポイントサイト」 の紹介
今日話すこと
今日話すこと 社内のWEBアクセシビリティガイドラインを作りたいよねという話
Webアクセシビリティってなんだ? Webアクセシビリティ = Webページにある情報や機能の利用しやすさ 様々な人々 様々な状況(デバイス)
Webアクセシビリティってなんだ? Webアクセシビリティ = Webページにある情報や機能の利用しやすさ 様々な人々 様々な状況(デバイス) どのような人、状況でも利用しやすい システムにする ↓ Webアクセシビリティを高めること
政府のサイトの使いやすさにも関わっている
君はどれくらいアクセシビリティの理解あるの? 何冊か本読んだり、した程度のペーペー 見えにくい、読みにくい「困った!」 を解決するデザイン デザイニング Webアクセシビリティ インクルーシブ HTML+CSS&JavaScript
全ての人に使いやすいという理念にマジ共感 心持ち的には…
弊社はどうなのか?
社内でのアクセシビリティガイドライン 2009年に作られたものがある メンテナンスされていない
あらためて広めたいと思った ただ、回線の会社だし結構幅広いユーザーに使用されるサービスが多い 改めてここら辺に力を入れるようにできたら良いよなぁ
どんなことをやってきたか - 社内勉強会 - 社内LT、外部LT - 社内ツールで使ったりとか
広まったと言えるか ちょこちょこ、気にかけている人は出てきている感じがある。 ただ、自分含めて業務に取り入れられている人は…
で、ガイドラインですよ 各社色々なガイドラインを公開したりしている 改めてこういうの作って社内で使えるようにすると良いかな f社 Y社 C社
実際に政府のガイドラインをみてみる
ただ、このガイドラインを 提示してやってくれるか🤔
会社の発展のためにやらないといけない 機能追加開発A やらないといけない案件開発 B やらないといけない案件開発 C アクセシブルな実装作業 やらないといけない案件開発 D やらないといけない案件開発
E
ビジネスサイドの人 エンジニアの人 それ会社的に何でやんの ? 利益になるのか? 気にかける意味あんの ?
もう一度政府のガイドラインをみてみる
図もあってわかりやすいけど… 結構専門家向けな気がする 具体的に何に繋がるのかわからない
世にガイドラインは結構存在する、けど 基本的に専門家向け、優しくてもエンジニアやデザイナー向け • タイトル(例: エラーメッセージはわかりやすく通知する) • ルールの説明 ◦ どういうことをやらないといけないのか ◦
なんのためなのか • 実際の実装方法 ビジネスサイドや知識ない人でもわかるようなものが少ない へぇー…そうなんだ
会社内に広げるには少し違うな
最近こんな本を読んだ この本、すごくよかった こういうユーザのこういう困ったを 解決するためにこういうデザインをすると 良いですよ、みたいなことが書いてある 実際のユーザが見える!! 見えにくい、読みにくい「困った!」を解決するデ ザイン
W3Cのサイトにも例が存在する W3Cにもユーザの実例をまとめたものがある
これ良いな 実際のユーザを想像して、やらないといけないことがわかるし、 どんなユーザに自分のサイトが使いにくいと思われるのか?みた いなところも確認しやすい
ここら辺をもとに、もう少しHTML/CSS/TS(JS)で の実装方法などを追加して、ユーザの種別から 確認できるガイドラインを作ったら良いかも
それでやりたいと思っていること ユーザをベースとしたガイドラインの作成 例えば年代別で以下のようにユーザのペルソナを作って、別々にページを用意して、そ こからやらないといけないアクセシビリティの実装方法やルールに繋げていく • 太郎くん(5歳) ◦ 幼稚園に通っていて、ひらがなを描けるようになってきた。会話では難しいことはわからないがある 程度の意思疎通ができる •
敏夫さん(30歳) • 文枝さん(60歳)
これによって • どういうユーザのためにその施策を行うのか説明できる ◦ このページでいう〇〇さんのようなユーザのために施策を行います • 年齢のデータなどとの関連性から説明できる ◦ 弊社のシステムでは 50代の人が多いのでその人たちのためにこのページに書かれているこの理
由でこの施策を行います 事業における必要性をビジネスサイドにも説明して、 アクセシブルな開発がしやすくなる
まずはさっきの本やサイトをベースに社内の勉強会で発表しな がら意見を聞いてまとめていきたい💪
fin