今日から意識できるアクセシビリティ

「クラスメソッドとLINEヤフーが語るLINEミニアプリのアクセシビリティ」というイベントで登壇した時の資料です。
イベントURL：https://classmethod.connpass.com/event/345409/

概要
「アクセシビリティといっても実際の案件でどのようにUIデザインを設計すればよいのか？」今回は、LINEミニアプリの実例を交えながら、アクセシビリティに対応していくための情報の整理の仕方や、考え方についてお伝えします。 明日からのデザインワークに活かせるヒントが見つかるはずです。

クラスメソッド ふみ子について
2019年にクラスメソッド株式会社に入社。UIデザイナーとしてLINEミニアプリやモバイルアプリの受託開発に従事し、体験設計から要件定義〜テストまで幅広く携わる。プロジェクトマネージャーの経験も持ち、顧客と開発チームが共創しながらユーザーに寄り添ったプロダクトを作り上げることを大切にしている。

ブログURL：https://dev.classmethod.jp/author/fumiko/

Transcript

1. 今⽇から意識できる アクセシビリティ クラスメソッド株式会社 リテールアプリ共創部 ふみ⼦
2. ⾃⼰紹介 2 • 2019年 UIデザイナーとして⼊社 • 2021年 ◦ ヘルスケア改善 LINEミニアプリ開発 従事 • 2022年 ◦ 店舗向け会員証 LINEミニアプリ開発 従事 • 2024年  ◦ 服薬⽀援プログラム LINEミニアプリ 開発 従事 ふみ⼦ クラスメソッド株式会社 リテールアプリ共創部 UIデザイナー バナー制作 イベントジャケット制作
3. 3 事例：旭化成ファーマさま 服薬⽀援プログラムを紙からLINEへ ⾼齢者を意識したUI/UX設計で使いやすい仕組みを実現
4. 4 事例：LINEミニアプリにした経緯 • 郵送のため個⼈情報が必要 • 服薬が継続されているかわからない ✉ • 個別のアプリダウンロード不要 • 個⼈情報の登録不要 • 服薬状況を収集‧分析 • ユーザーの状況に応じたメッセージ配信
5. 今⽇から意識できるアクセシビリティ 情報を整理する UIを設計する
6. 「⾼齢者向けの画⾯を設計して」と⾔われたら 何から始めますか？
7. 7 「⾼齢者」というまとまりから「個⼈」を考える 7 65歳以上の⽅を ⾼齢者と定義 総⼈⼝の29.1% 約3627万⼈ 何らかの ⽩内障の症状 がある ⾼齢者の約70〜75% 約2500万⼈ 2つ以上の慢性疾患を 持っている ⾼齢者の約40% 約1451万⼈ 参考：総務省『⼈⼝推計』（2023年9⽉時点）、厚⽣労働省『国⺠健康‧栄養調査』『患者調査』（2019年〜2021年）および関連研究データを基に作成
8. 8 「⾼齢者」というまとまりから「個⼈」を考える 8 2つ以上の 慢性疾患を 持っている ⾼齢者の約40% 約1451万⼈ ⽩みがかって⾊や ⽂字が⾒えにくい ⼿が震えて操作が 難しい スマホを操作する 元気がない
9. 9 ⾼齢者向けスマートフォンでのテストを実施 9 らくらくスマートフォン F-52B
10. 今⽇から意識できるアクセシビリティ 情報を整理する UIを設計する
11. 20pt 太字 18pt 34pt 太字 11 22 ポイントまたは 18 ポイントの太字を使⽤する WCAG（Web Content Accessibility Guidelines）2.1 ⽇本語訳注 より参照 テキストの⼤きさ
12. 12 ❌ テキストの⼤きさが 意識できていない ⭕ テキストの⼤きさが 意識できている
13. 背景⾊ #81610aff 前景⾊ #ffffff テキストおよび⽂字画像の視覚的提⽰に、少なくとも 4.5:1 のコントラスト⽐があること WCAG（Web Content Accessibility Guidelines）2.1 ⽇本語訳注 より参照 13 コントラスト（明暗差）
14. ❌ 明暗差が意識できていない ⭕ 明暗差が意識できている あ あ コントラスト比が4.5:1未満 コントラスト比が4.5:1以上
15. 15 コントラストのチェック⽅法① 1. Colour Contrast Analyserをダウンロード 2. 前景⾊、背景⾊を指定(カラーピッカーあり) 3. 「WCAG2.1の結果」欄にコントラスト⽐と達 成基準ごとの結果が表⽰されます
16. 1. Color reviewをにアクセス 2. 前景⾊、背景⾊を指定(カラーピッ カーあり) 3. ｢Text(テキストで使う場合)｣ ｢Headline(太字テキストで使う場合)｣ の結果が表⽰されます 4. 結果が｢AA｣もしくは｢AAA｣となって いたら4.5:1のコントラスト⽐を意識で きています 16 コントラストのチェック⽅法②
17. 17 メンタルモデル 17 ➡ ✅ ❌ 次に進めそう だめそう 閉じることが できそう ⼤丈夫そう 終わった
18. ⭕ ユーザーのメンタルモデルを 考慮して画⾯を設計する 補聴器には『右が⾚‧左が⻘』 というルールがある
19. 19 ⼊⼒ 19 ⭕ 1つの設問に答えれば良い 設問や⼊⼒項⽬が多く複雑
20. 20 ⼊⼒：ボタンの詳細 20 ⭕ 押せそうであることが 分かる ❌ ラベルなのか、ボタンなのか 分からない
21. 今⽇から意識できるアクセシビリティ 情報を整理する UIを設計する • テキストの⼤きさ‧コントラストなどWCAGを参考する • ユーザーのメンタルモデルを意識する • ユーザーに合った画⾯構成を考える • ⼀次情報を整理して対象となるユーザーの状況を考える • ユーザーに合った環境（プラットフォーム）を考える
22. 22 最後に モダンな技術でフルスタック開発に挑戦し たい⽅ • 2~3名のエンジニアが、フロントエン ド、サーバーサイド、インフラ全て担当 しています プリセールスからプロダクトの⽅向性を 提案したい⽅ • エンジニアがプリセールスも顧客折衝も ガンガン進めていきます • アジャイル開発が多く提案しやすいです クラスメソッドでは⼀緒に働ける 仲間を募集しています