手書き文字をフォントにする方法｜スマホで書いてTTF保存

1. 手書き文字から作れるフォントの範囲を確認する

画面に書いた線はペンの座標として記録され、TrueTypeフォントの文字の輪郭に変換されます。完成するのは文字として入力できるTTFで、手書きを並べた画像ファイルではありません。

日本語の漢字を含む全文字を作る用途には向きません。選択中の文字と、選択から外しても手書きデータを残した文字を合わせて最大180文字です。短い文章、見出し、作品用の決まった文字を作る場合に使えます。

紙の手書きを撮影して自動でフォント化する機能はありません。使いたい文字はブラウザの画面に1文字ずつ書く必要があります。

2. フォント名と使いたい文字を選ぶ

ツールを開いてフォント名を入力します。次に、ひらがな・カタカナ・英大文字・英小文字・数字・記号から必要な文字セットを選びます。

特定の文章に使う場合は、「使いたい文字だけ」にその文章を入力します。含まれる文字を抽出できるため、使わない文字を書く手間を省けます。選択から外した文字の手書きも保持され、再選択すれば編集を再開できます。

文字を追加するときは、選択中の文字と保持中の手書きを合わせた上限に注意してください。合計180文字を超える選択変更は受け付けられません。入力済みの線は削除されません。

3. 文字を書き、間違えた線を修正する

「文字を書き始める」を押し、選んだ文字を1文字ずつ書きます。スマホなら指や対応するペン、PCならマウスを使えます。薄く表示されるお手本は必要に応じてON / OFFを切り替えてください。

書きやすい太さにペンを調整し、文字の線を描きます。間違えた場合はストローク単位のUndo / Redoでやり直せます。書いた線はペンの座標として保存され、いったん画像へ変換して輪郭を読み取り直すことはありません。

線を複雑に重ねた場合、完成フォントで意図した形にならないことがあります。保存前に実際のTTFを表示して確かめてください。

4. 未入力・要確認の文字を一覧から探す

文字を進めるときは前後の移動ボタンや文字一覧を使います。文字一覧は「すべて」「未入力」「要確認」で絞り込めるため、まだ書いていない文字や見直したい文字を探せます。

進捗バーに表示されるのは、プロジェクト全体の入力済み文字数と割合です。一覧を絞り込んでも、文字の選択や順番、進捗の集計範囲は変わりません。

最後の文字まで進んだとき、未入力の文字が残っていればその文字へ戻ります。全部入力できている場合は「確認・保存」へ進めます。

5. 生成したTTFを12・16・24・48pxで確かめる

プレビューでは生成したTTFをブラウザへ読み直し、12 / 16 / 24 / 48pxで文字を表示します。大きく見たときに読めても、小さいサイズでは線がつながったり、細部が消えたりすることがあります。

「要確認」は、16px・24pxの表示で線が結合したり細部が消えたりしていないか、48pxと比べて判定します。12pxは参考表示で、そこでだけ見つかった変化は要確認件数に含めません。「OK」の文字も、仕上がりを自分の目で確かめてください。

小さいサイズの表示が気になる文字は、文字一覧の「要確認」から戻って描き直せます。判定は自動修正ではありません。

6. 文字を直したらプレビューを更新して確認する

気になる文字があれば描画画面へ戻り、ストロークを修正します。文字を編集すると、以前の内容から生成したTTFは保存対象から外れます。編集前の古いフォントを間違って保存しないための動作です。

フォントの生成や表示に失敗したら、プレビューの状態表示にある「フォント表示を再試行」を押せます。失敗中のサイズ別チェックは「未確認」となり、要確認の件数には含まれません。

再試行しても書いた線は保持されます。生成に失敗している間でも「編集用データを保存」から作業のバックアップを残せます。自動で繰り返し再試行する動作ではありません。

7. 編集を続けたいときは.handfont.jsonを保存する

手書きした線や文字の選択内容は、ブラウザ内に自動保存されます。ただし、ブラウザデータを消した場合や別のブラウザを使う場合は、自動保存だけでは作業を引き継げないことがあります。

書く画面の「編集用データを保存」を使うと、ファイル名を付けて.handfont.jsonをダウンロードできます。文字セットから外した文字の手書きも残るため、再選択して編集を続けられます。別の端末で続けるときは、文字を選ぶ画面から保存した作業ファイルを読み込みます。

TTFと.handfont.jsonは保存する内容が違います。あとから線を修正する予定があれば、完成TTFとは別に編集用データも保存してください。

8. 仕上がった手書きフォントをTTFで保存する

文字を入力し終えたら「確認・保存」へ進み、フォントの表示とファイル名を確認して「TTFを保存」を押します。保存できるのは1文字以上の手書きがあり、現在の線・ペンの太さ・フォント名に対応するTTFの生成と読み込みが成功した場合です。

出力はTrueTypeフォントのTTFだけです。Webサイト向けのWOFF2を直接書き出す機能はありません。また、字幅の高度な調整、カーニング、リガチャーにも対応していません。

完成したTTFをほかのソフトで使うには、その端末やソフトがTTFの読み込みに対応している必要があります。インストールや読み込みの手順はOS・アプリによって異なります。

9. 180文字の上限と、ローカル処理の注意点

1プロジェクトでは選択中と選択外に保持した手書きを合わせて最大180文字、座標点数は合計80,000点です。Unicode U+10000以上の文字は対象外です。画像・紙テンプレートからの取り込みや、同じ文字の別字形をランダムに切り替える機能もありません。

主な対象ブラウザは最新版のChromeとEdgeです。FirefoxやSafari、iOS Safariでは標準Web APIの実装差によって動作が変わる場合があります。スマートフォンでも画面から書けますが、すべての機種・ブラウザで同じ結果になる保証はありません。

手書き座標の記録からフォントの生成・保存まで、処理はブラウザ内で完結します。文字データをサーバーへアップロードせず、実行時の外部接続はCSPのconnect-src 'none'で遮断しています。ただし、Webページを最初に開く際にはページを取得する通信が発生します。

注意点

• 使う文章が決まっていれば、先に「使いたい文字だけ」へ入力すると、書く必要のある文字を絞れます。
• 48pxでは読めても16pxでは線がつながる文字があります。使う大きさを想定して複数サイズを見比べてください。
• 作業を別の端末へ持ち出す予定があれば、自動保存だけに頼らず.handfont.jsonを手元へ保存してください。
• 作成できるのはTTFです。Webフォントとして使いたい場合はWOFF2への変換が別に必要になることがあります。