税務申告書のレイアウトを考えていたら、なぜかフォントを作っていた話

YouTube: https://www.youtube.com/live/erTWrDBLgIw?feature=share&t=4316

freee申告は税務申告用のサービスで、画面上に表示される申告書の上に値を入力していく機能があります。この機能について、表示される申告書の品質を向上させようというプロジェクトが立ち上がりました。このセッションでは、そのプロジェクトの中で入力文字を明朝体とゴシック体から選べるようにする機能の検証を行った際のフォント調査についてお話しします。

Transcript

1. 税務申告書のレイアウトを考えていたら、 なぜかフォントを作っていた話 nippori 2023年4⽉16⽇
2. ここに円に切り抜いた画像を入れてく ださい nippori #21卒 #freee申告 #Vibes #freeeTechNight #フォントエンジニア #ハリネズミ #フォント #⾳楽 Twitter: @nippori30 freee申告エンジニア / マネージャー
3. 　 ⽬次 • フォント概論 ◦ フォントとは？ ◦ サブセット ◦ グリフ幅 • 税務申告書のフォントを変えたい ◦ 今抱えてる問題点 ◦ フォントの調査 • フォントを作ってみる ◦ サブセット ◦ グリフ幅
4. フォント作ったことある⼈✋
5. 　 フォント概論 — フォントとは？ • フォントは⼀⾔でいうと書体をコンピュータ上で使えるようにした 「ソフトウェア」 • 書体は、統⼀されたデザインの⽂字セット ◦ ⼤きく分類すると、明朝体とかゴシック体とか • 現在、よく使われるのは TrueType と OpenType® のフォント ◦ TrueType は1990年に Apple が発表 ◦ OpenType® は1997年に Microsoft と Adobe が発表 • 最新仕様は OpenType® Specification Version 1.9 で定義されている 歴としたソフトウェアの⼀種 • このセッションはフォントというソフトウェアを対象とした 「フォントエンジニアリング」の世界を覗くセッション OpenType® は Microsoft の登録商標です
6. 　 フォント概論 — サブセット • ⽇本語を含んでいるフォントは重い ◦ Noto Sans CJK JP ▪ Adobe と Google が開発しているフォント ▪ Noto は「No ⾖腐」を表していて、⾖腐はフォントに⽂字がない 時に表⽰される「𰻝」のことで、つまり表⽰されない⽂字がない ことを⽬指したフォント ▪ CJK は Chinese / Japanese / Korean の略で、簡単にいうと これらの3⾔語で使われる漢字が扱えるフォントで、JP 向け字形 ▪ 16.5 MB
7. 　 フォント概論 — サブセット • 軽くするには？ ◦ 16.5 MB は流⽯に Web フォントとして使うには重すぎる ◦ 重さの原因は、No ⾖腐の名前の通り、すごい⽂字がいっぱい 含まれていることにある ◦ であれば、使われる⽂字だけに削った軽量なものを作れば良い じゃないか！ ▪ これが「サブセット」です
8. 　 フォント概論 — サブセット • どのぐらい軽くなるの？ ◦ 例えば Noto Sans CJK JP（16.5 MB）を羅⽣⾨の全⽂が最低限 表⽰できるだけのサブセットを⾏なったフォント
9. 　 フォント概論 — サブセット • どのぐらい軽くなるの？ ◦ 例えば Noto Sans CJK JP（16.5 MB）を羅⽣⾨の全⽂が最低限 表⽰できるだけのサブセットを⾏なったフォント 169 KB 1 ⸻ 100
10. 　 フォント概論 — サブセット • これだけ軽ければ Web でも問題なく使っていける • サブセットは Web フォントを使う時にはよく使われる • Google Fonts でもこのサブセットが使われている ◦ 例えば 10 MB のフォントがあったとして、1 MB ずつの10個の フォントに分割する ◦ CSS の unicode-range を指定してあげることで、分割した10個の うち、使われている⽂字を含んでいるものだけをダウンロードする
11. 　 フォント概論 — グリフ幅 • ⽂字の幅の構成 １２３４５ 仮想ボディ 字⾯枠 サイドベアリング
12. 税務申告書のフォントを変えたい ※ これ以降の内容は品質改善のための調査‧検証内容のため、 プロダクトへの反映を保証するものではありません。
13. 　 税務申告書のフォントを変えたい — 今抱えてる問題点
14. 　 税務申告書のフォントを変えたい — 今抱えてる問題点 • freee申告は申告書の画像を表⽰した上に、値を直接打ち込んでいく 仕組み • ⼊⼒するレイアウトは位置やフォントサイズを⼀個⼀個定義してる • 今のフォントの指定は Web だと割とよく⾒る Helvetica Neue、Helvetica、Arial、sans-serif の順になっている ◦ ⼀般的に、この指定だと macOS では Helvetica Neue、 Windows では Arial になる ◦ またライセンスの問題からサーバサイドで⾏う PDF の出⼒には 別のフォントを使っている ◦ Web と PDF でフォントを統⼀したい！ • 背景になる申告書画像には明朝体とゴシック体の両⽅が使われている ◦ ⼊⼒する⽂字も明朝体とゴシック体の両⽅を使いたい！
15. 　 税務申告書のフォントを変えたい — フォントの調査 • 最初に思ってた必要な要件 ◦ Web でフロントでも使えて、サーバでも⾃由に使えるライセンス ◦ ⽇本語が使えて、明朝体とゴシック体が揃ってる
16. 　 税務申告書のフォントを変えたい — フォントの調査 • BIZ UDP明朝 / BIZ UDPゴシック が良さそう！ ◦ 最初に上がった候補はモリサワが提供している BIZ UD シリーズの フォント ◦ 実際に使ってみた
17. 　 税務申告書のフォントを変えたい — フォントの調査 • BIZ UDP明朝 / BIZ UDPゴシック が良さそう！ ◦ 最初に上がった候補はモリサワが提供している BIZ UD シリーズの フォント ◦ 実際に使ってみた
18. 　 税務申告書のフォントを変えたい — フォントの調査 • BIZ UDP明朝 / BIZ UDPゴシック が良さそう！ ◦ 最初に上がった候補はモリサワが提供している BIZ UD シリーズの フォント ◦ 実際に使ってみた いや、幅違いすぎない？
19. 　 税務申告書のフォントを変えたい — フォントの調査 • 申告書にはあらかじめ桁ごとの枠が書かれているものがある • 数字によって幅が異なると、枠からズレてしまうので困る • BIZ UDP の「P」はプロポーショナルを表していて、⽂字ごとの幅に 合わせた調整が⾏われているため、数字ごとにも幅がバラバラに なっていた（プロポーショナルでも数字の幅は同じフォントもある） • 今まで、なぜこれが起きていなかったのか？
20. 　 税務申告書のフォントを変えたい — フォントの調査 • Helvetica と Arial は全ての数字で同じ幅が使われている • それを数字ごとに幅が異なる BIZ UDP のフォントに変えてみたら ズレが⽣じるようになった • じゃあ、数字が同じ幅の書体にすれば解決！
21. 　 税務申告書のフォントを変えたい — フォントの調査 • Noto Serif / Noto Sans が良さそう！ ◦ 次の候補は Noto シリーズ ◦ 今までの要件を満たしている ◦ 実際に使ってみた
22. 　 税務申告書のフォントを変えたい — フォントの調査 • Noto Serif / Noto Sans が良さそう！ ◦ 次の候補は Noto シリーズ ◦ 今までの要件を満たしている ◦ 実際に使ってみた
23. 　 税務申告書のフォントを変えたい — フォントの調査 • Noto Serif / Noto Sans が良さそう！ ◦ 次の候補は Noto シリーズ ◦ 今までの要件を満たしている ◦ 実際に使ってみた なんかちょっとずつズレてない？
24. 　 税務申告書のフォントを変えたい — フォントの調査 • Noto Serif / Noto Sans は確かに数字の幅は同じだったが、 Helvetica と Arial の幅とは異なっていた • Arial は Helvetica に合わせた幅で作られているので、同じ幅になる • つまり、今までの指定であれば macOS でも Windows でも同じ幅で 表⽰されるようになっていた • フォントを変えたことでズレていた • ちょっとでもズレていると、合わせるための調整が全部の項⽬に 対して必要になるので、それは厳しい
25. 　 税務申告書のフォントを変えたい — フォントの調査 • 最初に思ってた必要な要件 ◦ Web でフロントでも使えて、サーバでも⾃由に使えるライセンス ◦ ⽇本語が使えて、明朝体とゴシック体が揃ってる • 増えた要件 ◦ 数字が全て同じ幅で Helvetica と Arial とも⼀致する • そんな都合の良いフォントは、まあ無い
26. もう、フォント作るしかなくない？
27. 　 フォントを作ってみる — サブセット • フォントを0から作るのは⼤変 ◦ ⽇本語のフォントは2⼈のデザイナーで作ると2‒3年かかる • 既存のフォントを加⼯して作る • 今回は要件的に惜しかった Noto Serif / Noto Sans をベースに 作ってみる • ⼀旦は数字だけ幅があえば問題なさそうなので数字だけの サブセット化したフォントを作る
28. 　 フォントを作ってみる — サブセット • フォントのサブセットには Python のライブラリの fontTools に 含まれる pyftsubset というコマンドが使えます • pyftsubset \ --text='0123456789' \ --output-file='subset.otf' \ NotoSerifJP-Regular.otf • これで数字だけに絞られたフォントにすることが可能です • ただし、これではまだ要件が満たせません ◦ 幅を Helvetica に合わせ、ライセンスの都合上、フォント名を変更 しなければいけません • ちなみにフォントに登録されている⽂字や字形を確認するには AFDKO の fontplot が使える
29. 　 フォントを作ってみる — グリフ幅 • ボディのサイズとサイドベアリングを調整して、Helvetica と⼀致するようにする １２３４５ 仮想ボディ 字⾯枠 サイドベアリング
30. 　 フォントを作ってみる — グリフ幅 import defcon import extractor from ufo2ft import compileOTF def main(): # フォントの読み取り font = defcon.Font() extractor.extractUFO('subset.otf', font) for glyph in font: # グリフ幅を Helvetica に合わせる if glyph.width == 539: glyph.width = 556 glyph.move((9, 0)) compiled_font = compileOTF(font) # ライセンスの都合上、元のフォント名を含めてはいけないためリネーム対応を行う（中略） ... # 保存 compiled_font.save('freee.otf') if __name__ == '__main__': main()
31. 　 フォントを作ってみる — グリフ幅 • UFO（Unified Font Object）と⾔われる、フォントの加⼯に向いて いる形式に変換して操作する ◦ この形式のまま保存することもできて、XML ベースなので⼈でも 読みやすい ◦ 興味がある⼈はみてみると楽しい • UFO にした後に、⽂字の幅を Helvetica に合わせる加⼯をする • 元にしている Noto は SIL Open Font License が適⽤されており、 このライセンスは加⼯して作った新しいフォントに元のフォント名を 含めていはいけない制約があるのでフォント名を変える必要がある
32. 　 フォントを作ってみる — グリフ幅 • できたフォント 元の指定 Noto Serif を加⼯ Noto Sans を加⼯
33. まとめ 実は、フォントづくりはこんなにも⾯⽩い。