前回はPCサイトにおける標準フォントについて解説しました。PCサイト同様、スマホサイトを制作する際も標準フォントについては意識したいところです。 PCサイトではOSなどの環境によって標準フォントが異なりましたが、スマホサイトも同じように、OSの違いはもちろんのこと、OSのバージョンによって標準インストールされているフォントが異なります。また、Android端末においては、メーカー独自でインストールしているフォントが異なります。 それでは、スマホサイトを制作する際に押さえておきたい、代表的な標準フォントの知識について解説していきます。

Noto

Android端末は、OSのバージョンによって標準フォントが異なります。Android 6.0 Marshmallowからは、日本語フォントが「モトヤフォント」から「Noto Sans CJK」に変更されました。 「Noto Sans CJK」は、GoogleとAdobeが共同で開発したオープンソースのフォントです。丸みを帯びた見やすいフォントである「モトヤフォント」の「モトヤマルベリ」と比べると「Noto Sans CJK」は角ばっているのが特徴。
Googleが開発した欧文の標準フォント「Roboto」との見た目の親和性は、「モトヤマルベリ」よりも「Noto Sans CJK」のほうが高いという意見もあります。 「Noto Sans CJK」のフォントには太字の概念はあるものの、日本語用の太字フォントが用意されていません。そのため、太字の日本語を表示させたい場合は、CSSの記述でカバーするなどの対応が求められます。

Notoが採用される以前の標準フォント

Notoが採用される以前、Android 3.xより前のOSでは「Droid Sans」が標準フォントとして採用されていました。また、標準フォントには日本語フォントの「Droid Sans Japanese」も含まれます。低解像度で小さな画面でも見やすいのが「Droid Sans」の特徴です。 Android 4.0からは、「Roboto」が欧文の標準フォントとして採用されました。また、和文の標準フォントには「モトヤフォント」が採用されました。 モトヤフォントには、「モトヤマルベリ」と「モトヤシーダ」の2つがあり、一般的には「モトヤマルベリ」が標準となっています。 日本語の標準フォントである「Droid Sans Japanese」や「モトヤフォント」には明朝体がありません。 尚、前述のとおり、日本国内のメーカーはAndroid端末の日本語フォントを独自に変更しているケースがあります。そのため、機種によってフォントが変わっていることもあるので注意が必要です。

ヒラギノ

メーカーによって標準フォントが異なるAndroidとは対照的に、iPhoneやiPadなどのiOSでは、「ヒラギノ」が標準フォントとして採用されています。ゴシック体は「ヒラギノ角ゴ」、明朝体は「ヒラギノ明朝」です。 iOS6からは日本語フォントのデフォルトが明朝体になりましたので、ゴシック体を使いたい場合は、CSSでゴシック体を指定する必要があります。

PCサイト／スマホサイトに共通する推奨フォントを指定する

レスポンシブデザインによるWebサイト制作が主流になった今、PCサイトとスマホサイトそれぞれで、推奨フォントを指定するよう心がける必要があります。 その際の注意点として、

• 適用させる優先度の高いフォントから記述する
• 欧文フォントと和文フォントに別のフォントを適用したいときは、欧文フォントから先に記述する
• 該当フォントがない環境にも対応させるため、フォント指定の最後にsans-serifなどの総称フォントファミリーを記述する
• フォント名にスペースや全角文字が含まれている場合は引用符で囲む
• 日本語フォント名は英語名表記も可能
• フォントの日本語名と英語名を併せて記述する場合は、日本語名を先に記述する

これらの記述ルールを意識しながら、推奨フォントを指定するようにしましょう。 特にスマホサイトは、サイト制作の技術はもちろんのこと、端末もどんどんと高性能になっていくことが予想されます。そう考えると、標準フォントの指定に「これさえ押さえておけば完璧」というものはないのかもしれません。 Androidに関しては、メーカーが独自のフォントを採用しているケースもあるため、すべてのデバイスに対応するのは不可能と言っても過言ではありません。「sans-serifの指定だけで十分だ」という意見もあるくらいです。 ただし、一人でも多くの閲覧者に快適な情報収集をしてもらえるよう、PCサイト・スマホサイトの標準フォントについての知識は深めておきたいところ。デバイスに応じた最適なフォントを指定できるようになりたいものですね。