Pocket

近年Web上でデバイス文字の日本語を表示する技術が格段に増えました。
中でもWebフォントは、大手レンタルサーバーやフォントメーカーなどから無料で使えるサービスが登場するなど、日本語Webフォントを導入するハードルも年々低くなってきています。
今回は日本語Webフォントを提供する無料サービスを比較しました。

比較するサービス

今回は以下の3種類のWebフォントサービスを比較しました。

さくらインターネット

大手レンタルサーバー、さくらインターネットのサーバー契約者への付帯サービス。
「さくらのレンタルサーバ」でWordpressを導入している利用者は、モリサワのWebフォントが利用できます。
さくらインターネット

Adobe Typekit

Adobe Creative Cloudユーザーが利用できるフォント提供サービス。
英語フォントがメインですが、近年モリサワのフォントも利用することができるようになりました。
Adobe Typekit

Google Fonts

Googleの提供するWebフォントサービス。
2017年現在、試験的に配信されている「Google Fonts早期アクセス」で、有名ではないですが9種類の日本語フォントが導入されています。
Google Fonts
Google Fonts早期アクセス

これらのサービスは本当に使えるのか

既存のWebフォント配信サービスTypesquareと合わせて、それぞれを比較しました。
※2017年3月現在のものです。最新の情報は各サービスサイトをご参照ください。

◆さくらインターネット
ドメイン制限 PV制限 費用 商用利用
1ドメイン 2.5万PV/月 ¥515/月〜※1
使用できるフォント
リュウミン、見出ゴBM31、A1明朝などモリサワフォント30種類
備考
さくらインターネットで契約したドメイン、またはサーバーを利用すること
◆Typekit(無料版)
ドメイン制限 PV制限 費用 商用利用
1ドメイン 2.5万PV/月 ¥0 不可※2
使用できるフォント
モリサワ、Typebank、Adobeフォントなど日本語フォント約30種類のほか、1000種類以上の英字フォント
備考
CREATIVE CLOUDのアカウントが必要
◆Typekit(個人プラン)
ドメイン制限 PV制限 費用 商用利用
無制限 5万PV/月 US$49.99/年 不可※2
使用できるフォント
同上
備考
CREATIVE CLOUDのアカウントが必要
◆Typekit(ビジネスプラン)
ドメイン制限 PV制限 費用 商用利用
無制限 2万PV〜/月※3 US$40/月〜※3
使用できるフォント
同上
備考
CREATIVE CLOUDのアカウントが必要
◆Google Fonts
ドメイン制限 PV制限 費用 商用利用
無制限 無制限 ¥0
使用できるフォント
Noto Sans ほか9種類の日本語フォント(一部ひらがな、カタカナのみ)
備考
-
◆Typesquare※4
ドメイン制限 PV制限 費用 商用利用
2ドメイン 25万PV ¥2160/月
使用できるフォント
Typesquare登録フォントの中から3種類
備考
-

※1 スタンダードプラン利用時
※2 アカウント所持者とは異なる第三者のWebサイトに使用する場合はビジネスプランの契約が必要
※3 ビジネスプラン2M/月PVプラン利用時
※4 スタンダードIプラン利用時

まとめ

無料サービスはPV数が壁になるかも

無料で使えて便利そうな印象もありますが、さくら、TypekitなどではPV制限は2.5〜5万PVまでとなっているで、中規模サイトやメディアサイトなどPVが高いサイトへの適用は厳しいかもしれません。またライセンスの関係で制作会社などが顧客のWebサイトに適用する場合はビジネスプラン契約をする必要があるようです。

やっぱりGoogle Fontsは使い勝手がよさそう

Google Fontsで利用できる9種類のフォントは有名ではないですが、使えるフォントもありました。特にゴシック体の「M+ 1p」「Noto Sans Japanese」はウェイトも複数あり、難しい漢字にも対応しているので汎用性が高そうです。
以前このブログで紹介した「Font−familyのベストな書き方 2017年版」でもNoto Sansを使用したFont−Family例を紹介していますので、こちらもご参考ください。

おまけ

Font feature settingsってCSSプロパティ知ってました?

Webフォントとは直接関係ないですが、この「font-feature-settings」というCSSプロパティをご存知でしょうか?
私は最近知ったのですが、このCSSプロパティを使うと、プロポーショナル字形を指定することが可能になります。
簡単に言うと、文字を自動で詰めてくれるということです。(Photoshop、Illustoratorのオプティカル設定と同じですね!)
IE,Safari,Chrome,FireFoxともにかなり昔からサポートしているようです(参照)。

全ての文字を詰める(プロポーショナルに変える)

ひらがなのみ文字詰める

すべてのフォントに適応できるわけはなく、プロポーショナルメトリクス情報が含まれていないフォントの場合は、文字詰めはできません。有名なフォントでいうと「ヒラギノ角ゴシック体」や「ヒラギノ明朝体」「游ゴシック体」「游明朝体」「Noto Sans Japanese」で利用できます。 (「メイリオ」などは不可)
ぜひ参考にしてみてください。

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。