Webフォントとは？使い方・種類を解説【知ってて当たり前！？】
「Webフォント」という言葉。何気なく使っているデザイナー・ディレクターが多いと思いますが、その定義だったり、種類（Google Fonts、Adobe Fonts、TypeSquare）だったりをちゃんと理解しているぞ、という方はどれくらいいるでしょうか。
「Webフォント」をちゃんと理解しておくと、魅力的にかつ効率的にWebデザインを作成・実装することができます。
今回の記事では、Webフォントの基本的な概念から、その種類、使い方まで詳しく解説します。Webフォントを利用することで、どのようにデザインの表現力を高められるのか、また、どのようにしてブランドアイデンティティを強化できるのかを、具体的な事例を交えて説明します。
Webデザインに携わる方はもちろん、これからWebサイトを制作する予定の方にも必見のブログとなっています。
目次
こんな課題感のあるデザイナーは絶対Webフォント詳しくなって！
まずはじめにWebフォントをなぜ学ばないといけないのか、その理由を教えておきます。
- デザインの一貫性を保ちたいと考えているデザイナー（異なるデバイスでも一貫したデザインを表示したい）
- 自分のデザインの表現の幅を広げたいデザイナー（システムフォントだけでは物足りない・・・）
Webフォントとは？
Webフォントは、Webページ上で使用するためにインターネット経由で配信されるフォントのことを指します。従来のWebデザインでは、訪問者のデバイスにインストールされているフォントに依存していたため、デザイナーの意図したフォントを使用できない場合がありました。
でもWebフォントを使用することで、閲覧者側の端末環境に依存せずにデザイナーが指定したフォントを確実にWebサイト上で表示できます。
だからシステムフォントだけでは物足らなかったデザイナーは、より自分が表現したフォントを自由に選択できるようになり、意図したデザインを、統一感をもって表示させることができるのです。
Webサイトで使用できるフォントの種類と特徴
Webサイトで使用できるフォントは、大きく分けて「デバイスフォント（システムフォント）」と「Webフォント」の2種類があります。それぞれの特徴を理解し、適切に使い分けていきましょう。
デバイスフォント（OS標準フォント）
デバイスフォントは、コンピュータにインストールされているフォントのことを指します。ユーザーが使用しているOS（Windows、macOS、Linuxなど）に標準で搭載されているフォントのこと。
たとえば、Windows には「Arial」や「Times New Roman」などのシステムフォントが搭載されています。デバイスフォントは、表示速度が速い、ライセンス料がかからないというメリットがありますが、一方、デザインの選択肢が少ない、ユーザーが使用している端末に搭載されているフォントに依存しているため、環境によって異なるフォントが表示されるデメリットがあります。
デバイスフォントのメリット
- Webページでの表示速度が速い
- 追加のダウンロードが不要
- ライセンス料がかからない
デバイスフォントのデメリット
- ユーザーの環境によって表示されるフォントが異なる可能性がある
- デザインの一貫性を保ちにくい
Webフォント
Webフォントは、Webサーバーにアップロードされているフォントファイルを、CSSで設定することで、ユーザーがWebページを閲覧する際にダウンロードし表示させます。だからどの端末からページにアクセスしても同じ意図したフォントが表示されます。たとえば、Google Fonts やモリサワの TypeSquare のフォントリソースでは、サーバーに保存されている多数のフォントがあります。
上から分かるように、Web フォントは、Web デザインを一定に保つことができるというメリットがありますが、フォントファイルをダウンロードするので、ページの読み込み速度が遅くなるというデメリットがあります。
一般的に、Web サイトでは Web フォントが使用される傾向があります。デザイン性の高いフォントですし、デバイスに依存しないためです。とはいえ、Web フォントにはデメリットがある（ページ読み込み速度が遅くなる）のも事実なので、それを理解したう上で使用するようにしてください。
【Webフォントのメリット】
- デザイン性の高いフォントが使える
- デバイスに依存しないデザイン表現が可能
- SEO対策に有利
- レスポンシブデザインと相性が良い
- ブランドイメージを強化できる
- アクセシビリティの向上に貢献できる
【Webフォントのデメリット】
- フォントファイルのダウンロードが必要なため、表示速度が遅くなる可能性がある
- 利用料が必要になる場合がある（フォントのライセンスに注意が必要）
- 著作権に注意が必要
- 設定が複雑になる場合がある
- 全ての環境で同じように表示されない可能性がある
- ファイルサイズが大きくなる
主要なOS（Windows、macOS、Linux）に標準搭載のフォント一覧
現在、主要なオペレーティングシステム（Windows、macOS、iOS、Android）では、日本語に対応した標準フォントが搭載されています。これらの標準搭載フォントは、各OSで日本語表示に対応しています。ただし、Webデザインにおいては、ユーザーのOS環境に依存せず、同じフォント表示をしたい場合はWebフォントを使用したほうがいいです。
以下は、各OSの標準搭載フォントとその特徴をまとめた表です。
| OS | フォント名 | 特徴 |
|---|---|---|
| Windows | UDデジタル教科書体 | 読みやすさを重視したフォント（10以降） |
| Yu Gothic UI | ゴシック体のシステムフォント（10以降） | |
| 游ゴシック体・游明朝体 | 読みやすさと美しさを兼ね備えたフォント（8.1以降） | |
| Meiryo UI | UIに最適化されたメイリオ（7以降） | |
| メイリオ | 読みやすさを重視した日本語フォント（Vista以降） | |
| MSゴシック・MS明朝 | 古くからあるWindows標準の日本語フォント | |
| MSPゴシック・MSP明朝 | MS明朝・MSゴシックの縦書き用フォント | |
| MS UI Gothic | UIに最適化された日本語ゴシックフォント | |
| macOS | ヒラギノ角ゴシック | 読みやすく美しい日本語ゴシックフォント |
| ヒラギノ明朝 ProN | 読みやすく美しい日本語明朝フォント | |
| ヒラギノ丸ゴ ProN | 丸ゴシック体の日本語フォント | |
| 游ゴシック体・游明朝体 | 読みやすさと美しさを兼ね備えたフォント | |
| 游明朝体+36ポかな | 漢字と仮名が調和した明朝体フォント | |
| 凸版文久ゴシック・凸版文久明朝 | 印刷用に最適化された日本語フォント | |
| 凸版文久見出しゴシック・凸版文久見出し明朝 | 見出し用に最適化された日本語フォント | |
| 筑紫A丸ゴシック | 丸ゴシック体の日本語フォント | |
| 筑紫B丸ゴシック | やや太めの丸ゴシック体日本語フォント | |
| クレー | 手書き風の日本語フォント | |
| 游教科書体 | 教科書体の日本語フォント | |
| 游教科書体 横用 | 横書き用の教科書体日本語フォント | |
| Osaka | 古くからあるmacOS標準の日本語フォント | |
| iOS | ヒラギノ角ゴ ProN | iOSに最適化された日本語ゴシックフォント |
| Android | Noto Sans CJK JP | Googleが提供する日本語フォント（機種により異なる） |
上記は、OS標準フォントをfont-familyで指定します。font-familyは、あらゆる閲覧環境を想定し、できるだけ多くの環境に対応したフォントを指定しておく必要があります。
Webフォントの仕組みって知ってる？簡単に説明します！
Webフォントの仕組みを理解している人は意外と少ないかもしれません。ここでは、Webフォントの基本的な仕組みを簡単に説明します。
・フォントファイルの準備
使用したいフォントのファイル（WOFF、WOFF2、TTF、OTFなど）を用意します。これらのファイルは、Webサーバーまたはフォント配信サービスに置かれます。
・CSSでのフォント指定
CSSの@font-faceルールを使って、フォントファイルの場所やフォント名、スタイルなどを指定します。
・HTMLでのフォント適用
CSSで指定したフォント名を、HTMLのfont-familyプロパティで指定することで、Webページ上の任意のテキストにフォントを適用できます。
・フォントファイルのダウンロード
訪問者がWebページにアクセスすると、ブラウザはCSSで指定されたフォントファイルをダウンロードします。ダウンロードされたフォントファイルは、ブラウザのキャッシュに保存されます。
・フォントの表示
ダウンロードされたフォントファイルを使って、ブラウザはテキストを表示します。これにより、訪問者のデバイスにフォントがインストールされていなくても、デザイナーの意図したフォントでテキストが表示されます。
主要なWebフォントサービスの比較
Webフォントを利用する際、どのサービスを選ぶかは重要。ここでは、主要なWebフォントサービスを紹介します。
無料Webフォント
1. Google Fonts
Google Fontsは、Googleが提供する無料のWebフォントサービスです。これまでは欧文中心でしたが、最近では徐々に日本語の種類は増えてきて2023年12月21日現在、Google Fontsは64種類の日本語書体があります。複数のウェイトが提供されているフォントもあるため、すべてのウェイトを合わせると合計132種類のフォントを無料で商用利用できます。
- メリット：無料で利用できる、豊富な書体数、導入が簡単
- デメリット：一部のフォントは日本語に対応していない、カスタマイズ性が低い
利用方法はGoogle FontsのWebサイトから、希望するフォントを選択して、HTMLコードをコピーし、WebサイトのHTMLコードに貼り付けて利用できます。Google Fontsが提供するCDNを利用することで、高速な読み込みが可能です。
代表的なGoogle Fonts
- Noto Sans JP（現代的でクリーンな印象を与え、読みやすさも優れている）
- ゴシック体のフォント
- 6ウェイト（Thin、Light、Regular、Medium、Bold、Black）が提供されている
- Noto Serif JP（伝統的で上品な雰囲気を持つ）
- 明朝体のフォント
- 6ウェイト（ExtraLight、Light、Regular、Medium、SemiBold、Bold）が提供されている
- M PLUS 1p（モダンでスタイリッシュな印象を与える）
- ゴシック体のフォント
- 7ウェイト（Thin、Light、Regular、Medium、Bold、ExtraBold、Black）が提供されている
- M PLUS Rounded 1c（柔らかく親しみやすい雰囲気を持つ）
- 丸ゴシック体のフォント
- 7ウェイト（Thin、Light、Regular、Medium、Bold、ExtraBold、Black）が提供されている
- Sawarabi Gothic（シンプルで読みやすいデザイン）
- ゴシック体のフォント
- 1ウェイト（Regular）が提供されている
- Sawarabi Mincho（古典的で優雅な印象を与える）
- 明朝体のフォント
- 1ウェイト（Regular）が提供されている
- Kokoro（手書きの温かみを感じられる）
- 毛筆書体のフォント
- 1ウェイト（Regular）が提供されている
- しっぽり明朝
- 明朝体のフォント
- 伝統的な明朝体をベースにしつつ、現代的なテイストを加えたデザイン
- Regular（標準）の1ウェイトが提供
2. Adobe Fonts(一部無料)
Adobe Fontsは、Adobeが提供するWebフォントサービスです。基本Adobe Creative Cloudのサブスクリプションが必要になりますが、Adobe IDに登録していれば6,000のフォントが利用できます。例えばヒラギノ角ゴシック、游明朝体、筑紫A丸ゴシック、Adobe 丸ゴシックです。
- 無料プラン：Adobe IDに登録することで、6,000のフォントが利用可能
無料プランでも多数のフォントが利用できるため、予算が限られている場合でも無料プランを活用しつつ、必要に応じて有料プランを検討することで、最適なフォントを選ぶようにしましょう。
利用方法はAdobe FontsのWebサイトから、希望するフォントを選択して、プランを選択するだけです。
有料Webフォント
3. TypeSquare
TypeSquareは、モリサワとタイプバンクが共同運営するWebフォントサービスです。高品質な和文フォントと日本語組版に最適な書体が特徴で、モリサワの人気書体であるリュウミン、新ゴ、UD新ゴ、游ゴシック体などが利用可能です。
- メリット：高品質な和文フォント、日本語組版に最適
- デメリット：月額料金がかかる（980円～）
4.Adobe Fonts（有料）
Adobeが提供するCreative CloudサブスクリプションWebフォントサービス。以前はTypekitという名称でしたが、現在はAdobe Fontsに統合されています。
Creative Cloudサブスクリプションの一部として利用できるため、Adobeの他のツールとの連携も容易です。また、Webサイトの訪問者数に応じた柔軟な料金プランが用意されています。
有料プラン：Adobe Creative Cloud コンプリートプラン、単体プラン（ソフト単品）、フォトプランのいずれかのサブスクリプションに加入することで、15,000以上のフォントが利用可能
5. FONTPLUS
FONTPLUSは、フォントワークス、イワタ、モトヤ、白舟書体、モリサワなどの大手フォントメーカーが参加するWebフォントサービスです。有料ですが、有名フォントが豊富で高品質な書体が特徴です。秀英明朝、ゴシックMB101、UD新ゴ、マティスEBなどが利用可能です。
- メリット：有名フォントが豊富、高品質な書体
- デメリット：月額料金が高額（5,500円～）
6. DynaFont
DynaFontは、2,000書体以上を提供するWebフォントサービスです。豊富な書体数と多言語対応、商用利用可能な点が特徴です。DynaFont ProN、游ゴシック、ヒラギノ明朝、UD新ゴなどが利用可能です。
- メリット：豊富な書体数、多言語対応、商用利用可能
- デメリット：無料プランでは利用できる書体が限られている
7. FontStream
FontStreamは、欧文フォントに特化したWebフォントサービスです。高品質な欧文フォントと豊富な書体数、商用利用可能な点が特徴です。Avenir Next、Gotham、Proxima Nova、Helvetica Neueなどが利用可能です。
- メリット：高品質な欧文フォント、豊富な書体数、商用利用可能
- デメリット：日本語フォントが少ない
8. REALTYPE
REALTYPEは、写植書体をWebフォント化したサービスです。独特な雰囲気の書体とレトロなデザインが特徴です。写研明朝体、写研ゴシック体、筑紫A丸ゴシック、クレー書体などが利用可能です。
- メリット：独特な雰囲気の書体、レトロなデザイン
- デメリット：月額料金がかかる（3,300円～）
9. もじでぱ
もじでぱは、自分でデザインした文字をWebフォント化できるサービスです。オリジナルの書体と個性的なデザインが特徴です。
- メリット：オリジナルの書体、個性的なデザイン
- デメリット：デザインスキルが必要、月額料金がかかる（550円～）
【現場でよくある・・・】Webフォントの選ぶときの注意点
デザインをする前にかならず「有料」か「無料」かは
デザイナーでフォントの知識がないと、ビジュアルだけでフォントを選んでしまうので、後々実はこれ有料フォントでした、というケースがあったりします。
なのでフォントを使用する前には、そのライセンス条件（有料か無料か）をしっかりと確認し、遵守してデザインするようにしましょう。特に商用プロジェクトでの使用には注意が必要です。
Webフォントの使用を推奨
Webサイトのデザインでフォントをデータとして扱う場合、ユーザーのOS環境によって表示されるフォントに違いが生じます。ユーザーのOSに指定したフォントがインストールされていれば問題ありませんが、インストールされていない場合は代替フォントが使用されます。そのため見た目が変わってきてしまいます。だから、基本的に僕はWebフォントを使用することを推奨しています。Webフォントを使用することで、デザイナーが指定したフォントがユーザーのOS環境に関わらず、Webサイト上で一貫して表示されます。
Webフォントの多用を避ける
Webフォントを多用するとサイトのパフォーマンスが低下する可能性があります。必要最小限のWebフォントを使用し、SVG画像などで代用することを検討しましょう。
フォントの最適化
フォントファイルのサイズを最小化することで、読み込み速度を改善できます。例えば、フォントのサブセット化（使用する文字だけを含めること）や、圧縮技術の活用が有効です。
フォールバックフォントの設定
Webフォントが読み込まれるまでの間、フォールバックフォント（代替フォント）を指定するようにしましょう。フォールバックフォントを適切に設定することで、Webフォントが読み込まれるまでの表示を最適化できます。
読み込み方法を最適化するように
フォントの読み込み方法を最適化することで、ページの表示速度を改善できます。CSS内で@font-faceを使用し、適切なフォーマットのフォントファイルを指定します。
font-displayプロパティを使用して、フォントの読み込み中の表示動作を制御できます。
