まほろば-Web・ロゴをつくる人-
WEB 2018/05/22
フォントの作り方

【フォントの作り方】てがきのもじつくってみた

まほろば@mahoroba148です。

デザイナーのみなさんならば一度はフォントを作ってみたいと思ったことはありませんか?

私はあります!!

良質なフォントが増えてきて様々なデザインにあわせてフォントを選べるようになりました。

まほろば
しかし、自分の理想のフォントは見つからない!!
まほろば
ならば!つくってしまえばいいのではないか!?
まほろば
・・・・・
まほろば
どうやって作るの?

ということでフォントの作り方を調べてみました。

フォントの作り方

大きくわけて2つの方法がありました。

  1. オンラインサービスを使う
  2. 専用のソフトを使う

1.オンラインサービスを使う

「フォント 作り方」で調べると真っ先に出てきます。オンラインサービスの中でも

  • オンライン上でつくるタイプ
  • 手元で作ったフォントを変換してくれるタイプ

と種類がありました。

今回ご紹介するのは手元で作ったフォントを変換してくれるタイプです。

2.専用のソフトを使う

㈱武蔵システムという会社が販売しているTTEditというソフトで作れるそうです。

たぬきフォントの作者さんがご紹介していました。

手書きフォントの作り方 第1回【用意するもの編】

たぬきフォントの作者さんは手書き文字をスキャンして作成しているそうです。

「TTEdit」の場合ですと、ソフト上でも一から作成ができそうです。(YouTubeを見た感想なので保証はできません汗)

おためしで作りたいという方は今回ご紹介するオンラインサービスで十分体験できますよ!

Callingraphrでつくってみた

Calligraphrというフォント変換のオンラインサービスを使います。

残念ながら日本語対応はしていません。Google翻訳を駆使して操作していきました。

今回は手書き文字をパソコンに取り込んでフォントに変換してみました。

実際に作成した文字はこんな感じ↓

フォントの作り方

文字は書道を習っている友人にお願いして書いてもらいました。

スキャンしただけで調整は全く行っていません。横書きだと文字幅の違いが気になりますね。

フォント横書き

縦書きは調整なしでも美しい…!友人の文字は中心がしっかりとれているのでキレイにできました。

フォント縦書き

Callingraphrの使い方

それでは実際にフォントを作ってみましょう!

Callingraphrにアクセス

https://www.calligraphr.com/en/

Calligraphr

②スクロールしていき「GET STARTED FOR FREE」をクリック

無料版を利用します。好きな文字で作成するため今回は無料会員の登録を行います。

GET STARTED FOR FREEをクリック

③上からメールアドレス、パスワード、パスワード(再入力)を記入

利用規約の同意のチェックボックスにもチェックを入れましょう。

全て入力したらSUBMITをクリックして送信します。

無料会員登録

④③で指定したメールアドレスに届いたメール内のURLをクリック

メールアドレスの認証を行っています。

確認URL

⑤1.Create templateをクリック

画面に表示されている手順通りに作成を行います。

まずはどのフォントを作るのか指示書(テンプレート)を作成します。

Callgraphr作成手順

⑥左側のメニューから「Minimal Japanese」を選択

言語選択です。今回は日本語を作成するため「Minimal Japanese」を選択しました。

もしアルファベットの場合は「Minimal English」を選択しましょう。

フォントテンプレート選び

⑦作成した文字を75文字に絞る

無料版の場合は75文字しか作成できません。

「Minimal Japanese」を選択すると、Callgraphrで対応している日本語が349文字どどっと選択されます。

ここから1文字1文字削除して、75文字まで絞る必要があります。

ダブルクリックするとポップアップが出てくるので、チェックを入れて「DELETE」をクリックしましょう。

チェックをすることでポップアップ確認なしで削除できるようになります。

ポップアップ

私はひらがなのみで「ぁ」~「ぉ」、「ゐ」などを削除しました。

文字選択

⑧「Download Template」をクリックし、PDF形式でダウンロード

ファイルの種類(PDF、PNG)は好きな方を選んでください。違いはないので自分がいじりやすい方で。

私はその他は初期設定でダウンロードしました。しかしキレイな文字を作りたいという方の場合は「Characters as background」はチェックするのがオススメです。

ガイドとして背景にグレー文字が出力されます。

  • Size of template cells→文字を書く枠の大きさ
  • Draw helplines→文字の目安線
  • Characters as background→ガイド文字

ダウンロードテンプレート

⑨テンプレートを印刷してひたすら書く

左上に書かれている文字を書いていきます。

※印刷時の注意

四隅のマークとQRコードがかすれないようにしましょう。正しくスキャンできない可能性があります。(経験者は語る)

フォントテンプレート

⑩上部のタブからMY FONTSに移動し「Upload Template」をクリック

※画像の場合はすでにアップロードされているためフォントが表示されています

フォントをアップロード

ファイル選択でスキャンしたテンプレートをアップロードしましょう。

フォントをアップロード

アップロードし直したい場合は「Automatically clean templates」にチェックを入れると、すでに登録済みのフォントを自動的に削除してくれます。

⑪.ttfもしくは.otfのファイル名をクリックしてフォントをダウンロード

フォントダウンロード

⑫パソコンにフォントをインストール

Windowsの場合、パソコン内検索で「フォント」と入力すると出てきます。

⑪でダウンロードしたファイルを下記の中に移動させればインストール完了です。

フォントのインストールwindows

もし使いたいソフトをすでに起動している場合は一旦終了して、再起動してください。

再起動しないとせっかくインストールしたフォントが反映されません。

【まとめ】自分でフォントはつくれる!

文字を書いてスキャンするだけで作れました!できたときは感動します!(文字は書いていないけど←)

Calligraphrの無料版では下記の制限があります。

  • 75文字まで
  • サイト上で保持できるファイル数は1つまで
  • 個人利用のみ

本格的に販売や配布をしたいということであれば有償版もしくは別サービスの検討が必要です。

また、今回は手で書いたものをスキャンしただけで、調整は一切行っていません。

使いやすいフォントにするためには文字幅や大きさなど調整が必要ですね。

文字を書くだけでも大変なのに調整のことも考えると、フォント職人さんのありがたみがわかります。

おためしだけなら簡単だけど、理想のフォントづくりはまだまだ時間がかかりそうです。

■関連記事

サクッとWebフォントを試すならTypeSquareがオススメ!

【Webフォント】ふぉんとうにそのフォントでいいの?

 

気軽な相談OK!LINEで問い合わせできます。

【チャットトーク対応可能時間】
9:00~23:59

※予告なく変更される場合がございます
※お急ぎの場合は問い合わせフォームよりご連絡ください
※不定期でLINE公式アカウントの使い方やホームページの作り方など情報配信をしています(詳しくはこちら)