こんにちは！デザイナーのヒロです！
Webサイトで表示される文字って、どうやって表示されているか知っていますか？
それは主に3パターンあります。
1つ目は、PCやスマートフォンの中に予め入っている、システムフォント。
2つ目は、サーバやインターネット上から読み込んで表示する、Webフォント。
3つ目は、デザインデータから書き出してWebサイトに設置した、画像フォント。
様々なデバイスに対応したレスポンシブWebデザインが一般的になり、
最近では、3つ目の画像フォントは少なくなってきました。
今回は1つ目のシステムフォントについて、ご説明しますね！
システムフォントを把握しておくことは、最近ではすごく大切なことになってきたので、ぜひ覚えておいてください！
システムフォントってなんで大切なの？
システムフォントとは先ほどご説明したとおり、
PCやスマートフォンなどのデバイスにはいってるフォントのことです。
デバイスに入っているので、
インターネットで読み込むWebフォントよりも早く表示することができます。
これがすごく大切なんです！
Webサイトの読み込みが遅くて、イライラして見ることをやめてしまったことはありませんか？
Googleが発表した2018年の記事では、以下のように書かれています。
表示速度が1秒から3秒まで遅くなると、直帰率は32%増加する
表示速度が1秒から5秒まで遅くなると、直帰率は90%増加する
表示速度が1秒から6秒まで遅くなると、直帰率は106%増加する
表示速度が1秒から10秒まで遅くなると、直帰率は123%増加する
表示に3秒以上かかるモバイルページからは53%のユーザーが離脱している
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
Webサイトの表示速度が、すごく大切なことがわかりますよね。
そのページの表示速度に関係する1つの要因が、フォントです。
こういった理由から、最近のWebサイトではシステムフォントを指定することが多くなってきました。
しかし、 システムフォントは、
デバイス、正しくはOSによって入っているフォントが違います！
なので、このフォントを覚えておくことが、大切なんです！
Windowsのシステムフォント
それでは、OSに入っているシステムフォントの中で、代表的なものをご紹介しますね！
まずは、Windowsに入っているシステムフォントです。
Segoe UI（シーゴ ユーアイ）
最初にご紹介するのは、Segoe UI という欧文書体です！
Segoeは、古くからマイクロソフトが使っている、
温かみがあって読みやすいフォントです。
このフォントのライセンスについて、過去にいろいろ問題が起きていたようです。
マイクロソフトのコーポレートロゴにも、Segoeが使われています。
その中でも、Segoe UIというフォントは、
様々なマイクロソフトの製品で使用されているシステムフォントです。
Yu Gothic UI（ゆうゴシックユーアイ）
システムフォントの中で、日本語フォントできれいなのが「游ゴシック体」です！
游書体の中のひとつのフォントの種類です。游明朝体というフォントもあったりします。
游ゴシック体は、Macでも使えますが、フォントをダウンロードしている必要があります。
そんな、游ゴシック体が、Windowsで「Yu Gothic UI」としてシステムフォントになっています。
普通の游ゴシックと違って、数字やラテン文字が「Segoe UI」になっているそうです！
Mac・iOSのシステムフォント
San Francisco（サンフランシスコ）
続いて、Macに搭載されているシステムフォントをご紹介します！
San Francisco は、2014年にAppleが開発して公開した欧文書体です。
綺麗でコンパクトな形状、きれいな丸み、ゆったりとした印象をもつ、素敵なフォントです。
Macだけでなく、iPhoneやApple WatchなどのAppleの製品で使われています。
Hiragino Sans（ヒラギノ角ゴシック）
Macで多く使われている日本語のフォントが、Hiragino Sans（ヒラギノ角ゴシック）です！
ヒラギノは、昔からMacやiOSに搭載されていて、標準的な日本語フォントとして使われてきました。
その時は「ヒラギノ角ゴ ProN」と呼ばれていましたが、
最近のMacやiOSに搭載されているのは、Hiragino Sans（ヒラギノ角ゴシック）で、
「ヒラギノ角ゴ ProN」とは別のフォントなのでご注意ください！
Androidのシステムフォント
Androidのフォントは、実はデバイスによって標準搭載のフォントが変わっているんです！
なので、同じAndroidなのに、デバイスによっては、全然違うフォントになったりします…
ただ、Googleが策定しているMaterial Design では、Roboto や Noto Sans が推奨されています！
Roboto
Robotoは、Googleによって開発されたフォントです！
Androidのシステムフォントに採用されており、
Googleが策定したマテリアルデザインのデザインガイドラインでも、
Robotoの利用が推奨されています。
（マテリアルデザインについては、また別の機会に詳しくご説明しますね）
2015年に、GoogleがRobotoをオープンソース化するなど、話題になりました！
Noto Sans CJK JP（ノト サンズ）
Notoも、Googleによって開発されたオープンソースのフォントです。
Notoは、世界中の言語をサポートすることを目標にしています。
なので、いろんな言語の Noto Sans があったりします！
名前の由来もおもしろいです！
表示できない文字がある場合、文字の代わりに小さい四角（□）が表示されます。
この四角のことを、「豆腐」と呼ばれたりします。
この「豆腐」が表示されるのを無くすために、
Noto（No More TOFU）と名付けられたみたいです。
日本語・中国語・韓国語用のNotoが、「Noto Sans CJK」です！
いかがでしたか？
OSによって、こんなにシステムフォントが違うんですね。
これ全部、Webサイトで見せるフォントとしてCSSに設定するの？と不安かもしれません。
じつは、基本的にCSSでは、
文字を表す書体の指定を「font-famiy : sans-serif」と設定すると、
自動的に、そのデバイスの中のシステムフォントがWebサイトに表示されます。
これはすごく便利ですよね！
ただ、どんなデバイスでも同じフォントを表示したいことがあるかと思います。
そんな時に使うのが、Webフォントや画像文字です！
なので次回は、Webフォントについてご紹介しますね！
コメント