フォント自作入門(2) グリフデザインの手順


このシリーズではフォントファイルを作る手順を解説します。
そしてこのページでは、「どのようにフォントをデザインするか」を中心に解説します。

ターゲットは、前記事で解説した「ラテン・アルファベット 基本字」の「アウトラインフォント」です。


前提となる技術

グリフの作成は、デザインおよびイラストレーションの工程です。
よって、絵を描いた経験があれば役に立ちます。

また、今回は「アウトラインフォント」を作成します。
「アウトラインフォント」制作は「ベクタ画像を描く」作業です。
IllustraterかInkScapeなどのドロー系ソフトの使用経験があると比較的スムーズに進みます。
経験がない場合、アウトラインフォントの制作のハードルは上がってしまいます。


グリフをデザインする

 グリフデザインの開始地点は、おおまかに2種類に分類されます。

1. 使用目的・コンセプトだけが決まっているが、具体的な形状がない。
『髭の生えた老齢のマスターが経営する、オリジナルブレンドのコーヒーが自慢の喫茶店に置かれた、古いメニュー表に使われているフォントを作りたい。メニューは厚手の紙製表紙でできている。見開きのメニューをひらくと内張りの紙は茶色に変色しているが、コーヒーの跳ね跡はほとんどなく、馴染みの客達がメニューを大事に扱ってきたことがわかる。
このフォントはイラストに使用される。半開きのメニュー表をキャラクタが持っていても、メニューの「Coffee」という文字が読めるほど可読性が高く、縮小されてもつぶれにくい』
というところまで決まっているのだが、ではそのフォントのAの頂点に左右の出っ張りが出ているかどうかというと、それはまったく決まっていないので、グリフとして絵に描くことができない。

2. カッコイイ"R"のデザインだけが完成している。
あとは同じデザインを"A~z"の52文字で繰り返せばいい。

でも自分のRの特徴が「人に説明できるほどはっきり」していないので、残りの文字すべてに、グリフ"R"の仲間に見えるデザインを最初から考えてやらなければならない。

あるいは
3.コンセプトすらない
という段階かもしれません。


ともかく、52個のグリフに共通のアイデンティティを持たせ、統一感を与えるには、作成するフォントのデザインに共通する特徴をはっきりさせる必要があります。
「このフォントはかっこいい」
ではなく、
「グリフ中の横線はすべて、マイナス30度に傾斜している」
という、具体性のあるデザインのルールを決める必要があるのです。
特徴を決めておけば、グリフデザインをスムーズに進められるようになります。

では、自作グリフに目的通りの印象をまとわせるためには、どんな形状を与えればよいのか。
グリフを個性的にする特徴には、どのようなものがあるのか。
その参考になるのが、既存フォントの分類方法です。


フォントを特徴により分類する

ノンデザイナーズ・デザインブックにある分類は覚えておくとよいです。
自分が何を作ろうとしているのか把握できます。

とりあえず、フォントにおける「セリフ」の意味は覚えておきましょう。

詳しくは検索するか、あるいは実際にノンデザイナーズ・デザインブックを読んでください。
Oldstyle
Modern
Slab selif
Sans selif
Script
  筆記体、手書き風、筆書き風
Decorative
  イラストっぽい。文字らしい外見をしていない。
  そもそも文字でないor読めないことすらある。


作ろうとしているのはたぶん、* SelifかScriptかDecorativeだと思います。
アニメに登場するオリジナル言語のフォントは、極端なDecorativeだと言えるかもしれません。
(参考:Madoca Runeとその派生StarTrekに登場する各文明言語など。)

とはいえ、フォントの分類は厳密なものではなく、いくつかの特徴を兼ね備えたフォントも存在します。
セリフの付いたScript体、のようなフォントも作ることができるわけです。
(装飾過剰にするとDecorative化していきますが。)


フォントの分類は、まだアイデアのない段階で参考にすると、
「落ち着いた喫茶店のメニュー表に使えるフォントが欲しい」
というあいまいなアイデアを、
・「Slab selifのような極太で太さが一定のフォントは、求めているものではないな」
・「Oldstyleのような横線が斜めで細いフォントが、白い髭の生えたマスタのいる喫茶店のイメージにピッタリだ」
・「セリフ付きのフォントにすると、作品に使う画像内で目立ちすぎるかもしれないな。サイズの縮小にも弱そうだ」

などと考えながら、フォント種別の特徴を取捨選択していけば、求めるフォントのデザインを具体化することができます。


Script(筆記体風)は難しい

・筆記体が持つ自然な線太さをドロー系ツールで再現するのは(初心者には)難しい
・前後の文字がつながるScript体を作るには、「プロポーショナル」フォントを制作するための深い知識と配慮が要る

プロポーショナルフォントと縦横比

・アルファベットのタテヨコ比は2:1(半角)
・等幅(モノスペース)フォント
・可変幅(プロポーショナル)は、見た目をよくできるが、幅を作業量が増えるため初心者向きでない



