ぅぇぁみくてんの書いた文字をフォント化した、その作業や知見の記録記事でございます。なんでフォント作るねん変態やろ、頭おかしい、とか色々言われておりますが、そもそものきっかけは本人と喋っていたときに確か日記と文字の話になり、フォントつくろっかなー(カタカナフォントくらい作れるやろ)みたいなことを言っており、(多少どうやって作るか知っていたので)だいぶ大変やで！と言ったら、じゃあ作ってよ！ほな作るわ！ということで作り始めたというのがきっかけだったと……思う……(当時珍しくハイボールを5杯ほどひっかけており記憶がやや曖昧)

ともあれ汚いと言われるみQ文字だけど、実は特徴を見ていくと理に叶った流暢な筆運びであったり、魅力ある字であるとは思っていたのでこれ幸いとばかりに製作に入ったわけです。

フォントを作ること / そもそも興味はあった

おぼろげながらFontForgeというフリーなフォント作成ツールがあることは以前から知っていまして。実はフォント作りたいな～と思いつつ自分の文字をフォントにしても面白くないし、ネタがないのでツールを調べるだけで終わっていたのだ。その頃から色々と他にも新ツールや進化している部分があるのでは？と思い色々調べた。軽い気持ちで。それが、長い旅路の始まりであった……。

Webサービスで簡単に作る？ / マネタイズできないサービスは滅びる

どうもテンプレート画像をダウンロードしてきて、そこにうまく載せてアップロードすると自動的にフォントになるぜ！的なのがあると風の噂に聞く。なるほどPaintFontというらしい。さて早速サイトに行ってみると何故かCaligraphrとかいうサイトに飛ばされる……？どうやら名前を変えて有料化していて、無料だと文字数制限がかかるとか……。英数ひらがなカタカナを作りたいのでどう考えても足りない。没か……。

他に類似サイトないかな、と調べてみたが、制限があったり英数字だけだったりどうも要求に合致するサービスはなさそう。普通に考えてWebサービス開いてるだけでもお金かかるし、寄付とかないと無料ではやっていけないわな。そもそもフォント作成サービスてどのくらいの市場規模なんだ……？むしろ無料サービス、なんであるの？

画像取込み / 目を皿にして日記を読み、心で文字を感じる

じゃあどないするか。本質的にはアウトラインフォントを作るので、ベクタ画像の作成が必要である。となると画像の自動トレース。調べてみるとフリーのベクタ画像編集ソフトであるInkscapeにもトレース機能があるようだ。やったね！ (実はFontForgeでもpotraceとかを使えば画像トレースできるんだけど管理・編集上一旦SVGで扱いたいのでInkscapeを使う)

さてこの画像トレース、Inkscapeに画像をD&Dしてツールを実行、はい終わり！なのだが、今回の画像ソースはTwitterで連載(？)されているみくてんの日記である。何か問題があるか、というとだいたい次の2点となる。

1.文字の分離が難しい

流れるように書かれている文字なので、文字同士が重なっていたり、罫線なんかが文字に混入してくるので単純にトレースしてしまうと意図した結果にならなかったりする。あと色が薄い文字であるほどノイズに弱くなるのでそのへんの考慮も必要。

2.文字の状態がまちまち

日記1ページ中の1文字を取り出してくるのだけど、日によって割と文字の大きさが違う。大きいぶんにはなんとでもなるのだけれど、小さいとトレース結果がかなり鈍った感じになってしまい原型を留めない結果になりがち。また文字の太さや傾きなども異なるのでこのへんも調整が必要。

ではどうするか。

地道に切り出してレタッチ、そして取り込んだら字形の調整をします！

目を皿にして日記を何度も熟読し、求める字が存在するか1つ1つ確認していく地道な作業を経て、ペイント等で開いて目的の文字だけをサクっとトリミング。そしてノイズを除去し、関係ない文字や罫線を1つ1つ丁寧に消していき、文字を掘り出します。手作業のあたたかみ。

