みなさんはWebサイトのデザインをする際、フォントはどのように選んでいますか？？
「なんとなく普段から使っているから」
「いいなと思ったサイトで使われているから」
など、特に未経験から始めた場合どのようにフォントを選んだらいいのかわからないことも多いと思います。
そこで今回は、未経験からWebデザイナーに転職した私がWebデザインのためのフォントの選び方についてご紹介します！
Webデザインとグラフィックデザインのフォント選びの違い
ホームページやLP、ECサイトなどのデザインをするWebデザインとチラシやポスター、パッケージなど印刷物のデザインをするグラフィックデザインではフォントの選び方に違いがあります。
デザインしたものをそのまま印刷するグラフィックデザインと違い、Webデザインではデザイナーがデザインしたものをもとにコーダーがコーディングで再現して初めて完成します。
そのため、デザイナーはデザインの段階でコーディングで再現可能なフォントを選ぶ必要があるのです。
そこで、Webデザインのフォント選びに必要不可欠であるデバイスフォントとWebフォントについて解説していきたいと思います。
デバイスフォントとWebフォントとは？
デバイスフォントとは、パソコンやスマートフォンなどのデバイスにインストールされているフォントのことを指します。
一方でWebフォントとは、クラウドやサーバー上にあるフォントのデータを読み込んで表示させるフォントのことを指します。
では、それぞれのフォントのメリット・デメリットについてご紹介します。
デバイスフォントとWebフォントのメリット・デメリット
デバイスフォントのメリットは、すでにフォントをデバイスにインストール済みのため表示速度が速いことが挙げられます。
後ほどご紹介しますが、Webフォントとは異なりサーバーへの負荷が少なく、安定した表示が期待できることもメリットといえます。
一方、デメリットはWindowsやMacなどのOSやデバイスの違いによってフォントの表示が異なることが挙げられます。
デバイスフォントは使用できるフォントが限られるため、デザインの自由度が低くなってしまうということもデメリットです。
続いて、Webフォントのメリットについてご紹介します。
Webフォントのメリットは、デザインの自由度が高いこと、どのデバイスでも同じフォントで表示できることが挙げられます。
先述した通り、Webフォントはクラウドやサーバー上にあるフォントのデータを読み込んで表示させるため、選べるフォントの種類も多く、そしてどのデバイスでも同じフォントで表示することが可能となります。
一方、デメリットとしてはサーバーへの負荷が大きく、回線速度が遅い環境では表示が遅れるといったことが挙げられます。
このように、デバイスフォントとWebフォントにはそれぞれにメリット・デメリットが存在します。
これらを踏まえたうえで、デバイスフォント、Webフォントにはそれぞれどんなフォントがあるのか、ご紹介していきたいと思います！
OSごとに異なるデバイスフォント
ここでは、それぞれのOSに標準でインストールされているフォントについてご紹介します。
◯Windows
Windowsに標準でインストールされている主なフォントは以下となります。
| ゴシック体 | 明朝体 | 欧文フォント |
|---|---|---|
| MSゴシック | MS 明朝 | Arial |
| MS Pゴシック | MS P明朝 | Arial Black |
| メイリオ | 游明朝 | Segoe UI |
| Meiryo UI | Verdana | |
| 游ゴシック | Times New Roman | |
| YU Gothic UI |
◯macOS
続いて、macOSに標準でインストールされている主なフォントは以下となります。
| ゴシック体 | 明朝体 | 欧文フォント |
|---|---|---|
| 游ゴシック | 游明朝 | Arial |
| ヒラギノ角ゴシック | ヒラギノ明朝 ProN（Pro） | Arial Black |
| ヒラギノ角ゴシック ProN（Pro） | Helvetica | |
| ヒラギノ丸ゴシック ProN（Pro） | Helvetica Neue | |
| Osaka | Verdana | |
| Times New Roman |
◯iOS
最後に、iPhoneやiPadなどのiOSに標準でインストールされている主なフォントは以下となります。
| ゴシック体 | 明朝体 | 欧文フォント |
|---|---|---|
| ヒラギノ角ゴシック | ヒラギノ明朝 ProN（Pro） | Arial |
| ヒラギノ角ゴシック ProN（Pro） | Arial Black | |
| ヒラギノ丸ゴシック ProN（Pro） | Helvetica | |
| Helvetica Neue | ||
| Verdana | ||
| Times New Roman |
上記の表を見て分かる通り、Windows、macOS、iOSで共通して標準インストールされている日本語のフォントはありません。
仮に、ヒラギノ角ゴシックでデザインするとWindowsでは別のフォントで表示され、游ゴシックでデザインするとiOSを搭載したiPhoneやiPadなどでは別のフォントで表示されてしまうという現象が発生します。
そういった事態を防いでくれるのがWebフォントです！
WebフォントであればユーザーのデバイスにインストールされていないフォントでもWebページ上で表示できるため、このようなデバイスによって意図したデザインが異なるということを防ぐ事ができるのです。
主なWebフォント
Webフォントには無料で使えるものと有料で使えるものがあります。
無料で使いやすく、日本語フォントも使えるものとして有名なのがGoogle Fontsです！
欧文フォントはもちろん、日本語フォントもあり、ゴシック体、明朝体それぞれ取り揃えているためとても使い勝手がいいです。
日本語フォントの種類は欧文フォントに比べると少ないですが、それでも十分使えるフォントがあるのでぜひチェックしてみてください。
また、以下の記事でGoogle Fontsのおすすめフォントを紹介していますのでこちらもぜひ参考にしてみてください。
初心者必見！｜現役Webデザイナーおすすめ！Google Fonts10選
まとめ
ここまでデバイスフォントとWebフォントについて説明してきましたが、いかがでしたでしょうか？
デバイスフォントとWebフォントについて理解することで、今後どのフォントを使うのかが変わってくると思います。
安定した表示を優先したい場合はデバイスフォントを、どのデバイスでも同じフォントで表示したい、デザインを優先したい場合はWebフォントをなど用途に応じて使い分けができるようになると良いですね！
