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
220
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
96
Dify触ってみた。
niftycorp
PRO
1
220
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
230
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
110
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
74
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
75
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
82
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
70
Other Decks in Design
See All in Design
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
440
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
280
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
130
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
390
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
240
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
250131_product meetup
motokoishida
0
210
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
0
1.2k
freee + Product Design FY25Q4
freee
4
14k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
620
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
NAHO SHIMONO_Portfolio2025
nahohphp
0
860
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
Site-Speed That Sticks
csswizardry
10
680
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Unsuck your backbone
ammeep
671
58k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Become a Pro
speakerdeck
PRO
28
5.4k
Side Projects
sachag
455
42k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Navigating Team Friction
lara
187
15k
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