Webサイトのフォントが理解できる！Webフォントとシステムフォントの違いとは？

Webサイト制作に使用するフォントにはさまざまな種類があります。大まかにわけると、サーバー上から読み込んで使用するWebフォントと、パソコンに内蔵されているシステムフォントの2種類です。
Webサイト制作にこれから携わることになった担当者さん向けにそれぞれの違いを詳しく解説するので、ぜひ参考にしてみてください

→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験

Webサイトのフォントとは

フォントとは、デジタル大辞泉によると「コンピュータで使われる書体データのこと。」
コトバンクによると「コンピューターで使う文字のデザインのこと。」を指します。
※引用：「フォント」｜デジタル大辞林、「フォント」｜コトバンク

フォントにはさまざまな種類があり、どのフォントを選ぶのかによってWebサイトの雰囲気は大きく変わります。読み手がもつイメージを左右する重要な部分であるため、Webサイトのフォントは慎重に選ばなければなりません。

→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験

Webサイトのフォントは大きく分けると2種類

Webサイトのフォントは、Webフォントとシステムフォント（デバイスフォント）の二つにわけられます。Webフォントはシステムフォントの弱点をカバーするために登場したものです。ここでは、それぞれの特徴について解説します。

→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験

Webフォントとは

Webフォントとは、クラウドやサーバー上に保存されていて、インターネットを介して利用するフォントです。Webフォントには有料のものだけではなく、無料のものもあり、現在幅広く多くの人に使用されています。

Webフォントのメリット

1.複数の種類の中から選択しデザイン性の高いフォントを使用することができる

Webフォントには使用料がかかることが多いですが、有料のものを使用すると数多くの種類の中から自由に選べます。デザイン性の高いフォントもあるため、自分の表現したい雰囲気にあったフォントを選びましょう。

2.異なるデバイスで閲覧した場合にも同じフォントで表示可能

後述しますが、システムフォントは違うデバイスで開くとフォントが変わってしまう可能性があります。しかし、Webフォントは基本的にどのデバイスで閲覧してもフォントが変わることはありません。閲覧者が有料フォントを購入していない場合でも、デバイス上に該当のフォントがなくても、同じものが表示されます。

3.SEO効果を保つことができる

Webフォントは種類が多く、デザイン性に富んでいるため、すべてテキストでWebサイトを構築可能です。フォントの種類が限られるシステムフォントだけでWebサイトを作ろうとすると、デザイン性の高いフォントは画像として表現しなければなりませんでした。

しかし、画像はブラウザのクローラーには文字と判別されず、どうしてもSEOの効果は落ちます。しかし、Webフォントであれば、クローラーに文字認識させつつWebサイトにこだわりのデザインを施せます。

SEOを意識したWebフォントの詳しい使い方はこちらを参考にしてみてください。

SEOを意識した、Webフォントの正しい使い方

4.現在主流のWebサイトのレスポンシブ化にも適している

レスポンシブ化とは、同じURLでパソコンでもスマホでも見やすいページを作ることをいいます。Googleが推奨するWebサイトのデザイン方法であり、SEOの観点やシェアのしやすさから現在の主流となっています。

画像は自動でサイズ変更や折返しなどはできませんが、テキストであれば改行やサイズ変更で簡単にレスポンシブ化ができます。Webフォントで、さまざまな種類のフォントが使えるようになったことにより、レスポンシブ化しやすくなっており、運用コストの削減につながっています。

5.修正作業に手間がかからない

画像でデザイン性のあるフォントを掲載した場合、文章の変更をする場合はまた画像を作成しなおさなければなりません。フォントであればテキストの書き直しで済むため、修正作業の手間を大幅に削減できるでしょう。

Webフォントのデメリット

1.和文フォントは欧文フォントに比べて少なめ

日本語はひらがな、カタカナ、漢字と使用する文字の種類が多いため、欧文フォントに比べて和文フォントの種類は少なめです。

2.利用料金や利用規約に注意が必要

Webフォントは、システムフォントと違い利用料がかかります。サブスクリプションサービスとして展開しているものも多いため、ランニングコストはかかると思っておきましょう。和文フォントは開発や運用に労力がかかるため、有料の場合が多くあります。フリーフォントであっても商業利用ができない等の規制があるかもしれないので、利用規約には注意が必要です。

3.Webサイトの読み込みに時間がかかる

現在ではこのようなことは少なくなっていますが、Webフォントはサーバーやクラウドから読み込まれるため、表示に時間がかかることがあります。使用するフォントの種類や使用箇所、使用する量にも読み込み時間が左右されます。

→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験

システムフォント（デバイスフォント）とは

システムフォントとは、パソコンやスマホなどのデバイスに最初から保存されているフォントです。自分で購入やインストールする必要はありません。デバイスにあるフォントであるため、デバイスフォントとも呼ばれます。デバイスを操作するときに目にする文字は、このシステムフォントから選ばれたものが使用されています。

システムフォントのメリット

システムフォントは、デバイスにすでに保存されているためサーバーへアクセスする必要はありません。そのため、フォントをダウンロードしなくて済み、早く表示できます。また、新たにフォントを購入しなくても利用でき、ライセンス料の支払いを気にしなくても済みます。

