日本語Webフォントは「遅い・重い」って思い込んでた……こんなに速くなってたなんて……

Webフォントはすごく進化しているのだ。日本語Webフォントの進化を、表示スピードの向上を中心に取材してきた。

柏木恵子 2015/7/31 7:00 サイト制作／デザイン | 事例／インタビュー

[Sponsored]

Webフォントは重い・遅いと思っていないだろうか。確かにかつてのWebフォント、特に日本語Webフォントはブラウザでの表示が遅く、Webフォントに切り替わるまではシステムフォントが表示されるのも、良いユーザー体験を提供できているとはいえなかった。

しかし、Webフォントはすごく進化しているのだ。実際、このページでは日本語Webフォントを利用しているが、そんなに遅いとは思わなかったのではないだろうか。

日本語Webフォントの進化を、表示スピードの向上を中心に取材してきた。

※このページはTypeSquareの「黎ミン」「新ゴ」「ゴシックMB101」を利用しています。

Webで書体の融通がきかないのは諦めるべきか――Webフォントをおさらい

自社製品のパンフレットやカタログを作る場合には、担当者はどのようなフォントを使うかについてかなり深く考えるものだ。自社製品のイメージに合うのはどのような書体か、どのような書体で表現すれば自社のサービスのメリットを訴求できるか、十分に検討してフォントを選んでいるはずだ。

ところが、それがWebサイトになった途端に、書体については諦めるのがほとんどだ。Webはそもそも書体の融通がきかないのだからとデバイスフォントで表示するか、どうしてもイメージ通りの表現をしたければテキストを画像にして使う。しかし、画像で作った見出しは修正が大変だし、スマホやタブレットでピンチアウトで拡大すると、画像の解像度が不足してジャギーが出ることもある。デバイスフォントでは物足りないが、画像にするとデメリットが大きい。そんな時に使えるのがWebフォントだ。

Webフォントなら画像と違って拡大してもジャギーが出ない

デバイスフォントとWebフォントのサンプル比較

Webフォントは、フォントベンダーのサーバにあるフォントを閲覧者のブラウザにダウンロードさせて表示するものだ。画像ではなくWebフォントを使うことによるメリットには、次のようなものがある。

【サイトオーナー企業のメリット】

紙の印刷物と同じフォントを使い、イメージを統一できる
リキッドレイアウト、レスポンシブデザインのページでもデザインが崩れない
画面解像度を気にすることなく、高品質な表示が可能
テキストなので音声読み上げや自動翻訳の機能が使え、アクセシビリティが向上する

【制作サイドのメリット】

画像を修正するのは手間がかかるが、テキストなので修正は簡単
A/Bテストも簡単にできるようになる
SEOのためのalt属性などを指定する必要がない

ちなみに、Webサイトのマルチデバイス対応は当たり前のことだが、MacとWindowsではデフォルトの書体が違うため、文字送りのピッチが異なる。このため、文章を表示する幅をピクセル指定しても、改行位置が違うことがある。せっかくきれいに揃えたつもりが、一文字あふれていてがっかりということになるのだが、Webフォントならばどのデバイスでも同じように、制作者が意図した通りに表示される。

日本語Webフォントは遅い……!?

しかし、Webの経験が長い人ほど、こう思うかもしれない。

でも、Webフォントは遅いと言われていたけれど、大丈夫なの？

もともとWebフォントは、サーバーにあるフォントファイルをインターネット越しにまるごとダウンロードし、ブラウザに表示する仕組みのことだ。欧文書体の場合はサイズが小さく、200KB～1MB程度とページに使用される画像と変わらないため、全てのフォントをダウンロードしても表示に違和感がない。

しかし、日本語を含めたアジア圏の文字は、文字数が膨大なため、フォントでファイルのサイズが小さなものでも3MB、大きなものでは10MBを超えることもある。このため、全てのフォントをダウンロードさせるのは現実的ではない。

Webフォントはもう遅くない

モリサワが2012年2月にサービスを開始したWebフォント「TypeSquare」は、当初はテストした制作会社から「表示速度がすごく遅い」「デバイスフォントが表示されてからWebフォントに切り替わるときにちらつきがある」「これではクライアントに提案できない」という声が寄せられた。

