ゼロから始めるフォント制作

皆さんどうも。えばやんです。

今回は『ゼロから始めるフォント制作』と題しまして、お金をかけずにフォントを作る方法を皆様に伝授しようという記事です。フォントの作り方を紹介しちゃいます。お金はかかりませんが時間はかかりますので悪しからず。伝授というほど大層なものでもないんですけどね。

ちなみに、ワタクシはネタフォント(パロディーフォント)をたまに作っては公開してるしがないクリエイターです。このサイトのフォントの部屋に行けば色々あるので詳しくはそちらをば。

早速ではありますが、ひとつ大事なことを。フォント作りで一番大事なもの、それは根気です。大文字アルファベットだけでも26文字。26文字デザインし、フォントとして使えるようにデータ化していく訳です。大変に決まってます。

でもそれがフォント作りです。かの有名なモリサワさんは、ひとつの日本語フォント(10,000字以上)を大人数のチームで5年くらいかけて作ってます。だからフォント(特に日本語フォント)は高いのです。でも作ってしまえば滅茶苦茶便利なアイテムと化します。ですから皆さんも、大変だなぁと愚痴を零しながら作りましょう。そして、すべてのフォントメーカーとフォントクリエイターに感謝しましょう。

気合い入れて頑張って書きましたが、正直分かりにくいような気がするし間違ってる説明があるかも。コメント等でご指摘いただければ修正していく所存ですので、気になったこととかあればお気軽にどうぞ。

Step1：フォント作りの準備をしよう

フォントを作る前に、いくつか準備しないといけないものがあります。デザインソフトとフォント制作ソフト、そしてアイデアです。分かっているとは思いますが、パソコンも必要です。メモリ(RAM)は8GB以上積むことをオススメします。ソフト達がどっちも重いです。8GBあればそこそこ快適だと思いますゆえ。

デザインソフトもフォント制作ソフトも僕は有料のヤツを使ってますが、今回はゼロから始めると銘打ってますのでフリーのソフトを紹介します。

まずはデザインソフト。Adobeのillustratorみたいなやつですね。ぶっちゃけ無くても出来ますが、あった方が速いし楽です。ベクターデータ(.svg)を出力できれば何でも良いです。今回はInkscapeというものを使用していきましょう。フリーでここまで出来ちゃっていいのか？となる高性能ソフト。

ダウンロードとかは各自ググってください。Inkscapeに関してはユーザーも多いので、使い方についても割愛。その辺はできるものとして、フォントの作り方メインで話を進めていきます。

次にフォント制作ソフト。そもそもそれって何ぞや？という人のために説明すると、デザインした文字のデータとそれぞれの文字を紐づけつつ、全体のバランスを整えるためのソフトってところでしょうか。一応このソフト上でもデザインはできるのですが、基本的には調整する時用って感じです。

有料ソフトは色々ありまして、高いのだと5万以上するやつも。モリサワパスポート契約出来ちゃいますね。しかしこちらも今回はフリーのソフトを紹介します。フォント界隈では有名も有名、FontForgeです。昔はLinuxでしか動作しなかったので導入がめんどくさかったのですが、いつの間にかWindowsとMacに正式対応してました。

これまたダウンロードについては省略。きっと出来ると信じてます。というかこのくらいは出来て欲しいです。これもググれば出てくるからね。途中OS選ぶところがあると思うのですが、そこは自分の使用しているOSを選びましょう。

そしてアイデアですが、これについては……知らん！パロディーにしろオリジナルにしろ、下書きしたりしてみて形にするといいかもしれません。ここからは実際に作る様子を交えつつお送りしますので、僕も試しにこんな感じの下書き(というか構想)を用意しました。

いつもはもっと真面目に作りますが、今回は解説用ということで。でも最終的にフリーフォントとして公開はするつもりなので、適当なものを作るわけにもいきません。せっかくの機会ですから、一度作ってみたかった架空文字を作ろうと思います。ベースはアルファベットなんですけどね。

架空文字なので設定も適当に考えてみました。時代設定は遠い未来。文字の簡略化が進んだ結果、アルファベットは直線のみの字体に変化。このままだとギリ読めて面白くないので、手違いで一覧表が逆さまのまま使用されたというトンデモ事件を発生させて、上下逆さま・逆順で使われるようになったという歴史を捏造しました。数字についてはよくわからないという逃げの一手を打ってます。考古学者も涙目。

それにしてもゼビウス文字っぽい感じです。もうフォント名はゼビウスとえばやんから取って『XEVEBA(ゼヴェバ)』としましょう。決めました。今からお前の名前はゼヴェバだ。

何はともあれ、ソフトとアイデアが用意できました。次のステップへ進みます。

Step2：文字をデザインしよう

下書きを元に、文字をデザインしていきます。人によっては文字を組むだとか、作字するだとか呼んでますね。フォントの9割はここで決まりますので、納得のいくまで調整していきましょう。

ちなみに、手書きフォントを作る場合は一度紙に文字を書きます。それをスキャナー等で取り込み、デザインソフト上でなぞったりしてデータ化。自動でやってくれる機能とかもありますが、基本的に動作が重いです。

