Blog

2023.10.10

【2023年対応】Web制作会社デパートが考えるフォントファミリーを解説！

チーフデザイナー渡邊磨耶

Webデザインをする上でフォント選びは、サイト全体の印象を司る一つの要素として重要な役割を担います。ひとえにフォントと言っても見た目のデザインの違いだけではなく、Webにおいては「システムフォント（デバイスフォント）」か「Webフォント」か、そのサイト要件に合わせて選ぶ種別も変わってきます。こちらの記事では、その2種のフォントにおけるメリットデメリットをご紹介。サイト制作の目的に合わせた選択ができるお手伝いができればと思います。

Web上で表示されるテキスト

Web上で文字情報を表示する際、大きく分けて「HTMLテキスト」か「画像テキスト」で表示する方法があります。

HTMLテキスト

HTMLタグ内に文字情報を流し込んで表示する最もシンプルな方法で、表示された文字情報はユーザーが選択（コピペなど）することができます。

※コピー不可にしているWebサイトも

使用フォントは、「システムフォント（デバイスフォント）」と「Webフォント」の2種類から選択します。

弊社のコーポレートサイトも、HTMLテキストにて実装されています。テキストをドラッグ＆ドロップすることで、確認することができます。

画像テキスト

その名のとおり、文字情報を挿入した画像を配置する方法です。デザインツールで画像を作成すれば、フォントは自由自在に選択でき、デザイン次第でフォントに装飾したり変形させたりすることもできますので、文字情報をビジュアルで訴求したい時には効果的です。

但し、あくまでも「画像」なので、容量や読み込みの問題、1文字変えるだけでもデザイナーの稼働が必要となるなど、運用性や更新性には課題があります。

システムフォント（デバイスフォント）

「システムフォント（デバイスフォント）」とは、コンピューターのOS（オペレーティングシステム）にインストールされているフォントを指します。

Macの「ヒラギノ」や　Windowsの「メイリオ」のようにコンピューターに元々入っているフォントのことで、ユーザーの端末（デバイス）内にあるフォントを使用して文字を表示するので、「システムフォント（デバイスフォント）」と呼ばれています。

例えばMac(OS X以降)のパソコンであれば、「ヒラギノ角ゴ Pro」というフォントが標準で入っているため、CSS上でそのフォントを表示させるよう指定していれば、HTMLテキストはヒラギノ角ゴ Proで表示されます。しかしWindowsには「ヒラギノ角ゴ Pro」は、はじめからインストールされていないため、別途ユーザーがインストールしていない場合、指定したフォントでは描写されません。

OS標準フォントはユーザーの端末のOSやそのバージョンによって違う上に、iOSやAndroidなどでも異なります。

システムフォント（デバイスフォント）のメリット・デメリット

メリット

Webサイト閲覧の時、ユーザーのデバイス内にあるフォントを使用して文字を表示するので、サーバーにあるフォントデータを読み込む必要がなくその分表示が速くなる
フォント自体をサーバーにアップロードするわけではないため、ライセンスを気にしなくて良い

デメリット

表示されるフォントファミリーがデバイス間で統一できない
フォントの選択肢が少ないため、デザインの表現幅が限られる

システムフォント（デバイスフォント）の種類

ユーザーの環境によって、表示が異なるシステムフォント（デバイスフォント）。その種類を見ていきましょう。

角ゴシック編

▼Mac

ヒラギノ角ゴ

色々な企業のWebサイトでも使われている、ヒラギノフォントのゴシックが搭載されています。ヒラギノ以外がよい、もしくはWindows環境との統一性を図りたい場合は、游ゴシック体（OS10.9〜）を視野に入れましょう。

▼Windows

メイリオ

MS Pゴシック

游ゴシック体（Windows8.1以降）

Windows環境で多く使われているのが上記2フォントと言えます。

Windows8.1以降、游ゴシック体が追加されたので優先して表示させるのも良いでしょう。

注意点として、游ゴシック体のウェイトはOSにより異なります。　Mac：2ウェイト（Medium/Bold）　Windows10/11：4ウェイト（Light/Regular/Medium/Bold）

💡2024年3月現在、MacのSafari・Brave・Firefox（プライベートウィンドウ）ではローカルフォントの「游ゴシック」をサイトの表示に使うことができなくなっているようです。今後もローカルフォントの扱いはご注意ください。

明朝編

▼Mac

ヒラギノ明朝

ゴシック同様に色々な企業でも使われている、ヒラギノフォントが搭載されています。

▼Windows

MS P明朝 Windows8.1から搭載されている、游明朝も活用できます。

丸ゴシック編

▼Mac

ヒラギノ丸ゴ

OS Xから搭載されています。

▼Windows