次いで取込み。これ自体はもうボタン1発。そして結果を見て、あっここちょっと細いな……とか、ここの角が丸くなってるから修正しよう……とかやっていく。 線がクロスしている部分はほぼ100%うまくやってくれないので、元の字形を脳内で高解像度化して筆跡の流れを読み、脳内モデルと一致させつつ、不自然にならないように字形を整えて。あとこの段階である程度大きさや太さは統一します。

ほらね、簡単でしょう？(眼精疲労で充血した眼をこすりながら)

SVGフォント / 唯春の夜の夢のごとし

ついでにSVGフォントというものの存在も知る。Inkscapeでもサポートしていて、なんとInkscape内だけでフォントが作れてしまうらしい。早速喜び勇んでチャレンジしてみたのだが、これがまた、つらい……。

基本的な操作としては、専用のウィンドウでSVGフォントの枠を作成し、その中にグリフ(文字)を追加して紐付けする文字(マッチング文字列)を指定したら、対象の字形を選択して取り込みボタン(選択オブジェクトから曲線を取得)をポチっと押す。あとは文字毎にこれを繰り返すだけでそのSVGファイルはフォントとなるのであった……が。

取込する際の位置がフォントとして取り込まれた位置に反映されるため、全ての文字は同じ枠内に配置しなければならない。つまり同じファイル内で複数の文字を管理しようと思うと、レイヤを分けざるをえない。文字毎にレイヤを作って、グリフを作って、位置を調整して……と作業するのはかなり煩雑である。しょうがないので枠作るところはSVGをテキストエディタで直接編集したりした。

また更につらいのが文字毎に幅を指定できないこと。全文字全角か半角になってしまう。そもそも俺が作りたいのはプロポーショナルフォントだ。どうやらSVGフォントの規格自体では幅の細かい指定もできるようで、FontForgeで編集すると実現はできた。が、Inkscapeはそれに対応していないようで指定してしまうと読み取れなくなる。これはメンテナンス上とてもおつらい……。

ついでに書いておくとSVGフォントは現代ではもう殆ど使われていない形式のようで、未来もないのですっぱり諦めた。 (OpenType SVGフォントというものがあったりするのだがこれはまた別のお話……)

svg2sfd / なんかうまくいかない

文字形の編集自体はInkscapeのほうが良いが、ちゃんとしたフォントを作るにはFontForgeが必要だ。FontForgeはSVG取込みするとき字形毎にファイルが別れている必要がある。さて、しこしこ分割して、FontForgeのスクリプティングでなんとかするかな……と思案しているとsvg2sfdなる文明の利器が見付かった。ほぼほぼ似たようなことやろうとしていて、1つのファイル内でグリッドを基準に位置計算してパス毎に分割、パスのIDでUnicode指定するらしい。

これでいけるんちゃう！？と思って既に作ったグリフを移行してみる……と何故か何も出力されない。ソースを見てみると、SVGのパス形式が一定のものを想定しているようで、少なくとも俺が最新版のInkscapeで四苦八苦しながら作ったものはうまく読んでくれないようだった。多少修正を試みたが、破裂したフグのようななれの果てしか取り込まれなかった。無念……。

しょうがないのでしこしこ分割しました。

FontForgeのスクリプティング / プログラマの三大美徳とは怠惰・短気・傲慢である

ここで真打、FontForgeの登場である。細かい説明は省くがフリーでフォント作成といえばこれ、というすごいやつなのである。そしてこいつにはスクリプティング機能が付いていて、画面操作のほとんどを自動化できるというのである。

ふつーに分割したSVGをフォントに取り込もうと思うと、1つ1つの文字を選択した上でSVGを読込むという死ぬ程面倒くさい手順を踏む必要があるのだけれど、スクリプトでImport(”*.svg”)とかやるとsvgファイルを全て取り込んでくれる！そしてファイル名をUnicodeのコードポイントにしておけば自動的にその文字として個別に取り込んでくれるのだ……！(仕様説明が見つからなかったけどそういう動きをするのでたぶん)

