productivity

手書きフォントメーカー

ブラウザ上で書いた文字のペン座標から、TrueTypeフォント(TTF)を作成して保存します。

ローカル処理
ファイルについてこのツールで選択したファイルや入力内容は、Browser Kittyのバックエンドへアップロードせずブラウザ内で処理します。
操作デモ 実際の操作の流れを短い動画で確認できます。

このツールについて

手書きフォントメーカーは、マウス・タッチ・ペンで1文字ずつ書き、その筆跡からTrueTypeフォント(TTF)を作るブラウザツールです。ひらがな、カタカナ、英大文字・小文字、数字、記号から文字セットを選ぶほか、入力した文章から必要な文字だけを抽出することもできます。

書いた文字をいったん画像へ変換して輪郭を再検出するのではなく、入力したペン座標をベクターデータとして保持し、TrueTypeの輪郭へ変換します。生成したTTFはブラウザへ読み直し、12 / 16 / 24 / 48pxで実際の字形を確認できます。

こんなときに便利

  • 自分の手書きを使った小規模なTTFフォントをブラウザだけで作りたい
  • 使う文章に必要な文字だけを書いて、限定文字セットのフォントを作りたい
  • 紙や画像を経由せず、ペンやタッチで書いた線をそのままベクターとしてフォント化したい
  • 生成したフォントを複数サイズで確認し、つぶれや形の変化を見ながら調整したい

できること

このツールで利用できる主な機能です。

使い方

  1. フォント名を入力し、ひらがな・カタカナ・英字・数字・記号などの文字セットを選ぶか、「使いたい文字だけ」に文章を入力します。
  2. 「文字を書き始める」を押し、薄いお手本文字を参考に現在の文字を書きます。必要ならお手本表示をOFFにできます。
  3. 前後の文字や文字一覧、「次の未入力」を使って文字を進めます。各文字ではストローク単位のUndo / Redoが使えます。
  4. 右側(スマートフォンでは描画欄の下)の実フォントプレビューで12 / 16 / 24 / 48pxを確認し、参考・要確認になった文字を必要に応じて書き直します。
  5. 入力を終えたら「確認・保存」へ進み、ファイル名を確認してTTFを保存します。途中の作業は自動保存され、必要なら.handfont.jsonとして明示保存できます。

対応範囲

  • 文字セット: ひらがな、カタカナ、英大文字、英小文字、数字、記号。または入力文章から必要な文字だけを抽出。1プロジェクト最大180文字。
  • 入力: マウス、タッチ、ペン。ストローク単位のUndo / Redo、ペン太さ、お手本文字のON / OFFに対応。
  • フォント生成: 1000×1000の論理座標でストロークを保持し、画像化・二値化・輪郭トレースをせずにTrueType glyf輪郭を生成。
  • 確認: 生成TTFをFontFaceで読み込み、12 / 16 / 24 / 48pxで実表示。16 / 24pxを48pxと比較して形の結合・消失を中心に要確認判定し、12pxは参考表示。
  • 保存: TTF出力と.handfont.jsonの作業データ保存・読み込み。作業内容はブラウザ内にも自動保存。

制限・注意点

  • 出力はTTFのみで、WOFF2には対応していません。
  • 文字ごとの高度な字幅調整、カーニング、リガチャー、複数字形のランダム切替には対応していません。
  • 画像や紙テンプレートから文字を取り込む機能はありません。Unicode U+10000以上の文字も未対応です。
  • 1プロジェクトで扱えるのは最大180文字です。
  • ストローク間のBoolean Unionや高度なBezier最適化は行いません。複雑な1ストロークでは安全な分割輪郭へフォールバックする場合があります。

よくある質問

書いた文字や生成フォントはサーバーへ送信されますか?

いいえ。手書き座標の記録、フォント生成、実フォントプレビュー、TTF保存はブラウザ内で行います。実行時CSPはconnect-src 'none'で、CDN、外部API、解析・テレメトリも使用しません。

紙に書いた文字や画像からフォントを作れますか?

できません。このツールはブラウザ上でマウス・タッチ・ペンを使って直接書いたストロークを対象にしています。紙テンプレートや画像の取り込みには対応していません。

日本語を全部収録したフォントを作れますか?

1プロジェクト最大180文字のため、日本語の全文字を収録する用途には向いていません。ひらがな・カタカナや、実際に使う文章から必要な文字だけを抽出して作る使い方を想定しています。

途中の作業は保存できますか?

はい。作業内容はブラウザ内へ自動保存されます。別途.handfont.jsonとして保存・読み込みもできるため、重要な作業は明示的なプロジェクト保存も利用してください。

オフライン版・ソースコード

配布用の通常版・自己解凍版はいずれも単一HTMLで、実行時のサードパーティ依存や外部通信を必要としません。通常版のdist/index.htmlはfile://から直接開いて、手書き入力・フォント生成・保存まで利用できます。

GitHubでソースを見る