今日から意識できるアクセシビリティ

by fumiko

Embed

Start on current slide

Slide 1

Slide 1 text

今⽇から意識できるアクセシビリティクラスメソッド株式会社リテールアプリ共創部ふみ⼦

Slide 2

Slide 2 text

⾃⼰紹介 2 ● 2019年 UIデザイナーとして⼊社 ● 2021年 ○ ヘルスケア改善 LINEミニアプリ開発従事 ● 2022年 ○ 店舗向け会員証 LINEミニアプリ開発従事 ● 2024年 ○ 服薬⽀援プログラム LINEミニアプリ開発従事ふみ⼦クラスメソッド株式会社リテールアプリ共創部 UIデザイナーバナー制作イベントジャケット制作

Slide 3

Slide 3 text

3 事例：旭化成ファーマさま服薬⽀援プログラムを紙からLINEへ⾼齢者を意識したUI/UX設計で使いやすい仕組みを実現

Slide 4

Slide 4 text

4 事例：LINEミニアプリにした経緯 ● 郵送のため個⼈情報が必要 ● 服薬が継続されているかわからない ✉ ● 個別のアプリダウンロード不要 ● 個⼈情報の登録不要 ● 服薬状況を収集‧分析 ● ユーザーの状況に応じたメッセージ配信

Slide 5

Slide 5 text

今⽇から意識できるアクセシビリティ情報を整理する UIを設計する

Slide 6

Slide 6 text

「⾼齢者向けの画⾯を設計して」と⾔われたら何から始めますか？

Slide 7

Slide 7 text

7 「⾼齢者」というまとまりから「個⼈」を考える 7 65歳以上の⽅を⾼齢者と定義総⼈⼝の29.1% 約3627万⼈何らかの⽩内障の症状がある⾼齢者の約70〜75% 約2500万⼈ 2つ以上の慢性疾患を持っている⾼齢者の約40% 約1451万⼈参考：総務省『⼈⼝推計』（2023年9⽉時点）、厚⽣労働省『国⺠健康‧栄養調査』『患者調査』（2019年〜2021年）および関連研究データを基に作成

Slide 8

Slide 8 text

8 「⾼齢者」というまとまりから「個⼈」を考える 8 2つ以上の慢性疾患を持っている⾼齢者の約40% 約1451万⼈⽩みがかって⾊や⽂字が⾒えにくい⼿が震えて操作が難しいスマホを操作する元気がない

Slide 9

Slide 9 text

9 ⾼齢者向けスマートフォンでのテストを実施 9 らくらくスマートフォン F-52B

Slide 10

Slide 10 text

今⽇から意識できるアクセシビリティ情報を整理する UIを設計する

Slide 11

Slide 11 text

20pt 太字 18pt 34pt 太字 11 22 ポイントまたは 18 ポイントの太字を使⽤する WCAG（Web Content Accessibility Guidelines）2.1 ⽇本語訳注より参照テキストの⼤きさ

Slide 12

Slide 12 text

12 ❌ テキストの⼤きさが意識できていない ⭕ テキストの⼤きさが意識できている

Slide 13

Slide 13 text

背景⾊ #81610aff 前景⾊ #ffffff テキストおよび⽂字画像の視覚的提⽰に、少なくとも 4.5:1 のコントラスト⽐があること WCAG（Web Content Accessibility Guidelines）2.1 ⽇本語訳注より参照 13 コントラスト（明暗差）

Slide 14

Slide 14 text

❌ 明暗差が意識できていない ⭕ 明暗差が意識できているああコントラスト比が4.5:1未満コントラスト比が4.5:1以上

Slide 15

Slide 15 text

15 コントラストのチェック⽅法① 1. Colour Contrast Analyserをダウンロード 2. 前景⾊、背景⾊を指定(カラーピッカーあり) 3. 「WCAG2.1の結果」欄にコントラスト⽐と達成基準ごとの結果が表⽰されます

Slide 16

Slide 16 text

1. Color reviewをにアクセス 2. 前景⾊、背景⾊を指定(カラーピッカーあり) 3. ｢Text(テキストで使う場合)｣｢Headline(太字テキストで使う場合)｣の結果が表⽰されます 4. 結果が｢AA｣もしくは｢AAA｣となっていたら4.5:1のコントラスト⽐を意識できています 16 コントラストのチェック⽅法②

Slide 17

Slide 17 text

17 メンタルモデル 17 ➡ ✅ ❌ 次に進めそうだめそう閉じることができそう⼤丈夫そう終わった

Slide 18

Slide 18 text

⭕ ユーザーのメンタルモデルを考慮して画⾯を設計する補聴器には『右が⾚‧左が⻘』というルールがある

Slide 19

Slide 19 text

19 ⼊⼒ 19 ⭕ 1つの設問に答えれば良い設問や⼊⼒項⽬が多く複雑

Slide 20

Slide 20 text

20 ⼊⼒：ボタンの詳細 20 ⭕ 押せそうであることが分かる ❌ ラベルなのか、ボタンなのか分からない

Slide 21

Slide 21 text

今⽇から意識できるアクセシビリティ情報を整理する UIを設計する ● テキストの⼤きさ‧コントラストなどWCAGを参考する ● ユーザーのメンタルモデルを意識する ● ユーザーに合った画⾯構成を考える ● ⼀次情報を整理して対象となるユーザーの状況を考える ● ユーザーに合った環境（プラットフォーム）を考える

Slide 22

Slide 22 text

22 最後にモダンな技術でフルスタック開発に挑戦したい⽅ ● 2~3名のエンジニアが、フロントエンド、サーバーサイド、インフラ全て担当していますプリセールスからプロダクトの⽅向性を提案したい⽅ ● エンジニアがプリセールスも顧客折衝もガンガン進めていきます ● アジャイル開発が多く提案しやすいですクラスメソッドでは⼀緒に働ける仲間を募集しています

Slide 23

Slide 23 text

No content