最近はWebフォントだけでもデザインが完結することもあるほど日本語Webフォントの種類が豊富になりました。
Webフォントは今や定番となり、数年前と比べてWebフォントを使用したサイトは劇的に増加しています。
FONTPLUS(フォントプラス)やTypeSquare(タイプスクウェア)などの有料Webフォントサービスのクオリティの高さはもちろんのこと、無料で使えるGoogle Fontsでも使いやすいフォントが増えました。
Webフォントはデザイン面でもSEO対策の面でも優秀です。
今回はWebフォントについてよく知らない方のために、Webフォントを使用するメリットや、おすすめの日本語Webフォントなどをご紹介したいと思います。
この記事の目次
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フォントはひらがな・カタカナ・漢字など文字データが膨大です。以前は読み込みが遅くて敬遠されていました。今は改良されて随分読み込みも速くなったのですが、それでも種類が多過ぎると当然それだけ読み込みに時間がかかります。
できるだけフォントの種類やウェイトを絞ることは、読み込みが速くなるだけではありません。デザイン面でも全体の見た目の印象に統一感が生まれるので一石二鳥です。
おすすめのWebフォント提供サービスは、商用OK・完全無料で日本語も豊富なGoogle Fonts
日本語を取り扱うWebフォント提供サービスも増えましたが、完全に無料で制限がなく使用できるとなるとまだ数は多くはありません。そんな中で、31種類の日本語フォントが(全てのウェイトを合わせると74フォント)が商用OK・完全無料となっているGoogle Fontsは一番のおすすめです。
見出し作成に使える個性的なフォント3選
キウイ丸
キウイ丸フォントは、丸みのある温かい雰囲気のフォントです。
https://fonts.google.com/specimen/Kiwi+Maru?subset=japanese
ひな明朝
ひな明朝は雛人形をイメージした、和風でレトロな明朝体フォントです。
https://fonts.google.com/specimen/Hina+Mincho?subset=japanese
解星デコール
解星デコールは目立たせたいキャッチコピー等にぴったりのポップでかわいいフォントです。
https://fonts.google.com/specimen/Kaisei+Decol?subset=japanese
他にも、本文に使いやすい定番のフォントもたくさんあります。
おすすめフォントについて詳しくはこちらをチェックしてください▼▼▼
【2023年最新版】迷ったらこれ!現役デザイナーのおすすめフォント10選
まとめ
今回は、「日本語Webフォント」について、ご紹介させていただきました。
フォントはWebサイトの雰囲気を作る大事な要素です。
デザインも豊富になった日本語Webフォントを取り入れて、SEO対策しながらデザインの幅も広げましょう♪