コラム
萩原印刷メルマガ
伝えたい内容によって変わる、フォントの選び方（2016年7月27日）
クロスメディア部
◎ コラム ◎ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
伝えたい内容によって変わる、フォントの選び方
—————————————————————————-
チラシやパッケージ、書籍や雑誌などの紙媒体でも、
Webやアプリなどのデザインをする場合でも、
ほぼ確実に用いられる「テキスト情報」。
テキストは情報発信の軸であり、短めの見出しやキャッチコピー、
長めの文章などをいろいろと組み合わせ、内容を伝えます。
実際、みなさんも、伝えたい内容やイメージに合わせて、
どのフォントを使うかを熟考されていると思います。
紙媒体では、フォントに関する情報を埋め込むことで、
制作時の見た目どおりのデザインをユーザーに届けられます。
つまり、基本的にフォントについて制約のない、
自由度の高いデザインを考案できます。
一方、Webサイトはそういうわけにはいきません。
テキストに適用されるフォントは、
パソコンやスマートフォンそれぞれが保持しているものだけです。
環境によっては制作側が意図していないフォントで表示される可能性が
十分あるため、デザインの段階からOS標準のフォントに限定しておく、
というのが一般的な実務でした。
各OSに収録されている代表的な日本語フォントは、次のとおりです。
●Windows
Windows 8.1以降「游ゴシック体」「游明朝体」
Windows Vista以降「メイリオ」（現在でも使われています）
Windows XP以前「MSゴシック」「MS明朝」（現在でも使われています）
●Mac
OS X Marvericks以降「游ゴシック体」「游明朝体」
OS X初期以降「ヒラギノ角ゴ」「ヒラギノ明朝」（現在でも使われています）
●iOS
iOS初期以降「ヒラギノ角ゴ」「ヒラギノ明朝」
●Andoroid
Android 4以降「モトヤLシーダ3等幅」「モトヤLマルベリ3等幅」
Android 3以前「Droid Sans Japanese」
※ バージョンや環境によって異なる場合があります
ここで目を引くのが、Windows 8.1以降とOS X Mavericks（10.9）以降に
収録されている「游ゴシック体」「游明朝体」です。
OS Xでは2ウェイトずつ、Windowsでは3ウェイトずつ用意されています。
また、日中韓3か国語に対応したオープンソースフォントとして、
Googleとアドビ システムズが2014年7月に公表した「Noto Sans」という
フォントも、幅広く利用されています。
（アドビ システムズでは「源ノ角ゴシック」という名称が使われています）
OSで共通したフォントが使えるようになってきているものの、
「どのフォントでも、何の制約も考えずに使える」
という状況には、まだなっていません。
このような問題を回避するために、テキストを画像化することで、
意図したとおりの見た目を実現する方法が広く用いられてきました。
しかし、時代とともに、テキストを画像化することが、
ユーザー体験としてもワークフローとしても、
適切ではなくなってきてしまったのです。
それを解決するのが、今回のテーマである「Webフォント」です。
—————————————————————-
■ Webフォントのメリットとデメリット
—————————————————————-
Webフォントとは、フォントファイルをWebサーバーに置いておき、
そのフォントファイルをCSSで呼び出すことで、
どのデバイスに対してもそのフォントを適用できるしくみです。
一見、便利そうに見えるWebフォントですが、
次のようなメリットとデメリットがあります。
□メリット
1. ユーザー環境に左右されず、同じフォントでテキストが表示できる
2. レスポンシブ対応がしやすい（固定幅の画像の使用を極力避けられる）
3. ユーザビリティの向上（フォントはベクターなので、ズームしてもキレイ）
4. メンテナンス性の向上（内容修正ではテキストだけ変更すればよい）
□デメリット
1. 無償で利用できる日本語フォントが少ない
2. 容量の大きなフォントファイルを読み込むため、ページ表示が遅くなる
3. 有償のフォントサービスを利用する場合、当然、費用がかかる
日本語は、ひらがな、カタカナ、漢字、アルファベット、数字、記号など
多くの文字を必要とするため、フォントファイルの容量は、
少なくとも数MB、フォントによっては10MB以上ということが珍しくありません。
一方、英語は、アルファベットの大文字・小文字や数字記号など、
日本語とは比べ物にならないくらい種類が少ないので、容量が少なく、
Webフォントとして利用しやすいのです。
したがって、日本語フォントについては、
後述の有償サービスを利用するのが一般的です。
有償サービスの多くが、あらかじめ必要な文字だけをファイルに収録し、
容量を軽くするための「サブセット機能」や、
JavaScriptでページを解析し、サブセット機能のプロセスを自動化する
「ダイナミックサブセット機能」をサポートしており、
ページ表示の速度が極端に遅くなったり、
フォント適用までのタイムラグが発生しないようにしています。
—————————————————————-
■ おすすめのフォントサービス
—————————————————————-
最後に、代表的なフォントサービスを紹介します。
1. Google Web Fonts（無償）
https://www.google.com/fonts
Googleがホスティングするサービス。
個人利用、商用利用を問わず、無償で利用できます。
フォントデータがGoogleのサーバーにあり、
自社のサーバーにフォントファイルを置かずに利用できます。
日本語フォントは前述の「Noto Sans」のみ。
ほとんどが英語フォントですが、
半角英数字を凝ったフォントにするだけで、
サイトの雰囲気が大きく変わります。
実際、このように
「日本語フォントはOS依存でも、英語フォントはGoogle Web Fontsから」
という使い方をしているサイトが増えてきています。
2. モリサワ「TypeSquare」（有償）
http://typesquare.com/
3. ソフトバンク・テクノロジー「FONTPLUS」（有償）
http://webfont.fontplus.jp/
どちらも日本語フォントを多く揃えている有償サービスです。
前述のサブセット機能やダイナミックサブセット機能をサポートしており、
高品質なフォントが低料金から利用できます。
有償サービスの契約プランは、従量課金（ページビュー数依存）か、
年間一括払いが多いようです。
まずは低料金のプランからはじめて、
状況を見てそれ以上のプランを検討するとよいでしょう。
Webフォントというしくみによって、
デザイナーやクライアント企業の意図した表現ができるようになり、
さらに、制作時の手間の削減にも寄与してくれるでしょう。
これまで以上に活用されていくのは間違いありません。
ぜひ、今後の動向にもご注目ください。
▼参考サイト
実はすごく簡単！webフォントの使い方＆日本語対応webフォントまとめ
http://www.hp-stylelink.com/news/2013/08/20130829.php
▼参考サイト
Webフォントはサイトデザインの基礎！メリット・デメリットまとめ
http://liginc.co.jp/212206
萩原印刷株式会社 クロスメディア部
伝えたい内容によって変わる、フォントの選び方
—————————————————————————-
チラシやパッケージ、書籍や雑誌などの紙媒体でも、
Webやアプリなどのデザインをする場合でも、
ほぼ確実に用いられる「テキスト情報」。
テキストは情報発信の軸であり、短めの見出しやキャッチコピー、
長めの文章などをいろいろと組み合わせ、内容を伝えます。
実際、みなさんも、伝えたい内容やイメージに合わせて、
どのフォントを使うかを熟考されていると思います。
紙媒体では、フォントに関する情報を埋め込むことで、
制作時の見た目どおりのデザインをユーザーに届けられます。
つまり、基本的にフォントについて制約のない、
自由度の高いデザインを考案できます。
一方、Webサイトはそういうわけにはいきません。
テキストに適用されるフォントは、
パソコンやスマートフォンそれぞれが保持しているものだけです。
環境によっては制作側が意図していないフォントで表示される可能性が
十分あるため、デザインの段階からOS標準のフォントに限定しておく、
というのが一般的な実務でした。
各OSに収録されている代表的な日本語フォントは、次のとおりです。
●Windows
Windows 8.1以降「游ゴシック体」「游明朝体」
Windows Vista以降「メイリオ」（現在でも使われています）
Windows XP以前「MSゴシック」「MS明朝」（現在でも使われています）
●Mac
OS X Marvericks以降「游ゴシック体」「游明朝体」
OS X初期以降「ヒラギノ角ゴ」「ヒラギノ明朝」（現在でも使われています）
●iOS
iOS初期以降「ヒラギノ角ゴ」「ヒラギノ明朝」
●Andoroid
Android 4以降「モトヤLシーダ3等幅」「モトヤLマルベリ3等幅」
Android 3以前「Droid Sans Japanese」
※ バージョンや環境によって異なる場合があります
ここで目を引くのが、Windows 8.1以降とOS X Mavericks（10.9）以降に
収録されている「游ゴシック体」「游明朝体」です。
OS Xでは2ウェイトずつ、Windowsでは3ウェイトずつ用意されています。
また、日中韓3か国語に対応したオープンソースフォントとして、
Googleとアドビ システムズが2014年7月に公表した「Noto Sans」という
フォントも、幅広く利用されています。
（アドビ システムズでは「源ノ角ゴシック」という名称が使われています）
OSで共通したフォントが使えるようになってきているものの、
「どのフォントでも、何の制約も考えずに使える」
という状況には、まだなっていません。
このような問題を回避するために、テキストを画像化することで、
意図したとおりの見た目を実現する方法が広く用いられてきました。
しかし、時代とともに、テキストを画像化することが、
ユーザー体験としてもワークフローとしても、
適切ではなくなってきてしまったのです。
それを解決するのが、今回のテーマである「Webフォント」です。
—————————————————————-
■ Webフォントのメリットとデメリット
—————————————————————-
Webフォントとは、フォントファイルをWebサーバーに置いておき、
そのフォントファイルをCSSで呼び出すことで、
どのデバイスに対してもそのフォントを適用できるしくみです。
一見、便利そうに見えるWebフォントですが、
次のようなメリットとデメリットがあります。
□メリット
1. ユーザー環境に左右されず、同じフォントでテキストが表示できる
2. レスポンシブ対応がしやすい（固定幅の画像の使用を極力避けられる）
3. ユーザビリティの向上（フォントはベクターなので、ズームしてもキレイ）
4. メンテナンス性の向上（内容修正ではテキストだけ変更すればよい）
□デメリット
1. 無償で利用できる日本語フォントが少ない
2. 容量の大きなフォントファイルを読み込むため、ページ表示が遅くなる
3. 有償のフォントサービスを利用する場合、当然、費用がかかる
日本語は、ひらがな、カタカナ、漢字、アルファベット、数字、記号など
多くの文字を必要とするため、フォントファイルの容量は、
少なくとも数MB、フォントによっては10MB以上ということが珍しくありません。
一方、英語は、アルファベットの大文字・小文字や数字記号など、
日本語とは比べ物にならないくらい種類が少ないので、容量が少なく、
Webフォントとして利用しやすいのです。
したがって、日本語フォントについては、
後述の有償サービスを利用するのが一般的です。
有償サービスの多くが、あらかじめ必要な文字だけをファイルに収録し、
容量を軽くするための「サブセット機能」や、
JavaScriptでページを解析し、サブセット機能のプロセスを自動化する
「ダイナミックサブセット機能」をサポートしており、
ページ表示の速度が極端に遅くなったり、
フォント適用までのタイムラグが発生しないようにしています。
—————————————————————-
■ おすすめのフォントサービス
—————————————————————-
最後に、代表的なフォントサービスを紹介します。
1. Google Web Fonts（無償）
https://www.google.com/fonts
Googleがホスティングするサービス。
個人利用、商用利用を問わず、無償で利用できます。
フォントデータがGoogleのサーバーにあり、
自社のサーバーにフォントファイルを置かずに利用できます。
日本語フォントは前述の「Noto Sans」のみ。
ほとんどが英語フォントですが、
半角英数字を凝ったフォントにするだけで、
サイトの雰囲気が大きく変わります。
実際、このように
「日本語フォントはOS依存でも、英語フォントはGoogle Web Fontsから」
という使い方をしているサイトが増えてきています。
2. モリサワ「TypeSquare」（有償）
http://typesquare.com/
3. ソフトバンク・テクノロジー「FONTPLUS」（有償）
http://webfont.fontplus.jp/
どちらも日本語フォントを多く揃えている有償サービスです。
前述のサブセット機能やダイナミックサブセット機能をサポートしており、
高品質なフォントが低料金から利用できます。
有償サービスの契約プランは、従量課金（ページビュー数依存）か、
年間一括払いが多いようです。
まずは低料金のプランからはじめて、
状況を見てそれ以上のプランを検討するとよいでしょう。
Webフォントというしくみによって、
デザイナーやクライアント企業の意図した表現ができるようになり、
さらに、制作時の手間の削減にも寄与してくれるでしょう。
これまで以上に活用されていくのは間違いありません。
ぜひ、今後の動向にもご注目ください。
▼参考サイト
実はすごく簡単！webフォントの使い方＆日本語対応webフォントまとめ
http://www.hp-stylelink.com/news/2013/08/20130829.php
▼参考サイト
Webフォントはサイトデザインの基礎！メリット・デメリットまとめ
http://liginc.co.jp/212206
萩原印刷株式会社 クロスメディア部
