近年はフォントのサブスクリプションサービス導入も増えて、さまざまな種類の日本語フォントをデザインに取り入れることが以前よりも容易になったのではないでしょうか？しかし、フォントファイルの配信が必要なWebフォントとしての利用には、サービス提供者によるサブスクリプションサービスの導入が必要となる場合もあり、クライアントワークなどでは導入が難しい場合も多いですよね。このような時にも、無料のGoogle Fontsで提供されているフォントであれば安心してデザインに取り入れることができます。この記事では、そんなGoogle Fontsの使い方をはじめ
フォント自体の品質と利用実績
WebサイトやWebサービスで利用できる汎用性の高さ
を主な観点としてWebフォントとしておすすめのGoogle Fontsをまとめました。
Google Fontsとは？日本語フォントも豊富なフリーフォントサービス
Google Fontsとは、Googleが提供する無料のWebフォントサービスで、商用利用可能なフォントがWebフォントとして無料で利用できることが特徴です。日本語のフリーフォントの種類も豊富で、デバイスフォント以外のフォントでWebデザインを行う際に便利な選択肢となっています。
Google Fontsの使い方を動画で解説
Google Fontsの使い方は簡単
使用したいフォントを検索
Webフォントとして使用するフォントをすべて選択
生成された埋め込みタグを使用してサイトにWebフォントを追加
それぞれのフォントはローカルにダウンロードして使うこともできるので、Figmaなどでデザインを制作するときに実際のデザイン上で比較検討することも可能です。
それでは早速、Webフォントとしてサイトの見出しや本文での使用に最適なGoogle Fontsの日本語フォントを7種紹介します！
M PLUS 1p：幅広い用途をカバーする定番日本語フォント
ThinからBlackまでの7種類のウェイトや欧文フォントまでカバーしており、とても汎用性の高い日本語フリーフォント。見出しから本文までこれ一つでカバーすることができます。Google Fontsで配布されているのはM PLUSフォントの中でも最も標準的な「M PLUS 1p」となっていますが、公式サイトでは2種類の和文と3種類の欧文をそれぞれ組み合わせた6通りのスタイルで提供されています。
また、M PLUSの最新版はGithub Pagesにて公開されており、こちらはM PLUS 1とM PLUS2の2種類のフォントとして提供されています。それぞれ、可変フォント (Variable fonts)として作られており、自由にフォントの太さやスタイルを変更することができます。
Noto Sans JP（源ノ角ゴシック）：今 一番使われているフリーフォント？
Noto Sans JP（源ノ角ゴシック）はAndroidのシステムフォントとしても使用されており、優れた可読性からWebサイトをはじめとした大変多くのデザインで使用されている日本語フォントです。Noto Sansは、AdobeとGoogleが「全世界の言語に対応できるフォントを開発する」ことを目的として共同で開発したもので、さまざまな言語で表示ができるフォントとして多言語サイトでの使用も多いです。
IBM Plex Sans JP：IBMが開発した高品質な日本語フリーフォント
IBM Plex Sansは、もともとIBMがコーポレートフォントとして使用するために「人間と機械 」というIBMのテーマにもとづいて作成したもので、このテーマに共感する企業や個人がこのフォントを利用できるようにとオープンソース化されました。8種類のウェイトが提供されていることで、汎用性も高く、太いウェイトでも潰れない設計でWebデザインなどにもとても使いやすいです。前出のNoto Sansに比べて細部の曲線に丸みがあることで、より柔らかい印象を作りたい時などに使用するのも良さそうです。このWebメディアunprintedでもWebサイトの日本語フォントとしてIBM Plex Sans JPを採用しています。
キウイ丸：柔らかい印象の丸ゴシック体なら
フリーフォントのマメロンをベースに作られており、Light, Regular, Mediumの3種類のウェイトが提供されているので、見出しから本文まで使うことができます。様々な媒体で目にする人気のフォント「秀英丸ゴシック」や「筑紫A丸ゴシック」を使いたいシーンでも代わりとして使用できそうで、子供向けや柔らかい印象のデザインととても相性が良いです。
さわらびゴシック：小さめの文字でも読みやすい本文向けフォント
さわらびゴシックは、可読性に優れたスタンダートなゴシック体フォントです。小さめの文字でもつぶれにくいことが特徴で、本文での使用を想定されています。そのため、ウェイトはRegularのみとなっていますが、読みやすい文章をデザインしたいときにおすすめ。筆文字のような”とめ・はらい”のカーブがさりげなく表現されており、優美な印象が感じられ、いろいろなジャンルと相性が良さそうです。「DeNAxAI」のWebサイトでも日本語の文章に使用されています。
ZEN角ゴシック New：字面が小さく、ゆとりがある落ち着いた印象
ZEN角ゴシック Newは、ゆとりがある落ち着いた印象で本文を作りたい時に役立ちます。「日本女子大学のホームページ」などで使用されており、Zen角ゴシック Newで表現された文章はやや柔らかい印象を与えるのではないでしょうか？教育系や、オーガニック食品など信頼感を 与えたいときにおすすめのフォントです。
クレー One：圧倒的な高級感と落ち着きを表現できるフリーフォント
ここまでゴシック体の比較的ニュートラルな書体を紹介してきましたが、クレーは高級感や落ち着きを表現したい日本語本文のデザインで使える他、スクリーンフォントとしても人気のフォントです。フォントワークスが提供しているフリーフォントで、鉛筆で書いたような人間味と繊細さを持ちながらも教科書体のように読みやすいことが特徴です。RegularとSemi Boldの2種類が利用可能。
各OSのデバイスフォントとの比較
Webフォント使用する場合には、デバイスのシステムフォントを使用する場合と比べてサイトの読み込み速度の面でデメリットもあります。そこで、本文のフォントをWebフォントにするだけの価値があるのかというのは気になる点ですよね。ここでは、今回紹介したGoogle FontsのフォントをiOS/macOS, Android, Windowsのシステムフォントとの違いが分かりやすい形で並べてみました。
iOS/macOSの標準フォントであるHiragino Sansは可読性が非常に高く、ニュートラルな印象なので幅広いデザインで使用できます。同じような用途でデバイスに関係なく統一したイメージを作るには、同じく可読性に優れて癖の少ないIBM Plex Sans JPや、Androidの標準フォントでもあるNoto Sans JPが最初の選択肢となるでしょう。モダンな印象や個性を出したい時にはM PLUS 1pを使用してみるのがおすすめです。落ち着きを表現したい場合には、Windowsのシステムフォントである游ゴシックのように、文字周りに空間のゆとりがあるさわらびゴシックやZen角ゴシックNewを選択するのが良さそうです。このように、どのようなイメージを与えたいのか、ブランドのコンセプトに合わせてWebフォントを選んでみると、デザインがもっと楽しくなりそうですね。
まとめ
Google Fontsで提供されている定番の日本語フォントを7つ紹介しました。無料とはいえ、これらのフォントはクオリティが高く、多くのWebサイトでの採用実績もあるため安心して利用することができます。unprintedでは、他にもロゴデザインに最適なフォントやタイポグラフィの基本についてなどの情報をまとめています。ぜひそちらも参考にしてみてくださ い。
