ホームページの印象は、写真や配色だけでなく、文字の見た目にも大きく左右されます。同じ文章でも、書体が変わるだけで「きちんとしている」「柔らかい」「読みにくい」といった感じ方が変わってきます。
この文字の見た目を制作側で指定できる仕組みが、Webフォントです。
Webフォントとは
パソコンやスマートフォンには、あらかじめいくつかの書体が入っています。かつてのホームページは、その「端末に元から入っている書体」の中から表示していました。そのため、WindowsとMac、iPhoneとAndroidで見え方がばらばらになるのが当たり前でした。
Webフォントは、書体のデータをインターネット経由で読み込ませる方法です。閲覧している端末に入っていない書体でも表示できるため、どの環境で見ても意図した見た目を保てるようになりました。
日本語フォント特有の事情
ここで知っておきたいのが、日本語のフォントは英語のフォントに比べてデータが非常に重いという点です。
英語であれば、アルファベットと記号を合わせても100文字前後で足ります。一方の日本語は、ひらがな、カタカナ、漢字を含めると数千文字が必要になります。同じ「1書体」でも、データの大きさが桁違いになるのです。
そのため日本語のWebフォントでは、次のような工夫が必要になります。
- 使う書体を絞る ── 本文用と見出し用で最大2書体程度に抑えます
- 太さ（ウェイト）を絞る ── 同じ書体でも太さごとにデータを読み込むため、細字・標準・太字をすべて使うと3倍の読み込みが発生します
- 読み込み方を調整する ── フォントの読み込みが終わるまで文字が表示されない、という状態を避ける設定を入れておきます
「デザインにこだわって書体を増やしたら、表示が遅くなった」というのは実際によくある話です。見た目と表示速度のバランスをとる作業だとお考えください。
無料で使える日本語フォント
Google Fontsでは、日本語の書体が無料で公開されており、商用利用も可能です。よく使われるものをいくつかご紹介します。
Noto Sans JP（ゴシック体） 汎用性が高く、癖のない標準的なゴシック体です。太さの種類も豊富で、迷ったときの基本の選択肢になります。
Zen Kaku Gothic New（ゴシック体） Noto Sans JPよりやや字間が広く、すっきりとした現代的な印象です。サービス紹介のページなどに向いています。
BIZ UDPGothic（ユニバーサルデザインフォント） 文字の形が判別しやすいよう設計された書体です。似た文字の見間違いが起きにくいため、幅広い年代の方に読んでもらう情報量の多いページに適しています。
Noto Serif JP / しっぽり明朝（明朝体） 落ち着いた知的な印象を与えます。士業や、読み物を中心としたページと相性がよい書体です。
M PLUS Rounded 1c（丸ゴシック） 角が丸く、柔らかく親しみやすい雰囲気になります。保育・医療・飲食など、あたたかみを出したい場面で使われます。
有料のWebフォントサービス
より幅広い書体を使いたい場合は、有料のサービスもあります。デザイン用ソフトの契約に含まれるもの、国内のフォントメーカーが提供するもの、月額で使えるものなど、いくつかの形式があります。
有料サービスの利点は、書体の選択肢が広いことに加えて、利用できる範囲（商用利用や表示回数の制限など）が契約として明確になっている点です。ブランドの印象を細かくつくり込みたい場合は、検討する価値があります。
選ぶときの考え方
書体選びで迷ったときは、次の順番で考えると整理しやすくなります。
- 本文は読みやすさを最優先に ── 長い文章には、癖の少ないゴシック体が向いています
- 見出しで印象をつくる ── 個性のある書体を使うなら、見出しだけに絞り、1種類までにとどめます
- 想定する読み手を考える ── 幅広い年代が読むなら、ユニバーサルデザインフォントや、やや大きめの文字サイズを検討します
- ライセンスを確認する ── 無料の書体でも、利用条件が定められています。特に印刷物にも展開する場合は、Web利用と印刷利用で条件が異なることがあるため確認が必要です
書体以上に読みやすさを左右するもの
最後にひとつ補足を。読みやすさは書体だけで決まるわけではありません。実際には、文字の大きさ、行と行の間隔、1行の長さのほうが影響します。
具体的には、本文の文字は小さくしすぎないこと、行の間隔を文字の高さの1.7〜1.8倍程度とることが目安になります。また、パソコンの広い画面で1行があまりに長く伸びると、目の移動距離が増えて読みにくくなるため、文章を表示する幅にも上限を設けておきます。
おしゃれな書体を選んだのに読みにくい、という場合、原因はこちらにあることが少なくありません。
まとめ
Webフォントは、ホームページの印象を整えるうえで有効な手段ですが、日本語では「重さ」との付き合い方が欠かせません。書体を増やしすぎず、本文の読みやすさを軸に選ぶことが、結果として使いやすいホームページにつながります。
制作を依頼される際も、「どの書体を使う予定か」「表示速度への影響はどう考えているか」を確認してみると、仕上がりのイメージが共有しやすくなるかと思います。
