この記事は4分で読めます

Webフォントってなに?

  • 投稿日
  • 更新日

あとで読む

Webフォントってなに?

フォントはデザインの人格と言っても良いほど、デザインをする上で重要な要素です。今回は、デザイナーならば知っておきたいWebフォントについて解説します。

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

Webフォントとは

Webフォントとは、サーバーからフォントファイルを読み込み、Webサイト上に表示させる仕組みのことです。

通常Webサイトは、各端末にインストールされているフォント(デバイスフォント)の中からCSSで指定されたフォントを表示する仕組みになっています。そのため、端末によってはこちらの意図したフォントが表示されず、デザインの印象が変わってしまう可能性があります。

その点、Webフォントはあらかじめフォントデータを読み込んでおくので、どの端末でも同じフォントを表示させることができるのです。

Webフォントのメリット

Webフォントを使用するメリットとしては、以下があります。

  • 使用する端末を気にすることなくデザインできる
  • 拡大しても綺麗に表示される
  • SEO対策ができる
  • レスポンシブ対応がしやすい
  • ユーザビリティが向上する
  • 修正、更新作業がしやすい
使用する端末を気にすることなくデザインできる

Webフォントは事前にフォントデータを読み込んでおくので、端末の種類を気にすることなくデザインすることができます。

拡大しても綺麗に表示される

画像で文字を作成すると拡大した際に画質が荒くなってしまう場合がありますが、Webフォントでは文字として表示しているので綺麗な画質を保つことができます。

SEO対策ができる

画像で文字を載せた時と比べ、Webフォントは文字情報として認識されるので、SEO対策として有利になります。

・SEO対策とは・・・SEOとは、Search Engine Optimization(検索エンジン最適化)のことを指し、Webページを検索した際に上位に表示させる施策を「SEO対策」と呼びます。

レスポンシブ対応がしやすい

画像の場合、端末に応じて大きさを変えると画像が小さい時に文字が読みにくくなってしまいます。それに対しWebフォントは、端末幅に応じてテキストが折り返されたり、CSSでフォントの大きさも変えることができるのでレスポンシブデザインがしやすくなります。

ユーザビリティが向上する

Webフォントは文字情報として認識されるので音声読み上げ機能や自動翻訳に適しています。

修正、更新作業がしやすい

画像の場合、画像自体を作り変えなければいけませんが、WebフォントならばHTMLで文字を書き換えるだけで編集、更新が可能です。

Webフォントのデメリット

Webフォントのデメリットとしては、以下があります。

  • 利用料金がかかることがある
  • 表示速度が遅い場合がある
  • 日本語対応のものが少ない
  • 利用規約に注意が必要なものがある
利用料金がかかることがある

Webフォントの中には有料のものもあり、従量課金(PV数依存)のフォントの場合、閲覧数が増えるに応じて料金が増してしまうので使いどころを慎重に検討してから利用しましょう。

表示速度が遅い場合がある

日本語フォントは欧文フォントに比べ文字量が多く、表示されるまでに時間がかかる場合があります。

日本語対応のものが少ない

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

利用規約に注意が必要なものがある

無料フォント、有料フォントともにそれぞれ利用規約が設けられている場合があります。商用利用不可などフォントによって規約が設けられているので、利用前に必ず確認しておきましょう。

おすすめWebフォント

ここからは、主なWebフォントをいくつかご紹介します。

1.Typesquare

フォントで有名な株式会社モリサワが提供するWebフォントサービスです。日本語フォントの種類が多く、無料プランも用意されています。

https://typesquare.com/ja/

2.Adobe Fonts

世界的に有名なAdobe社が提供しているフォントサービスです。Adobe Creative Cloudユーザーならば無料で利用でき、フリーフォントの数も豊富です。Adobe ユーザーでなくともCreative Cloud無償メンバーシップに登録すれば利用できますが、使用できるフォント数は限られます。

https://fonts.adobe.com/

3.Google Fonts

Googleが提供しているフォントサービスです。無料で利用でき、フォントの種類も豊富です。現在日本語フォントは約50種あり、商用利用も可能です。

https://fonts.google.com/

まとめ

今回はWebフォントについて簡単に解説させていただきました。デザイナーにとってもメリットがたくさんあるWebフォントですが、有料のものや利用規約が決まっているものもあるので、都度よく確認して利用しましょう。

この記事を書いた人

かすみ
かすみ

将来は庭のテントでWEBデザインのお仕事がしたいです🏕 フェス・邦楽ロック大好き! テーマパークから介護まで接客経験値豊富な人間🚶‍♀️ 私なりの気づきを皆さまにお届けします✨

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須