2016年1月1日

「Webフォントってなに？聞いたことがない」と思っている方もいるでしょう。また、言葉は知っているけど、デバイスフォントとの違いが分からないという方もいるかもしれません。そこで、Webフォントとはどういうものか、デバイスフォントとの違いなどをご説明します。

Webフォントとデバイスフォントの違いとは

サイトなどネット上で使うフォントには、2つのものがあります。こちらでは、その2種類の違いについてご説明します。

Webフォントとは

「Webフォント」と聞くと、ネット上で使う文字ではないかという想像はつくでしょう。しかし、どのようなときに使うのかが分からない方もいるかもしれません。

Webフォントは、閲覧者が使用する機器や環境の違いにかかわらず、同じ書体を表示できます。なぜ使う機器を選ばないかというと、使うフォントがWebサーバーやクラウド上にあるからです。そのため、どこからアクセスしてもHTMLやCSSで指定された書体で表示できるメリットがあります。

デバイスフォントとは

デバイスフォントとは、WindowsやMacなどのデバイスに入っている書体のことです。本来は、機器の種類ごとに入っている標準フォントが違います。そのため、HTMLやCSSで指定していても、使っている機器に入っていなければ違う書体で代替表示されてしまうのです。

Windowsの標準搭載フォントは、バージョンにより違いがあります。Windows 8.1以降は、MS明朝やMSゴシック、メイリオ、游明朝、游ゴシックなどが標準です。Macならヒラギノ角ゴ、ヒラギノ明朝になっています。

デバイスフォントは、文字を選ばないため動作や表示が軽いのがメリットです。一方、サイト作成者が意図したものとは違う文字デザインが表示されることでコンテンツの雰囲気変わってしまうデメリットがあります。

Webフォントを使うよさとは

Webフォントを使うとどんなよさがあるのでしょうか？ Webフォントを使うことで生じるメリットを見てみましょう。

文字表示が閲覧者側の環境に左右されない

デバイスフォントは、Windows、Mac、Androidなど使っている機器の種類により見え方が左右されます。一方、Webフォントはパソコンやスマホに元々入っている文字が表示されるわけではないため、どのような閲覧環境からでも同じように見えるのがメリットです。

デザイン性を高くできる

サイトコンテンツを作成している側では、デザイン性を重視することが多くなります。わざわざサイトの雰囲気や目指す方向性に合わせた文字を選択したり、作成したりしたのに閲覧者によって見え方違ってしまっては魅力が半減してしまうでしょう。

ところが、Webフォントを使えばこの問題を一発解決できます。凝ったデザインや標準搭載されていないものでも、Webサーバーなどに入れておけばデザイン性が高いコンテンツをそのまま見てもらえるのです。

画像文字より修正が楽

以前は、どこからでも凝った文字を表示させるために画像表示にしていたため、文章を修正するのも一大事でした。しかし、Webフォントを使えば通常の文章修正作業と同じようにできるため、作業能率がアップします。

SEOが上がる効果も

サイトを上位表示するには、検索エンジンに認識してもらう必要があります。しかし、どんなに凝った文字でも画像では認識してもらえません。また、画像を認識してもらうために代替テキスト(Alt属性)を入れ込む方法もありますが、入れ忘れたり、間違った入れ方になったりすると意味がなくなるでしょう。

一方、Webフォントの場合は文字のため、クローラーが回ってきたときにきちんと認識されます。認識されるということはSEOが上がり、上位表示の布石へとなるのです。

使い勝手かデザイン性かで選択

気軽に簡単に使うならデバイスフォント、環境に左右されないことやデザイン性を重視するならWebフォントとなります。

文章を読んでもらえれば書体は気にしないという方は、なんでもよいでしょう。しかし、少しでもこだわってみたい方はWebフォントに挑戦してみてはいかがでしょうか。

無料で簡単に使いたいなら、Google Fontsです。2018年からは日本語対応になっていますので、手始めにチャレンジしてみてください。