draw-your-font

draw-your-font

手書き文字の写真から、インストール可能なフォントを作成します。文字を見つけてラベル付けし、品質を判断するのはあなたの役目です。CLI が幾何処理（トレース、メトリクス、フォントの組み立て）をすべて行います。SVG のパスや座標を自分で編集する必要はありません。

セッションごとの初期設定

node <skill-dir>/scripts/resolve-cli.js を一度実行してください。使用する CLI の呼び出し方（例：node /abs/path/src/cli.js）が出力されます。以下の例で $DYF と記載されている箇所には、出力されたコマンドを指定してください。シェル変数はツール呼び出しの間で保持されないため、実際のコマンドを毎回貼り付けてください。

エラーが発生した場合は、指示された場所で npm install を実行するか（または npm i -g draw-your-font を実行して）、再試行してください。Node ≥ 18 が必要です。すべてローカルで動作し、何もアップロードされません。

手順を決める

• ユーザーがまだ写真を用意していない場合 → テンプレートを案内します。印刷し、書き込み、撮影してもらいます。
• ユーザーが手書き文字の写真を共有した場合 → 以下の基本手順に進みます。
• ユーザーが画像を貼り付けたものの、ファイルパスがない場合 → 画像を見ることはできますが、CLI にはファイルが必要です。画像ファイルをターミナルにドラッグしてパスを挿入するか、パスを直接伝えるよう依頼してください。記憶だけを頼りに進めないでください。
• ユーザーがこのセッションで作成したフォントの変更を希望する場合 → 「調整」セクションに進みます。

テンプレートを使う手順（最も高品質）

$DYF template -o template.pdf --charset minimal   # or: spanish

ユーザーには、テンプレートを印刷し、濃い色のペン（0.5 mm 以上）で各枠に1文字ずつ書き、文字が実線に沿うようにしてから、各ページを明るい場所で真上から撮影し、ファイルパスを共有するよう伝えてください。グリッドは薄いグレーで印刷され、処理中に消えるため、ユーザーが書いたインクだけが残ります。

主なフロー：写真 → フォント

1. セグメント化します。 テンプレートページでも自由形式の写真でも使えます。

$DYF segment photo1.jpg photo2.jpg -d work

2. 確認してからラベル付けします。 work/contact-1.png（写真1枚につき1つ）を開きます。検出された各領域に番号が付いています。ここでは目視での確認が重要です。次の点をチェックしてください。

• 書かれた文字すべてに、ボックスがちょうど1つずつ付いていますか？ 別々の線で描かれた文字は、ボックスが2つに分かれて表示されることがあります（ラベルを付け直す際、メインのボックスに文字を割り当て、断片には "" を指定します）。また、接触している2文字が1つのボックスに入ることもあります（該当箇所だけ撮り直してもらうか、そのままにします）。
• 不要なボックス（影、罫線、汚れ、ページの端）には "" を指定します。

次に、領域 ID → 文字の対応を work/labels.json に記述します。例：{"0": "A", "1": "B", "7": "", "8": "a"}

• テンプレートページ：順序はテンプレートに印刷された文字セットの順番です。記載どおりと決めつけず、用紙を見て確認してください。最小構成は A–Z、a–z、0–9、続いて .,;:!?'"-()@#&+/$ です。スペイン語では ÑñÁÉÍÓÚáéíóúü¿¡ が追加されます。
• 自由形式：コンタクトシートを見て、それぞれの文字を特定します。形が似ている文字（S/s、O/o、C/c、X/x…）の大文字・小文字は、相対的なサイズと位置で判断します。確実にわかる周囲の文字と比較してください。
• ユーザーが書いた内容（例：「ABCのあとにabc」）を教えてくれた場合は、その情報を信頼し、読み順（上の行から、左から右）で割り当てて、目視で確認します。
• 同じ文字が2つある場合は、よりきれいに描かれた方に文字を割り当て、もう一方には "" を指定します。