システムフォントのデメリット

1.異なるデバイスで閲覧した場合、同じフォントで表示することができない

デバイスにないフォントで作成されたものを開くと、別のフォントが割り当てられます。そのため、作成者が意図したデザインとは違うものが表示されるかもしれません。そのデバイスのOSの種類やバージョンによって搭載されるフォントは異なるため、デバイスが異なれば同じフォントを表示できなくなる可能性があります。

2.SEO効果が薄れる可能性がある

システムフォントは種類が限られるため、デザイン性が高い文字を表示したい場合は画像でフォントをデザインします。画像はブラウザが情報を読み取れないため、SEO効果は薄れてしまいます。

3.選べるフォントが少ない

システムフォントはそのデバイス内に用意されているフォントであるため、どうしても種類が少なく選べるフォントは限られます。システムデザインには拡張性もないため、フォントにこだわりをもちたいときには物足りなさを感じるでしょう。

→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験

Webサイトで使用するフォントの種類の選び方

Webサイト構築をする際には、フォント選びも必要です。どのような種類を選べばいいのか解説します。

読みやすさで選ぶ

Webサイトでユーザに情報を伝えるためには、デザイン性だけではなく読みやすさも重要です。きれいで目を惹くフォントであっても、読みにくければユーザはサイトから離脱してしまいます。すっきりと情報を得られるものを選びましょう。

Webサイトの雰囲気、伝えたいイメージに合わせて選ぶ

読みやすさの次には、Webサイトの雰囲気や伝えたいイメージを意識して選びましょう。例えば、和風のおごそかな雰囲気を出したい場合は高級、真面目できちんとしたイメージならば明朝体といったものです。

→日本語Webフォントも豊富なノーコードCMSのBiNDupを30日間無料体験

よく使われるおすすめのフォントを紹介

よく使用されるフォントは、それぞれの特徴と使用場面等を覚えておくと便利でしょう。よく使われる、ということは読みやすいと感じる人が多いということです。オリジナリティを意識するより読みやすさを重視することがおすすめです。

日本語フォント

よく使用される日本語フォントとして、明朝体とゴシック体の2種類があります。このふたつは読みやすく、情報が伝わりやすいでしょう。それぞれの特徴について解説します。

明朝体

明朝体は横線が太く、縦が細いデザインで、長文でも読みやすいという特徴があります。明朝体はさらに、游明朝、筑紫明朝、ヒラギノ明朝、リュウミンといった4種類にわけられ、それぞれ文字のイメージは異なります。

ゴシック体

ゴシック対は明朝体と異なり、横線も縦線も太さは同じです。はらい部分が細くなることもないため、非常に存在感があるフォントでしょう。そのため、目から文字情報が入りやすく読みやすいという点が特徴的です。ゴシック体も複数種類があり、ヒラギノ角ゴシック、Noto Sans、游ゴシック、筑紫ゴシックとあります。

欧文フォント

欧文フォントはアルファベットと数字だけでデザインしやすく、アルファベットを使用する国は多いため、日本語フォントに比べ種類は多めです。そのなかでもよく使用される、以下の4つのフォントを紹介します。

• Arial
• Roboto
• Times New Roman
• Verdana

Arial

Arialは、シンプルさと力強さをあわせもつ、非常に見やすいフォントです。Webサイトではもちろん、雑誌や本などの紙媒体にも使用されることが多いでしょう。使用頻度が高いフォントで、WindowsとMac OSの両方でシステムフォントとして組み込まれています。

Roboto

Googleにより開発されたフォントです。AndroidやChrome OSにはシステムフォントとして組み込まれています。Googleが提供するデザインガイドラインである「マテリアルデザイン」でもRobotoの使用が推奨されています。

Times New Roman

Times New Romanは非常に歴史が深いフォントで、1932年にイギリスのタイムズ紙が開発したものです。新聞で使用されるラテン文字として作られています。このフォントは新聞用に作られているため、Webサイトというよりも紙媒体で多く使われている傾向にあります。

Verdana

太さが一定で、視認性に優れているフォントです。Times New Romanとは異なりWebなどパソコン用に開発されました。このフォントをパソコン上で読むと、早く読めるため読書時間の短縮につながります。

Webフォントの選び方について、詳しくはこちら記事を参考にしてください。

フォントでWebデザインが変わる！選び方のポイントとおすすめのWebフォント

フォント選びでは見やすさ読みやすさを優先

Webサイトをデザインするときはフォントの選択も重要です。フォントはさまざまな種類があるため、作成したいデザインにあったものを選びましょう。ただし、ユーザがWebサイトから離脱しないように、見やすさ読みやすさを優先することを忘れないようにしてください。

Webサイトの制作には、BiNDupがおすすめです。BiNDupは安心で使いやすい国産CMSで、直感的な操作が可能です。有料コースは専用サポートも付随しているため、安心して導入できます。さらに、カスタマイズ性も高く、思ったままのサイトを構築できます。

BiNDupを無料で使ってみるBiNDの制作事例を見る