Webフォントを使ってイメージ通りの表示を実現！デバイスに左右されないWebサイトデザイン

トレンド

2019.03.14

Webページは、閲覧するデバイスに応じて文字（フォント）が変化します。作成側がフォントを指定していても、ユーザの端末にそのフォントがなければ、Webページの表示には反映されません。この問題を解決してくれるのが「Webフォント」です。文字デザインが制約されないサイトを作るには、Webフォントの利用が効果的です。ここでは、Webフォントの仕組み、使用するメリット、実際に使うときの注意点、さらには具体的なフォントの例について紹介します。

こちらもオススメ

Webフォントとは？

Webフォントは、インターネット上にあるフォントファイルを、CSSを使って呼び出す技術です。サーバに保存されているフォントデータをHTMLと一緒に読み込んで、画面に表示します。

これまでのWebサイト制作では、文字のフォントを指定しても、閲覧する側の端末にフォントデータがなければ異なる字体の文字表示になっていました。デザインを変えないために「文字を画像データにする」という方法もありますが、データ量が多くなる（読み込みが遅くなる）、簡単に修正できない、SEOが機能しなくなる、といった問題が生じるため、文章の表示方法としては現実的とは言えませんでした。

一方、Webフォントを利用した場合は、Webページが読み込まれる際にフォントデータも一緒にダウンロードされるため、どのような端末で見ても、デザイナーが意図した通りの字体で表示することができます。画像ではないため、スマートフォンのように小さな画面で見たときも、画面サイズに適した読みやすい大きさの文字を表示できます。企業サイトのコーポレートイメージを「すべての端末で統一したい」というニーズにも対応できるでしょう。

Webフォントを使用するメリット

Webフォントを使用するメリットとしては、次の点が挙げられます。

文字表示がデバイスに左右されない
画面サイズに合わせて文字サイズを調整できる
SEO効果が高くなる
修正が簡単

先ほども紹介したように、Webフォントを使うと、ユーザ側の環境に左右されることなく、どの端末でも同じ文字表現が可能となります。CSSを使って文字サイズを指定することで、画面サイズに合わせてリサイズすることもできるため、PC／タブレット／スマートフォンにかかわらず、文章を違和感なく表示できます。

文字を「画像」にした場合は、単なるひと固まりの要素になってしまうため、検索エンジン（クローラー）が文字として認識してくれません。そのため、その部分がWebサイトの評価対象外と見なされ、どんなに優れた内容の文章であってもSEOの効果が著しく低下してしまいます。一方、Webフォントは「文字データ」としてクローラーに適切に認識されるため、文章の内容が評価に反映され、検索結果の上位獲得にも貢献してくれます。

また、文字を画像化した場合は、画面の大きさに対して均質に表示するために、画素数の調整が必要となり、非常に手間がかかります。Webフォントは通常の文字と同じように扱うことができるため、修正や更新も簡単に行えるので、運用コストの削減につながります。

Webフォントを使用する際の注意点

Webフォントはデザインも多彩で、制作側が意図した通りの文字表示が可能となります。その一方で、使用する際に注意しなければならない点もあります。

1.費用の発生

有料のWebフォントを使用する場合は、当然ながら費用が発生します。その料金体系は、従量課金制、月額定額制、一括払いなどがあります。長期にわたって継続使用する場合は、料金体系をよく確認しておく必要があります。

2.ページ表示速度の遅延

日本語はアルファベットと異なり、ひらがな／カタカナ／漢字を含む膨大な量のフォントデータが必要になります。フォントによってはデータ量が大きく、表示速度の遅延につながる場合もあります。そのためデータ容量も気にしながらフォントを選定する必要があります。

3.キャッシュの利用

読み込み速度の低下を避けるためには、ブラウザ側にフォントデータをキャッシュとして残しておくように設定するなどの対策が効果的です。CSSの知識に加えて、閲覧するユーザの快適性を失わないための工夫が求められます。

Webフォントの例

最後に、Webフォントを提供しているサイトをいくつか紹介します。Webフォントを探すときの参考としてください。

Noto Sans Japanese

GoogleとAdobeの共同開発による無償の日本語フォントです。読みやすく、目になじみやすいフォントとして定評があります。

FONTPLUS

企業サイト向けのWebフォントが数多く提供されています。有料のWebフォントになるため、利用するには入会手続きと月額料金の支払い（上限PV（ページビュー）を定めたチケットを購入する形式）が必要になります。6か月間の無料トライアルも用意されています。

TypeSquare

日本語フォントの制作で有名なモリサワによるWebフォントです。基本的に有料のサービスとなりますが、1万PV／月まで0円で1書体を利用できる無料プランも用意されています。

まとめ：Webフォントを活用してブレのないサイト表現を

文字情報が主体となるWebサイトは、表示されるフォントによってイメージが大きく変わってしまいます。読みづらく、イメージに合わないフォントで表示されてしまうと、残念な結果になってしまうでしょう。こういった場合にWebフォントを活用すれば、ユーザの環境に左右されることなく、制作側の意図したデザインでWebサイトを表示できるようになります。この機会に、思い通りの表現を実現できるWebフォントを探してみてはいかがでしょうか。

こちらもオススメ