ウェブフォント今昔物語

Transcript

1. ウェブフォント今昔物語
   2019.11.16 Takanori Oki @フロントエンドカンファレンス福岡2019
   Copyright © 2019 FOLIO, Ltd. All Rights Reserved.
   

   View Slide

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

   View Slide

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

   View Slide

4. 株式会社FOLIO
   4
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. ウェブフォントって何？
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. X
    ユーザー目線
    17
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. X
    デザイナー目線
    22
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. X
    エンジニア目線
    26
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. FOUTを抑止する方法
    33
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. まとめ
    

    View Slide

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

    View Slide

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

    View Slide

41. X
    日本語ウェブフォントを
    広めていきましょう！
    41
    

    View Slide

42. Thank you.
    

    View Slide