フォント作って配布したんで作った方法をまとめておきます
なんかの役に立つかも
FontForgeの知見を授けてくれた先人たちに感謝
前置き
着想→字を書く
だいぶ前にもフォントを作りたくなって制作方法を調べてみたことがあるが、その時は調べがかなり浅くIllustratorが必要としか出てこなかったためあきらめていた。だが今回しっかり調べ直したら高級ソフト無しでもフォントが作れるとのことだったので、思い立ったが吉日ということで制作に取り掛かった。
今回は素人でも小手先で誤魔化せそうな殆ど絵みたいなフォントを作ることにする。テーマとしてはグロ+ポップということで、太い丸文字から謎の液体が垂れているというデザインにしようと思う。日本語ではまだ少ないようだったがBlood Fontとかでggったところ当然ながら先駆者がたくさんいたので、文字としてのクオリティでは負けそうな以上ここはやはり何か独自性をアピールしたい。というわけでハートを足して無理矢理独自性を出していくことにした。
このテンプレートみたいなものは次で解説する。
とりあえず方眼紙にPOSCAで手描きし、それを写真に撮り、adobe frescoというソフトを用いて清書&修正していく。
Frescoはベクターブラシが扱えるもののsvg形式の出力には対応していないため、書き出したpngをアウトライン化する必要がある。使えるのであればAdobe illustratorや後述のInkscapeと言ったsvgを扱えるソフトでデザインしてからsvgで書き出しを行うとよい。
Calligraphrで超絶楽々フォント化
作字が終わったらとりあえず検索で多く出てきたCalligraphrというサイトでフォントにしてみる。
Calligraphrについてはより詳しく解説されている記事があるのでそちらを参照されたい。超簡単に言うと、DLしたテンプレートに文字を書いてアップロードするだけでフォントが勝手にビルドされる(しかも75文字以内であれば無料)というサイトである。
作った文字をテンプレートに乗せてcaligraphrにぶち込んで文字間隔とかを整えたら完成！
簡単なのでみんなも作りましょう!
と言いたいところだが、文字をもっと増やしたくなったのでここからはfontforgeというオープンソースのエディタを用いて作業を続ける。
余談
Caligraphr無料版(有料版は不明)を用いてフォントを作るとフォント名が「○○ Regular」という形式になるっぽい。Regularがついている＝Caligraphr製とは限らないが、手持ちの英文フォントはそこそこの率でCaligraphr製ということがわかった。とにかく簡単にフォントが作れるし出来栄えも良いので、アルファベット大文字小文字+ちょっとした記号程度の文字数のフォントであればCaligraphr無料版で十分な気がする。
おまけ 文字組みの基本
ここをクリック
フォントには基準となるラインがいくつか存在する。
①のアセンダラインは総ての大文字や上に長い小文字の最上段のライン。フォントによっては小文字の最上段のキャップラインもある。
②のミーンラインは小文字の「x」の最上段から横に引いたライン。「b」など一部の小文字はアセンダorキャップラインのほうに突き抜ける。
③のベースラインは殆どの文字の最下段から引く基準線。「q」「j」など一部の小文字はディセンダラインのほうに突き抜ける。
ミーンラインとベースラインの間のことをxハイトと呼び、ほとんどの小文字はこのxハイトにおさまる。
④のディセンダラインはj,g,qなど一部の下に長い小文字の最下段のライン。
デザイン書体の場合すべてのラインに従う必要はないが、コンセプトに反しない限りはxハイトに収めたりベースラインを揃えておくと見栄えがすると思われる。
確認にはさっきのCaligraphrのテンプレートが大いに役に立った。また、漢字には仮想ボディという基準があるらしいが、それについてはggってください(職務放棄)。
本編 FontForgeで続行
pngかsvgで書き出し
もっと文字を増やしたくなったので、ここからはFontforgeというツールに移行する。75文字制限が取り払われたので、アルファベットの小文字やカタカナ、ギリシャ文字等を追加してみた。
最終的にはひらがな、カタカナ、ギリシャ文字、記号、ごく一部の漢字が追加された。
ファイル名はFrescoのクラッシュに怯えドキュメントのコピーを作りまくった結果
文字ができたらFontForgeに読ませるための画像を作っていく。svg出力が可能なソフトではsvgで、それ以外ではpngで書き出す。
この際、FontForgeの基準値である1000×1000pxで書き出すと良い。
FontForgeはファイル名・フォルダ名に日本語があるとエラーを吐くという情報があったが最新版では直っているので気にしないでよし。
保存が終わったらFontforgeのセッティングに移行する。
ハプニング
Fontforge！あれ？
Fontforgeを立ち上げるとこうした画面が出てくるので、真ん中の”新規”をクリック。
エレメント→フォント情報からフォント名をつけておこう。
設定を済ませて戻るとこんな画面が出てくるので、作りたい文字に相当するバツ印のマスをクリック。
上のツールバーのファイル→取りこみからお目当ての画像を取り込み、エレメント→自動トレースを押すと文字がアウトライン化(詳しくはggってね)される。
はずだった
「背面」のチェックボックスを外して背景画像を非表示にするとそこにはフォントのアウトラインが……あるはずだったのだがどう見ても無いじゃん。ggりまくったりオートトレースのプラグインを再インストールしたり色々してみたが打つ手なし。それどころかオートトレースができないという報告自体少ないのでおま環orシンプルな操作ミスなのかもしれない。だがここでトラブルシューティングに時間を取られてはやる気の灯が消えてしまう。
でもsvgを扱えるソフトなんて持ってない……
もうここで諦めるしかないのか……？
……な…
……るな…
えっ…？
- provided courtesy of iTunes
青い果実派です
Inkscapeでアウトライン&SVG化
アウトライン化の作業はベクターを扱えるフリーソフト「Inkscape」(Inkspaceではない)で行うこととする。もちろん、FontForgeで自動トレースが問題なく使えた場合や最初からsvg形式で保存していた場合はそのままFontForgeで作業をしてOK。
Inkscapeでの作業の様子。とんだ二度手間と思われたが、慣れてくれば考えるより先に手が動くようになるのでそう苦行でもなかった。
①まず、上のツールバーからファイル→インポートを選択し先ほどの画像ファイルをロード。
②画像を選択した状態でパス→ビットマップのトレースを選択し、右のタブから「適用」を選択。
③アウトライン化が完了。直後はアウトラインの方を選択しているので、Ctrl+Aで四角形のパスを選択し移動、元の画像ファイルを削除。また、シェイプがゆがんでいないかの目視。
④名前を付けてSVGデータを保存。
時折こんな具合でシェイプがおかしくなる場合があるので、拡大して修正。
大抵の場合はパスが捻じれているので修正しその後微調整する。
総ての文字をSVGにできたらInkscapeでの作業は終了。
FontForgeのセッティング
気を取り直してFontForgeでの作業再開。
今回製作したフォントは日本語を含んでいるため、日本語を表示させるべくエンコーディングのタブから文字コードをSHIFT-JISに変更。
するとこんなことになってしまった。
この状態で目的の文字を探すのは至難の業である(なお目当ての文字を上部バーに入力すればいいという噂も)。これではとても作業にならないため、FontForgeのUIに使用されているフォントを変更する必要がある。
qiita.com
フォントの変更に関してはこちらの記事が詳しいので参照されたい。
適当にメイリオに変えたら漢字や記号がちゃんと表示されるようになった。
取り込み＆メトリック設定
前述したように、ファイル→取り込みから画像ファイルもしくはsvgファイルを読み込んでいく。
この長方形のマスの中に収まるようにしよう。幅はまだ未設定でOK。
ちなみにこのようにまとめて読み込んだりアウトライン化することもできるようだが必要なもの以外を消さないといけないので二度手間感がある。svgでは問題がなかったファイルでもFontForgeに取り込んだ時にまたパスがおかしくなったりするので、背面モードに切り替えてチェックが必要。
一通り取りこみが終わったら上部バーのメトリックタブからメトリックウィンドウを開く。また、エンコーディングを複数回変えているとすべての文字に空白のパスが存在することにされ、グリフが多すぎてメトリックウィンドウが開けなくなってしまうためその場合は消しておく。
半角カナのところに大量のカタツムリがいるが、アウトライン化さえされていれば文字じゃないものでも取り込めるよということ。斜め後ろから見たカタツムリという微妙な角度を収録。
メトリックウィンドウを開いた図。これは幅の調整がすでに済んだものだが、未調整だと文字間隔が広すぎると思うので、メトリック→幅の自動調整で幅の調整を行う。よりこだわりたい場合はメトリックウィンドウから一つ一つ確認しながら調整するとよいと思われるが、今回は自動設定で十分だった。なお、記号類は手作業での調整が必要になるかもしれない。
幅の自動調整が済んだらメトリックウィンドウにテスト用の文字列を入力し、パスがゆがんでいないか、文字が大きすぎたり小さすぎたりしないか、表示位置のおかしい文字がないか等を確認。気になったものがあれば調整していく。
また、特定の文字が続けて入力された際に特殊な文字の表示をする「合字」、「しゃ」「しょ」、またデザインフォント等をきれいに表示するための「カーニングぺア」という機能も存在するが、文字を表示するソフトによって対応していたりしなかったりするためこの設定はお好みでOK。というかリーディング用に使われることはほぼないであろうデザイン系フォントの場合、画像編集ソフト側の文字間隔調整機能で賄える気がする。
この画像の場合、「ちゃ」はペアカーニングの設定がされているため自然な間隔で表示されているが、「ぴゃ」は特にないので間隔が少し大きい。
また、半角・全角スペースもグリフとして認識されているため、空のグリフと間違えて削除するとスペースが表示されないフォントになるので注意。
違和感なく表示できるようになったらいよいよフォントを出力する。
フォント出力
いよいよフォントを完成させる。
フォント名等の設定が終わっていない場合はエレメント→フォント情報から設定を済ませておこう。
ファイル→フォントを出力を選択するとこんなウィンドウが出てくるので、フォントタイプを選択。
現在メジャーなフォントタイプにはTrue Type Font(.ttf)とOpen Type Font(.otf)が存在するので好きな方を選ぼう。違いはよくわからんのでggってください。また、「保存前に検証」は外しておく。
出力先フォルダを選択し、生成ボタンを押せばフォントが完成する。なお、ttfで出力する場合エラーのダイアログが出るが無視してOK。
数百文字程度のフォントなら出力は一瞬で完了するだろう。保存先のフォルダを確認すればそこには生まれたてのフォントファイルが…
完成したフォントファイルがWindowsでよく見るアレになっている。インストールしてメモ帳か何かで動作確認しよう。
文字が出力された！あっさり書いてきたがこの瞬間はかなりうれしい。ベースラインも大きさも揃っていないフォントだがこの手間の前では痘痕も靨というところである。
自分で作ったフォントが動く喜び…
素晴らしい…
素晴らしすぎる。
フォント制作最高！
配布する
せっかく作ったので配布したい。
日頃は目立ちたくないみたいなことばかり言っているがそこそこの手間がかかっている以上は誰かに使ってもらいたいという欲が湧いてきたので配布することにする。
配布の準備
配布にあたって必要な準備を執り行う。
やるべきことは大まかに
①配布場所の確保
②フォントファイルの動作確認
③利用規約の作成
の3つになる。
配布場所の確保
今回は楽だからという理由で配布場所はpixivアカウントを持っていればすぐにネットショップが作れるうえにフォントの配布・販売も盛んなpixiv BOOTHを選択した。
BOOTHは二次創作系の同人誌の個人通販・委託サイトとしての側面も強いためアニメのタイトルロゴ等既存のフォントを真似たパロディ系フォントの配布もOKのようだ。
自分のサーバーがある場合はそこで配布してもよいだろう。また、残念ながらはてなブログでは不可能だが、noteは記事へのzipファイルの添付が可能らしいのでそうした方法で行ってもよい。
フォントファイルの動作確認
せっかく配布しても不具合があって使えなかったら意味がないので改めてしっかり確認する。収録した文字が全て問題なく表示されるかくらいは見ておこう。今回は収録文字をすべて記載したファイルを作って確認することにしたが、その際に「プ」と入力して「ブ」と表示されることが判明。FontForgeの一覧表示で見ているとなかなか気が付かない為自分で一文字ずつ打っていこう。せっかくなのでこの確認用ファイルもフォルダに同梱することにした。
利用規約を作る
フォントファイルと共にフォルダに同梱する利用規約を作ろう。殆どのフォントには商用利用可とか個人利用のみとかが書いてあると思うが、この商用利用というのは明確な定義がなく配布側の言ったもん勝ち的な部分があるようなので、なるべくしっかり書く。
フォントメーカーの最大手であるモリサワ株式会社による利用規約に纏わる記事。webフォント等サーバーにフォントファイルをアップロードして使用する形態での利用などは盲点になりやすいと思われるため、この記事を読んで気になった点があれば個別に記載していく。
以下の点は必ず記載しておこう。
①クレジット、権利帰属の明記
作者名やフリーフォントですが権利は手放しておりません的な文言。パブリックドメイン的に利用してもらいたい場合はそのことを明記する。
② 個人・商業・法人など、利用可能な対象。また、その対象が利用可能な範囲
商業利用の可否くらいは書いておこう。
また、販売を頒布と言い換えるなど「これは営利活動ではなく利益の出ないファン活動」という体裁をとっている二次創作系の有料作品についてはユーザー間でも個人利用なのか商業利用なのか判断が割れているようなので二次創作作品への利用の可否は個別に明記すると喜ばれるかもしれない。
③禁止事項
してほしくないことをなんでも書いておく。メジャーな物としては再配布禁止、改変禁止など。
「特定のジャンルの作品への使用は禁止」のようなものになるとどのくらい守られるか・拘束力があるのか等は実際のところ謎だが、何らかの懸念事項がある場合はこの使い方は認めていませんという表明はしておいて損はないものと思われる。
実際の利用規約。言葉の綾となりそうな記述や不明瞭な言葉を避けて書いてみたら無駄に堅苦しくなってしまった。
「フォントの改変」という言葉を「.otfや.ttfなどのフォントファイルの改変」でなく「出力されたフォントの字形の加工」を指すと思っている人がそこそこいるらしいので(参照)、それも別途記述してみた。
フォントファイルの改変は可能とした。理由としては、同じようなフォントを作りたいと思った人がこのがっかりクオリティフォントにたどり着き、このフォントがあるせいで作れないよと思うようなことがあったら申し訳ないから……という体の半ばキラーパスである。
というわけなので、利用規約には書き忘れたが原形をとどめないくらい改変してくれてもOKです。
また、3Dモデルに使われるFBXファイルなど、内部データに出力時のパス(＝PCのユーザーネーム)を記録してしまうものがあるようなので、(中身を見た感じotfやttfは違うと思うが)配布用ファイルは念のためUSBに出力・圧縮した。
フォント紹介
D.C.メルティスクラッチ clock-over.booth.pm
収録文字
- アルファベット(大文字、小文字)
- 算用数字(0~9)
- ひらがな、カタカナ(旧仮名は含まず)
- ギリシャ文字(小文字のみ。Δのみ大文字)
- 記号(一部)
- 漢字(おまけ以下の存在感)
漢字はとりあえず曜日くらいなら書けるが他には何も書けない。制作中飽きてきたときに書いた仮面ライダーカブトのキャラの名前があったので入れてみたが天道と地獄兄弟以外は未対応。ひらがなとカタカナはあるのでゴンとじいやとライダーとワームの名前は書ける。仮面はない。マスクドライダーだし……
小学一年生の漢字(80文字)くらい入れようかなと思ったが、漢字を一文字作る時間で記号が4文字くらい増やせるのでやめた。ヤバイんだよ漢字は…そこらのアルファベットとは全然ちがう。自作フォントで漢字はマジヤバイ。
感想
フォント制作は意外と簡単で楽しい。
このちょっとしか文字が入っていないフォントでも322文字は作ったのである程度の根気は必要だが、根気さえ消えなければやり遂げられると言ってもよいだろう。
また、フォントを作る手間を体感することで世のすべてのフリーフォントへの感謝の気持ちが増す。特に常用漢字を全収録しているようなものはヤバイ。なんで無料なの？という気持ちにさえなってくる。
完成したフォントから文字が出てくる瞬間はかなりうれしい。
どれくらい使ってもらえるかは不明だが誰かに使ってもらえたりしてもうれしいだろう。
フォント制作は気が遠くなること以外はいいことずくめである。
作ろう！！自作フォント！！
ちなみにこのフォントの製作期間としては、フォントを作ろうと思いついて方眼紙を買ってきて文字を書いたのが11月4日。
大文字アルファベットと一部の記号を作字してデジタルで清書し、Calligraphrでビルドしてみたのが11月6日。
そこからは詳しい記録がいまいち残っていないが、ひらがな・カタカナを収録しようと思い立ちその辺の字の作字をしたのが大体それから三週間(一週間くらいのスランプ期間を含む)くらい、
SVG化→FontForgeで取りこみ・調整が大体1.5週間くらい、
出力・配布・このブログの執筆が1日くらいである。
大体一か月間毎日1~2時間は必ずフォント作業をやっていたが、それでも完成まで322文字で1か月はかかった。めちゃくちゃ地道な作業なので一番必要なのはツールでもPCでもなく飽きないことである。
正直途中で飽きそうになった。
だがそれでも完成した感動はひとしお。みんなも作ろう！自作フォント！
