

STAFF BLOG
2020.05.24 htmlコーディング
Webサイト制作に欠かせない標準フォントの知識とは?(スマホサイト編)

前回はPCサイトにおける標準フォントについて解説しました。PCサイト同様、スマホサイトを制作する際も標準フォントについては意識したいところです。
PCサイトではOSなどの環境によって標準フォントが異なりましたが、スマホサイトも同じように、OSの違いはもちろんのこと、OSのバージョンによって標準インストールされているフォントが異なります。また、Android端末においては、メーカー独自でインストールしているフォントが異なります。
それでは、スマホサイトを制作する際に押さえておきたい、代表的な標準フォントの知識について解説していきます。
Googleが開発した欧文の標準フォント「Roboto」との見た目の親和性は、「モトヤマルベリ」よりも「Noto Sans CJK」のほうが高いという意見もあります。 「Noto Sans CJK」のフォントには太字の概念はあるものの、日本語用の太字フォントが用意されていません。そのため、太字の日本語を表示させたい場合は、CSSの記述でカバーするなどの対応が求められます。
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などの総称フォントファミリーを記述する
- フォント名にスペースや全角文字が含まれている場合は引用符で囲む
- 日本語フォント名は英語名表記も可能
- フォントの日本語名と英語名を併せて記述する場合は、日本語名を先に記述する
CATEGORY
関連記事
2021.01.10 動画制作
After Effectsでアニメーションをループさせる
2021.01.10 動画制作
Premiere Proでぼかしをトラッキングする
2021.01.10 動画制作
Premiere Proで作成した映像をMedia Encoderで書き出すとLUTが反映されていない時の解決方法
2021.01.10 動画制作
Premiere Proでモーションブラーをかける
2021.01.10 動画制作
Premiere ProにLUTを追加する
2020.11.25 PHPプログラム
Instagram Graph APIを使ってインスタグラムの投稿画像をWebサイトに埋め込む方法1