
自作フォントの作り方
子どもが書いた文字って、その時にしか書けない、なんとも可愛い文字ですよね。
それを形で残したくて、子どもが書いた可愛い文字を使って、こんなカレンダーを作ってみました。

これは紙を用意して、子どもに数字やカレンダーを書いてもらったわけではなくて、子どもの書いた文字を「フォント化」して、そのフォントでカレンダーを作っているんです。
一度フォントを作成してしまえば、文字を子どものフォントに変換して、色んな物が作れるので、とっても使えますよ♪
フォントを作成してiPadで使えるようにする所までを複数回に分けて解説します。
【用意するもの】
iPad
Calligraphr (フォント制作サービス)
Procreate(お絵描きアプリ)
Ifont(フォントアプリ)
Calligraphrーフォントテンプレートの作成ー
まず初めに、Calligraphrというフォント制作サービスを利用して、フォントを作成します。
まずは、以下のCalligraphr のサイトにアクセスして、アカウントを作成してください。
アカウントが作成できたら、「START APP」をタップして、作成を始めましょう

マーク部をタップして、テンプレートを作成します。

「TEMPLATES」をタップすると、テンプレート作成画面に切り替わります。

画面左に追加できる文字の一覧があるので、その中から追加したい文字をタップします。
Minimal English(英語)
Minimal Numbers(数字)
Minimal Punctuation(句読点)
今回は、この3つを順にタップして、画面に追加します。
Calligraphrは75文字以内であれば無料でフォントを作成できるので、今回は無料文字数内で作成します。
(現時点で79文字ある文字数を75文字に減らしたいので、4文字削除していきます。)
文字を削除するには、選んだ文字をタップします。

すると、このようなポップアップが出るので、「DELETE」をタップすると削除できます。これを繰り返して、4文字削除します。
(今回、%、/、;、=の4つの文字を削除しました。)

無料文字数内になると、最初に出ていた警告が消えて、ダウンロードボタンが出るので、マーク部分(Download Template)をタップする。

Procreateで文字を書く場合は、「PNG」を選択し、「DOWNLOAD」をタップします。
(紙のテンプレートに文字を書いて登録する場合は、「PDF」を選択します)

すると、このようなポップアップが出るので、マーク部分をタップすると、ダウンロードに進みます。

出てくる指示に従って、ダウンロードを進めてください。

データがダウンロードできると、最初はZipファイルなので、それを解凍してください。
(iPadの場合、Zipファイルをタップすると自動で解凍されます)
解凍できると、フォルダが出てきます。

フォルダをタップすると、2つのデータが入っているので、一つづつタップして、Procreateにデータを転送します。

テンプレートのデータをタップすると、このような画面になるので、右上の
「共有」マークをタップします。

共有先に「Procreate」を選択します。
すると、Procreateaの方にデータを送られるので、Calligraphrを閉じて、次はProcreateのアプリを開きます。

Procreateを使用してテンプレートに文字を書く
Calligraphrで作成したテンプレートに文字を書きます。
(お絵描きアプリであれば他のものでも問題ないですが、ここではProdreateを使用して文字を書きます。)
ここからはProcreateの画面になります。
Procreateの画面を開くと、転送された2つのデータが入っているので、それを開きます。
画面を開いたら、右上の「レイヤー」マークをタップするとレイヤーパネルが開きます。
開くと、1枚目のレイヤーにはCalligraphrで作成したテンプレートが入っていることがわかります。
ここで、さらに「+」マークをタップしてレイヤーを一枚増やします。

一枚レイヤーが追加されました。

次に、「ブラシ」マークをタップして、ブラシを選択します。
ここではゆるくて可愛い文字が描ける、TSUBAME.diaryオリジナルのゆる文字ブラシ(文字タップでリンクに飛べます)を使用します。こちらのブラシはBoothにて無料配布中ですので、是非ショップページからダウンロードしてくださいね!

次にカラーパレットをタップして色を選択します。
Calligraphrのテンプレートデータを直接転送した場合は、このように色がモノトーンしか選べないような設定になっています。
この後の読み込みの際に、明るい色で描いてしまうと文字を認識しづらいので、カラーディスクの円の下の方をタップして、黒色を選択します。

文字を書いていきます。
その際に、マーク部分のレイヤーを選択しているようにしてください。
文字のサイズや位置は、下の文字のガイドラインの画像を参考にしてください。


文字が書けたら、データの書き出しをします。
「アクション」、「共有」の順に選択し、「PNG」を選択し、写真アプリやファイルに保存します。(その他、JPEG、PDFでも構いません)


Calligraphrでフォント登録
ここで再度Calligraphrに戻って、フォントの登録をします。
「MY FONTS」をタップして、フォントの登録画面を開き、「Upload Template」をタップします。

ポップアップが開くので、マーク部分をタップして、Procreateのデータをアップします。

Procreateのデータの保存先を選び、データを選択します。

すると、データのプレビューが表示されるので、右上の「使用」をタップします。

すると、一つ目のデータがアップされるので、2つ目のデータも同じ手順でアップします。

正しくアップされると2つのデータが画面上に表示されるので、「UPLOAD TEMPLATE」をタップします。

すると、テンプレートのガイド線が消えた状態で文字がアップロードされます。
文字画面を下にスクロールすると、画面右下に「ADD CHARACTERS TO YOUR FONT」というボタンが表示されているので、それををタップします。

次に、「Build Font」をタップし、フォントを登録します。

「Font name」の所をタップして、フォントの名前を記入します。
フォント名は日本語を認識しないので、必ずアルファベットを使用して記入してください。
記入できたら「BUILD」をタップします。

正しく登録されると、下のような画面になるので、ttfデータかotfデータのどちらかをタップしてダウンロードします。
今回はotfデータでダウンロードします。

「ダウンロード」をタップします。

マーク部分のダウンロードファイルをタップすると、自動的にProcreateが開きます。

Procreateが開きました。
何もしなくても登録したフォントが使用できるようになっています。

iPadにフォントを登録する方法(iFontを使用した登録方法)
まず、ファイルアプリの「ダウンロード」を開き、ダウンロードしたフォントデータを選択して、任意の場所に移動させて保存しておきます。

「iFont」というフォントアプリを開いて、フォントを登録していきます。

①、②の順にタップします。

保存してあるフォントのデータを開いて、①、②の順にタップします。

すると、画面の中央にフォントが入ったので、「INSTALL」ボタンをタップします。

画面に従い、「許可」をタップします。

プロファイルがダウンロードされたので、「閉じる」をタップします。
iFontのアプリは閉じて大丈夫です。

次に、iPadの「設定」から①「iPad設定の提案」をタップします。
②の「プロファイルを表示」をタップし、以下、画像のように進めます。





最後、「完了」タップして、フォントの登録が完了です!

試しにKeynoteを使用して、フォントが反映されているか見てみました。
ちゃんと新しいフォントが追加されています!

Youtubeチュートリアル
Youtubeの方では1本の動画にまとまっていますので、こちらも参考にしてくださいね!