商用利用可能!高品質なオススメ日本語Webフォント10選(無料フォント多数)

121
309
73

Webフォントは、サーバーにあるフォントデータを読み込むことで、端末の環境に依存せず同じフォントをウェブページに表示する技術です。2010年頃からCSS3の登場とともに徐々に浸透し、近年ではさまざまなウェブサイトやサービスで使われるようになりました。

しかし日本語フォントは3〜10MBもの大容量になったり、導入にコストがかかったりと、採用を見送っている方もいるのではないでしょうか。今回は実用的でオススメの日本語Webフォントを、それぞれの特徴を踏まえつつ紹介します。

Noto Sans Japanese / 源ノ角ゴシック

世界中の言語をサポートすることを目標にAdobeとGoogleが開発したフォントファミリー。Googleのブランド名は「Noto Sans Japanese」で、Adobeのブランドは「源ノ角げんのかくゴシック(英名:Source Han Sans)」といいます。

Noto Sans Japanese

Noto Sans Japaneseの字の太さは極細の「Thin」から極太の「Black」まで6種あり、パソコンやモバイル端末などさまざまなシーンでの可読性を意識したデザインとなっています。「ヒラギノ角ゴ」と比べると曲線がやや強くしなやかな印象を持ち、また線が短くすっきりとした字形となっています。

Noto Sans Japaneseのファイル形式は「woff」「woff2」「otf」3種類が用意されており、ファイル容量はwoff2形式で1.5MB程度と、日本語フォントとしてはかなり軽量なファイルサイズとなっています。ライセンスは「SIL Open Font License, 1.1」が適用されています。

※「SIL Open Font License, 1.1」については「自家製フォント工房」さんのサイトで分かりやすく解説されていますので、こちらを参考にするとよいでしょう。

源ノ角ゴシック

Adobeブランドで出している源ノ角げんのかくゴシックもTypekitから利用できます。字の太さは極細の「Extra Light」から極太の「Heavy」まで7種あり、Noto Sans Japaneseよりも一種類多いのが特徴です。

源ノ明朝

源ノ明朝げんのみんちょう(英名:Source Han Serif)とはセリフ書体として源ノ角げんのかくゴシックと対をなすものです。

字の太さは極細の「Extra Light」から極太の「Heavy」まで7種あり、デジタルデバイスで使われることを念頭に設計されています。スマートフォンや電子書籍でよく使われることを想定したうえで汎用性の高いデザインとなっています。

みんなの文字

UCDA(一般社団法人ユニバーサルコミュニケーションデザイン協会)とフォントベンダーのイワタ電通が科学的根拠に基づき、共同で開発したフォントです。ただ美しいだけではなく、小さな文字、長文、低解像度、英数字の見分けのつきやすさ、かすれなどの劣化時、老眼・老眼・白内障・高齢の方など、あらゆる条件化でも読みやすいよう設計されています。

線は直線的な等幅で、「ふところ」が大きく小さな文字でも潰れづらく、余計な装飾のないくっきりとした字形となっています。

※ ふところ:画と画が構成している内側の空間のこと。ふところが広いとおおらかで優しい印象、狭くすると引き締まった印象となります。

ファイル形式は「woff」「otf」2種類が用意されており、woff形式で2.6MB程度と比較的軽量なファイルサイズとなっています。通常のフォントは有償で提供されていますが、Webフォントは使用の申し込みを行い、用意されている「認定シール」を掲載すると無料で使用できます。

M+ FONT

デザイナーの森下浩司氏が中心となって開発されている、ゴシック体のフォントです。利用・改変・再配布についてほぼ制限のない「mplus Font License」が適用されており、このフォントに手を加えた派生フォントも多数制作されています。

和文フォントと欧文フォントを合わせると、57もの豊富な書体があります。和文フォントのかな文字は「M+ Type-1」と「M+ Type-2」の2つのタイプがあり、「M+ Type-1」は直線的な線と柔らかな曲線が特徴となっており、「M+ Type-2」は従来のゴシック体の雰囲気を残しつつモダンな雰囲気を持った字形となっています。

Webフォントでは収録する字種を制限し(和文はかな文字と最低限の記号類、常用漢字までが収録されています)ファイル容量を抑えることで、表示速度を優先した設計がされており、和文と欧文を合わせても300〜500KB程度とかなり軽量なファイルサイズとなっています。

Google Fonts版との違い

M+ FONTは、Google FontsのEarly Accessでも公開されています。Google Fonts版は若干手が加えられており、以下のような違いあります。

  • 収録文字数が、8,676字と増えている。
  • 和文フォントと欧文フォントを合わせて、1つのファイルに収録されている。
  • 配信されているフォントタイプは「M+ 1p」のみ。
  • 本家のウエイトの変更は個別にfont-familyを指定する必要があったが、font-weightで変更できる。
  • ライセンスが「SIL Open Font License, 1.1」に変更されている。

文字数が増えファイルサイズも大きくなっているものの、CSSを含むファイルの数が少なくなっておりサーバーの転送速度もあってか、Google Fonts版の方が読み込みが高速でした。使用できるフォントタイプに限りはあるものの、事足りる場合はGoogle Fonts版を使用するのがよさそうです。

また本家の方を使用する場合、サイトで紹介されているCSSのURLですと1度リダイレクトが発生しているようでしたので、リダイレクト先のURLを直接参照すると処理を最適化できます。


▲Google Fontsから配信されている方が、ファイル読み込みが高速

Rounded M+

M+ FONTをベースに丸ゴシック加工されたフォントで、「自家製フォント工房」で公開されているフリーフォントのひとつです。こちらもGoogle Fonts Early AccessからWebフォントとして公開されています。

