Webフォント導入の注意点

Webサイト制作を行う弊社ITRAでは最近、「 お洒落なWebフォントを使いたい」というご要望を多く受けるようになりました。しかし個人サイトに入れるのと同じような感覚で「はい、入りました」と言えるほど、単純にはいかないことを実感しています。Web制作会社が提案を行うにあたって、またお客様のWeb担当者にも知っておいていただきたい、Web フォント導入の注意点をまとめてみました。

Webフォントとは

WebフォントとはCSS3から策定された技術で、あらかじめWebサーバーにフォントをインストールするか、ネット経由で指定フォントを呼び出して表示させるというものです。ユーザー側のPCの書体環境に左右されることなく、制作側が意図したとおりの美しいフォントをWebサイトに表示させることができ、企業のブランティングの向上に役立つため、採用するWebサイトが増えています。

Webフォントの注意点

注意点１：Webフォントが正常に効いているかどうかは本番公開まで分からない

Webフォントを使うときは、JavaScriptのタグを入れるのですが、テスト環境と本番環境の両方で入れても、いざ公開してみたらうまく表示されないといったことがよく起こります。使用するドメインの数に上限があって、テスト環境の分が足りないといったケースです。

また、制作会社や企業のWeb担当者のPCにはもともと書体が豊富に入っているので、Webフォントが正常に効いていなくても、効いているかのように見えてしまって、不具合に気づかない、といったケースもあります。検証用にあえて書体を減らしたPCを用意しなければなりません。

注意点２：ページを読み込む速度に影響する

Webフォントがロゴの部分にだけ使われ、英字書体26文字分だけだった頃は問題がなかったのですが、日本語のフルセットのWebフォントが普及してからは、その文字数の多さからページの読む込み速度にも影響を及ぼしています。ユーザビリティ向上には、ローディングスピードアップは重要です。文章を読ませる「本文」にWebフォントを使うことは今でもお勧めしていません。ローディングスピードを遅くしないためにも、Webフォントを使用する場合はなるべく見出しなどのデザイン重視の部分のみに適用するよう、お客様に提案しています。

注意点３：代替のフォントを用意する必要がある

たとえばこのWebフォントを使いたいと決めていても、必ず代替のフォント案を用意していただく必要があります。特殊なWebフォントを使用した場合、すべてのユーザーのブラウザ、バージョンに対応することは不可能で、代替のフォントが設定されていない場合は意図しないフォントが適用される場合があります。弊社のクライアントでも、より汎用性のある第2フォントを用意したものの、それも効かなかったので第3希望のフォントを選び直したというケースもありました。プランA→B→Cくらいまで用意しておくほうが無難です。

注意点４：登録してから反映されるまでのタイムラグがある

実際に公開してみなければわからないことはもうひとつ、Webフォントの契約を済ませて、Webにタグを組み込んでから、実際にサイトに反映されるまでにある程度のタイムラグをみておく必要があるということです。どのくらい時間がかかるかは、Webフォントのヘルプデスクでも答えてくれません。見ているパソコンによっても差がついたりしてしまうので、お客様にタイムラグがあることを事前に説明しておかないと、トラブルの元になります。

注意点５：キャッシュが残る

Webブラウザにはキャッシュが残るので、ユーザーによってはWebフォントが効く前の古いサイトを見続けることも考えられます。ユーザー環境はブラウザの種類によっても差が大きく、ひとつひとつの検証に非常に手間がかかるため、どのブラウザのどのバージョンまでに対応するかということについても、事前にお客様と協議して決めておく必要があります。

注意点５：課金制の場合、PVが契約の上限を超えると突然切れる

モリサワType Squareのような有料のWebフォントサービスは、PV（ページビュー）に応じた課金制をとっているところがほとんどです。契約プランもいろいろあり、だいたいのPVを予測して契約をするわけですが、何らかのキャンペーンやシーズンの変動などを受けてPVが上がり、契約上限を超えてしまって切れるときはいきなり切れてしまうのが問題です。TVCMと連動しているような大企業のWebサイトでは、特に起こりやすい問題と考えられます。

PVの変動に応じた自動課金プランに対応できればよいのですが、WebリニューアルにあたってのPVを多めに見積もりながら、Webフォントの契約プランを選ぶ必要があります。

注意点７：検証用の仮想環境構築にコストがかかる

繰り返しになりますが、Webフォントがすべてのブラウザ、すべてのバージョンに対応することは不可能です。ブラウザのバージョンによっても違いが起こり得るので、制作会社ではさまざまな仮想環境を用意しなければなりません。サポートの切れた古いバージョンのブラウザも含めて、お客様が対応してほしいという範囲の検証環境を揃えるためのコストや、検証作業の工数がかかり、Webフォントの使用料以外にも費用がかかることをご理解いただければと思います。

注意点８：Webフォントの設置方式は2種類ある

Webフォントを読み込む方式には、２種類あります。使いたいフォントファイルを自社のWebサーバーにダウンロードして置いておくことができるタイプと、指定されたタグだけを書き込んでよそのサーバーに読みにいくCDNタイプの2種類です。どちらがいいとは一概にいえませんが、フォントをダウンロードしておけるほうが読み込みがスピーディという安心感はあります。

まとめ

Webフォントを効果的に使おう

Webフォントを使うメリットは、テキストにデザイン書体が効かせられることだと考えます。特にマルチデバイス対応のWebデザインが必要になった現在、なるべくイメージ画像を使わずにテキストベースの部分を多く残しておけるので、後々のコンテンツの更新性がよくなります。その点ではうまく使うことができれば非常に効果的で、使っただけの価値はあるものだといえるでしょう。

自社ページのデザインを変えたい、もっと今風のサイトにしたい、ユーザビリティの高いWebサイトにしたい、とお考えではありませんか？

ITRAではお客さまのご要望に沿いつつ、システム設計からデザインに至るまで高品質なWebサイト制作を行ってきました。お気軽にフォームへお問い合わせください。