支援対象地域:札幌、仙台、関東、愛知、関西、広島、福岡

  • TOP
  •   
  • コラム
  •   
  • Webフォントの日本語のおすすめは?

はじめに

Webサイトのフォントがどれだけ企業イメージに繋がっているかご存知でしょうか?例えば「着物」などの和服のWebサイトのフォントと、「ガジェット」系のWebサイトのフォントはぜんぜん違う印象があります。他にイメージしやすい例でいうと、Webサイトからは離れますが、映画のポスターのタイトルがわかりやすいのではないでしょうか?フォントによってイメージが全く異なります。それぐらいフォントは読者にとってはイメージを与えるのに重要な要素なのです。Webサイトもフォントを変えるだけで問い合わせが増えたり、売上が上がったりすることも当然あります。

それほど重要とも言えるフォントをないがしろにしていないでしょうか?この記事ではWebサイトにおけるシステムフォント(デバイスフォント)とWebフォントの違いや、日本語のおすすめフォント、ライバル企業がどんなWebフォントを使っているか調べる方法についてお伝えしていきます。

Webフォントとは

Webサイトにはもともと、システムフォントデバイスフォントと呼ばれるフォントとWebフォントの2種類があります。はじめからOSに内蔵されているフォントがシステムフォントやデバイスフォントと呼ばれ、デバイス毎で内蔵されているフォントのため、表示速度が速いというメリットがあります。また、すでに内蔵されているフォントのため、ライセンスを気にする必要がありません。しかしデメリットも当然あります。デバイス毎に内蔵されているフォントを使用しているため、すべてのデバイスで同一のフォントを表示させることができません。これはデバイスによって内蔵されているフォントが異なるためです。また、デバイスフォントは数が少なく、使用したいフォントがない場合が多いでしょう。

游ゴシックメイリオなどは聞いたことはないでしょうか?また、世界中の企業で使用されているArialも有名です。これはデバイスフォントですが、トヨタやパナソニックなども使用しているフォントで、Google Documentsの初期設定でもこの「Arial」が使われています。このように、デバイスフォントでも多くの企業で使われている実績があります。しかしその反面、独自性が出にくいというデメリットもあります。

一方、WebフォントはWebフォントを提供しているサービス事業者から有料・無料で使用できます。有料の場合はライセンス料などがかかりますが、デザインの種類は数が多く、企業イメージにマッチしたWebフォントに仕上げることが可能です。しかしその分デメリットもあります。日本語はひらがな、カタカナ、漢字と種類が多く、英語のアルファベットと比較すると、その数の差は歴然としています。そのため、英語よりも種類が少なく、また、読み込みに時間がかかります。

システムフォント(デバイスフォント)とWebフォントにはそれぞれメリット・デメリットがあることを理解しておきましょう。

Webフォントの日本語のおすすめは?

Webフォントを初めて利用する場合、Webフォントとはどんなものなのか、そして無料で試してみたいという場合におすすめなのが、Google Fontsです。日本語のフォントの数は8種類とそれほど多いわけではありませんが、Webフォントを利用してみたいという方にはおすすめです。

  • Noto Sans JP
  • Noto Serif JP
  • M PLUS 1p
  • M PLUS Rounded 1c
  • Sawarabi Mincho
  • Sawarabi Gothic
  • Kosugi Maru
  • Kosugi

以上、8種類のWebフォントが用意されているので、興味がある方は使ってみてください。

Webフォントの調べ方

Webサイトのフォントをどんなものにすればよいかわからないという場合は、同業他社のライバルのフォントを調べると良いでしょう。その方法は簡単です。Chromeのデベロッパーツールを開き、「Elements」内で「<body>」と検索し、複数行選択されている箇所をクリックします。すると画面下のほうの「Styles」に「font-family: 」と記載があるので、そのすぐ右側に書かれたものがWebフォントになります。これで同業他社のライバル企業のWebフォントを調査し、どんなフォントが使われているのかをチェックしてみると良いでしょう。

おわりに

Webフォントとシステムフォント(デバイスフォント)の違いについて説明し、Webフォントを無料で利用できるGoogle Fontsをおすすめしました。Webフォントとデバイスフォントのメリット・デメリットをしっかりと把握した上でWebサイトに反映してみてください。Webフォントをこだわりすぎて、読み込み速度が遅くなってしまうとユーザーのページ離脱にも繋がるため、あまり神経質になりすぎず、要所要所でWebサイトのイメージに合ったWebフォントを利用することをおすすめします。同業他社のライバルサイトで使われているWebフォントもしっかりとチェックして、自社サイトの活かしてみてください。