M+ FONTと同様に「Thin」から「Black」までの7ウエイトが用意されており、字種も8,546字が収録されています。M+ FONTが持っているモダンな雰囲気をそのままに、角が丸くなり明るく親しみやすい書体となっています。

本家の「Rounded M+」のライセンスは「mplus Font License」が適用されていますが、こちらのWebフォントは「SIL Open Font License, 1.1」が適用されています。

はんなり明朝

はんなり明朝は、「Typing Art」で公開されているフリーフォントのひとつです。こちらもGoogle Fonts Early AccessからWebフォントとして公開されています。

「築地体」を参考にされており、行書体のような線の繋がりや「墨だまり」がありつつ、やさしくふんわりとした雰囲気が特徴です。とくにカタカナの「はらい」が、伸びやかで印象的です。Webフォントの収録文字に漢字は含まれていませんが、親和性が高く他のフォントと併用しても使用できます。

※ 築地体:明治時代の東京築地活版製造所(築地活版)が製造した明朝体活字で、明朝活字の二大源流のひとつ。

本家の「はんなり明朝」は「IPAフォント」と合成されており、ライセンスも「IPAフォントライセンスv1.0」に準じる形となっていますが、こちらのWebフォントは「SIL Open Font License, 1.1」が適用されています。

Webフォントは、他にも多数のサイトやサービスから提供されています。有償のサービスではフォントだけでなく、独自の機能なども提供されています。

モリサワのWebフォントサービス「TypeSquareタイプスクウェア」や、「Adobe Creative Cloud」のフォントサービス「Adobe Typekit」などでも数多くの日本語フォントが提供されています。本来どちらも有償のサービスですが、MORISAWA PASSPORT製品を契約している場合は「MORISAWA PASSPORTプラン」が、Adobe TypekitもAdobe Creative Cloudメンバーであれば「ポートフォリオプラン」が追加料金なしで利用できます(※)。 どちらもウェブ制作に携わっていれば多くの方がお持ちかと思いますので、とくに有名なフォントをピックアップして紹介します。

またTypeSquareとAdobe Typekitの特徴として、「ダイナミック・キット」という仕組みがあります。これはページ中で使われている文字を検出して必要となる文字のみを読み込むことで、読み込み時間を飛躍的に短縮できる技術です。またページが更新された場合も、新たに追加された文字だけが読み込まれます。こういった仕組みが用意されているのも、有償サービスならではの強みだと思います。

※ 使用している製品によってはプランが適用されない場合や使用制限がありますので、利用の際は必ずそれぞれのプランページをご覧ください。

見出しゴMB31

フォントベンダーのモリサワが提供しているフォントの1つで、モリサワのWebフォントサービス「TypeSquare」か、「Adobe Creative Cloud」のフォントサービス「Adobe Typekit」から使用できます。

始筆などに「打ち込み」と呼ばれるアクセントがあり、また若干小ぶりな字形となっており、落ち着いた印象の伝統的なゴシック体です。ゴシック体で軽い印象を与えず、かつ存在感を出したいといった場合などによく使用されます。

リュウミン

TypeSquareとAdobe Typekitで利用できる、明朝体のフォントです。

明朝体でありながら線の先端の「ハライ」や「ハネ」、「ウロコ」が丸く抑えられており、やわらかく親しみやすい雰囲気となっています。見出しから本文組まで幅広く活用でき、DTPにおいては基本書体として、多くの場面で利用されている万能フォントです。

貂明朝

貂明朝てんみんちょうはAdobe Typekitで利用できる、明朝体のフォントです。2017年11月のAdobe MAX JAPANで発表され大きな注目を集めました。

貂明朝の特徴は公式ブログで次のように紹介されてます。

貂明朝を従来の明朝体から際立たせている特徴は、躍動感のある手書きの文字の特徴に加え、江戸時代の瓦版印刷に見える運筆の特徴も取り入れていることです。伝統的な明朝体の画線の先端を丸め、やや太めに仕上げ、ふところは小さめにしています。貂明朝は、広告コピー、書籍・出版物のタイトルなど幅広い用途でご利用いただけます。

The Typekit Blog | 可愛らしくも妖しい「貂明朝」登場

運筆の特徴が可愛らしいフォントですね。

A1明朝

A1明朝はTypeSquareでのみ利用できる、明朝体のフォントです。

「墨だまり」としなやかな曲線が特徴的な、味わいのある書体です。独特なニュアンスを持ちつつ可読性にも優れているため、こちらも見出しから本文まで幅広く利用できます。

またTypeSquare独自の機能として、「デフォルトフォントを非表示」や「フェードインあり」のオプション設定ができます。従来はWebフォントが適用される前にデフォルトのフォントで表示されてしまい、適用される際に画面がちらついて見えてしまうことがありますが、このオプションを設定すると適用されるまでテキストを非表示にできます。フェードインのアニメーション時間まで指定できるため、非常に実用的です。


▲オプションの設定はGUIが用意されており、自動的に必要なコードが生成されます

まとめ

さまざまな環境でもフォントの見映えを統一するため、従来はテキストも画像としてウェブページに配置してました。その場合、文言などの修正の度に画像を作り直さなければならず、手間がかかっていました。Webフォントであればそのような手間がなくなるため、画像文字と比べてメンテナンス性があり、多解像度への対応がしやすいなど多くのメリットがあります。表示速度の問題などデメリットもありますが、フォントサービスの向上などにより恩恵を受けやすく導入もしやすい環境が整ってきています。是非トライしてみてはいかがでしょうか。

また今回紹介したWebフォントのデモとソースコードも公開していますので、参考にしてみてください。

※この記事が公開されたのは3年1ヶ月前ですが、 平成29年12月28日に内容をメンテナンスしています。