以上、まとめとして、
・既存フォントの特徴リストを知っていると、フォントデザインが楽になる
・前後の文字が繋がる形状のScriptは、フォント作成の深い知識が必要なのでオススメしない
・初心者がグリフをデザインするなら、半角のモノスペース



グリフのひな形・プロトタイプ文字列をデザインする


フォントデザインでは、最初にすべてのグリフのひな形となるプロトタイプを作成します。
プロトタイプは、フォントが描き出すグリフを想像して描く、検討のためのイラスト・デッサンです。
プロトタイプの段階では、ラテン・アルファベット52字をすべて描く必要はありません。


プロトタイプに使う文字列は、そのフォントがよく使われる文字列がわかっている場合、それを使うべきです。
作品タイトル・登場キャラクタ名などがそれに該当します。

また、特徴的な形状を持つ文字を含む文字列も、プロトタイプ文字列の候補になります。
ベースラインの下に突き出るグリフとなる"y" "g"が含まれる文字列などです。

また、最も重要なのは、下で説明する「出現頻度」です。「作品タイトル」はこの出現頻度を利用したプロトタイプ文字列選択の類例であると言えます。

 たとえば、MagiCursiveプロジェクトでは、作品の英語版タイトルである
「Puella Magi Madoka Magica」(特に最初の"Puella")
をひな形のターゲット文字列として採用しました。
実際に、「Puella」を最初にMadokaRuneで書き出してから、プロトタイプ作成を開始しています。


プロトタイプ文字列が思いつかない場合、"A Very" "The Velocity" から始めればよいと思います。


出現頻度

人間の使う言葉において、すべての文字が等しく使用されるわけではありません。
文字には出現頻度があります。
このことは、プロトタイプ文字列の選定をふくむ、グリフデザインのすべての工程において重要です。
英語の場合、単語では"the"、文字では"e"が他に抜きん出て多く使用されることが知られています。つまり、ラテン・アルファベットのフォントで"e"のグリフデザインが少し悪かっただけでも、すべてが台無しになります。
逆に、''q"のデザインで大失敗をしても、多くの場合は表示すらされないため問題になりません。
ターゲット作品のあるフォントでも、プロトタイプ文字列に悩んだら、出現頻度の高い文字を含む文字列を選択するとよいでしょう。


グリフの生産

グリフの本デザイン

すべてのグリフを描くことにはなりますが、出現頻度の高いフォントに労力を傾けましょう。

フォントファイル作成アプリケーションであるFontForgeに取り込める形式で、グリフを描いたファイルを用意する必要があります。FontForgeに取り込むベクタ形式ファイルとしてはsvgが最適です。また、svgに変換可能であるため、AI形式でベクタに起こしても大丈夫です。

最初からFontForge上でデザインする・FontForge上でラスタからベクタに起こすやり方もあるのですが、残念ながらFontForgeはドロー系アプリとしてはけっして使いやすくありません。

よって、慣れるまでは、グリフひとつごとに
1. ラスタでデザイン
2. ドロー系アプリでトレスしてsvgのベクタ形式に起こす
3. FontForgeに取り込む
という作業手順を踏んだほうがよいです。

また、「svgのベクタ形式」 も、作り方によってFontForgeへの取り込み作業の手間が大きく違います。(そのあたりの話はまた次回)

グリフのデザイン中は、他の文字のグリフを隣に並べて作業すると、グリフのサイズがちぐはぐになることを防ぐことができます。


まとめ







グリフデザインは
1. 少ない文字でグリフの形状を決める
2. 全文字のグリフを量産する
3. ドロー系ツールで清書する
の手順で進む

・作りたいフォントの形状の特徴をはっきりさせる
 (ex.「セリフ」はついているか?)
・Script(筆記体風)は「つなぎ」が難しいので、初心者が挑戦するのはおすすめしない
・等幅(モノスペース)
・プロトタイプは手書きでターゲット文字列から作り始める・ラテン・アルファベット のグリフの縦横比は1:2
・グリフは、とりあえずIllustraterかInkScapeでベクタ画像ファイルとして用意する
 

次回はグリフの集合(svgラスタ形式のグリフファイル)をフォントファイルに変換・出力する方法を説明します。

2014/09追記:
フォントの作り方を説明するより先にルーン文字フォントのリリースが先になってしまいました。
というか、フォント作ったことのない人間が解説するよりはリリースがあったほうが良いので、ある意味これでよかったのかもしれませんが。
友人にフォントの作り方を説明する必要もあるので、なんにせよ「自作フォントの作り方」は、いずれ続きを書きます。

Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換する

 Linuxコマンドライン上でSVGベクタ画像をJPG等へラスタライズ変換することができるが、上手く変換されない場合がある。   以前作った魔法陣イラスト素材をイラスト素材ストックサイトへ登録しようと思い立ち、改めて素材用にラスタライズ変換をかけようとした。   ラスタライズ変換...