ホームページ制作MATSUTE BLOG

この記事は「2020年10月31日」に書かれた記事です

1．システムフォントとは

パソコンやタブレット、スマートフォンなど、自分が使っているデバイスで何のフォントが表示されているか、気にしたことはないかと思います。知り合いのパソコンを見たら、ちょっと読みにくい気がしたという場合は、自分が使っているフォントと違うフォントが使われていたのかもしれません。デフォルトのフォントを変更することもできますが、多くの方がデフォルトのフォントを利用しているかと思います。

例えば、

上記のように使っている環境で、デフォルトのフォントは変わってきます。
つまり、通常ホームページで使われているフォントは、閲覧する方の環境で異なっているということになります。そのため、ひと昔前のホームページ制作では、見出しやキャッチコピーなど「どの環境でも同じフォントで見せたい」という場合は、テキストを画像にして表示していました（もちろん、今でも画像を使うことはあります）。

その問題を解消したのが、「Webフォント」です。

2．webフォントって何？

Webフォトンとはざっくりいうと、Web （ホームページ）上で誰が使っている環境でも同じフォントを表示するためのも仕組みです。

代表的なwebフォントは下記の２つです。

• googleが提供している「Google Fonts」
• アドビ社が提供している「Adobe Fonts」

この技術を使うと、たとえば、明朝フォントを表示できなかったスマートフォンでも、明朝フォントを表示することができるようになります。また、フォントによってはすっきりと読みやすくなりますし、各デバイスで文字が変わらないため、デザインが崩れにくいというメリットもあります。

それなら、そっちのほうがいいじゃないか！　と思いますよね。

私もそう思いました。
でも、メリットだけはないのです。

3．Webフォントは必要？

Webフォント使う場合のデメリットは大きく下記の2点です。

• 費用がかかるフォントがある
• ページの読み込みが遅くなる

費用がかかるフォントがある

先ほどあげた、googleが提供している「Google Fonts」は無料提供しているものもたくさんありますが、アドビ社が提供している「Adobe Fonts」は、フォントの利用料はかかりませんが、「Adobe Creative Cloud」の有償プランを契約していることが必須条件になります。

また、上記２社の他にもWEBフォトンを提供している会社はあります。
たとえば、日本のフォントメーカーの「モリサワ」が提供している「TypeSquare」です。

ページの読み込みが遅くなる

Webフォトにも、英文フォントと日本語フォントがあります。
Google フォントで英語フォントの身を利用する場合は、かなり負荷を軽減することができますが、日本語のフォントを使いたい場合、ページの読み込み速度が格段に遅くなるという問題があります。

英語のフォントは、大文字・小文字だけならば、26x２　ですが、日本語は、ひらがな、カタカナだけでも、その数を優に超え、さらにそこに漢字が入ってきます。仮に、特殊な文字を除いたとしても、相当数のデータ量が必要になります。これが読み込み速度を遅くする原因です。※WEBフォントによっては準備されていないため漢字は、代替フォントで表示されることもあります。

• イメージ重視のホームページでは使用やむなしということもありますし、
• パソコン版だけの表示であれば、まだ何とかなるということもあります。

内容を読ませたいホームページや、買い物をしてほしいホームページの場合、スマートフォンで閲覧し、ページを移動するたびに開くまでに時間がかかると、よほど興味のあるサイトや是が非でも買いたい商品でない限り、じっと待ってくれる可能性は非常に低いです。

フォントはホームページ全体の印象を決める重要な要素ですが、ただなんとなく字を特殊なものにしたい、といことであれば、お勧めできません。

ホームページが開かないときのストレスは、満員電車に乗っているストレスに匹敵するとう話もあります。

webフォントを称するときは、サイトの目的や、フォントが及ぼす影響などを加味したうえで、本当に使うべきかどうか、検討することをお勧めします。