今やおなじみとなりつつあるWebフォントですが皆さん正しく利用できていますでしょうか？
種類も豊富でお手軽に雰囲気を変えられるWebフォントが使用できればデザインの幅が広がり、テキストの修正が簡単などの利点があります。
一方で使い方によってはページの読み込みが重くなりSEOに悪影響になる。などといった側面もあります。
今回はそんな特徴も理解しながら、改めてWebフォントの使い方についてまとめたいと思います。
Webフォントの特徴
Webフォントの仕組み
Webフォントは自身のPCのフォントデータではなく、Webフォントを提供しているサーバーからフォントデータが読み込まれます。
そのためフォントを持っていないPCでも利用できるメリットがありるものの、逆に場合によってはサイト読み込みの妨げになる可能性もあります。
また、フォントの選び方によっては文章の可読性も低下する場合があり注意が必要です。
メリット
- フォントデータを持っていなくてもフォントが適用される
利用する側も閲覧する側もフォントデータを持っていなくても同じフォントが適用される。 - SEOに有利
装飾的な書体であったとしても画像化されているわけではないので、テキストコンテンツとして認識される期待ができます。 - 修正が簡単
同じく画像化されていないので誤植があったとしても修正が容易です。またリニューアルなどで雰囲気を変えたくなった場合でもフォントの設定を変えるだけで済みます。
デメリット
- サイトの読み込みが遅くなる可能性がある
フォント数が多くなればなるほど読み込みに時間がかかるのは想像できるかと思いますが、日本語フォントは漢字データも含まれているので欧文に比べるとデータが大きくなりがちです。
デメリットはほぼ読み込みの問題です。
SEOの評価と言われると躊躇するかもしてませんが、Webフォントには利点もたくさんあるので、以下のポイントを抑えて上手に利用していきたいところです。
Webフォントの使い過ぎを避ける
まず最初に気をつけたいのは、Webフォントの使いすぎです。
冒頭で説明した通りWebフォントはサーバーからフォントデータをアクセスする度に読み込むことになるので、複数のWebフォントを利用しているとその分、読み込むフォントデータも増えます。
そうすると当然サイトの読み込み速度が低下しますのでSEOの評価が落ちる可能性があります。
ちなみにここで言う「複数のフォント」とは、単に書体の種類だけでなく書体のウェイト（太さ）も１種類になります。（ウェイト毎にフォントデータを読み込むため）
そのため、むやみにWebフォントを利用するのではなく場所を決めて最低限の利用に抑えると良いと思います。
Webフォントを複数使用した場合
見出しのみで使用した場合
この様に「PageSpeed Insights」の評価に変化があります。
サイトのデザインや趣旨を考慮したフォントを使用する
文字にデザイン性を表現できるとはいえ、テキストはあくまで読むものなので装飾的すぎる書体は可読性を低下させる恐れがあります。
特にブログ記事や説明文の様に長文になるのもは、線の細いシンプルな書体の方が読みやすくて良いでしょう。
逆に見出しやブランドの説明といった、コンセプトや世界観を表現する場合には特徴的なものを使用すると良いと思います。
全て同じウェイトで設定した場合
本文を細めにした場合
いかがでしょうか。本文は線を細めにした方がスッキリして読みやすいと思います。
逆に見出しなどは本文よりも太めにし差を出すことで全体のまとまりもよくなると思います。
今はウェイトだけの違いですが、用途や目的、また閲覧者を意識したフォントを見つけてみてください。
使いやすいフォント
以下は雰囲気を出しやすくもクセが強くない使いやすいフォントです。
日本語フォント
ゴシック体：ニューセザンヌ Pro
明朝体：筑紫明朝 Pro
欧文フォント
サンセリフ体：Roboto
セリフ体：Roboto
サンセリフ体：Lora
標準搭載フォント
ちなみにこちらはWindowsとMacに標準搭載されているフォントです。
サーバーからフォントデータを読み込むWebフォントとは違い、システムに搭載されたフォントなのでフォントによる読み込みの負担がありません。
こちらで差し支えなければ本文など基本的な部分は標準フォントに任せて、Webフォントに拘る必要はないかもしれません。
ゴシック体：游ゴシック
ゴシック体：游ゴシック
こちらも参考にしてみてください。
ホームページ作成サービス「BiNDup」では、筑紫系や丸明フォントなどのデザイナーも愛用する美しいWebフォント538書体に対応。ポイントを押さえて、ぜひ使ってみてください。
POINT
- Webフォントを使いすぎると読み込みに時間がかかり SEOにも不利に
- 特に本文では、装飾性より読みやすいフォントを利用する
- WindowsとMacに標準搭載されている美しいフォントも上手く活用する