ホームページのフォント、今と昔で何が変わった？
フォントって知っていますか？ウェブをやってる人ならもちろんですが、やっていない方でも聞いたことがある人もいると思います。
フォントとは、文字の書体デザインのことです。同じ「あ」という文字でも、ゴシック体で書くか、明朝体で書くかで、印象が全然違いますよね。
ゴシック体は線の太さが均一で、現代的でカジュアルな印象を与えます。Webサイトの本文やナビゲーションによく使われます。
明朝体は横線が細く、縦線が太い、いわゆる「とめ・はね・はらい」のある書体です。上品で落ち着いた印象があり、新聞や書籍でよく使われます。
他にも、丸ゴシック、筆記体、ポップ体など、様々なフォントがあります。それぞれが異なる雰囲気を持っていて、使う場面によって選ぶことで、見た目の印象を大きく変えることができるんです。
つまり、フォント選びは単なる「文字の見た目」ではなく、「どんな印象を与えたいか」というデザインの重要な要素なんです。
昔はMSゴシックとMS明朝だけだった
少し前まで、ホームページで使えるフォントは限られていました。
基本的には以下のようなデバイスフォントだけでした。
- MS Pゴシック
- MS P明朝
- メイリオ
- ヒラギノ角ゴシック（Mac）
デバイスフォントとは、パソコンやスマホに最初からインストールされているフォントのことです。
CSSである特定のフォントを指定しても、見ている人のパソコンにそのフォントがインストールされていなければ、別のフォントで表示されてしまいます。
つまり、Windows、Mac、スマホ、それぞれで見た目が違ってしまうんです。
デザイン性を求めると画像にするしかなかった
「もっとおしゃれなフォントを使いたい！」
そう思ったら、昔は文字を画像にするしかありませんでした。
Photoshopなどで好きなフォントを使って文字を作り、それを画像として保存してホームページに貼り付ける。見出しやキャッチコピーなどは、ほとんどがこの方法でした。
でも、これには大きな問題がありました。
画像データの問題点
文字を画像にすると、いくつかの困ったことが起きます。
修正が大変です。誤字を見つけた時、画像を作り直してアップロードし直さなければなりません。「今すぐ直したい！」と思っても、時間がかかってしまいます。
SEO（検索エンジン対策）に不利です。Googleなどの検索エンジンは、画像の中の文字を読むことができません。せっかく良い内容を書いても、検索されにくくなってしまうんです。
容量が大きいです。画像ファイルは、テキストデータに比べてファイルサイズが大きくなります。ページの読み込みが遅くなり、見ている人にストレスを与えてしまいます。
レスポンシブ対応が難しいです。パソコンとスマホで画面サイズが違うので、それぞれに合わせた画像を用意する必要がありました。
ウェブフォントの登場
そこに登場したのが「ウェブフォント」です。
ウェブフォントとは、インターネット上のサーバーに置かれたフォントデータを読み込んで、ホームページ上で表示する技術のことです。
仕組みはこうです。
従来のデバイスフォントの場合、見ている人のパソコンにインストールされているフォントを使って文字を表示していました。
でもウェブフォントは、Google Fontsなどのサーバーからフォントデータをダウンロードして表示します。だから、見ている人のパソコンに何がインストールされているかに関係なく、同じフォントで表示できるんです。
ウェブフォントのメリット
ウェブフォントには、たくさんのメリットがあります。
どのデバイスでも同じフォントで表示される。Windows、Mac、スマホ、どれで見ても同じデザインを表現できます。
テキストデータのまま。画像ではなくテキストなので、検索エンジンがちゃんと読み取ってくれます。SEO対策にも有利です。
修正が簡単。HTMLやCSSを修正するだけで、すぐに変更できます。画像を作り直す必要はありません。
解像度が劣化しない。拡大しても文字がぼやけることがありません。どんなサイズでも美しく表示されます。
色やサイズの変更が簡単。CSSで自由に変更できます。マウスオーバー時に色を変えるなど、動きのあるデザインも可能です。
Google Fontsの登場
中でも画期的だったのが、Googleが提供する「Google Fonts」です。
Google Fontsは完全無料で使えて、商用利用もOKです。現在では1,000種類以上のフォントが用意されており、日本語フォントも50種類以上あります。私が知った数年前はまだ日本語フォントは5種類ぐらいしかなかったので、嬉しい進歩です。Googleさん、ありがとう！
さて、使い方は知識が必要です。
- Google Fontsのサイトで使いたいフォントを選ぶ
- 表示されたコードをHTMLの<head>タグ内にコピー
- CSSでfont-familyを指定する
webの知識がある人にお願いしないとなかなか難しいですが、できる方法があるということを知っておくだけでも違いますよね。
たったこれだけで、おしゃれなフォントが使えるようになります。
ウェブフォントの注意点
もちろん、注意すべき点もあります。
読み込みに時間がかかる。フォントデータをダウンロードする必要があるので、その分ページの表示が少し遅くなります。
特に日本語フォントは、ひらがな、カタカナ、漢字を含むため、英語フォントに比べてファイルサイズが大きいです。例えば「Noto Sans JP」は1ウェイト（太さ）あたり約1.6MBもあります。
使いすぎに注意。たくさんのフォントやウェイトを読み込むと、その分だけページが重くなります。必要最小限に抑えることが大切です。
Googleは1ページあたりの容量を1.6MB程度に抑えることを推奨しています。
今は選択肢が広がった
昔はMSゴシックとMS明朝だけだった世界が、今では数百、数千のフォントから選べるようになりました。
画像にしなくても、テキストのままでおしゃれなデザインができる。修正も簡単で、SEOにも有利。
ウェブフォントの登場で、ホームページ制作の自由度は格段に上がったんです。
テキストデータと画像データの違い
改めて整理すると、文字をどう表示するかには3つの方法があります。
デバイスフォント（テキスト）
- メリット：軽い、SEOに有利、修正が簡単
- デメリット：デザインの選択肢が少ない、環境によって表示が変わる
ウェブフォント（テキスト）
- メリット：デザインの自由度が高い、どの環境でも同じ表示、SEOに有利、修正が簡単
- デメリット：読み込みに時間がかかる
画像データ
- メリット：どんなフォントでも使える、デザインの自由度が最も高い
- デメリット：SEOに不利、修正が大変、容量が大きい、解像度が劣化する
最後に
ホームページのフォント事情は、ここ数年で大きく進化しました。
Google Fontsなどのウェブフォントサービスのおかげで、無料で、簡単に、おしゃれなフォントが使えるようになったんです。
もちろん、すべてをウェブフォントにする必要はありません。読み込み速度とのバランスを考えながら、見出しだけウェブフォントにするなど、使い分けるのが賢い方法です。
「うちのホームページ、もう1エッセンス加えたいな」。そう思ったら、ウェブフォントを試してみてはいかがでしょうか。きっと、印象がガラッと変わりますよ(^^)
