Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウェブフォント今昔物語
Search
takanorip
November 15, 2019
Technology
5
4.7k
ウェブフォント今昔物語
takanorip
November 15, 2019
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
390
Bulletproof Design System with TypeScript
takanorip
6
3.8k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
150
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
910
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
7.3k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
460
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.9k
Other Decks in Technology
See All in Technology
【Λ(らむだ)】最近のアプデ情報 / RPALT20250729
lambda
0
210
Gemini in Android Studio - Google I/O Bangkok '25
akexorcist
0
170
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.4k
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
170
AI時代の知識創造 ─GeminiとSECIモデルで読み解く “暗黙知”と創造の境界線
nyagasan
0
190
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
360
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
260
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
190
AIに全任せしないコーディングとマネジメント思考
kikuchikakeru
0
390
TypeScript 上達の道
ysknsid25
23
5.1k
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
670
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Faster Mobile Websites
deanohume
308
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Music & Morning Musume
bryan
46
6.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Scaling GitHub
holman
461
140k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Site-Speed That Sticks
csswizardry
10
740
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Transcript
ウェブフォント今昔物語 2019.11.16 Takanori Oki @フロントエンドカンファレンス福岡2019 Copyright © 2019 FOLIO, Ltd.
All Rights Reserved.
自己紹介 • 株式会社FOLIO フロントエンドエンジニア • React / Nuxt.js / Web
Components / etc… • フォントとFigmaが好き • 好きなフォントは新ゴ、Futura、源柔ゴシック、 機械彫刻用標準書体 • ウェブフォントの本書いてます 2
誰でもつかえる! ウェブフォント 実践マニュアル 3
株式会社FOLIO 4
株式会社FOLIO • 「ワクワクする投資、はじめよう!」 • オンライン証券の会社 • LINE Financial株式会社と共同で 「LINEスマート投資」を運営 •
フロントエンドの技術スタックは React, Redux, Flow, etc… 5
目次 • ウェブフォントって何? • 3つの視点から考えるウェブフォントのあれこれ - ユーザー - デザイナー -
エンジニア • まとめ 6
今回みなさんに伝えたいこと
X ウェブフォントはこわくない! 8
ウェブフォントって何?
X 10 ここに書いてあるよ!
What is “Web Font”? 11 サーバーに フォントデータを アップロード サーバーから フォントデータを
取得して表⽰
昔の ウェブフォント 12 フォントデータが重い 日本語フォントの バリエーションが少ない
日本語フォントが 重い理由 • 文字数が多い • グリフが複雑 13
今の ウェブフォント • 日本語ウェブフォントはたしかに重いけど 実装を工夫することでそれを回避できるようになっ てきた - 「エンジニア」のところで詳しく解説 • 日本語フォントのバリエーションが格段に増えた
- 日本語フォントを取り扱う ウェブフォント配信サービスの増加 - Google Fonts、Adobe Fonts、 TypeSquare、FONTPLUS、etc… 14
3つの視点から考える ウェブフォントのあれこれ
3つの視点 16 エンジニア ユーザー デザイナー
X ユーザー目線 17
X よくあるユーザーの声 18
ユーザー目線 「読み込みが遅い、フォントデータが重い、 ムダに通信量を消費しないでほしい」 19
ユーザー目線 • 読み込みが遅い - ユーザーに遅さを感じさせない実装をする必要が ある、ごめん • フォントデータが重い - これはまじごめん致し方ない、これでも前より
軽くなってる • ムダに通信量を消費しないでほしい - Google Fonts使えばユーザーの通信量を ムダにしない 20
ウェブフォントが ユーザーに 提供できること • 可読性の向上 - フォントと可読性は密接に関係している - ディスレクシア(読字障害)や弱視などの障害を持 つ人にとって読みやすいフォントを選択する
ことは非常に重要 • 株式会社モリサワがいくつかレポート出してるので、 興味がある人は読んでみて - https://www.morisawa.co.jp/fonts/udfont/ study/ 21
X デザイナー目線 22
デザイナー目線 • デザインの幅が広がる - フォントで全体の印象が大きく変わる - 全体のデザインを考える上で欠かせない要素 • デバイスやOSに関係なく同じデザインを提供できる -
そもそも、特定のOSにしか搭載されてないフォント でデザイン考えるのおかしくない? 23
デザイナー目線 デザイナーにメリットしかない! 24
注意点 • ライセンスでウェブフォントとしての利用が 禁止されてる場合があるので注意が必要 • ライセンス周りはかなりややこしいので 配信サービスを使うのが安全 • ウェブフォントとして使うには 「フォントの改変」「再配布」の許可が必要
25
X エンジニア目線 26
エンジニア目線 「重い。ちらつく。なんかよくわからない。 時間かけたくない。必要あるの?」 27
エンジニア目線 Googleが書いている 「ウェブフォントの最適化」を実践する https://developers.google.com/web/fundamentals/ performance/optimizing-content-efficiency/webfont- optimization?hl=ja 28
ウェブフォントで 使われる技術 • WOFF2形式での圧縮 • ダイナミックサブセット、ユニコードサブセット • Font Loading API
• CSSのfont-displayプロパティ • Service Workerを用いたキャッシュ戦略 • <link rel=“preload"> 29
ウェブフォント圧縮形式の歴史 30 WOFF WebOpenFontFormat 2009年に公開された ウェブフォント用の圧縮形式。 zlibを使用して圧縮されている。 TTF TrueTypeFont 一般的なフォントファイル。
自前で圧縮する必要がある。 WOFF2 WebOpenFontFormat2 Brotliという圧縮アルゴリズムを 使用した新しい圧縮形式。 WOFFと比較して約30%軽い。
Noto Sans CJK JP Regularのサイズ比較 31 TTF WOFF WOFF2 ファイルサイズ
0MB 5MB 10MB 15MB 20MB 10.7MB 13.7MB 16.4MB
ダイナミック サブセット • フォントを動的にサブセットする手法 • メリット - そのページで使われてる文字しかダウンロード されないのでフォントデータを軽くできる •
デメリット - ページ読み込み時にJavaScriptを実行するので 環境によっては使えない可能性がある - SPAや動的に表示が変わるUIと相性が悪い 32
FOUTを抑止する方法 33
FOUT • Flash of Unstyled Text - ウェブフォントのスタイルがあたってない文字が チラ見えしてしまうこと •
対策を怠るとプロダクトの体験が悪くなる • デザイナーとコミュニケーションをとりベストな方 法を探す! 34
FOUTの仕組み 35 リクエスト HTMLダウンロード DOM構築 CSSOM構築 ファーストペイント テキスト表示 CSSダウンロード フォントダウンロード
この間テキストにデバイスフォントが適用されて見える
主な解決策 • Font Loading APIでフォントの読み込みを監視、 読み込み完了するまでローディング画面を 表示するなどの制御を加える • CSSのfont-displayプロパティで表示の タイミングをコントロールする
36
Font Loading APIでフォントのロードを監視 37
まとめ
X ウェブフォントはユーザーに とってメリットがある 39
X 最新の技術を使って 使いにくさ、表示の問題を解決できる 仕組みが整いつつある 40
X 日本語ウェブフォントを 広めていきましょう! 41
Thank you.