この夏はフリーソフトでフォント作成に挑戦してみよう
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

この夏はフリーソフトでフォント作成に挑戦してみよう

2014-07-29 19:06
    夏です!フォントを作りましょう!

    この記事では主にWindowsをターゲットとして、フリーのフォント作成ツールFontForgeの導入・簡単なフォント出力を解説します。近所のおじさんによる「夏休み工作教室」みたいなものですから本格的なフォント制作までは解説できませんが、フォント制作の世界に踏み込んでみるきっかけとなれば幸いです。
    この記事で扱うこと
    • FontForgeの導入
    • 簡単なフォント作成
    • とりあえずフォントを出力する
    この記事で扱わないこと
    • カーニングの設定
    • SVGのインポート
    • その他全般、本格的なフォント作成について

    FontForgeとは?

    FontForgeはUNIX向けに開発されたフリーのフォント作成・変換ツールです。
    日本語への対応は完全ではありませんが、メニューの多くは日本語化されているので海外製ソフトに抵抗がある方でも導入しやすいと思います。

    Windowsにおける導入方法

    UNIX向けのソフトウェアをWindowsで動かすためにはちょっとした工夫が必要になるのですが、FontForgeについてはその辺を含めてセットアップしてくれるパッケージが存在します。公式版(mingwを利用)と非公式版(cygwinを利用)がありますが、日本語環境においては非公式版の方がわかりやすいのでこの記事では非公式版で解説を進めていきます。

    1.ダウンロード
    unofficial fontforge-cygwinの公式サイトから最新版(2014/07/09現在ではfontforge-cygwin_2014_01_04.zip)をダウンロードし、任意の場所にZIPを展開します。

    2.セットアップ
    展開したフォルダ内のfontforge.batをダブルクリックすると、セットアップが始まります。結構時間がかかりますし、他のことでもしながら待ちましょう。また、一見コマンドラインの動きが止まっているように見えることもありますが、裏で処理が続いているのでウィンドウを閉じないでください。

    3.ファイアーウォールの警告
    ファイアーウォールの警告が表示されますが、ブロックしても構いません。
    (詳細は公式サイトの解説を参照)
    (仮に許可したところで変な通信するわけじゃないですけど……)



    4.完了
    セットアップが終わると自動的にFontForgeの「フォントを開く」ウィンドウが表示されます。UNIX向けアプリケーションをWindows上で動かしている関係で、見慣れない雰囲気かもしれませんが普通のアプリケーションと同じようにマウスやキーボードで操作できます。(日本語の入力は不可)

    Mac OS Xにおける導入方法

    筆者がMac環境を持っていないので詳細は解説できませんが、参考となるリンク(先人たちによる記録)を示しておきます。ターミナル(端末)を扱う必要があるのでやや難しいかも。

    FontForge を Mac (Mountain Lion) にインストールした - メモ用紙
    macにHomebrewでfontforgeをインストールする - dackdive's blog

    Linuxにおける導入方法

    普通にパッケージ管理システムからダウンロード出来るはずです。(投げやり)
    もともとUNIX向けソフトウェアなのでソース落としてビルドという手も。
    UbuntuだとUbuntu Software Centerから導入できました。


    FontForgeをいじってみよう

    1.起動
    セットアップ時と同様にfontforge.batをダブルクリックしてください。少々時間がかかりますが、「フォントを開く」画面が起動します。同時に起動するコマンドプロンプトはFontForgeが立ち上がってからも閉じないでください

    2.フォントの新規作成
    これからフォントを作るので「フォントを開く」画面で「新規(N)」をクリックしてください。
    これがFontForgeにおけるメインの画面「フォントビュー」です。
    薄い×になっているところは「その文字このフォントにおいて存在しない」事を示します。今回は新規作成ですから全部×になっているはずです。


    3.とりあえずグリフを作る
    とりあえずグリフ(文字)を作りましょう。
    さすがに最初からアルファベット、ましてや日本語のグリフを全部作るのは難しい&面倒くさいので数字あたりから手を付けるといいと思います。
    では画面をスクロールして数字を探しましょう。上の方にあるはずです。

    どれから作ってもいいのですが、今回は「0」(ゼロ)から作ってみることにしましょう。
    0の下の×になっている部分をダブルクリックしましょう。

    4.グリフ編集ウィンドウ
    IllustratorやInksacapeっぽいウィンドウが開きます。左側のパレットでツールを切り替えます。
    …イラレでの「ペンツール」みたいなものです。今回はこれを使います。



    FontForgeにおける編集は原則があります。
    外側の輪郭は時計回り内側のくり抜く部分の輪郭は反時計回りで描いてください
    実際に描いてみると、とかのように時計回りor反時計回りが表示されます。

    例えばこんな具合の図形(外側→時計回り、内側→反時計回り)を描画すると


    以下のような図形がフォントになります。(汚いですが、一応ゼロのつもりです…)

    グリフの編集が終わったら、そのウィンドウを閉じてみましょう。(保存などはクリックしなくてOKです)
    先ほど作った文字がフォントビューに表示されていると思います。


    その調子で埋めていきます。今回は0~9を作りました。(汚い字ですが勘弁してください)


    どの線を基準に作ればいいの?

    英文(英数字)タイポグラフィにはいくつかの掟があります。実は色々あるのですが、とりあえず今回は「基礎の基礎」ということで以下の3つに絞って解説します。ちゃんと知りたい!という方はWikipedia金沢美術工芸大の解説を参照するのをオススメします。

    (クリックで拡大)
    殆どが正方形に収まる漢字や仮名と異なり、アルファベットは字によって高さが大きく異なります。簡単に書きますと、基底となるのがベースライン、h,k,l等の上端(アセンダ)の部分がアセンダライン、g,y等の下端(ディセンダ)の部分がディセンダラインとなります。

    これらのラインをFontForgeの画面と対称させるとこんな感じです。(左右の線はグリフの横幅です。ドラッグで調整できます。)
    ベースラインを基準にグリフを作っていきましょう。
    5.グリフの調整
    とりあえず形を作って、問題なさそうであればグリフの調整に入りましょう。
    まずは幅です。グリフ編集ウィンドウでポインタ()を選択し、左右の線をドラッグする形で幅を調整します。
    ちょっと余白を開けてこんな感じにしましょう。

    これが視覚的に調整する手段です。

    数値で調整する手段もあります。こちらのほうが楽かもしれません。
    メニューの「メトリック」から「メトリックウィンドウを開く」を選択します。(グリフ編集ウィンドウ・フォントビュー、どちらから開いてもOKです)
    とりあえず作ったグリフ(今回は数字)を上のテキストボックス入力してください。
    すると以下のようになると思います。画面下部のフォント情報が表示されている部分から「左サイドペア」「右サイドペア」という部分の数値を調整しましょう。今回は全て20に設定しました。


    調整が完了するとこんな感じです。いい感じに詰まりましたね。
    必要に応じて更に調整してもいいでしょう。




    6.作業ファイルの保存
    データが飛ぶのも怖いので、ここらへんで一旦保存しておきましょうか。
    ファイルから保存を選択してもいいですし、Ctrl+SでもOKです。
    この「sfdファイル」はFontForgeの作業ファイルであって、最終的なフォントデータではありませんので、なんか適当な名前でOKです。


    ※次回以降、FontForgeを開いて編集を再開する場合はこのsfdファイルを開けばOKです

    Tips:ベクターデータ(SVG形式)のインポート

    (SVGインポートについての詳細は後日別の記事で解説します。今回はとりあえずフォントファイル書き出しまで、ということで)
    さて、察しの良い方はわかると思うのですが、正直なところFontForgeの貧弱な編集機能ではフォント作成を行うのは割とつらいです。苦行に近いものがあります。ということで、本格的にフォントを作成する場合は使い慣れたAdobe IllustratorInkscapeなど、SVG形式をサポートするドローソフトでグリフを作ってFontForgeに読み込んでしまいましょう。
    もちろん、とりあえず何かフォントファイルっぽいものを吐き出せたらいいやーという方はFontForgeだけで編集してももOKです。

    現在、ドローソフトを何も利用されていない方はInkscapeを導入してみるといいでしょう。流石にAdobe Illustratorには及びませんが、フリーソフトとしては優秀です。
    (ドローソフトの操作方法についてはさすがにカバーできないので割愛させていただきます)

    ベジェ曲線の操作はMSペイントのように一筋縄ではいかないのですが、とにかく慣れましょう。残念ながら、ベジェ曲線から逃げていては本格的なフォント作成はできません。

    トレーニングについてはOZPAさんによるブログ記事が分かりやすいのでオススメさせていただきます:Illustrator初心者の方へ送る、ベジェ曲線を描く際知っておくと便利なことと練習法(サンプルテキストもあるよ)|OZPAの表4

    フォントを出力してみよう

    1.フォント名の設定
    (ここまで書いといてなんですが、最初にやってもOKです。)
    メニューから「エレメント」→「フォント情報」を選択してください。
    タイトル無し(Untitled1)になっているところを上から順に埋めていきましょう。
    日本語は入力できません。また、「フォント名」ではスペース・括弧などを利用できませんので注意してください。(ファミリー名・表示用の名前ではスペースなどを利用できます)


    今回はこんな感じにしてみました。ウェイトやバージョンなどは編集していません。

    問題がなければOKをクリックして戻りましょう。

    2.出力
    「ファイル」→「フォントを出力」を選択してください。Generate Fontsダイアログが表示されます。
    デフォルトでの保存先はFontForgeと同一のフォルダになっています。


    この画面で「PS Type 1(バイナリ)」と表示されているところがフォントの形式です。
    今回はOpenTypeフォントを出力したいので、ここをクリックしてOpenType(CFF)に変更します。今回はファイル名をそのままにして「生成(G)」をクリックしましょう。
    ※既に一度フォントを出力している場合はファイル名を変更してください。同一のファイル名だと正常に上書き出来ない模様です。

    おそらく「問題が見つかりました」のダイアログが表示されると思いますが、スルーして「生成」をクリックしてもフォントは生成されます。今回はお試しということもありますし、スルーしましょう。


    ※Reviewをクリックすれば問題点が表示されますが、手動で調整する必要があります。


    3.フォントの確認
    保存先を確認しましょう。OTFデータが存在しているはずです。
    作成したグリフ(今回は数字)が反映されていますね。

    ではこのフォントをインストールして任意のソフトで試してみましょう。

    ほぼ問題なく表示されていますね。

    ※Wordの場合、収録されていない文字を入力すると別フォントに切り替わるので、一旦別のフォントで文字を入力し終わってからフォント切り替えすることをオススメします。

    おわりに

    始めてのフォント作成、如何だったでしょうか?案外すんなり作成できたのではないかと思います。FontForgeは機能や安定性に限界があるのは否めませんが、ある程度のものなら作成できますし、試行錯誤して実用的なフォントを作成してみるのもいいでしょう。
    本格的なフォント作成に興味を持ったのならば、有料ソフトも検討してみてください。WindowsならTTEditOTEdit、MacならGlyphsあたりがお手頃な価格のようです。

    では、楽しいフォント生活を!
    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。