見出し画像

iOSダイナミックフォントに対応するメリットとデザインのテクニック


NTTレゾナントテクノロジー アジャイルデザイン部UI/UXデザインチームの呉です。
今回はiOSダイナミックフォントに対応するメリットとデザインのテクニックを紹介します。

iOSダイナミックフォントとは

iOSのダイナミックフォントは、ユーザーがiPhoneの設定アプリからフォントサイズを変更できる機能です。ダイナミックフォントに対応しているアプリでは、iPhoneのフォントサイズ設定に応じて、アプリ内のテキストが自動的に調整されます。視覚障がいのあるユーザーや加齢によって小さな文字が見えづらくなったユーザーは、この機能を使って最適な文字サイズでコンテンツを読むことができます。

フォントサイズはiPhoneの設定アプリ内「アクセシビリティ」から変更可能で(左図参照)、コントロールセンターからも調整できます(右図参照)。

iOSダイナミックフォントに対応するメリット

ユーザーにとってのメリット

  • コンテンツの閲覧の快適性:ユーザーは、自分の視力や好みに合わせて、最適なフォントサイズに調整できます。

  • アクセシビリティ:特に視覚に障がいのあるユーザーにとっては、文字を大きく表示できることは非常に重要です。

アプリデベロッパーにとってのメリット

  • アクセシビリティの向上:ダイナミックフォント対応により、アプリはより多くのユーザーに利用されやすくなります。視覚に障がいのあるユーザー向けのサービスや、幅広い層に向けたアプリでは対応が推奨されます。

  • ユーザー体験の向上:ユーザーは、自分の好みに合わせたフォントサイズでアプリを利用できるため、より快適なユーザー体験を得ることができます。

アクセシビリティの向上、ユーザー層の拡大、大きいフォントを求めているユーザーのApp storeレビューや評価の改善などを通じて、アプリ全体のユーザー体験に良い影響を与え、長期的な成功につながることが期待できるようになります。

ダイナミックフォント対応のUIデザイン作成時のテクニック

iOS標準のテキストスの活用

iOSは見出し、本文、ボタンなど、様々な要素に対応した標準のテキストを提供しています。標準のテキストを利用することで、簡単にダイナミックフォントに対応できます。また、iOSの標準機能を利用するため、開発者はフォントサイズに関する多くのコードを記述する必要がなくなります。

iOSはxSmallからAX5まで、12段階のフォントサイズを用意しています。

当社が開発しているアプリはiOS標準のテキストを利用しています。アプリ画面上の各テキストは標準テキストのどのスタイル(※)かを指定し、iPhoneの設定に応じて自動的にフォントサイズが変化します。
※図のstyle列のBody、Large Titleなどのスタイル名

レイアウトの柔軟性

ダイナミックフォント対応には、レイアウトが柔軟であることが重要です。Auto LayoutやStack Viewなどを活用して、フォントサイズが変化してもレイアウトが崩れないデザインを心掛けましょう。

Apple社の純正アプリ「ショートカット」は、ダイナミックフォントに対応しており、フォントが大きくなるとカードUIが1カラム表示になります。

当社が開発しているアプリの1つで、ターゲットユーザー層が情報の豊富さを求めているが、すべてのテキストをダイナミックフォントに対応させると、視覚的な美しさと情報の可読性に悪影響を与えます。そのため、当社はそのアプリ内の情報の重要度を分類し、重要度が高い、もしくはナビゲーションの役割があるテキスト(例:タイトル)のみ対応させます。

テストと検証

ダイナミックフォント対応において、様々なiPhone機種でフォントサイズを最小値から最大まで変えて、レイアウト崩れやテキストの見切れが発生しないか検証することは非常に重要です。フォントサイズが変わると、テキストボックスやレイアウトが崩れることがあるため、適切な表示が保たれているか確認する必要があります。これにより、アクセシビリティの向上だけでなく、ユーザー体験全体の質を保つことができ、アプリの信頼性や満足度を高めることができます。

当社は自社が運営/開発しているリモートで実機検証可能なクラウドサービス、Remote TestKitを利用して、複数のiPhone機種で検証を行っています。特にAndroidのスマートフォンでもiOSダイナミックフォントと同様の機能があるものの、Androidデバイスはメーカーによって解像度やフォントサイズがかなり異なるため、実機検証の難易度が上がります。Remote TestKitでは700機種を超える端末を提供しており、効率的な実機検証が可能となります。

Remote TestKitの「端末を探す」画面

まとめ

iOSダイナミックフォントは、ユーザーのアクセシビリティ向上や、より快適なユーザー体験を提供するために非常に重要な機能です。ダイナミックフォントに対応することで、よりユーザーに寄り添ったユーザー体験を実現しましょう。

引用元
Human Interface Guidelines - Typography


いいなと思ったら応援しよう!