現状標準搭載されている丸ゴシック系の書体はありません。どうしても指定したい場合は、Office付属のHG丸ゴシックM-PROを指定すると良いでしょう。

欧文編

Times New Roman（セリフ） Arial（サンセリフ） こちらは現在、MacとWindows両方に標準搭載されています。

他にもOSによって様々なデバイスフォントが搭載されています。

Macに標準搭載のフォント一覧

Windowsに標準搭載のフォント一覧

iOSに標準搭載のフォント一覧

System Fonts - Fonts - Apple Developer

Androidに標準搭載のフォント

Android端末では基本的に「デザイン通りのフォント描写にはならない」と思っておきましょう。

Androidの場合、Android 6.0 Marshmallowからは、和文は「Noto Sans CJK」、欧文は「Roboto」が標準フォントとして採用されていますが、それ以外のバージョンでは上記で挙げたどのフォントも標準搭載されていません。

また、Android端末には明朝系のフォントが一つも入っていません。CSSで明朝系を指定していてもゴシックで表示されますのでご注意ください。

フォント名	Mac	Windows	IOS	Android	ポイント
ヒラギノ角ゴ	○	×	○	×
游ゴシック体	2024.3 改訂　×　 ○	○	×	×	游ゴシック体のウェイトはOSにより異なります。 Mac：2ウェイト（Medium/Bold） Windows10/11：4ウェイト（Light/Regular/Medium/Bold）
メイリオ	×	○	×	×

フォント名

Mac

Windows

IOS

Android

ポイント

ヒラギノ角ゴ

○

游ゴシック体

2024.3 改訂　×　

○

游ゴシック体のウェイトはOSにより異なります。

Mac：2ウェイト（Medium/Bold）

Windows10/11：4ウェイト（Light/Regular/Medium/Bold）

メイリオ

○

Webフォントについて

「Webフォント」は、あらかじめサーバー上に置かれたフォントやインターネット上で提供されているフォントを呼び出し、Webページ上に表示する仕組みです。

多くのWebフォントサービス事業者が、和文・欧文ともに多種多様のフォントを提供しており、Webサイト構築時にはそれらを利用することが一般的でしょう。

Webフォントの種類

Google Fonts

Googleが提供するサービスです。基本的に無料で利用でき、様々な言語のフォントにも対応している点が大きな特徴です。商用・非商用いずれの場合でも利用できます。決まったコードをコピペするだけで使える手軽さはもちろん、必要なフォントはインストールして自身のデバイスで使うことも可能です。サーバーからの読み込みテキストを表示しているため、利用するフォントの数やフォントのウェイトの種類が多ければ多いほどページの読み込みに時間がかかります。特に日本語フォントはひらがな、カタカナ、漢字も読み込むため注意が必要です。例 Noto Sans JP　1ウェイトあたり1.6MB

TypeSquare

デザイン業界において知らない人はいないと言っても過言ではないフォントメーカー、株式会社モリサワが提供する有料Webフォント配信サービスです。人気のモリサワフォントの書体をWeb上で美しく表示することができます。月額課金型のサブスクリプションモデルで、プランにより使えるフォントの数が限られていたり、超過PVによっては加算がありますので注意が必要です。

Adobe Fonts

Adobeが提供するサブスクリプション形式の有料フォントライブラリサービスです。デザインツールとしてAdobe Creative Cloud製品を導入しているユーザーは、Adobe Fontsを無料で利用することができます。 Webフォントとしての使用も可能ですが、要注意なのが再販不可という点。例えば自社でAdobeCCを契約している場合でも、受託制作した顧客のWebサイトで使用することはできません。顧客側でAdobeCCのライセンスを持っている、または契約してもらう必要があります。

Webフォントのメリット・デメリット

サーバーにあがっているものを読み込ませるため、デバイスにフォントが入っているか否かは関係なくほとんどの環境で表示できる
デザイン性の高いフォントを使える

デメリット

読み込みに時間がかかり、コアウェブバイタルのLCP（ページ表示速度）とCLS（ここではページレイアウトのズレ）に影響がでてしまう可能性がある
Webフォントそのものが重い
無料のWebフォントでは、日本語のバリエーションが少ない
フォントによっては使用する上で、料金がかかる

まとめ

当記事でご紹介したように、フォント選びはWebサイトを構築する上で重要な役割を果たします。近年重要視されているコアウェブバイタル対応に重きを置いたサイト制作や、どのような環境においても情報を瞬時に表示したい場合は、システムフォント（デバイスフォント）を採用すべきです。一方で、ブランドページなど美観重視の場合はWebフォントを使用するのが良いでしょう。日々アップデートされるOSやサービスの情報を追いかけ、サイトの要件にあわせた最適なフォント選びを心がけていきたいです。