自作フォントのSVGを書き出すためのIllustratorテンプレートを作り直した

次のフォントはパーツを使い回すタイプの漢字入りフォントの予定なので、久しぶりにSVGを書き出すためのIllustratorテンプレートを用意したのでその作業メモです。

私がIllustratorテンプレートでアートボード書き出しで書いたのはパンダベーカリーのみ。その後の手書きフォントはSVGを書き出さずコピペで作っていたのでテンプレートの利用は久しぶりです。

今までの自作フォント

私の自作フォントは毎回手順を変えてます。自分でも忘れているのでまとめ。

・パンダベーカリー）
Illustratorテンプレートは500px×500pxの正方形を16個横並び×6段＝96文字。シフトJISの文字一覧パネルが16個横並び並びなので合わせたのと、2014年当時のアートボード上限が100個だったため。フォントソフトの推奨は1000px×1000pxですが500pxでも私のデザインでは問題なかったです。1ファイル96文字ごとにSVGを書き出してTTEditにインポート。

・ふんわりラウンド、花とちょうちょ、空とひこうき、うさみみ）
Illustrator上でオブジェクトをコピー、TTEditかOTEdit for windowsの希望の画面に直接ペーストできる。SVG書き出しがないのでテンプレート不要（花とちょうちょはライブトレースの内容置き場として進行管理用にパンダベーカリーのテンプレートを使用）。マジックで書いた線を写真に撮ってIllustratorでライブトレースする場合、オブジェクトが小さすぎると文字が崩れる。ipadで書いてjpeg画像でライブトレースでもOK。Illustratorで描いて1文字ずつコピペでもOK。

・波とかもめ）
ipadとApple Pencilでベクターブラシで描いてデスクトップPCのIllustratorへ送る。SVG書き出しテンプレート不要。OTEdit for MacはIllustratorから直接コピペはできませんが、インポート用.svg（1文字）をイラレで常に開いておきここにコピペして保存。　OTEdit for Macの希望の画面にインポート用.svgのファイルアイコンをドラッグドロップ。でコピペ相当の動作にできます。「インポート用.svg」をひたすら上書き保存するので、ファイル名を書き換える必要がなく、アートボード名での書き出しは不要。

テンプレートを作り直してみたら、いまいち

パンダベーカリーの時のものはもう10年以上前なので、今の仕様で作り変えてみたんですが、これにちょっと苦戦しました。
まず、Illustratorのアップデートでアートボード上限は100個から1000個になっています。さらに通常カンバスにくわえ、100倍のサイズの「大きなカンバス」が使えるようになっています。
【参考】大きなカンバスでファイルを作成
【参考】大きなカンバスサイズ | FAQ と既知の問題
アートボード100個上限の時は7000字を70ファイルに分割ですが、
アートボード1000個上限なら7000字を7ファイルまでまとめられるはず。パーツをコピペするタイプの漢字制作ではなるべくまとまっていたほうが助かる。

しかし、

・通常カンバス（A4アートボードなどのいつも使っている新規ファイルのこと）では500px500pxでも横16個（シフトJIS文字一覧パネルの16個改行あわせ）×18段＝288文字程度でカンバスサイズがほぼいっぱいになり、そもそも1000個も置けない。1000px1000pxでは横縦13個＝169字くらいしか入らない。

・新規ファイルでサイズ：「プリント(大)」を選択すれば「大きなカンバス」で開ける。通常カンバスを途中で「大きなカンバス」にしたり、逆もできない。

・「大きなカンバス」ではスクリプトでアートボードやテキストオブジェクトを作成すると10倍のサイズになる。テキストオブジェクトが500pxなら5000pxが作られてしまう。スクリプトで数値を扱うものは通常スクリプトと「大きなカンバス」用スクリプトを２つ用意する必要あり。

