改装中

自作フォントを作ってみたい!簡単自作フォントの作り方

こんにちはまっちゃ(@matcha_design)です。
今回はとあるWebサービスを利用して自作のフォントを作成することに成功したので、その方法と過程をご紹介いたします。

自作フォントを作ってみようと思った経緯

デザインの学習をしているとフォントや文字組みの話が出てくるのですが、
そのときフォントの種類や選び方の話も出てきてフォントに興味を持ち始め、
ふと「自分でもフォント作ってみたいなぁ」と思い今に至ります。

最近では新たなフォントを探しに定期的にフォントを探し回ったりもしています。
おすすめのフォントはコチラ↓

必見!おすすめフリーフォント5選

利用するwebサービス

今回利用するwebサービスはこちらのCalligraphr(カリグラファー)というサービスです。
このCalligraphrでは用意されたテンプレートに自分で文字を書き込みそれを読み込ませることによって簡単に自作のフォントを作成することができるサービスです。
参考 CalligraphrCalligraphr

このサービスはアカウントを作成してもしなくても利用できますが、アカウントを作成しなければ日本語のフォントを作成できないので、アカウント作成から手順を説明します。

アカウント作成


トップページはこのような感じになっています。


下の方の「GET STARTED FOR FREE」をクリックします。
※「No credit card required」は「クレジットカードはいらない」という意味です。


①にはメールアドレス
②にはパスワード
③にはパスワードの再確認
④には規約と条件への同意を示します
⑤で送信です

テンプレートファイルをダウンロードする

⑤の送信後にメールが届くのでメール内のリンクにアクセスしてください。
するとこのような画面に飛ばされます。

このページ内の「START APP」をクリックします。


「TEMPLATES」をクリックします。


サイドバーに様々な言語のテンプレートが並んでいるので、「Minimal Japanese」を選択します。
Calligraphrの無料版では一度に75文字までしか自作フォントを作成できませんので、作成したい75文字以外の文字をここで削除します。
面倒ですが根気よく削除していきましょう。


最初に削除するとき、このようなアラートがでます。このときチェックマークをつけることによってクリックするだけで削除できるようになります。


75文字以下になると上の警告が消えるので「Download Template」をクリックします。
次はフォントに名前をつけて保存、ダウンロードします。


  • 「File name」にはフォントの名前をつけます。
  • 「Template Format」ではPDFとPNGを選べますが、今回はPNGを選択します。
  • 「Draw helplines」では、手書きをするボックスの背景に補助線を入れるかどうかを決めます。
  • 「Characters as background」では、ボックスの背景に元の文字を入れるかどうかを決めます。
最後に、「Download」をクリックします。


するとこのような画面が出ますので、「(フォントの名前).zip」をクリックします。


ダウンロードしたzipファイルを展開すると、さきほど選択した文字と手書きをするための枠が用意されているPNGファイルがあるのでこれらを印刷します。
(手書きでもIllustratorなどのソフトを使用してもできますが、今回は手書きで行います。Illustratorなどのソフトで行う場合は、上の手順でダウンロードしたファイルをソフト内で開いて描画すればいいです。)

手書きする


印刷しました。
では、上に表示されている文字と同じ文字を手書きで書いていきます。
【注意】汚い字ですがご了承ください。


完成したものがコチラ↑
うん、汚い(確信)
書いていると、小学校のときの漢字ドリルのことを思い出しますね。
このままでは少し文字が薄いのでペンで上からなぞります。


完成したものがコチラ↑

用紙をスキャンする

用紙をスキャンする方法には2種類あります。

  1. スキャナーでスキャンする
  2. スマートフォンなどのカメラで撮影する
個人的にはきれいに作成するためにスキャナーを利用することをオススメします。

スキャナーでスキャンする場合

スキャナーでスキャンする場合はスキャナーで「モノクロ」または「グレースケール」に設定して、解像度を高めに設定すると良いでしょう。


スキャンしたものがコチラ↑

スマートフォンなどのカメラで撮影する場合



スマートフォンなどのカメラで撮影する場合は、四隅の四角形が入るように注意して撮影します。

テンプレートをアップロードする


「MY FONTS」をクリックします。


「Upload Template」をクリックします。


①先程スキャンしたデータを「ファイルを選択」をクリックし選択します。
②「UPLOAD TEMPLATE」をクリック。


この画面のまましばらく待ちます。
しばらくするとこのような画面が表示されます。


この画面では満足のいかないフォントをクリックすることで削除することができます。


OKであれば下にスクロールして「ADD CHARACTERS TO YOUR FONT」をクリックします。

アップロードしたフォントの修正


修正したい文字を選択します。
今回は★の中に若干白い部分が残っているのでこれを塗りつぶしたいと思います。
「EDIT CHARACTER」をクリックします。


画像に記されているツールを使って修正を行います。
最後に「SAVE AND CLOSE」をクリックします。

フォントのインストール


「Back to “MyFont”」をクリックし前の画面に戻ります。



「Build Font」をクリックします。
「Font name」のところに適当な名前をつけ、「Build」をクリックします。


TTF形式かOTF形式を選択してダウンロードします。
OTF形式とTTF形式ですが、今回はOTF形式を選択します。
OTF形式とTTF形式の違いはコチラのサイトをご覧ください。
参考 TrueTypeとOpenType、どう選べばいい?fontnavi
インストールされたフォントをダブルクリックしてインストールします。


「フォントインストール」をクリック。
完成!

実際に使ってみる

自分でフォントを作ったら使ってみたいですよね!?
では、実際に使ってみましょう!
お使いのソフトのフォント選択欄から自分で作ったフォントを指定してタイピングしましょう!

僕の場合このような感じになりました。
濁点のフォントを用意していないので「ぶ」と「ぐ」が表示できません笑
これだとははてな社の何かの付録みたいですね
味があってすごく僕はいいと思います。
これはもしや手書きでレポートを提出しろと言われたときに手書きフォントで作れば楽をできるのでは…

まとめ

今回の手作りフォント作成の手順をざっとまとめると

  1. テンプレートのダウンロード
  2. テンプレートの印刷
  3. 書く
  4. テンプレートをスキャンする
  5. フォントをインストール
  6. 使う!

感想とか

  • フォントを作るのにはすごい労力がかかる
  • 日本語のフォントは「ひらがな」「カタカナ」「英数字」「漢字」など本当に様々な文字を用意しなければいけないので、作るのがとても大変
  • 書体デザイナーの方々へ→いつもお世話になっています。ありがとうございます。これからもよろしくお願いいたします。
この記事を読んでちょっとでも自作フォントづくりに興味を持った方はぜひ自分でオリジナルのフォントを作ってみましょう!
ここまで読んでくださってありがとうございます。

参考サイト

参考 【文字フォント】Calligraphrで自作の手書きフォントを作るパソコン修理のエヌシステムブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です