SEOにも!ブランディングにもオススメ！WEBフォントの話 ― コラムーベイクロスマーケティング株式会社

WEBフォントって聞いたことありますか？
何それ？という方の為に説明すると
「WEBサイト上にあるフォントデータを使用して、WEBサイトの文字を表示できるフォント」のことです。
一般的なWEBサイトは、閲覧している人それぞれのPCやスマホにインストールされているフォントを使用し、
文字を表示しています。
WEBフォントを使用すると、閲覧しているPCに入っていないフォントでも、
サーバー側で用意したフォントデータを使って表示させられます。
例えば、以下のように閲覧しているPCによって誤差がある場合があるのです。

これが、WEBフォントを使用すれば、すべての人の端末で、同じフォントで表示させることができるのです。

このWEBフォント、最近は非常に多くのサイトで見受けられるようになってきました。
また、以前に比べ、費用面や、表示速度などの問題が少なくなってきたので、
お客様へのご提案させていただく機会も増えてきています。

今回はそんなWEBフォントのメリット、デメリットについてご紹介します。

メリット

デザインの差別化

一般的なWEBサイトの場合、
「游ゴシック」「ヒラギノ角ゴシック」「メイリオ」などのフォント指定が一般的です。
上記のフォント名はそれぞれ、名前に合わせてフォントを指定していますが、
環境によっては同じフォントが表示されているかもしれません。
このように、指定されたフォントがPCにインストールされていないと表示されないのに対し、WEBフォントなら環境が変わっても同じフォントが表示され、
少し個性的なフォントにしてみるだけで、グッとサイトのイメージが変わります。
特に、明朝体はデフォルトでインストールされているものによって、かなり見え方が変わるので、
和風の商材を扱うECサイトや、キレイ目のデザインなどにはおすすめです。
サイト全体のデザインに大きく関わるので、ブランディングという観点からもおすすめです。

アイコンフォント

アイコンをフォントにしたものもあり、使用するアイコンの数にもよりますが、
・画像を読み込むよりもデータが軽い
・CSSで色やサイズを簡単に変えられる
などのメリットがあります。
フリーで使用できるアイコンフォントも色々あります。

SEO対策にも有利

昔のサイトなどでは、タイトルなどに変わった書体を使いたい場合、すべて画像で作成していました。
ですが、WEBフォントを使用すればテキストとして表示できます。
一般的に検索エンジンは画像に記載されている文字情報を読み取ることはできません。
alt属性で指定することはできますが、alt属性の基本的な使い方としては「画像の簡潔な説明」のため、
あまり長文を指定するのは好ましくありません。
ですが、WEBフォントを使用すれば「テキスト」として検索エンジンが認識するため、
検索エンジンも認識できるのです。
最近ではGoogle Homeや、Amazon Echoなどの
スマートスピーカーの普及による音声検索への対応にもおすすめです。

拡大、縮小やレスポンシブデザインでもキレイな表示

画像の場合、拡大するとボヤけてしまいます。
また、レスポンシブデザインなどで使用している場合、見るデバイスによって横幅が変わる場合、
小さい画面では画像がそのまま縮小されることがあり、文字の視認性が悪くなる、などの問題がありますが、
WEBフォントなら改行位置が自動で変わるため、そのまま読みやすいサイズで表示が可能です。

メンテナンス性が高い

画像と違い、テキストファイルなのでちょっとした文章の変更など、更新、修正も簡単です。

デメリット

書体により、データが重くなり読み込みに時間がかかる場合がある

英語と違い、日本語は漢字、ひらがな、カタカナ…と非常に文字数が多いため、
読み込みに時間がかかる場合があります。
最近では非常にデータの軽いフォントが出てきたり、WEBフォントの読み込みが完了するまでは、各自のPCにインストールされているフォントを表示し、読み込んだら切り替える、などの対策が必要です。

コストがかかる

これは使用したいWEBフォントにもよりますが、モリサワ「TypeSquare」や、Adobe「Typekit」など、
フォントベンダーが提供しているWEBフォントには費用がかかります。
PV（ページビュー）数で費用が変わったり、制限がかかることがあります。
また、最近ではGoogleが提供している無料のWEBフォントもあるので、そちらを使用しても良いかもしれません。

WEBフォントってどうやって使うの？

1. 所有するサーバに置く

画像ファイルやHTMLファイルなどと一緒にフォントのデータを使用しているサーバーにUPする方法です。
この場合、サーバの転送量や負荷の問題や、
自らフォントを配信している、という立場なのでフォント自体の著作権問題もあります。
なので、主に使用できるのはフリーフォントとなります。
フリーフォントの場合でもWEBフォントとして使用できるもの、できないものがあるので注意が必要です。
文字ではなく、アイコンフォントを使用したい場合などは、
使用したいものだけ選んでUPできるので、この方法がおすすめです。

2. フォントベンダーのサービス

モリサワの「TypeSquare」や、 Adobeの「Typekit」がこのタイプです。
コストはかかりますが、使用できるフォントの種類が豊富なのも特徴です。
フォントベンダー提供のサービスの場合、自分のサーバーに設置する方法と、
リアルタイムに使用するフォントだけを選択して表示するシステムの2種類があり、
後者は読み込みの面でもデータが軽いという利点があります。
最近ではレンタルサーバーと提携して使用できるものもあるので、そちらを利用するという手段もあります。
ちなみに、弊社のこのサイトはモリサワの「ナウ-GM」というフォントを使用しています。

3. Google Fonts

「Google Fonts + 日本語早期アクセス」試用的に9種類の日本語フォントを提供しています。
英語フォントについては種類も大変豊富なので、
英語はGoogle Fonts、日本語は通常のフォント、という使い方もおすすめです。
無料のサービスなので、コストもかからず、Googleのサーバー上にあるためサーバーの負荷も問題ありません。
とても読みやすいキレイなフォントもあるので、
試用的な提供ですが実際に使用しているサイトも数多く見かけます。
Google Fontsの場合、最初にフォントデータをダウンロードし、
その後はキャッシュに保存されているデータを使って表示をします。
そのため、初回アクセス時は重い、遅いと感じるかもしれません。
しかし、これは1つのサイト毎ではなく、過去に他のサイトで同じフォントを使用していた場合、
その時のキャッシュを使用して表示することが可能です。
Google Fontsを使用するサイトが増えれば必然的に読み込みスピードはUPする、という仕組みです。

いかがでしたでしょうか？
どんどん導入の壁も低くなってきているWEBフォント、ぜひ導入を検討してみてくださいね。

Written by Somekawa