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
camcam_lemon
September 26, 2023
Technology
1
370
視え方と文字の大きさ
We Are JavaScripters! @42nd【初心者歓迎・LT会】の登壇資料
camcam_lemon
September 26, 2023
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
43
iOSのキーボード入力ビューをカスタマイズする
lemon
0
190
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
260
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.8k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
950
ESLintで始めるTypeScriptの静的解析
lemon
8
2k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
React.lazyとSuspenseで行うLazy Load
lemon
2
480
Other Decks in Technology
See All in Technology
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
130
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
690
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
110
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
780
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
100
Amazon Aurora のバージョンアップ手法について
smt7174
2
180
DeepSeekとは?何がいいの? - Databricksと学ぶDeepSeek! 〜これからのLLMに備えよ!〜
taka_aki
1
170
MIMEと文字コードの闇
hirachan
2
1.4k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
540
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
4 Signs Your Business is Dying
shpigford
183
22k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Documentation Writing (for coders)
carmenintech
68
4.6k
GraphQLとの向き合い方2022年版
quramy
44
14k
Designing for Performance
lara
605
68k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Why Our Code Smells
bkeepers
PRO
336
57k
Transcript
視え方と文字の大きさ We Are JavaScripters! @42nd
甲斐田 亮一 @camcam_lemon 株式会社CureApp エンジニア TypeScript, React / Figma Name
Twitter Company Occupation Skills
実装での文字の大きさ変更 em,rem,%等の単位による相対指定 calc関数とビューポート単位を組み合わせた自動算出 JavaScriptからfont-sizeを指定 メディアクエリー
OSからの変更 Mac: システム設定 > ディスプレイ > 解像度 Windows:スタート
> 設定 > アクセシビリティ > テキストサイズ iPhone:設定 > アクセシビリティ > 画面表示とテキストサイズ Android:設定 > ディスプレイ > 詳細設定 > フォントサイズ
ブラウザからの変更 「︙」アイコン > 設定 > デザイン > フォントサイズ 8 Google
Chrome: 設定 > 外観 > フォント 8 Firefox: 「≡」アイコン > 設定 > 一般 > フォント 8 Edge: アドレスバーの「ぁあ」 > 「ぁ」 or 「あ」 8 iOS Safari: Command キー + プラス or マイナス キー 8 Mac Safari:
ユーザースタイルシートからの変更 ユーザーが独自定義したスタイルをブラウザに設定する 主要ブラウザは全てサポートしている (今のところは)スマホはサポートしていない
設定の優先順位 É OS É ブラウザ 'É JavaScript 8É ユーザースタイルシート BÉ
CSS
文字の大きさはユーザも変更できる
なぜOSやブラウザから変更できるのか アクセシビリティの向上 視覚障害者やロービジョンのユーザにとっては必要不可欠な機能 WCAGでは文字の拡大縮小はユーザーエージェントの責任と明記されている 晴眼者でも一人ひとり読みやすい文字の大きさは違う
外部機器(外付けモニターとか)など多種多様な環境への対応 ユーザビリティの向上
" 一部の国や地域では満たすべきアクセシビリティの基準がある " この基準の中の1つに視覚障害者へのアクセスを確保する規定が含まれる " 法的要因 " 文化や言語によって、標準とされる文字の大きさが異なる " アラビア語やヘブライ語は右から左に読むためレイアウトも異なる
" 日本語の場合、Webも印刷物も12〜16ptが標準とされている " 文化的・言語的要求 なぜOSやブラウザから変更できるのか
視覚障害の種類 視力障害 視野障害 $ 色覚障害 0 光覚障害
日本の視覚障害者の人口 ) 2009年の厚生労働省による調査だと約31万人 ) 視覚障害の身体障害者手帳所持者数が31万人 ) 2007年の日本眼科医会の分析では約164万人 ) 失明者とロービジョン者が164万人 出典:厚生労働省「身体障害者実態調査結果の概要」
https://www.mhlw.go.jp/www1/toukei/h8sinsyou_9/1-2.html 出典:日本眼科医会「日本における 視覚障害の社会的コスト」 https://www.gankaikai.or.jp/info/kenkyu/2006-2008kenkyu.pdf
視覚障害以外にも視え方の異常はある
屈折異常と老眼 屈折異常は焦点を正しく合わせられない状態 代表的な症状が「近視」「遠視」「乱視」 眼球の屈折力に問題があり異常をきたす 老眼は加齢にともなう視え方の変化の総称
眼球の水晶体が硬化し、調節能力の低下により様々な異常をきたす 調節能力が低下により「近視」の症状が表れる 一般的に40歳をこえると症状が表れてくる 日本の老眼人口は7000万人以上だと言われている(総人口は1億2330万人)
文字の拡大縮小は欠かせない機能 必要としているのは視覚障害者だけではない 日本の現状も鑑みると必須とも言える 私たちが考えてるよりも多くの人が必要としている
いまは 側かもしれないが 助ける いずれ 側になる 助けられる いま助けることは未来の私たちを助けることでもある
どうするべきか ! 一概にこうすればいい的なうまい話はない ! 理想は文字の大きさに依存しないデザインと実装 だが実際問題きびしい(というか無理) ! モバイルOSが曲者 特にiOS...
モバイルOSにおける文字の拡大縮小 7 一般的にフォントスケーリングと呼ばれている 7 iOSでは現在ダイナミックタイプと呼んでいる 7 文字の大きさ = font-size *
font-scale 7 iOSだとfont-sacaleはブラウザには反映されない
CSSで反映させることは可能 6 fontプロパティに-apple-system-bodyを設定 6 font-familyだけだとサイズと太さは反映されない 6 これでスケーリングされるが・・・
iPhoneで文字の大きさを変更する デフォルト(L) 最大サイズ(AX5)
iPhoneの設定アプリ デフォルト(L) 最大サイズ(AX5)
iOSはめっちゃくっちゃでっかくできる ' 最大サイズの「AX5」は「L」の約3.1倍の大きさ ' Chromeの標準テキストが16px => 53pxになる ' Safariの「ぁあ」からもっとでっかくできる '
逆にアクセシビリティを損なわないか慎重に検討 ' この振れ幅で文字の大きさに依存しないデザイン は無理がある
JavaScriptとフォントスケーリング S JavaScriptからOSのフォントスケーリング値を 取得することは不可能 S セキュリティ的な理由でダメなのかな? S 有識者いたら教えてほしい
一応わかるっちゃわかる 7 OSとブラウザの設定値ともにbody要素のfont-size に反映されるので、それを利用する 7 信用できる値ではないので注意
iPhoneのアプリはどう対応しているのか
iPhoneのミュージックアプリ デフォルト(L) 最大サイズ(AX5)
iPhoneの天気アプリ デフォルト(L) 最大サイズ(AX5)
iPhoneアプリから見る視え方への対応 ( スケールする最大値を設定している ( スケールさせずに固定する ( 一律で文字を大きくしているわけではない ( 情報の重要度の単位で大きさを変えている (
大きさによってはレイアウトを変える ( 操作性は変えても機能性や情報量は変えない
どう向き合っていくか ) コンテンツが訴求したい価値に欠落が生じていない かが1番大事 ) 情報の重要度をベースに対応を考える ) 文字の大きさを固定するという選択肢は常に残す ) 実装だけですべてを解決することはできない
) チームでどうするか考えよう
ご清聴ありがとうございました