Webフォントとは 使い方や「読み込みが重い？遅い？」に回答

フォントおじさんって何者？

――「フォントおじさん」こと関口さんは、一体何者ですか？

1年半くらい前、ある記事のインタビューがきっかけで、自然発生的に呼ばれるようになったんです。皆さんに呼ばれるようになってから、Google検索の「フォントおじさん」で、検索結果1位を獲得するまでになりました。

――関口さんの経歴を教えてください。

Windows95の発売前にソフトバンク技研（現 ソフトバンク・テクノロジー）に入社しました。入社して最初のプロジェクトがYahoo! JAPANの検索エンジンのDBコンテンツ開発で、リーダーをしていました。その後、某ECモールの運営責任者を経験。現在は、「FONTPLUS」エバンジェリストを務めながら、Webフォント自体の普及、およびフォントの楽しさを伝道する活動もしています。

Webフォントって何？

――Webフォントって何ですか？

仕組みの話は置いておいて、まず実際にWebフォントが使われているサイトをお見せします。

鬼怒川金谷ホテルのサイト（サイトで見る）

使われているWebフォントを切った状態のサイト

上のサイトでは、Cinzelと筑紫Aオールド明朝が使われていますが、Webフォントを切った状態のものと比べると上のサイトの方が、「伝統的な印象」を感じませんか？ Webフォントというのは、サイトの世界観やブランディングにも影響を与えるものなんです。

Webフォントの成り立ち

――確かにそうですね。Webフォントってどのように生まれたのですか？

Webフォント誕生以前にさかのぼりますと、インターネットが普及し始めた1990年代、OSに搭載された「システムフォント」でしか、テキストでの表現ができませんでした。種類も「明朝」と「ゴシック」の2種類くらいしかありませんでした。OSによって、標準フォントが違うので、同じサイトでもmacOS、Windows、Android、iOSで違ったフォントで表示される場合があります。

また、「可愛いフォントを使いたい」「見出しをカッコよくしたい」といった要望があった場合、IllustratorやPhotoshopで画像を作るしかなかったんです。実はその状態が20年近く続いたんですね。

――申し込みボタンも画像で作る時代でしたね。

でも、ブラウザがCSSの@font-faceルールにより、Webフォント対応するようになった2010年頃から少しずつ、Webフォントが使われるようになりました。これに伴って、CSSで表現できるデザインの幅が広がりました。

しかしながら、欧文（アルファベット）に比べて、和文（日本語）は大体2万文字くらいあるんです。全部ダウンロードすると、明朝体の場合、10MBを超えるケースもあります。だから当時、「日本では、流行らない」と懐疑的な意見が多かったのも事実です。

「フォントおじさん」こと、ソフトバンク・テクノロジーの関口浩之さん

――アルファベットに比べると日本語は桁違いに文字が多いですからね。流行らないという気持ちもわかります。

デザインの制約を取り除くという意味では、Webフォントは必要になってくるはずです。ソフトバンク・テクノロジーには、Webフォントをブラウザに表示させる技術がすでにあったんです。それで、「Webフォントの百貨店をつくろうぜ！」って数人で、企画を練って、経営会議に提出したら採用されちゃったんだよね。

――え！ FONTPLUS（フォントプラス）は関口さんが自ら企画したんですか？

そう。デザイナーさんがフォントメーカーと個別に契約するよりも、1社と契約したら全部のフォント使えるようになるって便利じゃん！っていう考えで、スタートしたのが「FONTPLUS（フォントプラス）」なんです。

FONTPLUS（サイトで見る）
サイトのトップは、アクセスする度にデザインが変わる

ソフトバンク・テクノロジーは、エンタープライズ向けサービスの技術会社だから、フォントメーカーに伝手があるわけではありません。でも、企画が通っちゃったから、あの手この手を使って、フォントメーカーに直接説明に行きました。これが2011年のことです。その年には、サービスを開始しています。

――交渉も関口さん自ら行ったんですか？

「Webフォントは新しいマーケットだから、一緒にそのマーケットを作りましょう」と、自ら説明しに行きましたね。その年の2011年7月、フォントメーカー4社と提携し「FONTPLUS」はスタートしました。現在では、13社のフォントメーカーと提携し、欧文1,731書体、和文962書体、その他言語167書体、計2,860書体が利用できるようになりました。

――FONTPLUS以外で、日本語対応しているWebフォントサービスとしては、代表的なものは？

たとえば、次のようなものがあります。

• Adobe Fonts
  https://fonts.adobe.com/
• DynaFont Online
  https://dfo.dynacw.co.jp/
• FontStream
  https://www.font-stream.com/
• Google Fonts + 日本語
  https://googlefonts.github.io/japanese/
• REALTYPE
  https://www.realtype.jp/
• TypeSquare
  https://typesquare.com/ja/

Webフォントって本当に遅いの？

――Webフォントって遅いって言われていますが……。

Webフォントサービスが誕生した当時は、遅い、きれいに出ない、という厳しい言葉は確かにありました。と言うのも、完璧なサービスを時間をかけてリリースするよりも、半分くらい完成した状態でも、とにかく早くサービスをスタートさせて、走りながら改善するというやり方をやっていたので、厳しい言葉も仕方がないことです。

