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
300
ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
ニフティ株式会社
PRO
July 21, 2023
Tweet
Share
Resources
レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
https://nifty.connpass.com/event/288706/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
58
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
73
Dify触ってみた。
niftycorp
PRO
1
170
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
170
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
81
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
53
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
50
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
54
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
39
Other Decks in Design
See All in Design
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
170
本当に欲しかったのはモノレポツールではなく、tsconfigの設定だった / monorepo-tsconfig
rdlabo
1
120
Goodpatch Tour💙 / We are hiring!
goodpatch
31
830k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
390
NAHO SHIMONO_Portfolio2025
nahohphp
0
480
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
0
160
freee + Product Design FY25Q4
freee
4
13k
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.4k
問いの変遷
iflection
0
100
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.6k
発表資料テンプレート / My slide template
thatblue
0
290
「デザイン」を信じるには
iflection
0
190
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
Being A Developer After 40
akosma
91
590k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Side Projects
sachag
453
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
YesSQL, Process and Tooling at Scale
rocio
172
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Faster Mobile Websites
deanohume
306
31k
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