iOS文字の拡大率(ダイナミックフォント)を考慮したUIデザイン
iOSのアクセシビリティではフォントサイズや画面の拡大などが可能です。
通常のアプリだと考慮しなくても大した問題にならないかもしれませんが、高齢者向けのサービスなどだと、利用ユーザーがフォントや画面の拡大率を設定している可能性があり、UIの崩れの原因となってしまいます。
逆に、フォントを大きくしたい大きく表示させたいユーザーに対して、その機能を制限してしまう場合もあります。
今回、この問題の仕様や対応策を考える機会があったので記事にまとめました。
フォントサイズの拡大とは？
まずはフォントサイズの拡大機能についてです。
iOSの 設定 ＞ 画面表示と明るさ ＞ 文字サイズを変更 をタップすると出てくる端末のフォントサイズを全体的に拡縮できる機能のことです。
さらに詳しく設定画面を見ていきましょう。
こちらはiOS15のアクセシビリティのフォント拡大メニューです。
7段階にフォントサイズを拡大できるような設定が表示されています。
が、ここで注目したいのは、上にあるトグルメニューの「さらに大きな文字」メニュー。
（※設定の画面表示と明るさからは見れませんが、「アクセシビリティ＞画面表示とテキストサイズ＞さらに大きな文字」から入ると確認できます）
このトグルをオンにすると、7段階のフォントサイズの拡縮が＋5段階増え、12種の拡大率を選択できるようになります。
つまり、このフォントサイズ拡大をすると最大12段階のフォントサイズがアプリに適用されます。
また、Androidでも同様の機能はありますが、端末やOSによってスケール数が違うので全てを網羅してデザインするのは難しそうです。
拡大表示とは？
フォントサイズの拡大率とは別に「拡大表示」という機能もあります。
これはスマホの画面全体を大きくする機能で、問答無用で表示が大きくなります。
最低端末サイズの横幅を気にして、ギリギリ入るように作っているUIなどよくあると思いますが「拡大表示」をしてアプリを見てみましょう。おそらく目を瞑りたくなるズレが起きているアプリも多々あるはず、、
iOSは標準か拡大表示かの2択しか現状はありませんが(2023年現在)
Android端末は端末ごとに段階も変わっているようです。
フォント拡大と拡大表示を掛け合わせると…
上の画像はそれぞれiOSの
標準
サイズを拡大したもの
表示拡大のみしたもの
フォントをさらに拡大で最大値に設定したもの
フォントの最大値＋表示拡大を掛け合わせたもの
で並べています。
この他、テキストをボールドにする機能もあり、もはや全てに対応するデザインを考えることはできないほど、OS設定でデザインは変化します。
Apple公式フォントサイズ表
前述した通り、Androidの拡大率は調査していくのがかなり難しいため、一旦考慮から外しiOSの機能を調べてみました。
iOSは公式にフォント拡大率の数値や、XDのデータを用意してくれています。
Apple公式のXDのデータと、Apple Developerの公式表示の数値の間に、一部数値が一致しないところもありましたが、おおむねの拡大率はリンクを参照すれば把握できるようになっています。
(ちなみにFigmaでのデータは公式では見つけられませんでした）2022/07現在
Apple Developerのサイトに載っているフォントサイズの一覧
Apple watchやMac OSのフォントサイズも載っています。
この表を見ていただくとわかるように、iOSのフォントサイズは下記のような名称になっています。
プラスアルファで出てくる5段階についてはこちら
端末で検証してみましたが、AX5になると文字が大きすぎほぼ読めないレイアウトになってしまい、文字の拡大以前にユーザビリティがかなり落ちてしまいそうです。
日本語(Hiragino Sans)対応
こちらは余談ですが、調べた中で出てきたので記載しておきます。
前段紹介してきたAppleのライブラリに乗っているフォントサイズなどは、Appleの標準フォントであるSan Franciscoを基準にしています。SFは英語対応で日本語には対応していません。
iOS JPでは代わりに Hiragino Sansを使っていますが、SFに比べてヒラギノはやや大きく見えてしまうフォント特性があります。
そこでiOSは、ヒラギノを使った場合SFの約93.5%の大きさで表示するように調整が入っているそうです。
こちらはとてもわかりやすく、まとめてくれている記事があったのでそちらのリンクを貼らせていただきます。
これによると、デザインファイルでヒラギノでデザインを作っていても、実際の表示サイズはやや縮小されて表示されているということになります。
実際のフォントサイズを検証してみました。
こう見るとデザイン上14ptに指定しているものが、実機だと13.09ptで表示されているのが濃厚なようです。
やはり、ヒラギノを使った場合はiOSが自動で縮尺をかけているようです。
対応範囲を決める
長くなりましたが、これまではOSの機能について調べた結果を記述してきました。
以降は「じゃ、どうやってデザインや仕様をきめてくの？」という本題です。
結論としてiOSもAndroidも2択の選択肢があります。
①フォントサイズ拡大には対応せず、独自のアプリデザインから変化させない
② アクセシビリティに対応し、フォントサイズも可変対応させる
①フォント拡大させない
まずは、大前提として、アプリのアクセシビリティ設定に合わせ、フォントの拡大をしたいか、否か、の判断が必要となります。
アクセシビリティには対応せず、デザインしたままのフォントを表示させたい場合は、独自開発のフォントを指定しておけばフォントは拡大されません。
※拡大表示はちゃんと調べ切れてませんが、おそらく回避不可
②アクセシビリティ設定に合わせ、フォント拡大に対応する
アクセシビリティ設定に合わせ、フォントを拡大させる場合は、iOS提供のスケールに合わせてデザインする必要があります。
※逆にiOSのスケールを利用していない場合は、独自実装のフォントサイズが適応されるため、設定が変わってもフォントの大きさは変化しません。
スケール対応を適用させるには、前述した7段階（＋5段階）の横軸のスケールまで拡大することが可能です。
画像でいう横列が拡大率を示しており、標準はLargeになっています。
実際デザインする際は、拡大させたいフォントをiOSのフォントカテゴリに沿ってデザインしていきます。
画像でいうと縦軸のTitle1やBodyなどの11種のカテゴリのフォントサイズを使ってデザインをしていくことのなります。
もちろんiOSで提供しているフォントサイズでデザインすると理想的なデザインを作れないということもあります。
各カテゴリのフォントサイズを上書きすることが可能なので、
例えば、
BodyはiOS標準だと17ptだけど、実装は16ptに変更する
XXXLarge以上はフォントを大きくさせたくないので、XXXL以上は固定値にする
などの対応は可能なようです。
参照資料：Dynamic Type
注意しないといけないのは、iOSが提供している11カテゴリしかフォントの指定ができないため、デザインも11種のフォントを使って作成する必要があります。
また、BoldやMediumといったフォントウェイトの指定はできず、Appleが用意しているウェイトのまま表示されるとのことです。
繰り返しになってしまいますが、逆にレイアウト崩れの影響があり拡縮させたくない箇所は独自のフォント指定にすれば影響はないので、拡大したい箇所のみをiOSのLargeスケールにある11カテゴリのフォント指定をすることで、アクセシビリティの設定に合わせてフォントを拡縮させることが可能になります。
まとめ
iOSアプリのデザインする際、アクセシビリティに対応したい箇所のみをiOS提供のフォントカテゴリを当てて作り、
アクセシビリティの影響を受けたくない箇所は独自開発のフォントサイズを指定することで、設定変更によるレイアウト崩れなどを考慮した実装が可能になります。
Androidは端末によって拡大率は変わりますが、基本的な考え方は同じようになっているはずなので、拡縮したい箇所だけOS独自のフォント設定を引っ張ってくることで、アクセシビリティの対応が可能です。
Webも同様にiOSの設定を引用することが可能なので、iOSでしっかりとデザインを作っていれば、アプリWeb viewなどで閲覧する際、アプリと同様にアクセシビリティに応じたフォント比率を表示することが可能です。
これでフォントの拡縮率は解決しました。
表示拡大は全体に影響のある箇所ですが、どう対応できるかは今回の調査対象外だったためまた何かわかれば紹介しようと思います。