でも、現在では、そんなことありません。遅くなる原因はWebフォントでないことが少なくありません。ちなみに、キヤノンの「キヤノングローバルサイト」は、本文も含めてWebフォントを適用していますが、重く感じられないですよね？

キヤノンのグローバルサイト（サイトで見る）

――遅さはあまり感じませんね。なぜ、Webフォント＝遅いということが言われるようになってしまったのでしょうか？

もちろん、サービス開始直後は遅いこともありましたが、それとは別に考えられる理由とすると、最後にWebフォントがシステムフォントから切り替わるから、Webフォントが悪さをしているように見えるんだと思います。

――と、言いますと？

ちょっと詳しい話になりますが、Webフォントを表示するまでの間に、ブラウザは画像をレンダリングしたり、JavaScriptを走らせたりする、すべてのDOMを読み込んだ後に、Webフォントをシステムフォントから切り替えるんですね。だから、ページ全体の読み込みが長いと、Webフォントが遅いと思われちゃうわけです。

Webパフォーマンスが良いサイトであれば、すぐにWebフォントを表示させることができるんです。

Webフォントを表示させるまでの概念図

――実装の仕方で早くできるってことですか？

Webサイトの状況によって、最適な実装方法は違いますが、パフォーマンスを下げずに実装する方法はあります。軽量化という点では、必要な文字だけ取得するダイナミックサブセッティング方式が一般的に使用されます。

Webページで使っている文字数が、3,000文字程度だったとしても、重複文字を取り除くと、通常、数百文字になります。実際に、この記事の前半部分を計算してみたら、全文字数は3,057字でしたが、重複文字を取り除いた文字数は404字でした。ちなみに、データ容量はゴシック体のWOFF形式^※1で70KBでした。

※1　WOFF（Web Open Font Format）とは、Webページでの表示に用いることを想定して開発されたフォントファイルの形式の一つ。2011年8月にW3CがWeb標準の一つとして勧告した。

なお、ページ全体の読み込みに時間が掛かる場合、WebAPIであらかじめ、サブセットフォントを取得し、CSSの中にBase64で組み込んでしまい、最初のほうでWebフォントを表示させてしまう方法もあります。

Webフォントを選ぶには？

――自分に合ったWebフォントを選ぶにはどうしたらいいですか？

「良いフォントに出会って、どう使われているのか、とにかくたくさんフォントを見て、実際に取り組んでみる」の一言に尽きますが……（笑）。どう選べばいいかわからない、という方のために、FONTPLUSユーザーでよく使われる「Webフォントランキング」というものを作っています。

フォントランキング　5位までのキャプチャ（ページで見る）

――紙の王道書体だとモリサワというイメージですが、なかなか興味深いランキングですね。

現時点の1位は、フォントワークスの筑紫ゴシックというフォントですね。

将来、Webフォント導入事例を全業種で網羅して、サイト属性や業界によって使われる書体の傾向が異なるのか、とか、それぞれの書体の歴史背景や採用事例（Webだけでなく紙の事例も）などのコンテンツも作りたいと思いつつ……。

――そのコンテンツ、ぜひ読みたいですね。期待しています。ちなみに、傾向値とかはありますか？

コーポレートサイトでは、UD系のゴシック体が人気があるという結果があります。フォント分類と、使われている傾向が高いジャンルなどの統計結果のコンテンツもあるといいですね。

SEOにはどうなのよ？

――SEOの観点でWebフォントってどうなのでしょうか？

SEOに関しては、これをすれば大丈夫という答えはありませんよね。大事なことは、テキストで表現すべきところは、画像データで表現するのではなく、テキスト、つまり、Webフォントかシステムフォントで表現すべきだと思うんです。言い換えると、「文字は文字でいてください」ということです。それにより、検索エンジンが探しやすい、マシーンリーダブルなテキスト情報をデザイン性の高い書体で表現できるというのがWebフォントなんです。

もちろん、alt属性でその画像がなんであるかをきちんと表現していればいいのですが、記述漏れや記述間違いする可能性があります。Webフォントはテキストなので、記述ミスは起りづらいです。Webフォントなら、スクリーンリーダーがそのまま読み上げてくれますし、文字色変更は、colorプロパティで簡単に変更できます。つまり、アクセシビリティに対応しやすいというメリットもあります。

取材したWeb担当者Forumの四谷

まとめ

――Webフォントをまだ使っていない人に一言お願いします。

Webフォントにこだわると、ブランディング向上やサイトの世界観を文字で伝えることができます。

人間の脳は0.1秒で、好きか嫌いか、見やすいかどうかを判断していると、言われています。Webも紙もフォントに対する考え方は変わりません。まずは、自分が関わっているWebサイトが、どんなフォントを使用しているか、そして、そのフォントはWebフォントなのか画像データなのか、そして、その書体がサイトブランディングに寄り添っているかなど、1分でもよいので観察することをおすすめします。

※記事初出の時点で画像の一部に誤りがありました。訂正してお詫びいたします。（編集部 4/4 9:00）