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 ニフティ株式会社
会員管理基盤をオンプレからクラウド移行した時に起きた障害たち - asken tech talk vol.13
niftycorp
PRO
0
2.5k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
800
2025-07-08 InnerSource Commons Japan Meetup #14 【OST】チームの壁、ぶっ壊そ!壁の乗り越え方、一緒に考えよう!
niftycorp
PRO
0
75
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
260
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
180
Dify触ってみた。
niftycorp
PRO
1
260
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
270
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
130
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
88
Other Decks in Design
See All in Design
sachi_y_portfolio
sachi337
0
500
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
530
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
530
The Spectacular Lies of Maps
axbom
PRO
1
260
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
110
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
110
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
420
mento Design Team Portfolio
mento0fficial
1
590
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.6k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
230
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
490
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
A Tale of Four Properties
chriscoyier
160
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
KATA
mclloyd
32
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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