Inkscapeはデータを2つ用意しましょう。作字用のデータと取り込み用のデータです。キャンパスのサイズは1000px×1000px(FontForgeの初期設定)。気になる方は1024px×1024px。どっちでもいいです。あくまでサイズの目安とするだけなので、デザインの際ははみ出ても問題ありません。縦サイズを変更した場合は後でFontForgeに入力するので、覚えておきましょう。

デザインフォント等では無視することも多いですが、文字には基準がちゃんとあります。大文字アルファベットの一番下に接するライン、そこをベースラインと呼びます。gやjといった下に飛び出る文字は、ベースラインよりも低い位置にあるという事なんですね。なので作字の際は、キャンパスを下に飛び出すようにg等をデザインしてあげれば一応は辻褄が合います。見た目的には問題ないのでセーフ。

作字用のデータ上で作字をし、取り込み用のデータにコピーして.svgで出力、FontForgeで取り込み設定……というのが一連の流れになります。あくまで僕の(昔の)やり方ですので、色々調べて自分に合ったやり方を模索しても良き。これ以降もずっと自己流であることを先に断っておきます。断るのが遅い。

という訳でInkscapeでサクサク作字。ズバババー。

なんか文字が増えました。やっぱり大文字くらいは作っておこうかなって。大文字は正しい向き・順番ですが、区別できるように線を増やしてます。変な言語感出てきました。ゼヴェバ語圏に暮らす人はこんな難解な文字を使いこなしてるんですね……。

ちょっとしたズレとかありますが、今回はスルーします。無駄なアンカーポイントとかはちゃんと消すように。あと文字ごとに図形を統合してしまいましょう。楽です。

ここまで出来たら、いよいよFontForgeの出番。ここからも大変ですが、もう少しです。頑張りましょう。

Step3：文字とデータを紐づけしよう

一番地味かつ楽しくないけど一番大切な作業です。このステップを踏むことで、先程のベクターデータはフォントへと進化するのだ。ガハハ。

取り込み用の.svgファイル(キャンパスサイズは同じ)を作り、そこに文字を配置します。横位置は後から調整できるので、高さを間違えてないか確認したら保存。ファイル名はAで始まる名前にしておくと探すのが楽だよ。イラレで作業した場合の話ですが、一番古いバージョンの.svgファイルで出力しないとFontForgeがエラー吐くかも。この辺はアプデで改善して欲しい所です。

そしてFontForgeを起動。新規ファイルを作って下の画面が表示されたら、最初にフォント情報を弄っておきましょう。エレメントタブにあります。とりあえずはフォント名・著作権の名前の部分(パソコンのユーザー名がデフォルトで入ってる)・EMの大きさをチェック。EMの大きさはキャンパスの縦幅を入力してね。実用上はこれだけ設定しておけば問題ないので、他は気にせず進みましょう。

FontForgeを使用する際、日本語入力環境で半角英数を入力するとなぜか半角カナになります。多分バグですので充分に注意の上。テンキーやコピペ、変換を駆使して乗り越えてください。今後のバージョンアップ次第では直ってるかもしれませんが、2022年2月現在バグは健在です。Windows版以外がどうなってるかは知らん。すまんの。

一覧表から対応する文字を探してダブルクリック。表示タブ→グリフへのラベル付けを選ぶと、Unicodeだったり名前だったりでラベルを表示できます。脳内で文字⇔Unicode変換できる頭コンピュータ人間はUnicode表記にすればいいですし、文字の名前にしたいならそうしましょう。選択状態だとタブの下部分に青文字で情報が出てるので、そこで判断しても良いですね。画像によるを選ぶと漢字とかをちゃんと表示してくれるのでオススメです。

ちなみになんですけど、ひらがなやカタカナ・漢字は結構スクロールしないと出てきません。が、すべての文字が羅列されているこのリストではかなり上の方です。ホイールで丁寧にスクロールしないと思いっきり越えちゃうので注意。

注)Unicode…文字データの統一規格。これが生まれるまではいろんな規格が乱立してたために、文字化けとかが起こる原因となっていた。世界中の文字を1つの規格で表せるようにとガンガン追加していった結果、ヒエログリフや絵文字なんかも登録されている。ひらがなは(3000)₁₆あたりにあるぞ。16進数の表記法ってこれで合ってたっけ……？

ダブルクリックするとウィンドウが開くので、ファイルタブ→取り込みでさっきの.svgを開けばOK。これでベクターデータと文字データが紐づけされました。キャンパスの横幅が1000だったので文字幅も1000になってます。文字幅を調整したい時はメトリックタブを開くと色々あるので試してみましょう。

調整が終わったらこのウィンドウは閉じちゃって大丈夫。するとリストに文字が出ました。この調子でバシバシ追加していきます。

しかしまあ、毎回毎回データ作って取り込んでとやるのはメンドクサイ。なので僕は、下の様に横一列に何文字か並べてやってました。いらない部分を取り込んだ後に消して、幅調整。この方が幾分か楽です。多分。