フォント名を英語と日本語で設定したり、ファイルサイズ削減の最適化をしたり、文字毎に幅を設定したり細かい調整もスクリプトでやったんだけど詳細は割愛。気になる人はソースを見てください。

(どうでもいい余談: フォント名は日本語は単純に「みQ文字」としたのだけど、フォントIDは英語にする必要があったためどうしようかなーと思案した結果MiQglyphにしました。みQ"文字"のニュアンスとして、ヒエログリフ的神聖文字のニュアンスで呼称されているのではないか、と思い至ったのでグリフを採用しています。)

これで、なんということでしょう、SVGを作れば1秒程度でフォントが出力できるようになったではありませんか。文字を追加するときもSVGを特定のフォルダに置くだけ。これぞ匠の技。驚きの0円(電気代を除く)。

最終調整 ～ 公開 / ラスト・ワン・マイルが遠い

これで終わり！かというと、そうは問屋が卸さない。実際に出力されたフォントで文章を表示してみると、なんか一文字だけガタってたりとか、太さが違うとか、字間が広過ぎ・狭過ぎ、など細かく不満点が出てくる。人の欲は増大して留まることを知らぬ。カチっとしたゴシック体とか明朝体とかであれば文字作成時にルールを決めておけば綺麗に揃うと思うのだけれど、手書きプロポーショナルフォントではなかなかそういうわけにもいかず……。

というわけで私は今、文章表示→字形修正→フォント再生成→インストール→文章表示→…の無限ループを超えて今この世界に立っているのです。ここがβ世界線だ。

時期的に12/8ワンマンがあったので、自分のテンション上げる意図も、プロモーションの一助になれればという意図もありつつ、その前夜をターゲットに作業を進め初版リリースまで無事こぎつけた。できれば英数字ひらがなカタカナ全部含めたかったけれど、10回くらい全日記読み返しても見付からなかったので流石に諦めました。公開にあたっては自分のサイトで特設してもよかったけれど、ソースも公開するつもりだったのでGithubのリリース機能で出してみた。初めて使ったけれど結構便利。

そして臨んだぅぇぁワンマン。本稿からは逸脱するけどこの目立たないところでぶっちゃけ気味の何様やねんな感想などを少し。正直言うと会場が大きく、半分くらいしか埋まらないのではないかとちょっと思っていた。けれど実際は7、8割近く埋まっていて、ぅぇぁ現場で見掛けた人は大体居たのは勿論のこと、東京の知り合いも名古屋の知り合いも来ていたし今日始めて来たという知り合いも居た。 そもそもぅぇぁの現場は一つの界隈の人達が居る、という感じではなくて複数の現場から満遍なく人が来ている印象があって、これは音楽的にもパフォーマンス的にもメンバーのキャラ的にも幅が広い、言い換えればフックが多いことに起因しているのではないかと個人的には思っていたりする。それを続けてきた結果としての動員かなと素直に思うし、動員した人達の期待の斜め上くらいを投げ付けて間違いなく今後につながるパフォーマンスだった。少なくとも俺の期待の斜め上は行ってた。 戦略的には現段階のワンマンは値段設定から見てもプロモーションの意味合いが強いとは思うのだけど、プロモーションだからこそ本気が必要で、その本気が120%出たという感触。メンバーの頑張りは痛い程伝わったし、運営側の頑張りも相当なものだったと思うのだけど、なによりチームとしての信頼関係が素晴しい。セットリスト1つにしても一旦Pが考えたものをメンバーに投げて、意見を取り入れて大幅に組替えたりしたというエピソードはとても象徴的な気がしている。運営はクリエイティブで、メンバーはパフォーマンスで。両輪がまわってどこまで行けるのか。ワンマンを経て楽しみなグループになった。

公開後 / 浪費するのを楽しんだ時間は、浪費された時間ではない

ぅぇぁのヲタクの方々からもふぁぼなど飛んできたのでなんとか受入れてもらえたかなー、とか思ってたらまさかのご本人使用例が飛んできて震えています。今にも暗闇からみくてん原理主義者が飛び出してきて「電子的みQ文字など認めぬ」と主張しながら刺してくるのではないか、眠れない夜を過ごしています……。

