失敗談から学ぶ！フォント制作に適したツール選び

先日初めてオリジナルフォントを作りました！

完成したフォントが画面に表示された瞬間は、苦労が報われた喜びで小躍りしそうなくらい嬉しかったです。

ただ、制作中に思わぬ所でつまづき、必要以上に時間が掛かってしまいました。

この記事では、これからフォント制作に挑戦する方に向けて、

私の実体験をもとに「ツール選びの落とし穴」や「効率的な進め方」を紹介します。

特にこれから作る人には

「デザインツール選びは慎重に！！」

ということをお伝えしたいです。

■ツール選びで制作効率が変わる！

フォント制作初心者がまず知るべきことは

デザイン以降にどんな工程があるのか、どんなデータが必要なのか事前に把握することだと思います。

ただ絵を作って終わり！ではないので、各工程に進んでから「次は何か必要なんだろう？」と確認したのでは遅い場合があります。

まずは制作の全体像を把握してから、逆算して手段を選ぶことをおすすめします。

■フォント制作の全体フロー

まず前提として、フォント制作の流れを確認しましょう。

①フォントの仕様を決める（何文字作るか？スタイルの差分等）

②デザイン

③SVGデータとして書き出し※後述

④FontForgeでフォントとして登録・編集

⑤挙動確認

ここからは、各工程で注意したいポイントを解説します。

①フォントの仕様を決める（何文字作るか？スタイルの差分等）

 →アルファベットと数字だけ？ひらがな、カタカナは作る？

 　→フォントはコンピューターに認識させるための「コード表」を基準に作るので

  　　制作すべき文字・記号等を事前に把握しておきましょう

 →太さのバリエーションを用意したい場合、細いverを基準に作成しましょう

 　 FontForgeの標準機能に「輪郭を太らせる」機能があるので、後から調整可能なため

②デザイン

 →最終的に必要なのはSVG形式のデータです。

　 SVG出力に対応しているツールか確認しましょう。

 　※pngとして書き出したデータをSVGに変換することも可能（後述）

③SVGデータとして書き出し

 →FontForgeで細かい位置調整・形状の調整が可能なので「縦位置」だけ統一しましょう

④FontForgeでフォントとして登録・編集

 →SVG形式のデータを一文字ずつ取り込み・登録します

⑤挙動確認

 →Windowsの標準機能、MicroSoft製品、Adobe製品等、可能な限り様々なツールでデバッグしましょう。

 　私の場合、Microsoftの一部のツールのみで不具合が見つかりました。

■一番大変な工程：SVGデータの出力に注意！

実際に作ってみて一番苦労したのがSVG形式でのデータ出力でした。

デザインでも設計でもなくデータ出力？と思われるかもしれませんが

その原因は物量です。複雑で頭を使う作業より圧倒的な数の暴力に苦しめられました。

まず前提として、FontForgeに取り込むデータはSVG形式のデータでなければなりません。

・SVGとは

 拡大/縮小してもデータが劣化しないベクター画像形式です。

 解像度を損なわない編集が可能で、パスの編集データを保持した出力が可能。

・SVGデータの出力方法は大きく分けて2種類

 ①デザインツールから直接SVG形式を指定し出力する

 ②デザインツールからPNG等のラスターデータで出力し、外部ツールでSVGに変換する

 ※pngの内容物を輪郭検出し、自動でパスデータを作られます

  自動検出なので、パス/アンカーが増えすぎて編集しづらいデータになる可能性あり

【私の制作手順】

①Adobe Photoshop（デザイン）

  ↓パスデータを保持したまま移植

②Adobe illustrator（SVGにデータ変換）

③FontForge（フォント登録・編集）

デザインツールにPhotoshop選んだのは、「あらゆる形式のデータに対応している」という思い込みと、慣れ親しんだツールであるという理由から。

ところがPhotoshopのSVG対応サポートが2024年に終了していたため

急遽SVGに変換する手段が必要になりました。

前述で「PNGをSVGに変換する方法もある」と記載しましたが

私の場合はもともとパスシェイプを使った制作を行っていたため、

pngとして出力した場合、その労力が無駄になってしまいます。

そのため、どうしてもパス情報を保持した状態でSVGで出力する必要がありました。

そこで、illustratorに同サイズのキャンバスを作り、作ったフォントのパスを一つずつコピーし、

1点ずつSVGとして出力する形で対応しました。

その手間およそ4時間。太い・細いver2種類分とはいえ、馬鹿にならない時間が掛かってしまいました。

最初からSVGに対応したツールで制作していれば変換の手間が大幅に削減できたと思います。

無料のツールでもSVGに対応＆パスで制作できるものはあるので

これから始める方は、迷ったら下記のツールを使うことをおすすめします。

無料 → inkscape

有料 → Adobe illustrator

■まとめ

最初のツール選びが後の工程を左右する！

私のようにPhotoshopを使って後から変換に苦労するよりも、最初からSVGに強いツール（IllustratorやInkscape）を選んでおけば、時間も手間も大きく削減できました。

これから制作を始める方は、ぜひ「最終的に必要なデータ形式」から逆算して、ツール選びをしてみてください。

効率的なフォントライフを！