デザインの話題:角度で規定する文字サイズ



アプリのUIデザインをするにあたって文字サイズはいくらまで小さくできるのかを考えることがあります。画面に対して情報量が多い場合、文字が小さくなることもあるのですが、小さすぎて見づらいとやはりアプリ自体の評価も下がってしまいます。

なので1つの会社や1つのブランドでデザイン品質を統一的に保つため、例えば文字は24px以上を使うなど規定していることもあるでしょう。そしてもちろんこの規定はスマホとタブレットのアプリでは変えることになります。それはスマホよりもタブレットの方が人の目から遠くで使われるためです。この物理的な原因によりタブレットでは文字サイズをスマホより少し大きく規定する必要があります。

さて、ではスマホでもタブレットでもないATMのような設備に備え付けのデバイスのデザイン依頼がきたらどうしましょう。初めてのことで、どれぐれいの文字サイズが下限値なのか全くわかりません。

そんなとき「角度」で文字サイズを規定しておけば安心です。原点を目の位置としてそこから規定された角度で広がっていき、デバイスの画面があるところまでの距離「視距離」で文字の高さが算定されます。

例えば「0.25°以上の文字サイズであること」と規定した場合、視距離がおよそ「230mm」のスマートフォンでは文字サイズは「2mm以上」にする必要があります。視距離が「700mm」のデバイスのデザインを求められた場合は「6.1mm以上」となりますね。あとはmmをdpiを使ってpxに変換すれば画面デザインに取り掛かることができます。これでどんなデバイスのデザイン依頼がきても文字サイズの品質を保つことができます。具体的には以下のExcel計算式で値を割り出すことができます。

文字の高さ = 視距離 × tan(角度 * PI()/180)

ちなみに昔からある視力検査にもこの角度と視距離の考え方が入っています。具体的にはCの切れ目の高さの算定に使われています。

アプリなどGUIのデザインは画面の中だけ考えていても良いものにはなりません。使われているシーン、いわゆるユースケースを鑑みて適正な文字やグラフィクスを考える必要があるということですね。

(Betonacox Design)