LYZON版　定番のWebフォント、アンケートしてみた

こんにちは、デザイナーのK.Mです！
2024年にデザイナーとして新卒入社し、デザインもコーディングも研鑽の日々を過ごしています。

ところで、何気なく見ているパソコンやスマホの画面、そこではどんな種類のフォントが使われているのでしょうか？
今回は普段意外と気にしていない、Webサイトで使われているフォントについて、そしてLYZONでよく使っている定番のWebフォントをご紹介していきます。

パソコンではWindows・macOS、スマホではiOS・Androidなど、デバイスによって表示されているフォントが異なることをご存じでしょうか？
それぞれのデバイスにはテキスト表示のために最初から設定されているフォントがあり、これを「システムフォント」と呼びます。分かりやすく言えば、「デフォルトのフォント」です。

しかし、Webサイトを作成する際に「フォントにもっとこだわりたい」や「異なるデバイスであっても、サイト全体の雰囲気を統一したい」といったニーズが出てくることがあります。そこで、表示させたいフォントを指定できるのが「Webフォント」です。インターネット上にアップロードされているフォントデータを読み込み、Webページで表示できる仕組みです。Webフォントの仕組みが完成したのは1990年代後半で、日本では2010年に日本語対応のWebフォントサービスが登場し、少しずつ普及してきました。

Webフォントを使うメリットをご紹介します。

• サイトの雰囲気を統一できる
  企業やショップによって、理想とするサイトの雰囲気は千差万別です。Webフォントを使うと、作りたいサイトの雰囲気に合わせて指定でき、どのデバイスからも統一されたフォントで見ることができます。サイト全体のデザインに一貫性を持たせたい場合におすすめです。
• 修正がしやすい
  テキストを画像化して挿入すると、画像データを編集して、その画像を差し替えて…という手間がかかってしまいます。しかし、Webフォントならテキストを直接変更できるため、スピーディーに修正作業が可能です。
• SEO効果を保てる
  Webフォントが登場する以前は、システムフォントでは表現できないフォントは画像として挿入していました。しかし、画像として挿入されたテキストは、残念ながらブラウザの検索エンジンに認識されません。一方、Webフォントなら画像ではなく通常のテキストとして読み込まれるため、SEO対策に有効です。デザイン性を損なうことなくサイトの検索順位やアクセスの可能性を向上させることができます。さらに、Webフォントは自動翻訳や音声読み上げにも対応できるため、アクセシビリティの向上にも貢献できます。

Webフォントには多くのメリットがありますが、デメリットも存在します。

• フォントの選択肢が少ない
  リリースされている和文フォントの種類が、欧文フォントと比べて圧倒的に少ないというのがデメリットの一つです。欧文フォントは数千種類存在すると言われていますが、和文フォントは数百種類に留まっています。和文フォントには、ひらがな、カタカナ、漢字、数字、その他記号が含まれており、フォントの作成には非常に多くの手間と時間がかかってしまいます。
• サイトが重くなってしまう
  ひらがな、カタカナ、漢字、数字、その他記号で構成される和文フォントは、アルファベット、数字、記号で構成される欧文フォントと比べてデータ量が多くなりがちです。そのため、Webフォントを多用するとサイトの読み込み時間が長くなり、閲覧者にストレスを与えてしまう可能性があります。特に、Webフォントを使用している箇所や種類が多い場合、表示にさらに時間がかかってしまうため、使用箇所やフォントの種類を慎重に選ぶ必要があります。

LYZONのデザイナーがサイトを制作するとき、どのような和文のWebフォントを使っているのか、デザイナー内でアンケートを取りましたのでご紹介します！

「ゴシック体」の定番フォントは上から
1. Noto Sans JP
2. 游ゴシック
3. メイリオ
4. ヒラギノ角ゴシック
5. システムフォントのまま

「明朝体」の定番フォントは上から
1. Noto Serif JP
2. 游明朝体
3. ヒラギノ明朝
4. システムフォントのまま

という結果になりました！
LYZONに限らず、これらのフォントが使われているサイトは多いのではないでしょうか。

Webフォントサービスとは、その名の通りWebフォントを提供しているサービスのことです。今回は、LYZONが使用しているWebフォントサービスをご紹介します。

• 「Google Fonts」
  Googleが提供するWebフォントサービスです。サイト内の全てのフォントが無料で商用利用可能です。
• 「Adobe Fonts」
  Adobeが提供するWebフォントサービスで、こちらも商用利用が可能です。
  ※注意: Adobe Fontsを利用するには、Adobe Creative Cloudのライセンス(有料)が必要です。また、受託制作したサイトの場合、サイトの所有者もライセンスを保有している必要があります。

LYZONがよく使用する「Google Fonts」と「Adobe Fonts」以外にも、今回のアンケートから他のサービスも挙げられたのでご紹介します。

• 「FONTPLUS」
  日本で有名なWebフォントサービスで、3,800種類以上のフォントが公開されています。
• 「TypeSquare」
  フォントの開発販売を行うモリサワが提供しているサービスで、多くの日本語を含む1,000種類以上の書体が公開されています。
• 「Hoefler&Co」
  タイポグラフィ分野で世界的に高い評価を受けている、アメリカのフォントデザイン会社です。クラシックからモダンな書体まで、幅広い欧文フォントを公開しています。

最後の「Hoefler&Co」は完全有料ですが、その他のサービスはそれぞれ無料プラン・有料プランなど様々な選択肢が提供されているようです。デザイン性の高いサイトを制作するために、複数のWebフォントサービスを試してみるのも良いかもしれません。

今回はWebフォントのメリットデメリット、またLYZONでどのようなWebフォントが使われているのかなどをご紹介しました。Webサイトはデザイン性だけでなく軽量化も重要視して作られるため、システムフォントのままで表示されているケースは少なくありません。
(個人的には、フォントも含め個性たっぷりなサイトで溢れたら良いなと思っています。)

以上、Webフォントについてのご紹介でした！