というのは冗談として。本人からポジティブな反応が来たのは滅茶苦茶ありがたいし嬉しい。基本何やるにしても見返りは期待せず自分が楽しいからやる(色々書いたけど基本楽しんでやっています)、ただし迷惑はかけないよう努力する、という割り切ったスタンスなのだけど、反応があるとやはり嬉しいものだし、やる気も出るものだなぁ、と自らのちょろさを噛み締めている今日この頃です。めっちゃツイート見返した。よーし漢字も拡充していくぞ……！(完)

ライセンスや著作権についての余談

ライセンスはMITライセンスなので誰でも自由に利用・改変・再配布可能です。こういうの明示しておかないと、著作権者が主張したら何でも通る怖い状況なのでライセンスってのは重要なんですよ……。ライセンスがわからないフォントは使ったらあかんですよ！他のライセンスはフォントだとSIL OFLというのがあるようだったが、制限が増えるだけなのでGithubでも対応してるMITライセンスでええやろ、というノリ。一瞬CC BYとかも検討したけど、これ印刷物とかにも全部表示要るんちゃう？という気がしたのでやめた。

一応リリース前に運営に確認をとったりはしたので公開に問題はないだろう、と判断して公開してるのだけど、そもそも法律上今回の製作物は何らかの制限にひっかかるのだろうか？という疑問はあったりなかったり。軽く調べるとデジタルデータとしての著作権は認められる一方、文字の字形自体には一般に著作権は認められないという。ただし毛筆書体などは芸術性が認められるため著作権が発生する、という説明があった。このアナロジーで行くと、このフォントの差し止めを運営側から行う場合は、みQ文字の字形に芸術性が認められるかや、名称の使用あたりが問題になりそうかな……と考えてみたりはしている。(万一の場合も別に争う気はないけど、思考実験的なやーつです)

細かいメモ

作業するにあたってちょっと嵌ったポイントをメモ。

• FontForgeのスクリプティングに関してはちょっと古いけどこのへんを参考にした。
• OpenTypeでの文字単位は基本1000unitで、SVGでの1px=1unitにあたる。このためSVGのキャンバスはpx単位で1000x1000と作成する。
• Windowsのフォント選択ダイアログで「日本語」とか「欧文」とかの区分が出る部分は、TTF名がその言語で入っているかどうかで決まるぽい。
• FontForgeのSetTTFNameで指定するnameidの一覧はたぶんこのへんのやつでいける。
• 未定グリフを表す.notdefの字形をSVGから取り込むには、0x0000のグリフを選択した状態で、グリフ名を.notdefにしてから取り込みをかければよいようだ。

フォント出力時のエラー / 誰かの参考用

FontForgeでOTF(SVGは3次曲線なのだが、TTFは2次曲線、OTF(Type1)は3次曲線使用なのでOTFのほうが再現性が良いと想定される)などを画面で出力しようとすると、めちゃくちゃ警告が出る。とにかくよく出るのが次の2つである。検索しても説明がさっと出てこないのでメモ。あくまで警告で、スクリプトで出力すると警告出ないから関係ないっちゃないんだけどね……。

Wrong Direction

方向って何の方向やねん……と思ったが、どうやらフォント作成時のルールとして「外側の輪郭は時計回り、内側の輪郭は反時計回りのパス」という決まりがあるらしい。このように処理したほうが良い表示結果になるということなのだが、無視しても割と違いがわからない……。なおFontForgeにはこれを自動で修正する機能がある(エレメント→アウトラインの向きを修正)。念のためスクリプトで指定しておいた。

Missing Points at Extrema

Extrema=極値ということで、曲線の頂点に制御点がない、ということらしい。どうもフォント描画の都合上なのかそういう制御点の配置のほうが処理結果が良くなるということのようだ。というわけでこれも無視しても割と違いがわからない……。制御点の数が多過ぎる、と説明している記事があったが、文面上どう考えても違うぞ。