フォント「すこやかほーぷ」を自作した話
4月10日は、フォントの日。
その日に向けて、沢山のデザイナーさんがフォントを作る。
デザインオタクの僕からすると、最高の1日です。
イベントの存在は知っていたのですが、
フォント制作は、やはり難しそうというイメージが強く、
今年もフォントを使用する側での参加で良いかと思っておりました。
今回はそんな僕が、3日でフォントを作った話をします。
※当記事は解説というよりは、本当に独学バカの感想戦なので、
少年漫画のアツい一節だと面白がって読んでもらえると本望です。
僕がやる気を出したきっかけ
たまたまフォント公開日の数日前に見かけたXのポストを見て、
この制作を始めようと思いました。
「もう直ぐフォントの日なのでフォントを値下げします！」
あぁ、もうそんな時期か。この人本当に良いフォント作るな…
そんな感想だけで収まることはなく。
3月頃からデザインの馬力が正直狂っていたので、
僕も作らなきゃと、思ってしまったんです。
ここからほぼ二徹をするので、本当にバカだなと思います。
でも今思えば、この時謎にやる気を出して動いて良かったです。
とりあえずフォントのデザインを考える
よし、フォント爆速で作って間に合わせてやるぞ…！
となったのは良いのですが。
フォントの作り方は当然何も知らなかったので、
①イラレで文字デザインをする
②フォント制作ソフトに読み込む
大まかにこの２段階のイメージしか湧きませんでした。
フォント制作ソフトについて学ぶとやる気が失せそうだなと、
フォントのデザインから始めることにしました。
でもどんなフォントにしようかな。
「角が丸っこくて可愛いフォントで、その上インパクトがある」
自分のデザイン性やフォントの流行、使いやすさ等を考えると、
こんなイメージのフォントを制作するべきだと思ったんです。
インパクトを出すには、フォントは基本単色なので、形状勝負です。
可読性大好きマンなので、フォント自体の形状を独特にするよりは、
何らかのモチーフを組み込んで、作るのがベストだと思いました。
フォントに何のモチーフを組み込むか
当初はひらがなのみの実装を予定していたので、
ひらがなの特性を考えるとなると、
横棒としても丸としても組み込めるモチーフを求めていました。
どちらかと言えば、明るい意味を込めたフォントにするため、
ネガティブな意味を含んでいるモチーフは使えません。
「となると、双葉とか良さそうかな。」
割と奇跡でした。
悔しいですが、本当にたまたま適当に思いついてしまいました。
「ジャックと豆の木」などで思い浮かべるような、
メキメキと育つ「すくすく感（？）」をテーマのフォントにしよう！！
【角が丸っこくて可愛い】×【双葉】
テーマは決まりました、あとはひたすら作るだけです。
フォントのデザインを作るなかで【ひらがな編】
イラレを開いて、気付けばもう4時間くらい経ってました。
ただがむしゃらに、フォントを作り続ける、それだけ。
僕の中でのフォントの王様「ヒラギノ角ゴシック」を参考にしながら、
自分の好きな形状になるようにフォントを制作していきました。
ひらがなを一通り作って思ったことは、ロゴ作り&作字に似ている。
一から文字を作るだけと思えば、そんなに難しくは無かったのです。
ただ、ここでフォントの知識が皆無なことが痛手に出ました。
ひらがなが終わった時に、ひとまず簡易的なフォント制作サイトで、
制作したひらがなを「た行」まで読み込ませてみました。
（※データの形式の話は後々書きますね。）
「まずい、横幅合わせなど考えずに作ってたぁ…」
縦幅を合わせましょうと、参考にしていたサイトに書いていたので、
それだけは利口に合わせていたのですが、横幅は盲点。
試し打ちをしてみると、バランスが終わっていて、
卵、ダブルカツ、卵のサンドイッチセットのような厚さの差でした。
何がまずいかというと、横幅の訂正をした時に、
「可読性を保つことができるのか」というところです。
このフォントでの具体例を出すと、
直しても可読性が保てたので変更できたのが、「お」で、
可読性を守るためにそのままにしたのが、「か」です。
モチーフを組み込んだフォントデザインは、
横幅と可読性の勝負、デザインオタクとしては燃える話ですが。
可読性と横幅を一通り悩んでみて、
とりあえず妥協できるところまで訂正し、読み込みフェーズへ。
フォント制作ソフトとの格闘
最初に言っておきます、FontForge本当にありがとう。
少し前に書いたように、当初はブラウザで簡単に制作するつもりで、
とあるサイトで読み込みを進めておりました。
とてもUIが分かりやすいし、試し打ちもその場でできる為、
使いやすく、このまま一直線で完成させよう！
「君、アンカーポイントめちゃくちゃ打つよね？（天の声）」
角ばっていたり、パスがシンプルなフォントは良いのですが、
読み込み補正がかかってしまうようで、
僕にとっては向いていないことが発覚しました。
さよなら、た行までの皆。
ここからFontForgeとの格闘が始まった訳です。
Macで普段制作しているのですが、Macとの相性が悪すぎます。
毎度毎度マルウェアがどうだのと開くのに手間がかかる。
※多分どうにか出来ましたが、ゴリ押しで開いてました。
日本語化パッチも読み込むことでの不具合が怖かったので、
ひとまず英語で戦ってみようということになりました。
これから制作してみようと思っている方に向けると、
ひらがなのUnicodeはかなり下の方なので超スクロールします。
FontForgeを使う場合の制作フロー
①イラレで文字デザインを制作する
②svg形式で保存する（1文字ずつ）
③FontForgeでUnicodeを探し読み込む
④横幅を合わせる
自分の場合は、①をひとまず終わらせて、
②〜④をその都度繰り返すという方法をとっていました。
正直こんな一方通行の会話みたいな途方のない作業をしながら、
イラレでデザインもしては耐えきれないと思ったからです。
ただ、横幅の違和感など気づきやすい点が多いので、
少しずつ作るのがオススメです。本当にミスが減ります。
「とりあえず記号含めひらがなほぼ終わったぞ〜！！」
あとは小文字とや行以降ですね、頑張ったのは良いですが。
当時の僕は浮かれていましたが、大変な事件が発生します。
一度や行の手前で休憩を入れて作業を止めていたので、
縦幅がちょっとずつ小さくなっている。
しかも全て読み込んでしまった後に分かったことです。
なぜ確認しなかったのか、本当に愚かな生き物ですが、
保存したsvgを消して、もう一度拡大しやり直すことになりました。
（TWO HOURS LATER…）
格闘の末、ひらがな編完結。
フォント出力で試してみて、違和感がないか一通り確認して、
細かい字間と大きさを調整して、終わりです。
「よし、フォントこれで出せるじゃん、1日余裕ある！」
謎にアルファベットを作り始めてしまう
※時系列的には、まだフォント制作サイトで格闘していた頃です。
パスの読み込みが簡易化されてしまうことに萎えていたので、
よく顔を出す配信者さんの枠にボヤきに行きました。
フォントを制作しているんだよ、という話をしたのですが。
同枠のリスナーさんから、
アルファベットが欲しいよという声があったのです。
これは作んなきゃダメに決まってんだろ〜！！
止める勇気を知らない人間は、アルファベットを作ることにします。
本当は9日の昼に始める予定だったのですが、
急用とひらがなのデバッグで時間が思ったよりかさんでしまい、
着手は10日の0時になりました。
10日という悪魔との睨めっこ
10日は、大学の始業日です。1限からありました。
でもフォントを作りたいです、作りたくて仕方がないです。
急用でアルファベットを作れていなかった僕は、
まるでご飯を「待て」と言われている犬のようでした。
ガッつくようにアルファベットを作って、終わったと思えば3時。
英数字もしれっと作っていましたが、そこは内緒です。
ただここで苦戦したのは、横幅ではなく、別の問題で。
アルファベットという神文字の盲点
アルファベットは、記号的で本当に最高にカッコいいんです。
スラっとした高身長で、黒髪のイケメン男子生徒会長のような。
ひらがなはデザインに幅をつけやすいんですが、
アルファベットはどちらかと言えば、図形の組み合わせなので、
モチーフを組み込みづらいんです。
「まぁ、生徒会長は、カチューシャつけて登校しないもんな…」
※英数字も副会長イケメンなので、同じ話です。
ここで決めました、モチーフは無理に組み込まない。
文字自体のデザイン具合で、基本は勝負しないとダメだと。
とても学びになったアルファベット&英数字の変でした。
正直実装して本当に良かったです。
なぜこうなるのかを考えるというのは、
感覚的に創作から始めてしまった独学マンにとっては、
とっても大切で普段サボっていることでした。
「ありがとう、愛しのアルファベット…」
アルファベットの方が図形の組み合わせで考えられるため、
比較的簡単に制作することができたのですが、
大文字と小文字の関係性がほぼ親子なので、そこの共通性！
変に形が違いすぎても、似すぎていても違和感。
そこがアルファベット&英数字の変、第2の壁でした。
なんやかんやで、鳥が囁く、朝6時。
全ての実装が終わり、ここからデバッグ作業。
フォント名を考えるという神聖な行為
※時系列的には、アルファベットを追加しようとする少し前です。
名前を付けるんですよ、親じゃないですか。
本当に作り手として、デザインオタクくんとして、幸せな行為です。
ただここで少しメタい話をしますが、
たくさんの人に使ってもらうためにどんな名前にすればいいのか。
それはもうキャッチーで、フォントにあった名前にしなければ、
誰にも使われずに、雨の中、段ボールでうずくまってしまいます。
フォントの名前の候補
①すくすくアルテミス
②あふろでぃーて
③すこやかほーぷ
幼い頃から、神話や星の名前が好きだったため、
ひとまず双葉に合いそうな形容詞と神の名前を合わせてみました。
可愛いのですが、カタカナ部分が長すぎる。
そこで豊穣の神を、ひらがなで表そうかと考えました、
これもまた可愛くて仕方ないんですが、まぁ当然の話ですよ。
「どんなフォントなのか伝わらないので、面白くもない。」
すくすく育つ、健やかに育つ双葉のイメージは、
前向きな希望であるなとも言えるなと思いました。
哲学的な思考が割と好きなので、意味も込めたかったんです。
健やかに育つように、前向きな希望が届きますように。
「すこやかほーぷ」、みんなのもとへ旅立ちなさい。
デバッグは時間と根気の勝負であること
当然アルファベットまで作ってしまった僕の炎が消えることはなく。
問題がないか、デバッグして確認しようとか言い始めます。
大事なフェーズなんですが、特に時間がないです。
ひとまずフォントを全て打ち込み、パスの確認を入れます。
パスのバグ、違和感と解釈できるものが、およそ70文字。
デトロイト市警のような気分でした。
「70文字の刺し傷だぞ！」
時間がない僕が、どうしたかというと。
本当に直すべきものか、見過ごせるものなのかを分けることにしました。
フォントの大きさで、アウトラインのパス数が少し変わるので、
この大きさだから発生しているものも十数文字ありました。
大雨の中、フォントのことしか頭には
ひとまず、ひらがなの選別が終わったところで、もう8時。
大雨なんですよ、晴れていて欲しかった。
始業日、一年生にとっては、初めての1限のため、
なぜかいつもより広く見える大通りで初々しい一年生が楽しそうに話す中、
二徹の僕は、FontForgeの画面を頭に浮かべて、
デバッグのことしか考えれれない体で歩いていました。
1限を受けながら、フォントのデバッグをしていました。
思ったより、1限が早く終わったので、お昼までデバッグ作業を続けます。※2限を取っていなかったため。
フォントの選別が終わりました。
確実に直しが必要なものは、ほぼ20文字。
パスの変形ミス、幅感がおかしい、謎のバグなどなど。
ここからは一つずつ、一人ずつと向き合っていく作業です。
まるで恋リアの好きな人が決まるまでの時間のように、
この子はこうで、この子はこうでと、見ていくのです。
FontForgeの読み込みの設定で、
パスを簡易化してもらったり、向きの調整をしてもらえるのですが、
それをしていたため、バグが多かったんです。
簡易制作用のサイトで苦戦したことが、ここでまた。
13時、フォントのデバッグが終わりました。
対戦ありがとうございました、FontForge先生。
フォントを出すまでが遠足ですよ
ひとまず5限まで授業を取っている僕は、
歩いて帰るとなると早歩きしても、家に着くのは6時半。
「90分でリリース準備は出来ない。」
ここでn度目の奇跡、初回の授業だったため、
4~5限の続きだった授業は4限の頭で解散となりました。
家に爆速で帰宅した僕には、150分の猶予。
BOOTHのフォント販売ページを見漁り、見よう見まねで、
文章、リリースデータ、画像の作成を行います。
BOOTHはある程度慣れていたので、
会社での飲み会の後に、友達の家で愚痴るような気分でした。
「FontForge係長、試し打ちさせてくれなくてさぁ…」
リリース予定の5分前、全て終わりました。
告知ポストの準備まで済ませた僕は、もう清々しい気分でした。
「リリースしよ！！」
はい、ここで痛恨のミス。
フリーフォントの旨を告知ポストに書いていませんでした。
「再ポストしよ！！」
最後まで不器用人間ポイント丸出しの僕でしたが、
リリースまで漕ぎ着けました。
最後に
ここまで読んでくださって、本当にありがとうございます。
後半にかけて、形容詞丸出し、比喩だらけなのは、
当時の自分のテンション感の差異を出すためです。
「すこやかほーぷ」、現時点で1000弱のダウンロード。
本当に本当にありがとうございます。
沢山の使ってみたや使いたいという旨のポスト、
嬉しすぎて仕方がないので、どうにかなりそうです。
来年フォントの日にまたフォントを作成しますかと言われると、
同じ行為をもう一度できるか分かりません。
なんなら、同じもしくは上のクオリティを出せるかが怖いです。
ただ多少の知識は身についたので、
次回のフォント制作はもう少しスムーズに丁寧にできるはずです。
以上、デザインオタクの人間がほぼ3日（2日半）で、
フォントを作ったというおバカな話でした。
「おい、待て待て、大事な話を忘れているぞ！（天の声）」
なぜフリーフォントにしたのか
気になっている方も多かったようで、理由は明確に２つです。
データを分ける時間が無かったのと、使ってもらう為です。
「費やした時間と馬力を考えるとなると、100円くらいは。」
とも思ったのですが、沢山の人に使って欲しかったし、
分けるのが面倒くさかったです。（沢山の人に使って欲しかったです。）
「すこやかほーぷ」をどうか可愛がってやってください。
つみのより