Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジ...
Search
ニフティ株式会社
PRO
July 21, 2023
Resources
Design
0
320
ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
ニフティ株式会社
PRO
July 21, 2023
Tweet
Share
Resources
レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
https://nifty.connpass.com/event/288706/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
なぜISPでオリジナルカードゲームを作ったのか?制作者と対談 - NIFTY Tech Talk #25
niftycorp
PRO
0
32
「なぜかネットが遅い」を“見える化”する 〜マイ ニフティが繋ぐサポートと暮らし〜 - NIKKEI Tech Talk #39
niftycorp
PRO
0
98
InnerSource Summit 2025 Three points that promoted innersource activities
niftycorp
PRO
0
30
Maker Faire Tokyo 2025 出展うらばなし - NIFTY Tech Talk #25
niftycorp
PRO
0
69
Private Status Pageの設定と活用 〜インシデントレスポンスへの活用とStatus Page運用をどうするか?〜
niftycorp
PRO
0
97
ニフティのPagerDuty活用状況
niftycorp
PRO
0
110
会員管理基盤をオンプレからクラウド移行した時に起きた障害たち - asken tech talk vol.13
niftycorp
PRO
0
2.6k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
970
2025-07-08 InnerSource Commons Japan Meetup #14 【OST】チームの壁、ぶっ壊そ!壁の乗り越え方、一緒に考えよう!
niftycorp
PRO
0
100
Other Decks in Design
See All in Design
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
1
240
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
220
保育AIプロダクトの UXデザインで考えてきたこと / hoiku-ai-ux-design
hiro93n
0
230
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
370
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
440
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.3k
【サイバーエージェント】Creative Switch 会社説明資料
cyberagent_creators
0
1k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
180
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
300
Vibe Coding デザインシステム
poteboy
3
1.5k
Shaolin_Showdown
solmetts
0
160
Liquid GlassとApp Intents
touyou
0
530
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
527
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
690
Become a Pro
speakerdeck
PRO
30
5.7k
Scaling GitHub
holman
464
140k
Statistics for Hackers
jakevdp
799
230k
Docker and Python
trallard
46
3.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
4 Signs Your Business is Dying
shpigford
186
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
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