SEOを意識した、Webフォントの正しい使い方

今やおなじみとなりつつあるWebフォントですが皆さん正しく利用できていますでしょうか?
種類も豊富でお手軽に雰囲気を変えられるWebフォントが使用できればデザインの幅が広がり、テキストの修正が簡単などの利点があります。
一方で使い方によってはページの読み込みが重くなりSEOに悪影響になる。などといった側面もあります。

今回はそんな特徴も理解しながら、改めてWebフォントの使い方についてまとめたいと思います。

Webフォントの特徴

SEOを意識した、Webフォントの正しい使い方

Webフォントの仕組み

Webフォントは自身のPCのフォントデータではなく、Webフォントを提供しているサーバーからフォントデータが読み込まれます。
そのためフォントを持っていないPCでも利用できるメリットがありるものの、逆に場合によってはサイト読み込みの妨げになる可能性もあります。
また、フォントの選び方によっては文章の可読性も低下する場合があり注意が必要です。

メリット

  • フォントデータを持っていなくてもフォントが適用される
    利用する側も閲覧する側もフォントデータを持っていなくても同じフォントが適用される。
  • SEOに有利
    装飾的な書体であったとしても画像化されているわけではないので、テキストコンテンツとして認識される期待ができます。
  • 修正が簡単
    同じく画像化されていないので誤植があったとしても修正が容易です。またリニューアルなどで雰囲気を変えたくなった場合でもフォントの設定を変えるだけで済みます。

デメリット

  • サイトの読み込みが遅くなる可能性がある
    フォント数が多くなればなるほど読み込みに時間がかかるのは想像できるかと思いますが、日本語フォントは漢字データも含まれているので欧文に比べるとデータが大きくなりがちです。

デメリットはほぼ読み込みの問題です。
SEOの評価と言われると躊躇するかもしてませんが、Webフォントには利点もたくさんあるので、以下のポイントを抑えて上手に利用していきたいところです。

Webフォントの使い過ぎを避ける

まず最初に気をつけたいのは、Webフォントの使いすぎです。
冒頭で説明した通りWebフォントはサーバーからフォントデータをアクセスする度に読み込むことになるので、複数のWebフォントを利用しているとその分、読み込むフォントデータも増えます。
そうすると当然サイトの読み込み速度が低下しますのでSEOの評価が落ちる可能性があります。

ちなみにここで言う「複数のフォント」とは、単に書体の種類だけでなく書体のウェイト(太さ)も1種類になります。(ウェイト毎にフォントデータを読み込むため)
そのため、むやみにWebフォントを利用するのではなく場所を決めて最低限の利用に抑えると良いと思います。

SEOを意識した、Webフォントの正しい使い方

Webフォントを複数使用した場合

SEOを意識した、Webフォントの正しい使い方

見出しのみで使用した場合

この様に「PageSpeed Insights」の評価に変化があります。

サイトのデザインや趣旨を考慮したフォントを使用する

文字にデザイン性を表現できるとはいえ、テキストはあくまで読むものなので装飾的すぎる書体は可読性を低下させる恐れがあります。
特にブログ記事や説明文の様に長文になるのもは、線の細いシンプルな書体の方が読みやすくて良いでしょう。

逆に見出しやブランドの説明といった、コンセプトや世界観を表現する場合には特徴的なものを使用すると良いと思います。

SEOを意識した、Webフォントの正しい使い方

全て同じウェイトで設定した場合

SEOを意識した、Webフォントの正しい使い方

本文を細めにした場合

いかがでしょうか。本文は線を細めにした方がスッキリして読みやすいと思います。
逆に見出しなどは本文よりも太めにし差を出すことで全体のまとまりもよくなると思います。

今はウェイトだけの違いですが、用途や目的、また閲覧者を意識したフォントを見つけてみてください。

使いやすいフォント

以下は雰囲気を出しやすくもクセが強くない使いやすいフォントです。

日本語フォント

ゴシック体:ニューセザンヌ Pro
BiNDで使える美しいWebフォント ABCabc123
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
明朝体:筑紫明朝 Pro
[L]BiNDで使える美しいWebフォント ABCabc123
[LB]BiNDで使える美しいWebフォント ABCabc123
[R]BiNDで使える美しいWebフォント ABCabc123
[RB]BiNDで使える美しいWebフォント ABCabc123
[M]BiNDで使える美しいWebフォント ABCabc123
[D]BiNDで使える美しいWebフォント ABCabc123
[B]BiNDで使える美しいWebフォント ABCabc123
[E]BiNDで使える美しいWebフォント ABCabc123
[H]BiNDで使える美しいWebフォント ABCabc123

欧文フォント

サンセリフ体:Roboto
[Thin]Almost before we knew it, we had left the ground. ABCabc123
[Light]Almost before we knew it, we had left the ground. ABCabc123
[Regular]Almost before we knew it, we had left the ground. ABCabc123
[Medium]Almost before we knew it, we had left the ground. ABCabc123
[Bold]Almost before we knew it, we had left the ground. ABCabc123
[Black]Almost before we knew it, we had left the ground. ABCabc123
セリフ体:Roboto
[Thin]Almost before we knew it, we had left the ground. ABCabc123
[Light]Almost before we knew it, we had left the ground. ABCabc123
[Regular]Almost before we knew it, we had left the ground. ABCabc123
[Medium]Almost before we knew it, we had left the ground. ABCabc123
[Bold]Almost before we knew it, we had left the ground. ABCabc123
[Black]Almost before we knew it, we had left the ground. ABCabc123
サンセリフ体:Lora
[Regular]Almost before we knew it, we had left the ground. ABCabc123
[Medium]Almost before we knew it, we had left the ground. ABCabc123
[Semi-bold]Almost before we knew it, we had left the ground. ABCabc123
[Bold]Almost before we knew it, we had left the ground. ABCabc123

標準搭載フォント

ちなみにこちらはWindowsとMacに標準搭載されているフォントです。
サーバーからフォントデータを読み込むWebフォントとは違い、システムに搭載されたフォントなのでフォントによる読み込みの負担がありません。
こちらで差し支えなければ本文など基本的な部分は標準フォントに任せて、Webフォントに拘る必要はないかもしれません。

ゴシック体:游ゴシック
BiNDで使える美しいWebフォント ABCabc123
ゴシック体:游ゴシック
BiNDで使える美しいWebフォント ABCabc123

こちらも参考にしてみてください。

見出しなどに映えるWebフォント10選

本文に使いやすいオススメの日本語Webフォント7選【スタンダード編】

ホームページ作成サービス「BiNDup」では、筑紫系や丸明フォントなどのデザイナーも愛用する美しいWebフォント538書体に対応。ポイントを押さえて、ぜひ使ってみてください。

BiNDupのトップページ

BiNDupで使えるWebフォントをチェックするBiNDの制作事例を見る

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • Webフォントを使いすぎると読み込みに時間がかかり SEOにも不利に
  • 特に本文では、装飾性より読みやすいフォントを利用する
  • WindowsとMacに標準搭載されている美しいフォントも上手く活用する

RECOMMEND ARTICEL