ウェブフォント今昔物語

Slide 1

Slide 1 text

Slide 2

Slide 2 text

自己紹介 • 株式会社FOLIO フロントエンドエンジニア • React / Nuxt.js / Web Components / etc… • フォントとFigmaが好き • 好きなフォントは新ゴ、Futura、源柔ゴシック、機械彫刻用標準書体 • ウェブフォントの本書いてます 2

Slide 3

Slide 3 text

誰でもつかえる! ウェブフォント実践マニュアル 3

Slide 4

Slide 4 text

株式会社FOLIO 4

Slide 5

Slide 5 text

株式会社FOLIO • 「ワクワクする投資、はじめよう！」 • オンライン証券の会社 • LINE Financial株式会社と共同で「LINEスマート投資」を運営 • フロントエンドの技術スタックは React, Redux, Flow, etc… 5

Slide 6

Slide 6 text

目次 • ウェブフォントって何？ • 3つの視点から考えるウェブフォントのあれこれ - ユーザー - デザイナー - エンジニア • まとめ 6

Slide 7

Slide 7 text

今回みなさんに伝えたいこと

Slide 8

Slide 8 text

X ウェブフォントはこわくない！ 8

Slide 9

Slide 9 text

ウェブフォントって何？

Slide 10

Slide 10 text

X 10 ここに書いてあるよ！

Slide 11

Slide 11 text

What is “Web Font”? 11 サーバーにフォントデータをアップロードサーバーからフォントデータを取得して表⽰

Slide 12

Slide 12 text

昔のウェブフォント 12 フォントデータが重い日本語フォントのバリエーションが少ない

Slide 13

Slide 13 text

日本語フォントが重い理由 • 文字数が多い • グリフが複雑 13

Slide 14

Slide 14 text

今のウェブフォント • 日本語ウェブフォントはたしかに重いけど実装を工夫することでそれを回避できるようになってきた - 「エンジニア」のところで詳しく解説 • 日本語フォントのバリエーションが格段に増えた - 日本語フォントを取り扱うウェブフォント配信サービスの増加 - Google Fonts、Adobe Fonts、 TypeSquare、FONTPLUS、etc… 14

Slide 15

Slide 15 text

3つの視点から考えるウェブフォントのあれこれ

Slide 16

Slide 16 text

3つの視点 16 エンジニアユーザーデザイナー

Slide 17

Slide 17 text

X ユーザー目線 17

Slide 18

Slide 18 text

X よくあるユーザーの声 18

Slide 19

Slide 19 text

ユーザー目線「読み込みが遅い、フォントデータが重い、ムダに通信量を消費しないでほしい」 19

Slide 20

Slide 20 text

ユーザー目線 • 読み込みが遅い - ユーザーに遅さを感じさせない実装をする必要がある、ごめん • フォントデータが重い - これはまじごめん致し方ない、これでも前より軽くなってる • ムダに通信量を消費しないでほしい - Google Fonts使えばユーザーの通信量をムダにしない 20

Slide 21

Slide 21 text

ウェブフォントがユーザーに提供できること • 可読性の向上 - フォントと可読性は密接に関係している - ディスレクシア（読字障害）や弱視などの障害を持つ人にとって読みやすいフォントを選択することは非常に重要 • 株式会社モリサワがいくつかレポート出してるので、興味がある人は読んでみて - https://www.morisawa.co.jp/fonts/udfont/ study/ 21

Slide 22

Slide 22 text

X デザイナー目線 22

Slide 23

Slide 23 text

デザイナー目線 • デザインの幅が広がる - フォントで全体の印象が大きく変わる - 全体のデザインを考える上で欠かせない要素 • デバイスやOSに関係なく同じデザインを提供できる - そもそも、特定のOSにしか搭載されてないフォントでデザイン考えるのおかしくない？ 23

Slide 24

Slide 24 text

デザイナー目線デザイナーにメリットしかない！ 24

Slide 25

Slide 25 text

注意点 • ライセンスでウェブフォントとしての利用が禁止されてる場合があるので注意が必要 • ライセンス周りはかなりややこしいので配信サービスを使うのが安全 • ウェブフォントとして使うには「フォントの改変」「再配布」の許可が必要 25

Slide 26

Slide 26 text

X エンジニア目線 26

Slide 27

Slide 27 text

エンジニア目線「重い。ちらつく。なんかよくわからない。時間かけたくない。必要あるの？」 27

Slide 28

Slide 28 text

エンジニア目線 Googleが書いている「ウェブフォントの最適化」を実践する https://developers.google.com/web/fundamentals/ performance/optimizing-content-efﬁciency/webfont- optimization?hl=ja 28

Slide 29

Slide 29 text

ウェブフォントで使われる技術 • WOFF2形式での圧縮 • ダイナミックサブセット、ユニコードサブセット • Font Loading API • CSSのfont-displayプロパティ • Service Workerを用いたキャッシュ戦略 • 29

Slide 30

Slide 30 text

ウェブフォント圧縮形式の歴史 30 WOFF WebOpenFontFormat 2009年に公開されたウェブフォント用の圧縮形式。 zlibを使用して圧縮されている。 TTF TrueTypeFont 一般的なフォントファイル。自前で圧縮する必要がある。 WOFF2 WebOpenFontFormat2 Brotliという圧縮アルゴリズムを使用した新しい圧縮形式。 WOFFと比較して約30%軽い。

Slide 31

Slide 31 text

Noto Sans CJK JP Regularのサイズ比較 31 TTF WOFF WOFF2 ファイルサイズ 0MB 5MB 10MB 15MB 20MB 10.7MB 13.7MB 16.4MB

Slide 32

Slide 32 text

ダイナミックサブセット • フォントを動的にサブセットする手法 • メリット - そのページで使われてる文字しかダウンロードされないのでフォントデータを軽くできる • デメリット - ページ読み込み時にJavaScriptを実行するので環境によっては使えない可能性がある - SPAや動的に表示が変わるUIと相性が悪い 32

Slide 33

Slide 33 text

FOUTを抑止する方法 33

Slide 34

Slide 34 text

FOUT • Flash of Unstyled Text - ウェブフォントのスタイルがあたってない文字がチラ見えしてしまうこと • 対策を怠るとプロダクトの体験が悪くなる • デザイナーとコミュニケーションをとりベストな方法を探す！ 34

Slide 35

Slide 35 text

FOUTの仕組み 35 リクエスト HTMLダウンロード DOM構築 CSSOM構築ファーストペイントテキスト表示 CSSダウンロードフォントダウンロードこの間テキストにデバイスフォントが適用されて見える

Slide 36

Slide 36 text

主な解決策 • Font Loading APIでフォントの読み込みを監視、読み込み完了するまでローディング画面を表示するなどの制御を加える • CSSのfont-displayプロパティで表示のタイミングをコントロールする 36

Slide 37

Slide 37 text

Font Loading APIでフォントのロードを監視 37

Slide 38

Slide 38 text

まとめ

Slide 39

Slide 39 text

X ウェブフォントはユーザーにとってメリットがある 39

Slide 40

Slide 40 text

X 最新の技術を使って使いにくさ、表示の問題を解決できる仕組みが整いつつある 40