3. ビルドします。

$DYF build -d work --labels work/labels.json --name "Dan's Hand"

フォントにはユーザーの名前を付けます（不明な場合は確認します。質問は短く1つまで）。

4. 渡す前に評価します。 work/preview.png と work/glyphs.png を開き、アートディレクターのように批評します。

• 文字が欠けている、または斑点状になっている（トレースの失敗）→ 薄いペンの線が原因の場合がよくあります。--weight 1 を試すか、その文字だけ撮り直してもらいます。
• すべての文字が細すぎる／太すぎる → --weight 1 ／ --weight -1 で再ビルドします。
• 輪郭がギザギザ → --smooth 1.5（最大2）で再ビルドします。
• 文字の配置が間違っている（例：g の下部が下に伸びていない）→ 通常はラベル付けの誤りです。labels.json を修正して再ビルドします。
• 文字の内側が塗りつぶされている（b、o、g がベタ塗りに見える）→ 本来起きてはいけません。起きた場合は、切り抜き画像に汚れがあります。撮り直しを依頼します。

再ビルドは手軽で、安全に繰り返せます。まず自分でできる修正を行い、元のインクに問題がある場合にのみ撮り直しを依頼してください。

5. 納品します。 フォントは <workdir>/<NameWithoutSpaces>.ttf に出力されます（ビルド出力に正確なパスが表示されます）。そのパスとインストール方法を伝えます。 macOS - ダブルクリック → 「フォントをインストール」；Windows - 右クリック → 「インストール」。 不足している文字（ビルド時に未収録の文字が表示されます）を伝え、押しつけにならないよう、次の選択肢を案内します。

• Web 用形式 + CSS：--formats ttf,woff,woff2,css を付けて再ビルドします。
• 読みやすさの確認（下記）。
• 不足している文字を補うための次の写真：すべての写真（新旧両方）を使い、新しい作業ディレクトリに segment を再実行します - $DYF segment p1.jpg p2.jpg -d work2 - その後、新しいコンタクトシートをもとにラベルを付け直して、新しい作業ディレクトリからビルドします（領域 ID は振り直されるため、以前の labels.json は引き継がれません）。

調整（対話しながら反復）

ユーザーの要望	対応
「もっとなめらかに／丸く」	build … --smooth 1.5（最大2）
「もっと太く／ボールドに」	build … --weight 1（最大2）
「もっと細く／軽く」	build … --weight=-1（負の値には = 形式が必要です）
「g の見た目がよくない」	その文字の work/crops/<id>.png を見せ、撮り直しかスムージングを提案します
「文字が違う」／入れ替え	labels.json を編集して再ビルドします
「woff2／Web 用がほしい」	build … --formats ttf,woff,woff2,css
プレビューするテキストを指定	$DYF preview -d work --text "…"（ビルド後）

すべての調整コマンドは保存済みの切り抜き画像から再ビルドするため、インク自体に問題がない限り、写真を撮り直す必要はありません。

可読性レポート（納品後に提示）

$DYF preview -d work --text "minimum mill rn m cl d I l 1 O 0 quick brown fox" -o work/legibility.png

確認して、率直で思いやりのある評価を伝えます。本文での使用に対する10点満点のスコア、混同しやすい文字の組み合わせを2〜3組（rn→m、cl→d、I/l/1、O/0）、および具体的な修正案を1つか2つ（該当する文字を大きく書き直す、文字間を広げるなど）を示します。見出しやメモでの表示は、段落での使用より許容範囲が広い点にも触れてください。これを理由に納品を保留しないでください。あくまでアドバイスであり、納品を妨げるものではありません。

トラブルシューティング

セグメンテーションでブロブが多すぎる／少なすぎる、灰色のガイド線が残る、影のブロブができる、ボールペンの筆跡が薄い場合は、 references/troubleshooting.mdを参照してください。