・「大きなカンバス」で1000pxで1000個アートボードでダミーでテキストを配置していたが作業中にIllustratorが落ちやすい。保存や書き出しの動作もなんだか遅い気がする。

・どちらのカンバスでも、アートボード数が100個以上だとアートボードパネルがバグりがち。四角オブジェクトを「アートボードに変換」後、アートボード数が重複していたり、アートボード名がアートボード1、アートボード2、のようなデフォルトの並びなのに300個目あたりで途中で一つ飛んだりする。⇒Illustratorをアップデートして再起動や、アートボードのリネームスクリプトなどで直した。

とりあえずこうなった

・「大きなカンバス」は信用できないので今回はパス。通常カンバス内でやることにする。1000px1000pxにしたかったけどあきらめる。500px500px、約500字に変更。

・シフトJIS並びは今回は使わず、Unicode並びにする。漢字が似た部品でまとまっているのでパーツの流用が楽そう。シフトJISでないので横16個並びの縛りもなくす。500字ジャストで埋めなくても良いので、パーツの集合単位でファイルを区切る。

・テンプレートは19ファイルになりました。元の70数ファイルの時よりは良いんじゃないかな。

とりあえずこれでやってみる。第二水準などUnicode番号があるものはひとまず全部作る、StdN相当までCID特有のものを埋めるかは後で考える。実際描いてみてやりにくかったらこの記事また書き換えるかもしれません。

テンプレートの自作の手順

Illustrator用スクリプトでラクしてテンプレートを作ろうとしましたが、新規ファイルに対して四角オブジェクトを配置するところからスクリプトでやろうとするとカンバスからオーバーしたり、カンバスの中心にアートボード群が上手く収まりにくかったりしたので、四角形の配置は自力でやったほうが早かったです。1000px枠にしたいとか、50字や100字分でテンプレートにしたい場合も同じ手順で作れると思います。

スクリプトは多分ChatGPTにきけば一問一答で何度かやればすぐ出るので配布はしません。今回必要だったのはこの３つ。
・「四角形をそのままの位置でZ順に並べ替える.jsx」Illustrator用スクリプト（四角形のレイアウトが単純なら無くても良い。テキストを入れる前に「アートボードの再配置」すればOK。）
・「アートボード名を1文字ずつ書き換える.jsx」Illustrator用スクリプト
・「アートボードに1文字ずつテキストを配置.jsx」Illustrator用スクリプト

手順）

Illustratorの通常のカンバスに四角オブジェクトを1個置く。アピアランスの変形コピーで横25と縦20にふやし、500個にしてアピアランスを分割。この四角は変形パネルで座標をピクセル整数になるようにあわせておきます。四角いオブジェクトを選択し、ChatGPTで自作した「四角形をそのままの位置でZ順に並べ替える.jsx」スクリプトで順番を修正（アートボード順になるため）。四角いオブジェクトを選択し、アートボードに変換。

Unicodeの文字一覧テキストリストを用意する。OTEditで1-3新規ファイルを開き「文字一覧テキストファイルを作成」（文字コード：Unicode）で.txtを作り「メモ帳」などで開ける。（今回はパーツ流用しやすくするためUnicode順。）

Illustratorの500字テンプレートを開け、カンバス上部にエリアテキストを置く。文字一覧テキストリストを約500字分抜き出してここに書く。（２つの自作スクリプトでカンバス最上部のテキストを読み込む設定にしたため）。自作した「アートボード名を1文字ずつ書き換える.jsx」スクリプトで文字一覧テキストリストを反映するようにアートボード名を付け直し。 自作した「アートボードに1文字ずつテキストを配置.jsx」スクリプトでアートボード上に文字一覧テキストリストを1文字ずつ500pxで配置。

アートボード名でSVGを書き出し時にファイル名にできないもの（半角スペースやWindows由来のファイル名NG文字など）は手動でUnicode番号でU◯◯のようにOTEditのSVGインポートの仕様に合わせてアートボード名を書き換えておく。