Webサイトのデザインを向上！日本語Webフォントサービス6選

Webサイトのデザインにおいて、フォントは大きく影響します。Webフォントを使うことで、ユーザの環境を問わず、思い通りのデザインが可能となります。

Webフォントとはなにか、日本語Webフォントサービスについて紹介します。

フォントとは

Webサイトを表示するときに、WebブラウザはCSSの指定を元にPCやスマホ、タブレットなど各端末にインストールされているフォントを呼び出し、文字を表示します。例えば、WindowsのPCであれば「メイリオ」や「MSゴシック」といったフォントが指定してあり、そのフォントでWebサイトのテキストが表示されます。

Marketing Bankでは「メイリオ」「Hiragino Kakugo Gothic ProN」「sans-serif」が指定されており、「メイリオ」がインストールされていなければ「Hiragino Kakugo Gothic ProN」で表示され、さらになければ「sans-serif」で表示されます。

WordやPower Pointで資料を作ったことがあればイメージできるかと思いますが、フォントはデザインにおいて、とても重要な要素です。しかし、Webサイトを閲覧する人の端末にどのフォントがインストールされているかわらず、結果的にデザイナーが意図していないフォントで表示され、デザイン上の制約になってしまうことがあります。

画像にすることで、端末に依存したフォントの違いを回避するWebサイトが多いですが、文字の修正や文章の検索において問題が生じてしまいます。

それらの問題を解決するために、サーバ上にフォントを置き、Webサイトを表示するときに、そのフォントを読み込ませるという技術が生まれました。サーバ上に置かれたフォントがWebフォントです。Webフォントによって、どの端末でもデザイナーが意図したフォントを表示させることが可能になります。

Webフォントのデメリット

欧文ではWebフォントが幅広く利用されていますが、日本語では英語ほどの普及が進んでいません。

日本語では英語に比べて、用意しなければならない文字が多く、特に漢字については非常に多くあるために、フォントファイルの容量が大きくなってしまい、Webサイトの表示を遅延させる原因となってしまいます。

日本語のWebフォントを提供しているサービスでは、それぞれ読み込み速度を向上させるために様々な技術を開発しています。

日本語Webフォントサービス6選

1. FONTPLUS

FONTPLUSはソフトバンク・テクノロジー株式会社が提供するWebフォントサービスです。有名なフォントでは、「フォントワークス」「イワタフォント」「モトヤフォント」「白舟書体」「モリサワ」と多くのフォントが利用できます。

有名フォントの豊富さから、多くの企業で導入されています。入会金とPVによる課金形態となっています。

2. Fonts.com

海外では有名なWebフォントサービスです。海外のサービスでは珍しく日本語Webフォントを扱っています。有名なフォントとしては、「AXISフォント」「ダイナフォント」「イワタフォント」「モトヤフォント」を扱っています。

無料プランでは日本語Webフォントは使えず、月額10ドルで契約でき、長期の契約にすることで安く利用することが可能です。

3. TypeSquare

TypeSquareはモリサワフォントで有名な株式会社モリサワが提供しているWebフォントサービスです。有名なフォントでは「モリサワフォント」「タイプバンク」が利用できます。

PV（ページビュー）によって料金が異なります。

4. 日本語Webフォントサービス

日本語Webフォントサービスは株式会社デジタルステージが提供するWebフォントサービスです。7書体では月額980円、316書体では月額2,980円から利用できます。

5. ウェブフォントファン

ウェブフォントファンはフォントグラフィックが提供するWebフォントサービスです。ライセンス料を支払うことで利用できます。また、Wordpressでは、プラグインを利用して簡単に導入できます。

6. もじでぱ

もじでぱは緑山電機株式会社が提供する無料のWebフォントサービスです。Webサイトはもちろん、「Amebaブログ」や「livedoorブログ」を始めとして、ブログパーツが利用できるブログであれば利用可能です。

有名なフォントでは「C&G」「M＋フォント」「清和堂フォント」フォントなどが利用できます。

まとめ

Webフォントを導入することで、端末毎にフォントが異なってしまうという問題を解決できます。日本語Webフォントは英語に比べ、文字数が多く容量が大きくなってしまいますが、各社速度改善のための技術を開発しています。

近年注目されている使い方は、他言語対応する必要があるサイトでの活用です。自動翻訳を用いる場合、フォントのために画像を使うことでサイトの更新のコストが大きくなってしまうという課題がありますが、Webフォントを利用することでコストの圧縮が見込めるためおすすめです。