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
390
視え方と文字の大きさ
We Are JavaScripters! @42nd【初心者歓迎・LT会】の登壇資料
camcam_lemon
September 26, 2023
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
要素のサイズを変えずに押しやすくする
lemon
0
65
iOSのキーボード入力ビューをカスタマイズする
lemon
0
240
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
280
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
980
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
SEがエンジニアに目覚めデザイナーに転身した冒険譚
lemon
6
1.5k
React.lazyとSuspenseで行うLazy Load
lemon
2
510
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
4
13k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
1
190
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9.2k
AWS認定を取る中で感じたこと
siromi
1
190
MobileActOsaka_250704.pdf
akaitadaaki
0
120
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
380
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
OPENLOGI Company Profile for engineer
hr01
1
34k
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Building Applications with DynamoDB
mza
95
6.5k
Visualization
eitanlees
146
16k
RailsConf 2023
tenderlove
30
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Code Reviewing Like a Champion
maltzj
524
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
It's Worth the Effort
3n
185
28k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Six Lessons from altMBA
skipperchong
28
3.9k
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番大事 ) 情報の重要度をベースに対応を考える ) 文字の大きさを固定するという選択肢は常に残す ) 実装だけですべてを解決することはできない
) チームでどうするか考えよう
ご清聴ありがとうございました