スマホデザインで見やすいサイズ、行間は?デフォルトのアプリ等を調べてみた

eyecatch

こんにちは、デザイナーの小林です。

最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。
Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。
「小さすぎるんじゃないか?」
「見出しと本文の違いがパッと見で分かるだろうか?」などなど…

そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。

検証方法

  1. iPhone4S(古くてスイマセン)でキャプチャーとる
  2. Photoshopで上からテキストをトレース。(このときの文字設定の数値を記載しています。)

 

ホーム画面

iPhone01

  

通話履歴

iPhone09

  

メール

iPhone02 

 iPhone03

  

リマインダー

iPhone04

  

メモ帳

iPhone05

  

ミュージック

iPhone06

 iPhone07

 iPhone08

 

Google Chrome

iPhone10

 iPhone11

  

Facebook

iPhone12

  

Twitter

iPhone13 

iPhone14

 

Youtube

iPhone15

 iPhone16

iPhone17

iPhone18

  

はてなブックマーク

iPhone19

 iPhone20

 

evernote

 iPhone21

iPhone22

 

 

以上が調べた結果です。

自分が思っていたよりも、やはり見出しは全体的に大きめでした。
本文は大体24~28px、見出しは26~34pxが平均的かと感じます。
また、余談ですが、リスト上のデザインは上下30pxずつ余白をとっているものが多かったです。
左右の余白は30pxのものが多く、情報を詰めたいものは20pxといった印象です。

要素の前後関係や、全体のトンマナ、そのアプリ、サイトの目的などから、一概にこのサイズにしておけば良いと言えるものではありませんが、ひとつの指標になるのではないでしょうか。

それにしてもiPhone4S、iOSアップロードしてからしょっちゅう落ちます…いい加減、機種変更したいと思います。それではまた。