日本語Webフォント「TypeSquare」を試してみた
2015/12/12
直近まで担当していたWeb制作の案件でテスト的にモリサワのWebフォントサービス「TypeSquare」を試したので、備忘録として書き残しておこうと思います。
日本語のWebフォントサービスとしては、モリサワの「TypeSquare」とソフトバンク・テクノロジーの「FONTPLUS」が2強と言える存在なのではないかと思います。
TypeSquareの方が後発サービスになりますが、機能的には大きな差はなく、使えるフォントと料金体系の違いでどちらを選ぶか判断することになるでしょう。実際、自分が選定していた時もその2点での判断でした。
Webフォントとは？
そもそもWebフォントって何？という方は、このページを見ていないと思うので、あえて書く必要はないかもしれませんが、念のため。
通常、Webページに含まれるテキストを表示する場合、OSデフォルトのフォントが使用されます。これに対し、Webページを表示する際にフォントデータをサーバーから読み込むことで、任意のフォントを表示させるのがWebフォントです。
英語圏などフォントデータの軽い欧文フォントを使用する国々では早くから無料／有料のWebフォントサービスが存在していました。海外のサイトを見ると様々なデザインのフォントが使われていますが、多くは画像ではなく、テキストとWebフォントで作成されています。
一つのフォントのファイルサイズが数MBという日本語フォントの場合、読み込みスピードの問題などでWebフォントの利用はなかなか進みませんでしたが、ここにきて、ネットワークやサーバー性能の向上といった要因もあり、日本語でのWebフォント利用は盛り上がってきているように感じます。
実際に日本語Webフォントを使っているサイトは下記のようなまとめページで見ることができます。ソースファイルの<head>内に「typesquare」または「fontplus」の文字列を含む<script>があれば、いずれかのサービスを利用しているサイトです。
では早速、TypeSquareとFONTPLUSのサービスを見ていきます。
使用できるフォントについては特に使いたいフォントがあるのでなければ、どちらを選んでも満足できる
FONTPLUSは商用フォントではモリサワと並んで著名な「FONT WORKS」のフォントを中心に700書体以上のフォントが利用可能です。
FONT WORKSのほか、イワタ、モトヤフォントなど、各社のバラエティに富んだ商用フォントが利用できるのがポイントでしょうか。実は一部のモリサワフォントもサービスに含まれているのですが、ウェイトのバリエーションがTypeSquareより少ないなどの違いがあります。
対するTypeSquareはモリサワのサービスということで利用できるのはモリサワフォントのみとなりますが、こちらも600書体以上を利用可能となっています。モリサワ1社での提供になりますが、モリサワフォント自体、様々なデザインのフォントを用意しているので、FONTPLUSに比べて大きく見劣りするということはないと思います。
いずれのサービスも商業印刷などで使用されている高品質なフォントをラインナップしているので、特に「このフォントをサイトのデフォルトフォントに使いたい！」といった希望があるのでなければ、どちらを選んでも問題はないように思います。
料金体系
初期費用が必要だが最低月額が安く、制限の少ないFONTPLUS
料金体系については、それぞれ特徴があって、FONTPLUSの場合は初期費用として10,800円（税込）が必要で、月額1,080円（税込）から利用できます。
利用できるサイト数やフォント数に制限はなく、ページビュー数（PV数）が増えると料金も上がるという料金体系です。月額1,080円の最安プランの場合、月間PV上限は10万ページビューとなっています。これは中小企業のコーポレートサイトなどであれば、そうそう超えることはない数字ではないかと思います。
サイト数の上限はないので、複数サイトで料金を按分すれば月額数百円程度で高品質なWebフォントを導入することができそうです。極端な話をすると100サイトで按分すれば、1サイトあたり10円でWebフォントが使えることになります。もっともPVの上限も月間1,000PVになるので、そもそもそんなアクセスしかないWebサイト作るってどうなのよ、という話もありますが。
実質月額4,320円からと高めだがインストールフォントとのセットプランも用意されているTypeSquare
TypeSquareもページビュー数に応じて料金が上がる仕組みですが、こちらは初期費用なしで最安プランが月額2,160円（税込）、月間PV上限が25万 PV、利用書体数が3、サイト数が2となっています。月間PVについては十分だと思いますが、書体数やサイト数についてはFONTPLUSに比べるとかなり見劣りがします。
特に利用書体数はウェイト違いも1書体としてカウントされるので、3書体しか使えないというのはちょっと厳しいように思います。月額2,160円のプランの上に月額4,320円（税込）のプランが用意されていて、こちらになると利用書体数の制限がなくなります。月間PVも100万PVまでとなり、サイト数も5つに増えます。
利用できる書体数を考慮すると、実質月額4,320円のプランを使わざるをえないような気がしますが、実は「MORISAWA PASSPORTプラン」という別プランが用意されていて、こちらはかなりお得な内容になっています。
これはモリサワの全フォントをPC/MACにインストールして利用できる「MORISAWA PASSPORT」というサービスの利用者向けのプランになりますが、年間1,000万PV、書体数制限なし、サイト数制限なしで年間49,800円（税抜）と、TypeSquareの月額4,320円のプランとほぼ同額でサービスを利用できます。
Webフォントだけでなく、パソコンにインストールして利用できるフォントも提供されるので、グラフィックデザインなどでモリサワフォントを利用したい場合には、かなりお得と言えそうです。
なんとなく抱き合わせっぽいプランではありますが、Webフォント専門のソフトバンク・テクノロジーズと、フォント業者であるモリサワの違いが浮き出た料金体系となっていて、興味深いところです。
ちなみにどちらのサービスもトライアルが用意されているので、まずはテストで利用することも可能です。
使い慣れたモリサワフォントを「TypeSquare」を選択
自分の場合、最終的に「TypeSquare」を選択しました。理由としては紙のデザインでモリサワフォントを使い慣れていることと、利用を想定しているサイトが月間20〜30万PVほどだったので、FONTPLUSを選択するにしても年間32,400円または64,800円のプランを選ぶ必要があり、価格面ではTypeSquareと大差なかったためです。
なので、これ以降のレビューはTypeSquareの利用レビューということになります。ただしほとんどはTypeSquareだけでなくFONTPLUSにも当てはまる内容として読んでもらっても問題ないかと思います。
そもそもなぜ日本語Webフォントを使うのか
文字画像ではなくテキストなのでSEOに強い
Webフォントを使うメリットは大きく2つあると思います。
ひとつは、見出しやキャッチコピーなど見栄えのためにフォントを画像として使っているものをWebフォントでテキストに置き換えることで SEO的に有利になる というメリットがあります。OS標準のフォントも最近はかなり良くなっていますが、サイズを大きめにして使うとやはり見栄えの点で物足りなさがあるため、どうしても商用フォントでデザインした文字画像に置き換えてしまいたくなります。
その点、モリサワやFONT WORKSのフォントなら、テキストのままキャッチコピーや見出しに使っても十分に美しく仕上げることができます。見た目が綺麗でしかもaltタグで内容を記述する必要のないテキストそのものなので、SEOには強くなります。しかも文字の変更もソースのテキストを書き換えるだけで済むので、メンテナンスの良さもあると言えます。
Retinaディスプレイが大半を占めるスマートフォン向けサイトでの表示が美しい
もうひとつのメリットは最近のスマートフォンなど高精細なディスプレイを持つ端末で見た時にジャギーのないくっきりとした美しいテキストを表示できる点だと思います。同様にRetinaディスプレイのMacBookなどでも、OS標準フォントを使ったページデザインとは、はっきりとルックスの異なる、非常に美しいテキストを表示できます。
余談ですが、自分の環境だとすべての端末がRetinaディスプレイなので（iPhone 6 Plus、iPad Air2、MacBook Pro Retina、iMac Retina）、Webフォントを使うとデザインがワンランク上のクオリティになったような気分になります。そういう環境であることもWebフォントを検討しようと思い立った要因かもしれません。
ただし！
通常解像度のPCのモニタで見る場合、「表示が美しい」という効果は限定的です。詳しくは後述しますが、字形がはっきり分かるぐらいの大きさのフォントサイズでないと、商用フォントならではの品質の違いは認識できないかもしれません。
実際の使い方
TypeSquareの管理画面で対象サイトを登録
まず最初にTypeSquare公式サイトからプランを申し込みます。カード決済であれば、すぐにTypeSquareのサービスを利用することができます。管理画面でWebサイトに埋め込むためのコード（1行）を取得して、Webフォントを使うサイトのドメイン名を登録します。これで準備は完了です。
今回、選択したプランは月額4,320円（税込）のプランです。このプランの場合、サイト登録上限数が5つになります。気をつけないといけないのは、サブドメインやhttp/httpsの違いも1サイトとしてカウントされる点です。フォームだけhttps化してある場合や、検証サーバーを使用しているといった場合にも一つのサイトとしてカウントされるので注意が必要です。
HTMLファイルの<head></head>間にコードを1行追加して、あとはCSSのfont-familyでフォント指定するだけ
管理画面での設定が終わったら、あとはソースファイルへ記述を追加するだけです。まず、Webフォントを使用するHTMLファイルの<head></head>タグの間に管理画面で確認したコードを記述します。あとはWebフォントを適用したいテキストにCSSでfont-familyを指定すればOKです。
サイトの登録が無いとコードを入れてもWebフォントが表示されないので忘れず登録しましょう。CSSでの記述は、
font-family: "UD Shin Go Light";
といった感じでフォント名を指定します。
フォント名はTypeSquareにログインした状態でフォント一覧を見ると表示されています。ログインしてない状態でフォント一覧を見ても表示されないので注意しましょう。自分の場合も「フォント名はどこで確認するんだ？」と最初ちょっと慌てました。別にログイン状態でなくても、フォント名ぐらいは見れていいような気がするのですがどうでしょうか。
端末やOS、ブラウザによる見え方の違い
RetinaディスプレイのスマートフォンやRetina対応のMacBookなどでは非常に美しい！
TypeSquareのフォントの多くはLightからHeavyまで数段階のフォントウェイトが用意されています。Retinaディスプレイのスマートフォンでは印刷物と同等クラスの解像度（dpi）になるので、本文ぐらいのフォントサイズでもウェイトの違いがはっきりとわかります。最近流行の細身のフォントウェイトでもしっかりと表示されて、非常に綺麗な表示結果が得られます。
通常解像度のディスプレイでは程々の表示品質だがWindowsでは品質が大きく落ちる。
それに対して、一般的なPCモニタで見た場合は「そこそこ」の表示品質になってしまいます。見出しなど少し大きなフォントサイズで表示する場合はまだいいのですが、本文テキストぐらいのサイズになると、そもそもの字形の違いが分かるほどの解像度が無いのでWebフォントのメリットはあまり感じられません。
そしてこの点が非常に残念なのですが、Windowsではどのブラウザを使っても表示が美しくありません。Windowsのことをdisりたいわけでは無いのですが、早くからアンチエイリアス表示に対応してきたMacOSXと比べると、Windowsの表示品質は圧倒的に劣ります。個人的な印象ではデフォルトフォントの方がまだ綺麗と言えるぐらいの品質です。
それでもWebフォントの利用を検討したのは、今回のリニューアルの対象となるサイトへのアクセスの過半数が、スマートフォンからだったからです。ざっくり概算ですが、３／４のユーザーに対しては高品質なWebフォントでの表示が可能になるという試算でした。これがPC（Windows）からのアクセスがメインのサイトであれば、導入は考え直したかもしれません。
表示品質の問題はWebフォント提供側の問題も幾らかはありますが、OSや利用環境の問題だと思いますので、今後のアップデートやディスプレイの高精細化で徐々に解決されていくことを期待するしかありませんね。
その他の技術的なポイント
UIViewにはTypeSquareもFONTPLUSも対応
その他、調べている時に気になったポイントの一つに「UIView」での表示に対応しているか、というものがありました。これはiPhoneなどのスマートフォンにおける、アプリ内ブラウザでの表示を指します。TwitterアプリやFacebookアプリでリンクをタップすると、ブラウザではなくアプリ内でWebページが表示されますが、これをUIViewと言います。初期のリリースでは対応していなかったそうですが、今ではTypeSquare、FONTPLUSともに対応しています。
JavaScriptなどで後から読み込まれたテキストには適用されない
あまり該当するケースが思い浮かびませんが、最初のページ読み込み時に読み込まれたテキストにしかWebフォントが適用されないそうです。一旦、ページが表示されてからJavaScriptのイベントなどで後からページを読み込む場合、そのテキストにはWebフォントが適用されません。今回の案件ではそうした要件はなかったので、気になるポイントではありませんでしたが、JavaScriptで動的な動作を考えている場合には注意が必要かもしれません。
表示スピードは気になるレベルではない（と思われる）
Webフォントといえば、ひと昔前は「遅い」という評判でしたが、現在は劇的にスピードアップしていると思います。関係者の方に聞いた話だと、2014年に表示スピードが大きく向上するブレークスルーがあったそうです。
通常のテキストボリュームであれば、表示が遅延することは無いと思います。実際に試した結果の意見では無いので、あまり自信満々で言えないのですが、実際にページ表示されるタイミングで読み込まれるWebフォントのデータ量は数十KB程度であること、またデータを送出するサーバーやクライアント側（PCやスマホなど）の性能向上などもありますので、表示スピードについては現在は気にする必要はないと思われます。
結論
スマホからのアクセスが多いのであれば採用はアリ
長々と書いてきましたが、結局「Webフォントの導入はアリかナシか？」の判断ですが、多くのサイトでスマートフォンからのアクセスが大きく伸びている現状を考慮すると、「導入はアリ」または「前向きに検討するべき」なのではないかと思います。
何と言っても日本語Webフォントを使用した時の高解像度ディスプレイでの表示の美しさは格別です。見た目の印象が大きく変わります。
コストの部分はどう捉えるか人によって異なると思いますが、個人的には大きな負担になるレベルではない、と思います。公開後の運用も担当するのであれば、サーバーコストなどに溶かし込んでも問題ないんじゃないでしょうか。FONTPLUSであればサイト数の制限がないので、手持ちの管理サイトで按分してコストを抑えることも可能だと思います。
懸念事項としては、やはりWindows環境での表示品質ですが、ここが納得できるかどうかを判断基準にしてもいいかもしれません。
3年ほど前にもWebフォントの導入を検討したことがありましたが、その時は結局、機能面での使いづらさもあってやめてしまいました。しかし、現時点では積極的に導入を検討できるレベルになってきていると思います。
わずかなコストでデザイン品質を向上できますので、Web制作案件を日常的にこなしているデザイナーや制作会社の方はぜひ一度、検討してみることをおすすめします。