おじいちゃんに優しいUIをつくってみた

フロントエンドカンファレンス北海道 2025
https://fortee.jp/frontend-conf-hokkaido-2025/proposal/84db23d7-e1ed-4111-988f-5aa893e3b0b7

Transcript

1. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn おじいちゃんに優しいUI作ってみた Shota Miyahira （@nano72mkn） スターフェスティバル株式会社 2025/09/06 フロントエンドカンファレンス 北海道 2025
2. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn Shota Miyahira （@nano72mkn） フロントエンドエンジニア ＼ お弁当を配達するよ！ ／ スターフェスティバル株式会社 UI/UXに興味がある 社内プロジェクトでシニア向けアプリを作ることになりました
3. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn シニアが直面する課題 視覚能力の低下 老眼 コントラスト感度の低下 視覚的な走査速度の低下 運動コントロール 手先の器用さの低下 手と目の協調能力の低下 認知能力の低下 短期記憶の減少 ...etc 参考： 高齢者のためのユーザインタフェースデザイン 公益社団法人 日本眼科医会 - 40代で始まる目の老化
4. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn シニアが抱える課題を解決するために 視覚能力 フォントサイズ コントラスト 運動コントロール タッチ領域
5. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn 基準となる最低ライン タッチ領域 iOS HIG: 44pt以上 Material Design: 48dp以 上 フォントサイズ 本文：16px（HLO推奨） コントラスト 4.5:1以上（WCAG AA基 準） 大きい文字：3:1以上 （18pt/14pt太字以上） 参考： Human Interface Guidelines Material Design Digital.gov - Eight principles of mobile-friendliness WCAG 2.2 - コントラスト (最低限) Health Literacy Online - Section 5.3
6. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn シニア向け対策 タッチ領域 19mm前後 （約 120dp / 54pt） フォントサイズ 本文：19px（HLO推奨） コントラスト 7:1以上（WCAG AAA基 準） 参考： Touch Screen User Interfaces for Older Adults: Button Size and Spacing Health Literacy Online - Section 5.3
7. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn 基準 シニア向け対策
8. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn これで完璧？
9. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn ユーザーから 送られてきた画面 （再現イメージ）
10. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn システムのフォント サイズ iOS設定 > アクセシビリティ > さらに大き な文字 通常の範囲： 最大 約200% まで 「さらに大きな文字」をON： 最大 約310% まで拡大
11. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn 対応方法 RNの場合 maxFontSizeMultiplier で拡大の上限を設定する フォントサイズによって 表示できる行数を調整 レイアウトを切り替える 参考： Human Interface Guidelines - ダイナミックタイプに対応する <Text maxFontSizeMultiplier={2.0 /* 例: 200%上限 */}> … </Text>
12. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn まとめ 最低ラインの基準を守る シニア世代にも配慮する ユーザーのアクセシビリティ設定を確認する シニア向けUIに興味を持っていただけたら嬉しいです
13. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn ご清聴ありがとうございました
14. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn 参考 - 01 高齢者のためのユーザインタフェースデザイン https://www.kindaikagaku.co.jp/news/20191202.html 公益社団法人 日本眼科医会 - 40代で始まる目の老化 https://www.gankaikai.or.jp/health/37/ Human Interface Guidelines https://developer.apple.com/design/human-interface-guidelines Material Design https://m3.material.io/ Digital.gov - Eight principles of mobile-friendliness https://digital.gov/guides/mobile-principles/tap-targets WCAG 2.2 - コントラスト (最低限) https://waic.jp/translations/WCAG22/Understanding/contrast-minimum Health Literacy Online - Section 5.3 https://odphp.health.gov/healthliteracyonline/design-easy-scanning/use-readable-font-thats-least-16-pixels
15. フロントエンドカンファレンス 北海道 2025 frontendo ＠nano72mkn 参考 - 02 Touch Screen User Interfaces for Older Adults: Button Size and Spacing https://www.researchgate.net/publication/225367546_Touch_Screen_User_Interfaces_for_Older_Adults_Button_Size_and_Spacing Human Interface Guidelines - ダイナミックタイプに対応する https://developer.apple.com/jp/design/human-interface-guidelines/typography#Supporting-Dynamic-Type