デザイン制作ガイド #3 フォントの選び方
デザイン制作ガイド #3 フォントの選び方
主要なOSで共通する標準フォントを表にまとめました。
標準でインストールされているデバイスフォントを指定することで、高速に表示されます。また、各OSで共通するシステムフォントであれば、デバイス間での書体の違いを最小限に抑えられます。
特に、適用する文字量が多く可読性が求められる本文には、デバイスフォントの適用がお勧めです。
当社では、本文などの日本語フォントには Noto Sans JP / Hiragino Sans の指定を推奨しています。
なお、明朝体にする必要がある場合は Noto Serif JP / Hiragino Mincho ProN を、Android にも適用する場合には Webフォントを指定することになります。
共通標準フォント | macOS | iOS / iPadOS | Windows | Android |
---|---|---|---|---|
日本語 ゴシック体 | Hiragino Sans (W1–9) | Noto Sans JP (Yu Gothic) (BIZ UDGothic) | Noto Sans CJK JP | |
日本語 明朝体 | Hiragino Mincho ProN (W3, 6) | Noto Serif JP (Yu Mincho) (BIZ UDMincho) | (なし) | |
欧文 ゴシック体 | Arial, Verdana, Trebuchet MS, Impact | Roboto | ||
欧文 明朝体 | Georgia, Times New Roman | (なし) | ||
欧文 等幅 | Courier New | (なし) |
Windows は2025年3月に提供された更新プログラムにより、Noto Sans JP と Noto Serif JP が標準フォントに追加されました。
Android は基本的に、日本語には Noto Sans CJK JP が適用されます。日本語に最適化した派生フォントが Noto Sans JP なので、Noto Sans JP を指定することで Windows と Andoroid で共通化できます。
Windows 標準フォントである Yu Gothic / Yu Micho / BIZ UDGothic / BIZ UDMincho は、macOS / iOS でも自動的にインストールされているような気がするのですが、「ダウンロード可能なフォント」扱いでシステムフォントではありません。
Safari ブラウザは現在、プライバシー保護のフィンガープリント採取対策として、指定できるデバイスフォントはシステムフォントのみという仕様になっています。こうした動向は FireFox にもみられ、業界全体で取り組みが進められています。
以前は Yu Gothic を指定することで Windows と macOS / iOS で共通化する手法も一般的でしたが、ウエイトなど表示の違いもあり、現在では Windows と macOS / iOS で適用されるフォントを変える方が適切と考えられます。
現状での対応としては、Yu Gothic / Yu Mincho や BIZ UDGothic / BIZ UDMincho を指定して、表示されない Safari などでは Hiragino Sans が適用されるようにしておくことも可能です。例えば macOS版 Chrome では指定どおり表示されます。今のところ。
Android ではデバイスフォントの指定がほとんど無理と言ってよく、基本的に日本語は Noto Sans CJK JP、欧文は Roboto が適用されます。割り切りが肝心ですが、必要がある場合にはWebフォントを指定することになります。
Webフォントについて
Web フォントは、Web 上で配信されているフォントデータです。Web ページから呼び出して表⽰でき、すべてのデバイスで同⼀のフォントを適⽤できます。ただし、通信や描画に時間や負荷がかかりますので、部分的な使用がお勧めです。
見出しやタグラインなどのデザイン性の高いテキストについては、Webフォントの使用が適切です。有料フォントをアウトライン化して画像置き換えするより、SEOやアクセシビティティの面で非常に有効です。
無料のWebフォントサービスに Google が提供する Google Fonts があります。多くの種類から希望のフォントを探して商用利用できます。
なお、デザインワークに際しては、Web フォントデータをダウンロードして、通常のフォントと同様にインストールして使⽤することができます。
なお、Adobe が提供するWebフォントサービスに Adobe Fonts がありますが、利用には Adobe Creative Cloud のアカウントが必要であり、有料プランでないと使用できないフォントもあります。
またライセンス規約上、フォントを使用するWebサイトの所有者(つまりクライアント)のアカウントが必要とされていますので注意が必要です。
当社では、Adobe Fonts のフォントを使用される場合には、適切なアカウントで発行された埋め込みコードのご支給をお願いしています。