Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

にっぽり

April 16, 2023
Tweet

More Decks by にっぽり

Other Decks in Programming

Transcript

  1. 税務申告書のレイアウトを考えていたら、
    なぜかフォントを作っていた話
    nippori
    2023年4⽉16⽇

    View full-size slide

  2. ここに円に切り抜いた画像を入れてく
    ださい
    nippori
    #21卒 #freee申告 #Vibes #freeeTechNight
    #フォントエンジニア
    #ハリネズミ #フォント #⾳楽
    Twitter: @nippori30
    freee申告エンジニア / マネージャー

    View full-size slide

  3.  
    ⽬次
    ● フォント概論
    ○ フォントとは?
    ○ サブセット
    ○ グリフ幅
    ● 税務申告書のフォントを変えたい
    ○ 今抱えてる問題点
    ○ フォントの調査
    ● フォントを作ってみる
    ○ サブセット
    ○ グリフ幅

    View full-size slide

  4. フォント作ったことある⼈✋

    View full-size slide

  5.  
    フォント概論 — フォントとは?
    ● フォントは⼀⾔でいうと書体をコンピュータ上で使えるようにした
    「ソフトウェア」
    ● 書体は、統⼀されたデザインの⽂字セット
    ○ ⼤きく分類すると、明朝体とかゴシック体とか
    ● 現在、よく使われるのは TrueType と OpenType® のフォント
    ○ TrueType は1990年に Apple が発表
    ○ OpenType® は1997年に Microsoft と Adobe が発表
    ● 最新仕様は OpenType® Specification Version 1.9 で定義されている
    歴としたソフトウェアの⼀種
    ● このセッションはフォントというソフトウェアを対象とした
    「フォントエンジニアリング」の世界を覗くセッション
    OpenType® は Microsoft の登録商標です

    View full-size slide

  6.  
    フォント概論 — サブセット
    ● ⽇本語を含んでいるフォントは重い
    ○ Noto Sans CJK JP
    ■ Adobe と Google が開発しているフォント
    ■ Noto は「No ⾖腐」を表していて、⾖腐はフォントに⽂字がない
    時に表⽰される「𰻝」のことで、つまり表⽰されない⽂字がない
    ことを⽬指したフォント
    ■ CJK は Chinese / Japanese / Korean の略で、簡単にいうと
    これらの3⾔語で使われる漢字が扱えるフォントで、JP 向け字形
    ■ 16.5 MB

    View full-size slide

  7.  
    フォント概論 — サブセット
    ● 軽くするには?
    ○ 16.5 MB は流⽯に Web フォントとして使うには重すぎる
    ○ 重さの原因は、No ⾖腐の名前の通り、すごい⽂字がいっぱい
    含まれていることにある
    ○ であれば、使われる⽂字だけに削った軽量なものを作れば良い
    じゃないか!
    ■ これが「サブセット」です

    View full-size slide

  8.  
    フォント概論 — サブセット
    ● どのぐらい軽くなるの?
    ○ 例えば Noto Sans CJK JP(16.5 MB)を羅⽣⾨の全⽂が最低限
    表⽰できるだけのサブセットを⾏なったフォント

    View full-size slide

  9.  
    フォント概論 — サブセット
    ● どのぐらい軽くなるの?
    ○ 例えば Noto Sans CJK JP(16.5 MB)を羅⽣⾨の全⽂が最低限
    表⽰できるだけのサブセットを⾏なったフォント
    169 KB 1

    100

    View full-size slide

  10.  
    フォント概論 — サブセット
    ● これだけ軽ければ Web でも問題なく使っていける
    ● サブセットは Web フォントを使う時にはよく使われる
    ● Google Fonts でもこのサブセットが使われている
    ○ 例えば 10 MB のフォントがあったとして、1 MB ずつの10個の
    フォントに分割する
    ○ CSS の unicode-range を指定してあげることで、分割した10個の
    うち、使われている⽂字を含んでいるものだけをダウンロードする

    View full-size slide

  11.  
    フォント概論 — グリフ幅
    ● ⽂字の幅の構成
    12345
    仮想ボディ
    字⾯枠
    サイドベアリング

    View full-size slide

  12. 税務申告書のフォントを変えたい
    ※ これ以降の内容は品質改善のための調査‧検証内容のため、
    プロダクトへの反映を保証するものではありません。

    View full-size slide

  13.  
    税務申告書のフォントを変えたい — 今抱えてる問題点

    View full-size slide

  14.  
    税務申告書のフォントを変えたい — 今抱えてる問題点
    ● freee申告は申告書の画像を表⽰した上に、値を直接打ち込んでいく
    仕組み
    ● ⼊⼒するレイアウトは位置やフォントサイズを⼀個⼀個定義してる
    ● 今のフォントの指定は Web だと割とよく⾒る
    Helvetica Neue、Helvetica、Arial、sans-serif の順になっている
    ○ ⼀般的に、この指定だと macOS では Helvetica Neue、
    Windows では Arial になる
    ○ またライセンスの問題からサーバサイドで⾏う PDF の出⼒には
    別のフォントを使っている
    ○ Web と PDF でフォントを統⼀したい!
    ● 背景になる申告書画像には明朝体とゴシック体の両⽅が使われている
    ○ ⼊⼒する⽂字も明朝体とゴシック体の両⽅を使いたい!

    View full-size slide

  15.  
    税務申告書のフォントを変えたい — フォントの調査
    ● 最初に思ってた必要な要件
    ○ Web でフロントでも使えて、サーバでも⾃由に使えるライセンス
    ○ ⽇本語が使えて、明朝体とゴシック体が揃ってる

    View full-size slide

  16.  
    税務申告書のフォントを変えたい — フォントの調査
    ● BIZ UDP明朝 / BIZ UDPゴシック が良さそう!
    ○ 最初に上がった候補はモリサワが提供している BIZ UD シリーズの
    フォント
    ○ 実際に使ってみた

    View full-size slide

  17.  
    税務申告書のフォントを変えたい — フォントの調査
    ● BIZ UDP明朝 / BIZ UDPゴシック が良さそう!
    ○ 最初に上がった候補はモリサワが提供している BIZ UD シリーズの
    フォント
    ○ 実際に使ってみた

    View full-size slide

  18.  
    税務申告書のフォントを変えたい — フォントの調査
    ● BIZ UDP明朝 / BIZ UDPゴシック が良さそう!
    ○ 最初に上がった候補はモリサワが提供している BIZ UD シリーズの
    フォント
    ○ 実際に使ってみた
    いや、幅違いすぎない?

    View full-size slide

  19.  
    税務申告書のフォントを変えたい — フォントの調査
    ● 申告書にはあらかじめ桁ごとの枠が書かれているものがある
    ● 数字によって幅が異なると、枠からズレてしまうので困る
    ● BIZ UDP の「P」はプロポーショナルを表していて、⽂字ごとの幅に
    合わせた調整が⾏われているため、数字ごとにも幅がバラバラに
    なっていた(プロポーショナルでも数字の幅は同じフォントもある)
    ● 今まで、なぜこれが起きていなかったのか?

    View full-size slide

  20.  
    税務申告書のフォントを変えたい — フォントの調査
    ● Helvetica と Arial は全ての数字で同じ幅が使われている
    ● それを数字ごとに幅が異なる BIZ UDP のフォントに変えてみたら
    ズレが⽣じるようになった
    ● じゃあ、数字が同じ幅の書体にすれば解決!

    View full-size slide

  21.  
    税務申告書のフォントを変えたい — フォントの調査
    ● Noto Serif / Noto Sans が良さそう!
    ○ 次の候補は Noto シリーズ
    ○ 今までの要件を満たしている
    ○ 実際に使ってみた

    View full-size slide

  22.  
    税務申告書のフォントを変えたい — フォントの調査
    ● Noto Serif / Noto Sans が良さそう!
    ○ 次の候補は Noto シリーズ
    ○ 今までの要件を満たしている
    ○ 実際に使ってみた

    View full-size slide

  23.  
    税務申告書のフォントを変えたい — フォントの調査
    ● Noto Serif / Noto Sans が良さそう!
    ○ 次の候補は Noto シリーズ
    ○ 今までの要件を満たしている
    ○ 実際に使ってみた
    なんかちょっとずつズレてない?

    View full-size slide

  24.  
    税務申告書のフォントを変えたい — フォントの調査
    ● Noto Serif / Noto Sans は確かに数字の幅は同じだったが、
    Helvetica と Arial の幅とは異なっていた
    ● Arial は Helvetica に合わせた幅で作られているので、同じ幅になる
    ● つまり、今までの指定であれば macOS でも Windows でも同じ幅で
    表⽰されるようになっていた
    ● フォントを変えたことでズレていた
    ● ちょっとでもズレていると、合わせるための調整が全部の項⽬に
    対して必要になるので、それは厳しい

    View full-size slide

  25.  
    税務申告書のフォントを変えたい — フォントの調査
    ● 最初に思ってた必要な要件
    ○ Web でフロントでも使えて、サーバでも⾃由に使えるライセンス
    ○ ⽇本語が使えて、明朝体とゴシック体が揃ってる
    ● 増えた要件
    ○ 数字が全て同じ幅で Helvetica と Arial とも⼀致する
    ● そんな都合の良いフォントは、まあ無い

    View full-size slide

  26. もう、フォント作るしかなくない?

    View full-size slide

  27.  
    フォントを作ってみる — サブセット
    ● フォントを0から作るのは⼤変
    ○ ⽇本語のフォントは2⼈のデザイナーで作ると2‒3年かかる
    ● 既存のフォントを加⼯して作る
    ● 今回は要件的に惜しかった Noto Serif / Noto Sans をベースに
    作ってみる
    ● ⼀旦は数字だけ幅があえば問題なさそうなので数字だけの
    サブセット化したフォントを作る

    View full-size slide

  28.  
    フォントを作ってみる — サブセット
    ● フォントのサブセットには Python のライブラリの fontTools に
    含まれる pyftsubset というコマンドが使えます
    ● pyftsubset \
    --text='0123456789' \
    --output-file='subset.otf' \
    NotoSerifJP-Regular.otf
    ● これで数字だけに絞られたフォントにすることが可能です
    ● ただし、これではまだ要件が満たせません
    ○ 幅を Helvetica に合わせ、ライセンスの都合上、フォント名を変更
    しなければいけません
    ● ちなみにフォントに登録されている⽂字や字形を確認するには
    AFDKO の fontplot が使える

    View full-size slide

  29.  
    フォントを作ってみる — グリフ幅
    ● ボディのサイズとサイドベアリングを調整して、Helvetica と⼀致するようにする
    12345
    仮想ボディ
    字⾯枠
    サイドベアリング

    View full-size slide

  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()

    View full-size slide

  31.  
    フォントを作ってみる — グリフ幅
    ● UFO(Unified Font Object)と⾔われる、フォントの加⼯に向いて
    いる形式に変換して操作する
    ○ この形式のまま保存することもできて、XML ベースなので⼈でも
    読みやすい
    ○ 興味がある⼈はみてみると楽しい
    ● UFO にした後に、⽂字の幅を Helvetica に合わせる加⼯をする
    ● 元にしている Noto は SIL Open Font License が適⽤されており、
    このライセンスは加⼯して作った新しいフォントに元のフォント名を
    含めていはいけない制約があるのでフォント名を変える必要がある

    View full-size slide

  32.  
    フォントを作ってみる — グリフ幅
    ● できたフォント
    元の指定
    Noto Serif を加⼯
    Noto Sans を加⼯

    View full-size slide

  33. まとめ
    実は、フォントづくりはこんなにも⾯⽩い。

    View full-size slide