ちまちま登録したら(上書き)保存。保存に成功すると青ベタ塗りに変わったラベルが白に戻ります。作った文字全てを入力するまで繰り返していけば、9.5割完成です。人によってはここからが大変だったりするのですが。

メトリックタブ→メトリックウィンドウを開くで試し打ちができます。字間調整(カーニング)もできます。なんかここだけ幅おかしくね？とか見つけたら調整しましょう。文字の組み合わせ毎に幅を調整できるペアカーニングや、特定の文字の組み合わせの時に特殊な文字を表示する合字の設定も実はできるのですが、フォントを使用するソフトによっては全く反映されないので(AviUtlもダメくさい)紹介程度に留めておきます。物量が多すぎてめんどくさいし。でもゼヴェバは頑張ってペアカーニングを設定してみました。

ここまで来れば残りはウィニングランです。フォントデータとして出力だ。

Step4：フォントデータを出力しよう

と、その前に。少しだけ脱線。フォントには大きく分けて.ttfと.otfの2種類がありますよね。本質的には同じものとはいえ、じゃあ何が違うの？と思う方もいらっしゃることでしょう。

これは簡単な話で、.ttfの上位互換が.otfと考えておけば良いです。.ttfはTrueTypeフォントというもので、文字サイズを変えても綺麗に表示できるよ～っていうフォントです。今でこそ一般的ですが、これが出た当時は画期的だったのでした。もう何十年と使われており、だいたいのソフトで読み込むことができます。

一方.otfはOpenTypeフォントというもの。.ttfをベースにしつつ、.ttfでは不可能だった文字ごとの細かい設定をできるようにしたフォントです。収録文字数が増えたり異体字にも対応してたりしますね。.ttfに比べるとまだまだ使えるソフトは少ない上、上記の機能をフルに活用できるソフトはその中でも限られてます。

それとは別にweb上で使えるようにした.woffなんてのもありますが、お目にかかる機会はそんなにないと思うので割愛。一応FontForgeはどの形式にも対応してるという事で。

つまり何が言いたいのかというと、出力は.ttfと.otfの2パターンでやっておけばまず間違いないという事です。どちらかひとつ選ぶなら、.otf。使用しているソフトが.otfに対応してなければ、.ttfも出力すればよいと。そんな感じです。webで使うつもりなら.woffで出力しましょう。

ファイル→フォントを出力で上のウィンドウが開きます。形式を選んで生成すればOKです。いろんな細かい設定を端折ってしまっているのでエラーを吐くかもしれませんが、無視しても問題なく生成されると思います。あとは完成したフォントをインストールすれば完了。お疲れさまでした。

一応、出力したフォントを自分で使ってみてください。ここでミスを見つけることもあるかもしれません。違う文字に入れちゃったとか気を抜くとやってしまいがちなんでね。あとはもう作ったフォントを、煮るなり焼くなりして楽しみましょう。

EX：応用編

ここでは割と実践的な活用法をば。例えば文字の代わりによく使うオリジナル記号やマークを入れてあげれば、いろんなソフトで入力できるお手軽スタンプになります。ウマ娘ゴシックに収録しているオマケ文字のURAロゴみたいな感じですね。

また、M+FONTSのようなオープンソースフォントを最初に読み込むことで、一部の文字のみ別の書体にするみたいな使い方もできます。これをする際は、ベースとなるフォントの規約をよく読みましょう。『フォントの改変禁止』みたいな事が書いてあった場合、基本的にはこの行為を指します。というか大体のフォントは改変禁止だと思います。フォントをベースにロゴを作ったりする人も多いと思いますが、その過程で変形させたり色を付けたりする行為は改変には当たりません。たまに勘違いしている人を見掛けますので参考までに。

注)M+FONTS…日本語に対応しているオープンソースのフォントシリーズ。オープンソースなのでフォントの改変および改変したフォントの配布が可能。源ノ角ゴシックとかもオープンソースフォント。特にフリーフォントにはこの辺のフォントをベースにしているものも多く、かくいう自分もいつか改変フォントを作りたいと思っている。

終わりに

さて、無事フォントが完成しました。個人で使う人は思う存分使っていただきたい所ですが、配布したい！という方も多いでしょう。今時配布場所なんていくらでも用意できますからそこはもう各々自由にやって頂ければと思いますが、BOOTHとかなら無料配布+投げ銭してもらうみたいなこともできるのでいいんじゃないでしょうか。あとは僕みたいにブログ。noteなんかも悪くないでしょう。ぶっちゃけ配布場所より宣伝の方が大切なので、そっちに力入れたほうが良いです。良いフォントができればみんな使ってくれます。

という訳で今回ついでに作ってみた『XevebaFont』はコチラ。

これまで(あるいは以降)作ったフォントはコチラ。

今後も不定期ではありますが色々作ろうかな～と思っておりますので、Twitterなりニコニコのフォロー、あるいはこのサイトのブックマークなりして頂ければ。投げ銭等もお待ちしております。以上。