【2024年改訂版】日本語WebフォントでSEO対策しながらデザインの幅も広げましょう！

崎さん

日本語Webフォントの種類が豊富になり、Webフォントを使用したサイトは定番となりました。
無料で使えるGoogle Fontsでも使いやすいフォントが増えました。
特にNoto Sans Jpは高いシェアを占めていると感じます。

▼Noto Sans Jpについて詳しくはYouTube（アドシン公式／ADSHIN STUDIO）で解説していますので、気になる方はこちらをご覧ください。

Webフォントはデザイン面でもSEO対策の面でも優秀です。
今回はWebフォントについてよく知らない方のために

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

・見出しにおすすめの個性的な日本語Webフォント

などをご紹介したいと思います。

この記事の目次

1 Webフォントとは？使用する際のメリットと注意点
2 おすすめのWebフォント提供サービスは、商用OK・完全無料で日本語も豊富なGoogle Fonts
3 まとめ

Webフォントとは？使用する際のメリットと注意点

Webフォントとは、Webサーバ上に置かれているフォントデータや、インターネット上で配布されているフォントデータを読み込ませてWebサイト上に表示させるシステムのことです。

【メリット1】どの端末でも同じフォントが表示される

通常はWebサイトで使うフォントを制作者が指定し、閲覧者の端末にインストールされているフォント（デバイスフォント）の中から呼び出してテキストとして表示させます。そのため、指定したフォントが閲覧者の端末にない場合、制作者の意図しないテキストに変換されてしまいます。

特にPCやiPhoneに合わせて指定したときに、Androidでは大きく違うイメージのフォントで表示されてしまうケースが多いので、具体的な例を紹介します。

デバイスフォントを指定した場合のAndroidでの問題点

×Androidでは明朝体がゴシック体に変換される

Androidには明朝体のフォントがインストールされていないので、ゴシック体に変換されます。

×Androidでは游ゴシック体がメイリオなどに変換される

PCやiPhoneに標準搭載されていて人気の游ゴシック体ですが、Androidには搭載されていないため、メイリオなどに変換されてしまいます。
ゴシック体同士でも、フォントの種類によってはサイトのイメージが大きく変わります。

◎Webフォントで解決！どの端末でも同じフォントが表示される

【メリット2】デザイン性を保ちつつSEO対策になる

フォントの変換でデザインが損なわれないための解決策として、テキストを画像にするという方法もあります。
しかし、それでは検索エンジンに内容が読み取られず、SEO的に不利であるという問題が残ります。
Webフォントの方が圧倒的にSEO対策になるので、可能な限りWebフォントを選択してください。

他にも、テキストを画像にする場合に比べてWebフォントには

・修正の手間が減る
・レスポンシブデザインで使いやすい
・自動翻訳や音声読み上げソフトが機能する
・高解像度のモニターで見ても文字がボケずに綺麗なまま

などのメリットがあります。

【注意点】1つのサイトにフォントの種類を多く使いすぎない

便利なWebフォントですが、使用上の注意点もあります。1つのサイトにたくさんの種類のフォントを使い過ぎると読み込みが遅くなります。同じフォントでもウェイト（太さ）をいくつも使わないようにしてください。
日本語WEBフォントはひらがな・カタカナ・漢字など文字データが膨大です。以前は読み込みが遅くて敬遠されていました。今は改良されて随分読み込みも速くなったのですが、それでも種類が多過ぎると当然それだけ読み込みに時間がかかります。

できるだけフォントの種類やウェイトを絞ることは、読み込みが速くなるだけではありません。デザイン面でも全体の見た目の印象に統一感が生まれるので一石二鳥です。