Type& 2021、最後のセッションは、関口浩之氏によるプレゼンテーションです。関口氏は、幼い頃から琺瑯（ほうろう）看板の手書き文字に魅せられ、80年代、プリンターやワープロを扱う電機メーカーに在籍したのち、1995年よりソフトバンク技研（現SBテクノロジー）に入社。2011年9月に日本語Webフォントを扱うサービス「Fontplus」を開始しました。現在では日本やアジア圏のフォントメーカー14社の3500書体が使えるWebフォントのプラットフォームに成長。2017年ごろから「フォントおじさん」と呼ばれるようになり、文字の伝道師（エバンジェリスト）として、「Fontplus Day」というコミュニティも運営しています。
このセッションでは、日本語Webフォントの課題を技術的な観点からQ&A形式で楽しく解説していただきました。
A：10年前の日本語Webフォントの表示速度は遅く、サイトにアクセスすると最初にシステムフォントが出て、5秒後ぐらいにWebフォントに置き換わっていました。2013年からWebフォントの配信側の速度が改善し、1秒くらいで表示できるようになりました。
A：Webフォントの実装方法は、大きく分けて二つあります。一つは「セルフホスティング」。自分たちのサーバーにWebフォントを配置する方法です。もう一つは、「ダイナミックサブセッティング」。表示に必要な文字のデータだけをWebフォントサービスのサーバーに取りに行って表示させる方法です。
例えば、
font-family: “FOT-スランプ Std DB” “ヒラギノ角ゴ Pro W3” “ Hiragino Kaku Gothic Pro” “メイリオ”, Meiryo, Osaka, “MS P gosikku“, “MS P Gothic”, sans-serif;
というCSSの場合、先頭からそのフォントがあるかどうかを見ていき、あった場合はそのフォントが表示され、なかったら次のフォントが表示されます。
中国語、日本語、韓国語など収録字数の多い言語では、このサブセッティング方式を活用。フォントに含まれている全データを取ってくるのではなく、表示されている必要な文字データのみを取ってきて表示するのです。
現在、日本語に対応しているWebフォントサービスには以下があります。
- Fontplus
- TypeSquare
- DynaFont
- Realtype
- FontSream
- Adobe Fonts
- Google Fonts
A：30年前のネット黎明期から説明しましょう。イギリス人のティム・バーナーズ＝リー博士がWorld Wide Web（WWW）を1990年に考案。1994年、マサチューセッツ工科大学に着任した直後、World Wide Web Consortium（W3C）を設立。WWWの仕様や指針、標準技術を策定、開発しました。それから今日に至るまで、W3Cが中心となり、Web標準化を継続的にアップデートしてきたことにより、現在のWebタイポグラフィが実現したのです。
日本では1996年4月1日、Yahoo! Japanによって、いつでも誰でもどこからでもインターネットで検索できるようになりました。当時はWindoes95／漢字Talkの時代で、搭載フォントも少なく、Webサイトでは見出しなどの文字を画像にして表現していました。その後、W3Cがいろいろな仕様を定義し、Webフォントが使えるようになりました。つまり、Webの誕生から約20年を経た2010年ごろから、Web上で様々な書体をWebフォントとして表現できるようになったのです。
W3Cの提案を受け、各ブラウザメーカーは実装に向けて努力をしています。Web技術は日々進化しているので、最新技術をキャッチアップしておきましょう。
CSS fonts module
https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/
Requirements for Japanese Text Layout
日本語組版処理の要件
https://www.w3.org/TR/jlreq/
A：できます。以下は縦書きを使ったサイトの一例です。
・宮城県丸森町のWebサイト「まるまるまるもり」
https://marumarumarumori.jp/
・鈴乃屋「衣のいのち」
https://www.suzunoya.com/kinu/
writing-mode: vertical-rl;
縦書き普及率のグラフ。2017年には縦書きが77%増加。
A：Webフォントの使い方が上手な事例をいくつか紹介します。
・株式会社WORDS
https://words-inc.co.jp/
言葉のプロ、伝えるプロとして編集者が企業経営者の発信をサポートする株式会社WORDSのWebサイト。「社長の隣に、編集者を。」というキャッチコピーは、アンチゴチ（漢字がゴシック、仮名が明朝で組まれた、漫画の吹き出しなどで使われているスタイル）ではなく、漢字が明朝（筑紫Aオールド明朝）、仮名がゴシックで組まれている。書体の選定やレイアウトも素晴らしく、表示速度も速い。
・レタースペーシング
https://letter-spacing.mimiguri.co.jp/
今市達也さんが執筆した書籍『レタースペーシング』のWebサイト。たづがね角ゴシックを使用し、文字間調整もきちんと行われている。Webフォントに切り替わる時のチラつきもなく、高い技術力を感じる。
A： いくつか事例を紹介します。
・東京都現代美術館
https://www.mot-art-museum.jp/
美術館内の案内表示で使われている、たづがね角ゴシックのWebフォントをサイトでも使用。
・SUN-AD サン・アド
https://sun-ad.co.jp/
ナビゲーションが縦組みで配置されているが違和感がなく、こぶりなゴシックの雰囲気とも調和している。
そのほかの事例は、「Fontplusギャラリー」参照。
https://gallery.fontplus.jp/
A：Googleが導入したWebの指標。
・LCP（Largest Contentful Paint）ブラウザに表示完了するまでの時間
・FID（First Input Delay）ブラウザ上で最初に操作できるまでにかかる時間
・CLS（Comulative Layout Shift）意図せぬレイアウトのズレがどれだけ起こるか
https://web.dev/i18n/ja/vitals/
コアウェブバイタルの測定結果が「Good」だからSEO的によいというものではありません。悪影響を与える場合もあれば、そうでない場合もあります。表示パフォーマンスが悪い場合、何が原因なのか冷静に正しく判断しましょう。Webフォントが原因でない場合もあります。
「Web Vitals」というプラグインを入れて、実際にサイト表示にかかる時間（LCP）を調べてみました。この旅日記のブログでは0.81秒。全部Webフォントを使っているサイトでも、「Good」という結果が出ています。「表示が遅い」というサイトを調べてみると、約9割はWebフォント以外の要因が原因でした。Webフォントを使うと表示が遅くなるということはないと思います。
A：2017年に企業のWebサイトでWebフォントがどのくらい使われているのかを調べたところ、海外のFortune500企業では95%以上が自社サイトにWebフォントを採用。日本の日経500企業では5%でした。
日本語と欧文言語では文字数が全然違います。欧文は1書体600文字で間に合いますが、日本語は1書体6000〜23000文字あります。2016年まで日本語Webフォントは苦戦していましたが、Windowsでの閲覧環境が改善されたため、その後、普及してきています。
日本語Webフォントが誕生して10年。2017年から日本語Webフォントを取り巻く環境は改善し、大手企業やWeb制作の現場から市民権を得ています。
A：このフォントを使えば大丈夫というフォントはありません。その企業のビジョンやブランド、サイト適性やコンテンツに応じて適材適所の書体選択が重要です。
Context（文脈）× Fonts（書体）
Fontplusフォントランキング
（Fontplusを利用している3万サイトで使われている書体を調査し、使用頻度順に並べたもの）
1位：筑紫ゴシック
2位：筑紫A丸ゴシック
3位：筑紫明朝
質疑応答