しかし、2014年7月にスピードアップのための改善を行い、それ以降は「使い物になる」と採用事例も増えている。

改善の内容は、主に以下の3点だ。

サブセット化エンジンの最適化／高速化
ブラウザキャッシュの利用
CDNの利用

まず考えたのが、Webページに使用されている文字だけをダウンロードさせる「サブセット化」だ。

仕組みはこうである。

Webページで使用されている文字を抽出する（JavaScriptによりブラウザ側で行う）
抽出結果をモリサワのサーバーに送り、サーバーでその文字をサブセット化する
サブセットフォントをブラウザにダウンロードする

このうち①と②は、欧文フォントにはない動作だ。このため、欧文のWebフォントに比べると、日本語のWebフォントは表示に時間がかかったのだ。

また、先ほどの改善点の中で一番効いているのはCDN（コンテンツ配信ネットワーク）の利用だ。TypeSquare側にCDNを置きサーバーキャッシュを使うようになったことで、同じサイトの同じコンテンツであればフォントをまるごと持ってくるのと同じような動作をするようになった。当然ブラウザによって異なるが、モリサワでは「最大７.１倍の高速化」としている。つまり、

確かに数年前にはWebフォントが遅れて表示されるのを気付かせないためにスクリプトを書くなどの工夫が必要だったが、今はほとんど意識する必要はない

ということなのだ。

商品イメージに合ったブランディング強化

TypeSquareのサイトには導入事例がたくさん載っているので見てもらえばわかるが、大手企業の顔となるようなサイトでも使われている。遅くて違和感があるようなら、採用には至っていないだろう。事例として公開されていない企業も数多くあり、業種としては百貨店やスーパーなどの小売業、化粧品やアパレルなどファッション関連メーカー、家電や自動車といった大手の製造業と幅広い。使い方として一番多いのは、ブランディングサイトでの利用だ。

例えば、4Kテレビのサイトは、きれいな映像を流すのが製品の特長なのだからWebもきれいにということだ。また、メディア系では、紙の雑誌と同じフォントをWebでも使うとか、強い主張を持っているオピニオンサイトでフォントによってそれを強調したいという場合にも使われている。

さらに季節商品のサイトの場合は、サイトリニューアルのタイミングとスピードが重要になる。例えば暖房器具ならば出荷のピークは11月だ。そこに合わせて、8～9月にサイトリニューアルを行う。あるサイトでは、リニューアルに合わせてレスポンシブ対応とWebフォントの導入を行った。このサイトは文字が多く、制作会社からは

最終段階で大量の修正が入ったので、もし画像で作っていたらローンチに間に合わなかったかもしれない。Webフォントのファンになった

とのコメントも寄せられている。

株式会社ロフトワーク　シニアディレクター　濱田真一氏からのコメント

工学院大学

日本語のWebフォントを検討する上で、品質面からも安心して提案できるのがモリサワのTypeSquareです。

3年ほど前に「工学院大学」のWebリニューアルで採用したときは読み込みの時間なども懸念されたのですが、最近表示が格段に速くなったことを実感しています。

クライアントによってはレギュレーションで推奨書体が設定されていることもあるのですが、そういった場合でもWebフォントを使うことでブランドイメージの統一感を出しやすいのもよいですね。

導入サイトの特徴としてもうひとつ挙げるなら、それほどPV数が多くないサイトである。というのも、PV数によって価格が変わるため、年間1,000万PV程度のサイトならかなり導入しやすい価格帯となるからだ。

1,200万PV／年なら月額4,000円

導入方法は簡単だ。

TypeSquareサイトの「ご利用申し込み」から会員登録し、プランを購入。
マイページから専用タグを入手し、HTMLファイルの<head>内に記述。
クラウドフォントを適用したいテキストに、CSSのfont-familyでフォント名を指定。
マイページ内で利用するサイトのURLを登録。ここに登録していないページにWebフォントを指定しても、フォントはダウンロードされない。

TypeSquareサイト

価格体系は、次の通り。年間が1,200万PV以内であれば、全書体使用可能で月額4,000円と手頃な価格だ。

モリサワのWebフォント TypeSquareのスタンダードプラン

