初めに
ある日、自分だけのブランドロゴを創っていたのだが、ふと「他人のフォントを使ってもいいのだろうか？」という疑問が湧いた。一般的な「ゴシック体」とか「明朝体」とかなら著作権フリーだろうが、俺が使いたかったのはかなりクリエイティブな字体だったので、それをそのまま使うのは問題があるかもしれないな、と思ったのである。
またそのフォントが必ずしも自分の理想通りか、と言われれば、そうでもなかったので、せっかくなら自分だけのオリジナルフォントを創ってみようかと、先日思い至ったのである。結果的にそれなりのものが完成し、無事ロゴも創ることができたのだが、作業はかなり難航し、さまざまなトラブルを乗り越える必要があったので、備忘録も兼ねて、メモしたことを本記事にまとめておこうと思う。
なお例によって、パソコン環境はWindowsを前提としている。
予備知識と準備
フォントの作成には、FontForgeというフォントファイルを編集することができるフリーソフトを使う。リンクからダウンロードして、インストールしておこう。そしてフォントファイルには以下の三種類があり、オリジナルであれば「ttfファイル」で作るのがいいだろう。
①TrueTypeフォント（.ttf）：広く普及しているフォント形式で、ほとんどのアプリケーションやOSでサポートされている。
②OpenTypeフォント（.otf）：TrueTypeフォントの機能を拡張した形式で、より多くの文字や高度なタイポグラフィ機能をサポートする。
③Web Open Font Format（.woff/.woff2）：主にウェブフォントとして使用され、ファイルサイズが小さく、ウェブページの読み込み速度を向上させる。
フォントの作成手順
まずはFontForgeを起動し、「新規」を選択する。既存のフォントをベースにする場合は、「ファイル」→「開く」でフォントファイルをインポートし、編集する。以下は実際にフォントファイルを開いた状態のFontForgeの画面である。最初は以下のようなフォントエディター画面になり、各文字画面（グリフ）をダブルクリックすることで、グリフ編集画面を起動できる。
グリフ編集画面でベクターデータの編集を行い、これを任意の文字全てに対して行う。編集が済んだら、エラーがないかチェックするために、「エレメント」→「Validation（検証）」→「Validate（検証）」を実行（ここで出るさまざまなエラーへの対処法は後述）。エラーチェックが済んだら、「エレメント」→「フォント情報」でフォント名やメタデータを設定。
設定が完了したら、「ファイル」→「フォントを出力」を選択し、保存形式（.ttf、.otfなど）を選んでフォントファイルを生成。作成したフォントファイルをダブルクリックしてインストールオプションを選択するか、ファイルを「C:\Windows\Fonts」内に入れる。最後にテキストエディタやデザインソフトでテストして終了。
作成のヒント
①グリフの大きさ
各文字（グリフ）の大きさに特定の制限はないが、フォント全体の一貫性を保つために、EMサイズ（Em Square）を設定することが一般的。通常、EMサイズは1024pxまたは2048pxに設定され、これにより各グリフの相対的な大きさを統一することができる。FontForgeでは、メニューバーから「エレメント」→「フォント情報」を選択し、「一般情報」タブの「EMの大きさ」から設定できる。
※EMは、タイポグラフィにおける相対的な単位で、元々は「M」の文字の幅に基づいていたが、現在ではフォントのデザインにおいて、EMはフォントの基準となる正方形のサイズを指す。例えば、1EMはフォントのデザインにおける基本的な単位で、他の文字や要素のサイズを相対的に決定するために使用される。なおTrueTypeフォント（.ttf）では、EMサイズは1024pxが推奨されている。
②上下の余白の設定
上下の余白（アセンダーとディセンダーのスペース）は、フォントの読みやすさと美しさに大きく影響する。アセンダー（Ascender）は小文字の「b」や「d」などの上部の高さを指し、通常、EMサイズの70%から80%程度に設定される。ディセンダー（Descender）は小文字の「p」や「q」などの下部の高さを指し、通常はEMサイズの20%から30%程度に設定される。
FontForgeでは「エレメント」→「フォント情報」を選択し、「一般情報」タブで「高さ（アセンダー）」と「深さ（ディセンダー）」の値を設定できる。
③Illustratorでのパス作成
パスをイチから描いたり、既存のフォントのパスを編集するだけでなく、Illustratorを使って画像（ラスターデータ）からパスデータを生成し、それをインポートして編集する方法もある。
イラレに素材画像を取り込んだら、「オブジェクト」→「画像トレース」→「作成して拡張」をクリックすることで、画像データがパスデータに変換される。そのままではパスはグループ化されているので、右クリックから「グループ解除」を選択することで、個別に編集することができる。パスデータに変換されるのはある程度暗い色のみなので、必要に応じて素材画像をレタッチしておく。
パスはSVGファイルとして個別に書きだすといい。まずツールバーから「アートボードツール」を選択し、適当にアートボードを作成する。その後アートボードツールをダブルクリックすると、選択中のアートボードオプションが表示されるので、そこに任意の幅と高さを打ち込んで、アートボードを正方形にする。
そこに個々のパスを描き込んでから、「ファイル」→「別名で保存」から保存オプションを起動し、ファイルの種類を「SVG」として、さらに下の「アートボードごとに作成」にチェックを入れて「保存」をクリックする。するとアートボード内のパスのみがSVGファイルとして書きだされる。
④ベクターデータのインポート
作成したSVGファイルをFontForgeのグリフ内にインポートするには、グリフ内で「ファイル」→「取り込み」から取り込みオプションを開き、フォーマットを「SVG」に変更し、指定のファイルを選択して「取り込み」をクリックする。取り込んでもグリフのプレビュー画面に文字が表示されない場合は、パスが完全には閉じてないか、先に大きなベクターデータを読み込んだせいで、グリフ内にある青い縦線（基準線）が遠くに行ってしまったかである。
前者の場合は閉じていないアンカーポイントを見つけて、繋ぐと解決する。後者の場合は青い縦線をドラッグして、パスの横まで持っていくか、一度グリフを右クリックし、「Clear」を選択して初期状態に戻してから、再度取り込むとうまくいく。
⑤フォントの太さ変更
グリフを選択し、「エレメント」→「スタイル」→「ウェイトを変更」から変更できる。初期値ではEmbolden by :「50」になっているが、そのまま「OK」をクリックすると太くなりすぎると思うので、まず30くらいにするのがオススメだ。なお細らせたい場合は数値を－（負の数）にすればいい。数値が＋（正の数）なのに細くなってしまう場合は、バグっているので、一度ソフトを再起動するといい。それでも直らない場合もあるが、気長に待つといつか直るので、ひとまず別の作業をする。
⑥グリフの文字が別の文字に置き換わっている
何らかの理由である文字がある文字に置き換わるバグがある。そうなるとグリフ編集画面のグリフセレクターに正しいキーを打ち込んでも、間違ったキーに置き換わってしまうので、おとなしくグリフをクリアして再起動すると直る。これも直らない場合があるが、いつの間にか直る。恐らくキャッシュか何かの不具合だと思う。
⑦パスの中のパスが閉じているのに、空洞にならない
内部のパスと外部のパスの方向が一致していない可能性がある。通常、外部パスは時計回り、内部パスは反時計回りに設定する。どちらかのパスを選択して、「エレメント」→「アウトラインの向きを反転」を選択すると解決する。
⑧「保存に失敗しました」
保存先のフォルダに書き込み制限がある可能性がある。初期状態では描き込み先がFontForgeのプログラムフォルダ内なので、管理者権限が必要で失敗するのかもしれない。別のディレクトリに保存するとうまくいく。
⑨スペースの作り方
スペースグリフが設定されていないフォントでスペースを入力すると、四角形が表示されてしまう。これを修正するためには、スペースグリフ（通常Unicode U+0020）に適切な幅を設定する必要がある。グリフを選択して、「メトリック」→「スタイル」→「幅」を実行し、カウンターとサイドベアリングのスケールを設定する。一般的には小文字の平均幅の1/3程度の幅に設定するらしいが、グリフ幅の50%でもちょうどよかった。
「検証」のエラー
This font contains non-integral coordinates
フォントの座標が整数値でないことを意味し、TrueTypeフォントでは、すべての座標が整数値である必要がある。解決するには、「編集」→「すべてを選択」を押し、「エレメント」→「座標を丸める」→「整数に丸める」を実行、もしくはフォントエディター画面で任意のグリフを選択し、右クリックメニューから「整数に」を実行する。
Self Intersecting
パスが自己交差していることを意味し、フォントの生成や表示に問題を引き起こすことがある。修正するには、「エレメント」→「重複処理」→「重なり合う図形を結合」を実行するか、グリフを手作業で編集する。手作業で編集する場合、「エレメント」→「グリフの自己交差」を実行すると、交差している場所が拡大表示される。エラーが消えない場合は、「エレメント」→「単純化」→「単純化」を実行してみる。
Missing Points at Extrema
パスの極値（そのパスの最も高い点と最も低い点）にポイントがないことを意味し、修正するには「エレメント」→「極大点を追加」を実行するか、グリフを手作業で編集する。目視して最も高い場所と低い場所に「頂点を追加」ツールで頂点を追加する。まぁパス全体を選択して、「極大点を追加」を実行するのが最も確実。
Wrong Direction
パスの方向が正しくないことを意味し、通常外側のパスは時計回り、内側のパスは反時計回りに設定する必要がある。修正するには、「エレメント」→「アウトラインの向きを修正」を実行する。
There is another glyph in the font name (& unicode)
先ほどの「⑥グリフの文字が別の文字に置き換わっている」の状態と同義で、同じフォント名やそのUnicodeポイントに複数のグリフが割り当てられていることを意味する。修正するにはフォントビューでエラーが発生しているグリフを特定し、重複しているグリフのうち、不要なものを削除するか、必要に応じて統合する。
統合する場合は間違っている方のグリフをコピーして、正しい方へペーストしてパスを一つのグリフにまとめる。最後に間違っている方のグリフを右クリックして、「グリフ情報」から、正しい名前やUnicodeを再割り当てして終了。※もし重複しているグリフが見当たらない場合は、バグ状態なのでソフトを再起動する。
Missing bluevalues entry
PostScriptフォントのヒント情報に必要な「BlueValues」エントリが欠けていることを意味し、修正するには「エレメント」→「フォント情報」から、「PS Private」タブの「BlueValues」フィールドに適切な値を入力する。これはフォントのベースラインやキャップハイトなどの重要な高さを指定している。同タブ内の「推測」ボタンを押すと、FontForgeが自動的に適切な値を推測して入力してくれる。
Alignment zone height in BlueValues/OtherBlues array is too big for BlueScale
BlueValuesまたはOtherBlues配列内のアライメントゾーンの高さが、BlueScaleに対して大きすぎることを意味する。修正するにはBlueValuesとOtherBluesの値を確認して、これらの値が適切に設定されているか確認する。適当に値を小さくするとエラーは解消する。
お終いに
俺は生粋のラスターデータ愛好家なので、普段あまりベクターデータのパスを編集したりする機会はないのだが、今回は拷問のように長い時間パスを弄ることになったので、大変であったと同時にいい勉強にもなった。
俺は素材画像を作ってから、それをイラレに取り込んでアウトライン化する手法でフォントを作ったが、正直その手法はオススメしない（笑） 自動生成されるパスはあまりにも乱雑で、無駄なアンカーポイントが多く、形を整えるのみならずエラーを回避するための編集が容易でないからだ。結論「パスはイチから描け！」だ。
最後に、今回実際に創ったフォントのお披露目がてら（アイキャッチ画像でも使っているが）、当初の目的であったロゴの完成絵を貼っておこう。フォント名はそう……「結逸夢弐の魔法字体」だｗ
ジャーン！ これが俺のブランドロゴになる。もともと魔法陣風なロゴにしたかったので、ルーン文字ライクな手書き風フォントが必要だったのだが、大量に持っているフォントコレクションのなかにも”おあつらえ向き”のものが少なく、それならばと今回自作したわけだが、いろいろと気に入らないところはあれど、全体としてそれっぽい雰囲気は醸しだしている、いいフォントに仕上がったと思っている。
ロゴとして見ても、できるだけシンプルに、複雑になりすぎない程度にまとまっていると思う。真ん中の図形は普通のペンタグラム（五芒星）ではなく、俺の名の頭文字”Y”と”M”を表すよう変形させてみた。うーん、なかなか中二病心をくすぐられるではないか？ ペンタクル（五芒星魔法陣）型のロゴというわけだ。
ともあれ、無事ロゴも完成したことなので、これから何かグッズでも作って、当サイトで販売でもしようと画策している（可能かどうかまだ未知数だが）。俺が創るグッズはどれも、この「結逸夢弐」印に恥じぬよう、世界にまたとない唯一無二なデザインであることは保証しよう。もし販売を開始したときには、ぜひ買ったりシェアしたりして、応援してくれると幸いだ。
それでは、今回の記事はここまでだ。最後まで読んでくれてありがとう。また次の記事で会おう。
コメント