The Non-Designer's Design Blog

艦これ、デザイン、webに興味があるただの大学生のブログ

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

f:id:pinebook0416:20170608193513j:plain

 

こんにちはAirです。

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

 

 

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

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

今では新たなフォントを探しに定期的にフォントを探し回っています。

おすすめのフォントはコチラ↓

www.pinebook.blog

 

利用するwebサービス

今回利用するwebサービスはこちらのCalligraphr(カリグラファー)というサービスです。

このCalligraphrでは用意されたテンプレートに自分で文字を書き込みそれを読み込ませることによって簡単に自作のフォントを作成することができるサービスです。

 

www.calligraphr.com

 

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

 

アカウント作成

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

f:id:pinebook0416:20170608200202p:plain

 

下の方の「GET STARTED FOR FREE」をクリックします。

※「No credit card required」は「クレジットカードはいらない」という意味です。

f:id:pinebook0416:20170608200330p:plain

 

f:id:pinebook0416:20170608210452p:plain

 

①にはメールアドレス

②にはパスワード

③にはパスワードの再確認

④には規約と条件への同意を示します

⑤で送信です

 

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

送信後にメールが届くのでメール内のリンクにアクセスしてください。

するとこのような画面に飛ばされます。

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

f:id:pinebook0416:20170608214049p:plain

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

f:id:pinebook0416:20170608214629p:plain

 

 

サイドバーに様々な言語のテンプレートが並んでいるので、「Minimal Japanese」を選択します。

f:id:pinebook0416:20170608220259p:plain

このサービスの無料版では一度に75文字までしか自作フォントを作成できませんので、作成したい75文字以外の文字をここで削除します。

面倒ですが根気よく削除していきましょう。

 

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

f:id:pinebook0416:20170608221457p:plain

 

 

75文字以下になると上の警告が消えるので「Download Template」をクリックします。

f:id:pinebook0416:20170608221759p:plain

 

 

「File name」にはフォントの名前を適当につけます。

「Template Format」ではPDFとPNGを選べますが、今回はPNGを選択します。

「Draw helplines」では、手書きをするボックスの背景に補助線を入れるかどうかを決めます。

「Characters as background」では、ボックスの背景に元の文字を入れるかどうかを決めます。

 

最後に、「Download」をクリックします。

f:id:pinebook0416:20170608222524p:plain

 

 

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

f:id:pinebook0416:20170608223159p:plain

 

 

ダウンロードしたzipファイルを展開すると、さきほど選択した文字と手書きをするための枠が用意されているPNGファイルがあるのでこれらを印刷します。

(手書きでもIllustratorなどのソフトを使用してもできますが、今回は手書きで行います。Illustratorなどのソフトで行う場合は、上の手順でダウンロードしたファイルをソフト内で開いて描画すればいいです。)

f:id:pinebook0416:20170608224451p:plain

 

手書きする

印刷しました。

f:id:pinebook0416:20170608230441j:plain

 

では上に表示されている文字と同じ文字を手書きで書いていきます。

【注意】汚い字ですがご了承ください。

 

完成したものがコチラ↓

f:id:pinebook0416:20170609155504j:plain

 

うん、汚い(確信)

書いている最中、小学校のときの漢字ドリルのことを思い出していました。

 

このままでは少し文字が薄いのでペンで上からなぞります。

完成したものがコチラ↓

f:id:pinebook0416:20170609164032j:plain

 

用紙をスキャンする

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

  1. スキャナーでスキャンする
  2. スマートフォンなどのカメラで撮影する

個人的にはきれいに作成するためにスキャナーを利用することをオススメします。 

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

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

スキャンしたものはコチラ↓

f:id:pinebook0416:20170609164910j:plainf:id:pinebook0416:20170609164912j:plain

 

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

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

f:id:pinebook0416:20170609165404j:plainf:id:pinebook0416:20170609165407j:plain

 

 

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

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

f:id:pinebook0416:20170609165728p:plain

 

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

f:id:pinebook0416:20170609165939p:plain

 

 

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

②「UPLOAD TEMPLATE」をクリック。

f:id:pinebook0416:20170609170143p:plain

 

 

この画面のまましばらく待ちます。

f:id:pinebook0416:20170609170400p:plain

 

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

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

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

f:id:pinebook0416:20170609171114p:plain

f:id:pinebook0416:20170609171118p:plain

 

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

f:id:pinebook0416:20170609171733p:plain

修正したい文字を選択します。

今回は★の中に若干白が残っているのでこれを塗りつぶしたいと思います。

 

「EDIT CHARACTER」をクリックします。

f:id:pinebook0416:20170609172456p:plain

 

これらのツールを使って修正を行います。

最後に「SAVE AND CLOSE」をクリックします。

 

フォントのインストール

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

f:id:pinebook0416:20170609172744p:plain

 

 

「Build Font」をクリックします。

f:id:pinebook0416:20170609172938p:plain

 

 

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

f:id:pinebook0416:20170609172941p:plain

 

TTF形式かOTF形式を選択してダウンロードします。 

f:id:pinebook0416:20170609173429p:plain

 

OTF形式とTTF形式ですが、今回はOTF形式を選択します。

OTF形式とTTF形式についてはコチラをご覧ください。

TrueTypeとOpenType - フォント専門サイト fontnavi

 

 

インストールされたフォントをダブルクリックしてインストールします。

f:id:pinebook0416:20170609174149p:plain

 

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

f:id:pinebook0416:20170609174244p:plain

 

お疲れ様です。

完成です。

 

実際に使ってみる

自分でフォントを作ったら使ってみたいですよね!?

では、実際に使ってみよう!

お使いのソフトのフォント選択欄から自分で作ったフォントを指定してタイピングしましょう!

私の場合このような感じになりました。

f:id:pinebook0416:20170610001738p:plain

 

濁点のフォントを用意していないので「ぶ」と「ぐ」が表示できません笑

これだとははてな社の何かの付録みたいですね

味があってすごく私はいいと思います。

これはもしや手書きでレポートを提出しろと言われたときに手書きフォントで作れば楽をできるのでは...

 

まとめ

  •  今回の手作りフォント作成の手順をざっとまとめると
  1. テンプレートのダウンロード
  2. テンプレートの印刷
  3. 書く
  4. テンプレートをスキャンする
  5. フォントをインストール
  6. 使う!
  • フォントを作るのにはすごい労力がかかる
  • 日本語のフォントは「ひらがな」「カタカナ」「英数字」「漢字」など本当に様々な文字を用意しなければいけないので、作るのとても大変
  • 書体デザイナーの方々へ→いつもお世話になっています。ありがとうございます。これからもよろしくお願いいたします。

 

この記事を読んでちょっとでも自作フォントづくりに興味を持った方はぜひ自分でオリジナルのフォントを作ってみましょう!

 

 

ここまで読んでくださってありがとうございます。

 

 

参考サイト

pc-pier.com