簡単にクラウドフォントをご利用いただけるプランです。

スクリプトタグを挿入し、書体名を指定するだけで、サイト内に必要な文字が自動検知され、クラウド上から閲覧環境に最適なフォントが配信されます。

表示価格は税込です。PV=ページビュー

スタンダード	無料	I	II
月契約	0円	2,160円/月	4,320円/月
基本PV	1万PV/月	25万PV/月超過10万PVごとに 540円加算	100万PV/月超過10万PVごとに 540円加算
利用可能書体数	1	3	全書体
利用可能ドメイン数	1	2	5
TypeSquare API	—	—	ご利用可能
年契約	—	25,920円/年	51,840円/年
年契約時の基本 PV	—	300万PV/年	1,200万PV/年
追加オプション
1 書体追加	—	540円/月	—
1 ドメイン追加	—	540円/月	540円/月

月契約の場合、フォントの配信が基本PVを超えると超過料金が発生します。
利用可能書体数は全書体のうち、一度に利用可能な書体数です。制限数のなかであれば全書体の中から何度でも変更は可能です。また、オプションにて利用数を追加することも可能です（有償）。
利用可能ドメイン数は、一度に登録、利用可能なURLの数です。制限数のなかであれば何度でも変更は可能です。また、オプションにて利用数を追加することも可能です（有償）。
スタンダード無料プランは、毎月1万PVまでフォントが配信され、超過した場合は翌月までフォントは配信されません。
スタンダードプランの基本PVは、TypeSquareを利用するすべてのドメインの合算値です。
TypeSquare API は、書体リストの取得、フォントの非同期呼び出しなどが可能で、幅広いコンテンツにご利用いただけます。詳しくはリファレンスページをご覧ください。

法人向け対応のアドバンスドプランもある

年間契約であれば、繁忙シーズンだけ突出してPV数が多い場合でも、年間で1,200万PVに収まればいい。これを大きく超えるような大規模サイトであれば、個別契約のアドバンスドプランがある。

クレジットカード払いや銀行振込などの支払い方法では対応が難しい法人の場合でも、アドバンスドプランならばプランや見積、請求書ベースの支払いまで担当の営業の方が対応してくれる。

また、数億PVを超える大規模なサイトやカスタマイズフォント、他言語対応などの相談も可能だ。

アドバンスドプランや支払い方法に関する問い合わせはこちらで受付けている。

MORISAWA PASSPORTを契約すれば年間1000万PVまで利用可能

また、印刷物でモリサワのフォントを使っている場合、MORISAWA PASSPORTの契約がされているはずだ。この契約には、MORISAWA PASSPORTプランというTypeSquareの利用ライセンスが含まれている。全書体利用可能で、年間1,000万PVまで使用できる。これでまかなえてしまうサイトもけっこうあるはずだ。もしWebの担当部署と印刷物の担当部署が異なる場合は、確認してみてほしい。

MORISAWA PASSPORTプラン

すべてのMORISAWA PASSPORT製品ご契約者に、追加料金なくTypeSquareをご利用いただけるプランです。

クラウド配信によるWebフォント利用（スタンダードプランの仕様に準じます）

利用可能書体数、利用可能ドメイン数に制限はありません。
1,000万PV/年を超過するとフォントの配信は停止します。1,000万PV/年を超える規模でご利用になる場合は、別途TypeSquareで該当するプランをご購入ください。
Webフォントを更に活用できる「TypeSquare API」もご利用いただけます。

セルフホスティングによるWebフォント利用（セルフホスティングプランの仕様に準じます）

利用可能書体数に制限はありません。
1,000万PV/年を超過するとフォントの配信は停止します。1,000万PV/年を超える規模でご利用になる場合や、2つ以上のドメインでご利用になる場合は、別途TypeSquareで該当するプランをご購入ください。

【対象製品】: MORISAWA PASSPORT
MORISAWA PASSPORT ONE
教育機関向けMORISAWA PASSPORT
公共団体向けMORISAWA PASSPORT
MORISAWA PASSPORT アカデミック版
MORISAWA PASSPORT アカデミック版(モリサワ認定校用)
各製品の詳細はこちらをご覧ください。

MORISAWA PASSPORTプランの詳細はこちらから。