アプリデザインでカスタムフォントを使うときに注意すること

Font iOS UIデザイン

iOSエンジニアの加藤です！

グッドパッチでは、エンジニアリングの力をデザインに活かすための施策をいくつか実施しています。 そのひとつ、デザイナーがエンジニアに自由に相談できる時間「エンジニアオフィスアワー」の中で、UIデザイナーからカスタムフォントについて相談がありました。 そこでiOSエンジニアからUIデザイナーに伝えた内容をまとめました。

結論

多くの場合はコストに対して得られるメリットが少ないため、使わないことをオススメしています。

なぜ使わないほうがいいのか

Apple の Human Interface Guideline 1に明記されている

Choosing Fonts to Enhance Your App.
Use built-in text styles whenever possible.

Make sure custom fonts are legible.
Unless your app has a compelling need for a custom font — such as for branding purposes or to create an immersive gaming experience — it’s usually best to stick with the system fonts.

可読性の観点から、システムフォントを使うことが推奨されています。

暗号化する必要がある

フォントファイルを組み込んだアプリを配布して、ユーザーが簡単にフォントファイルを抜き出すことができてしまったら困りますよね。そのような事態を防ぐために、フォントファイルを組み込む際は基本的には暗号化する必要があります2。

また、アプリ起動後に復号化してから使う必要があるため、

  • 復号化中は使えない（≒ 起動直後の画面では使えない）
  • 復号化をマルチスレッドで処理しないとUIが固まってしまうため、起動直後の処理が複雑になりバグリスクが高い
  • 復号化に関連して画面遷移やデザインに制約が多く発生する
  • その制約を引き継ぎながらメンテナンスしていく必要がある

などの負債に繋がり、ユーザーに素早く価値を届けるのが難しくなります。

OS機能への追従に工数がかかる

たとえば Dynamic Type です。Dynamic Type は iOS が提供するアクセシビリティの一つで、ユーザーがフォントサイズを変更することができます。 他にも、今後のOSアップデートでフォント関連の新機能が追加されるかもしれません。 OS標準のフォントを使うことで、アクセシビリティや新機能へ素早く対応することができます。

アプリの容量が増える

フォントファイルによっては数十MBのサイズになります3。 アプリのインストール・アップデート時にユーザーの通信量・ストレージ容量を消費するため、ユーザー視点で得られるメリットが薄く、良い体験とは言えません。 また、日本ではあまり感じられませんが、海外では回線が細い地域もあります。アプリ容量は少ないにこしたことはありません。

WebViewと合わせるのが大変

実装の都合で一部WebViewを使うことがあるかと思います。例えば、お知らせ詳細画面などが考えられます。 WebViewも含めてアプリ全体でフォントをカスタマイズする場合、WebViewでの実装や契約関係など考慮する項目が増えます。

多言語対応が大変

今は多言語対応していないかもしれませんが、今後対応するかもしれません。英語ではこのフォント、繁体中文ではこのフォント、などすべて選ぶのは現実的ではありませんよね。アプリ容量もそのぶん大きくなります。 カスタムフォントを使ったことが将来的に事業の成長に対するボトルネックになる可能性があります。

契約が大変

契約によりフォントファイルを使える範囲が細かく定められているほか、開発メンバーの人数に対して料金が発生する場合もあります。 上記の暗号化やWebViewでの使用によっても契約が変わる可能性があり、UIデザインのタイミングでは判断が難しい箇所でもあります4。 エンジニアと密に連携が取れない環境での判断はリスクが高いです。

おわりに

アプリデザインは、デザイナーだけでは完結しない難しさがあります。 Goodpatchでは事業の成長に寄与できるデザインを大切にしており、そのためにはエンジニアリングの力が必要です。 少しでもご興味を持たれた方は、ぜひ一度カジュアルにお話ししましょう！

  1. https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/↩

  2. フォントの種類や契約形態によって変わります↩

  3. フォントの種類によって変わります↩

  4. 契約形態によって変わります↩