モバイルタイポグラフィー入門【モバイルでも読みやすいテキストを実現するために】

モバイルデザインは細部が重要です。PCと比べて画面が小さいため、デザイナーはUIを詰め込みすぎないようにデザインしなければなりません。特にタイポグラフィーは厄介で、美しく読みやすいものに仕上げるには、非常に多くの事に気を遣う必要があります。

今回はモバイルでタイポグラフィーを読みやすく仕上げるポイントを紹介します。

 

 

 

読みやすいテキストのために

読みやすいテキストとは、文字の区別、認識が簡単なものを指します。タイポグラフィーに時間をかける大きな理由がこの読みやすさです。モバイルの画面は小さい上に、環境によって明るさも大きく変わります。そうした厳しい条件で読みやすさを確保するには、次のことに注意してください。

 

1.フォントサイズ

モバイルではフォントサイズが特に重要です。明るい画面に小さな文字を写すと、目に負担がかかり、頭痛を起こすこともあります。ズーム機能で文字を大きくできますが、ユーザーに余計な操作を強いるのは得策とはいえません。モバイルUIでのフォントは読みやすいように十分大きくしてください。ただし、階層構造が崩れるほど大きくする必要はありません。

 

 

2.行間

行と行の間にあるスペースが行間です。モバイルでは、デスクトップUIと比べて行間が狭くなっていることが多いです。広すぎる行間はテキストの一体感を崩し、狭すぎる行間は文字を読みにくくします。

 

 

3.行の横幅

読みやすさのために、行の横幅も調整するといいでしょう。デスクトップUIとは異なる設定が求められます。これが長すぎると文字が画面の幅を超えてしまい、はみ出してしまいます。半角で30〜40字程度の幅に設定するデザイナーが多いようです。

 

 

4.ホワイトスペース

各要素が空白なく詰まっていると、インターフェースがごちゃごちゃして見えます。要素が呼吸をするように空白を作ってあげると、ユーザーの目にもやさしいデザインが完成します。モバイルの狭い画面ではそれほど多くの要素は入らないため、場合によっては要素を削る必要があるかもしれません。

 

 

5.階層は少なめに

階層構造を作ることで、ユーザーはひと目でどの要素が重要か理解できます。サイズ、色、コントラスト、配置で各要素に差をつけて階層構造を作ってください。

 

ウェブデザインでは通常、テキストに3段階の階層を作ります。要素には主見出し、副見出し、本文、CTAボタン、注釈といったものが含まれます。しかしモバイルの画面では3段階の階層は多すぎて、十分なスペースがありません。モバイルUIでは2段階にとどめるのがオススメです。

 

 

 

まとめ

モバイルの画面はデスクトップとは広さや明るさが大きく異なり、特別な注意が求められます。フォントの大きさはもちろん、空白や階層構造にも注意し、ひと目で全体が把握できて快適に読み進められるデザインを目指しましょう。

 

 

 

 

※本記事はMobile Typography: 8 Steps Toward Powerful UI.を翻訳・再構成したものです。