レスポンシブを意識したモバイル表示で最適なフォントの選び方

Webデザインにおいて、フォントはデザインであるとともに、情報を伝わりやすくする役割も備えています。

レスポンシブデザインが普及し、モバイルの表示を考慮した文字のサイズや書体デザインを使用することが求められています。

出典：Gal Shir

ユーザーがモバイルでサービスやWebサイトを使用する時間やシチュエーションはさまざま。モバイル端末のバックライトは、外の証明や太陽の光に依存し、その時によって違う見え方が異なっています。どんな状況下でも読めなければなりません。

タイポグラフィーに置いて考慮すべきは、フォントだけではなく、サイズ、字間、行間までに及びます。今回はタイポグラフィーの決定にまつわるポイントをいくつかご紹介します。

モバイルに最適なフォントとは？

Tyler Galpin

ユーザーを惹き付けるためには、書体を変えるだけではなくモバイルデバイスではどのように使用されるかを考える必要があります。優れたモバイルUXを提供するためには、書体やフォントサイズに至るまでPC用のデザインと異なるデザインを、新たに作る必要があります。

なぜフォントにこだわるべきなのか

文字がインターフェイス上でどのように機能するかを考えずに使ってしまうと、ユーザーのストレスになりかねません。私たちが仕事の面接にパジャマで行くことがないように、デザインも条件に合わせて外観を変える必要があります。

フォントの書体選びはカラー選びと同じくらい大切な要素です。目的を考えて、モバイルのフォント書体を決めてください。

また、印刷物とWebのタイポグラフィーは考え方が異なります。Webのタイプグラフィーがより軽視されがちなのも確かです。

Sencer

「おしゃれ」よりも「伝えたいこと」を重視しよう

Prakhar Neel Sharma

目的とメッセージにマッチするフォントを選びましょう。Web上に溢れるフォントを探し始める前に、「コンテンツの本質」と「デザインの全体的な価値」について、また「伝えたいこと」を整理する作業を行ってください。

Afrian Hanafi

特に入力フォームのフォント選びは慎重に。モバイルは画面サイズが小さいので、画面をよく見ようと顔を画面に近づけがち。程よい距離感で入力ができるよう、可読性の高いフォントを選びましょう。

利用環境によって、光と動きが変わることを理解しよう

Maksim Shavkutenko

ユーザーが観覧するときの状況については、あらゆる可能性が考えられます。日中の太陽の下では画面を見にくいですし、歩きながら読む人もいるでしょう。どんな状況下でも、読みやすさを提供しなければなりません。

適切なフォントの書体を選ぶ3つのポイント

モバイルに適切なタイポグラフィーをデザインすることは、レスポンシブデザインでは特に必要なことであると考えています。

そのための3つのポイントをまとめました。

1.適切なサイズ

Rudityas W Anggoro

デフォルトのサイズについて一概に言い切ることはできませんが、16pxより小さなフォントは読みにくくなります。Androidのガイドラインによると、最小でも12pt、最大でも22ptが適切です。

2.適切なホワイトスペースのとり方

Remco Bakker

縦スクロールのWebサイトでは、ホワイトスペース（余白）の作り方が重要視されます。画面のうち、ユーザーが指で隠してしまう可能性のある場所には小さい文字を置かないなど、動きを考慮して可読性をあげましょう。そのような要因に対してホワイトスペースを使用することが鉄則です。

3.レイアウト

レイアウトは可読性とUXを向上させます。
要素間のスペースを詰めすぎると、ユーザーがコンテンツやページといった全体の流れを読み取りくくしてしまいます。

「パフォーマンスと機能性」が課題

Nimasha Sewwandi Perera
これまでのことを守ってフォントの書体やサイズを決めたら、次に気にしなければならないポイントはパフォーマンスと機能性です。

パフォーマンスに関しては、遅すぎない読み込み速度と読み込みエラーが発生しない状態が理想的です。ユーザーの使用環境では通信速度により、表示まで時間がかかることも考えられます。CSSでフォントを使用することにより、表示速度を遅くする可能性が高く、Webフォントを使用する際も、どのように使用するかを考慮しなくてはなりません。

モバイルの普及率が上がるにつれて、私たちがWebの標準化に適合していく必要が出てきます。これはWebサイトを観覧してもらうために必要な作業です。ユーザーのニーズについても見落とさないように注意してください。

モバイルに適したデザインを開始する前に、対象デバイスの機能や対応している技術について、事前に調べてからタイポグラフィーのテストも行いましょう。

注意点

現在、日本で使用するWebフォントについてはGoogle Fontsなどを使用し英字のみに使用するか、Font Awesomeを使用してアイコンを表示するのに使用されることが多いです。日本語をWebフォントとして使用するには、文字数の多さからもパフォーマンスの点で懸念が残ります。

英語のみであればこのようなCDNを使用することもありますが、日本語の場合は字数の多さからファイルサイズがどうしても重くなり、パフォーマンス面でまだ使いにくさがあります。しかし、文字が決まっているのであればフォントのサブセット化のような方法もあります。

日本語のWebフォントを使用する場合については、エンジニアと相談しながら検討することをおすすめします。

（翻訳：Yuri Tanaka）