v0.2 ← BACK TO APP
— USER MANUAL

DISASTER
Font Maker

手描きとベジェパスで自分だけのフォントをブラウザ上で作成し、Figma・Illustratorなど全アプリで使えるOTFファイルとして書き出せるツールです。

— CONTENTS
  1. クイックスタート
  2. 画面の見かた
  3. 描画ツール
  4. グリッドガイド
  5. 文字セット
  6. SVGインポート
  7. OTFエクスポート
  8. キーボードショートカット
  9. Tips & 注意事項
01

クイックスタート

5分でフォントを作って書き出すまでの最短フロー。

01
グリフスロットをクリック
GLYPHSタブのグリッドで文字（例: A）をクリックすると描画ウィンドウが開きます。
02
描く
フリーハンドペン（デフォルト）またはベジェペンツールで文字を描きます。グリッドのガイドライン（ASC / CAP / BASE など）を参考にバランスを調整してください。
03
ACCEPT ✓ を押す
グリフが確定してグリッドに表示されます。自動保存されます。
04
繰り返してから EXPORT .OTF
26文字（あるいは使いたい文字だけ）を描いたらヘッダーの EXPORT .OTF ボタンを押すとフォントファイルがダウンロードされます。
02

画面の見かた

メイン画面

3つのタブで構成されます。

GLYPHS
グリフグリッド
A-Z / a-z / 0-9 / 記号 / ひらがな / カタカナのスロットが並びます。描画済みのスロットはサムネイル表示されアクセントカラーのラベルになります。
PREVIEW
テキストプレビュー
任意のテキストを入力してリアルタイムでフォントをプレビューできます。サイズは S / M / L / XL で切り替えられます。
EXPORT
書き出し & データ管理
OTF書き出し・手動SAVE/LOAD・全削除ができます。

描画ウィンドウ

①
ツールバー（上部）
フリーハンドペン ／ ベジェペン ／ 線の太さ ／ GRID切替 ／ SVGインポート
②
描画キャンバス
Glyphsスタイルのグリッドと薄いガイド文字が表示されます。マウスまたはタッチで描きます。
③
UNDO / CLEAR / ACCEPT / ✕
UNDO: 最後のストローク/アンカーを取り消し。CLEAR: 全削除。ACCEPT: 確定して保存。✕: 破棄して閉じる。
03

描画ツール

FREEHAND PEN
マウス・指でなぞると線が引けます。線の太さは右の4段階のボタンで切替。筆跡は自動的に滑らかになります（Chaikinスムージング）。
BEZIER PEN
Illustratorのペンツールと同じ感覚で使えます。クリック: アンカー追加。ドラッグ: 曲線ハンドル。最初のアンカー①をクリックするとパスが閉じます。Enterキーで開いたままのパスを確定。

フリーハンド — 線の太さ

ツールバーの4つの●ボタンで選択します。

●
細い（8px）
細字・セリフ系フォント向き
●
普通（18px）
デフォルト。標準的な太さ
●
太い（32px）
Bold体向き
●
極太（52px）
Heavy・ディスプレイ体向き

ベジェペン — 使いかた詳細

1
クリック → シャープなアンカー
クリックするだけで角のあるアンカーポイントを追加します。
2
クリック＋ドラッグ → スムーズなカーブ
マウスボタンを押したままドラッグすると対称のベジェハンドルが出てカーブが作れます。ドラッグ量がカーブの強さになります。
3
① をクリック → パスを閉じる
最初に置いたアンカー（①）の近くにカーソルを持っていくとハイライトされます。クリックすると閉じたパスになり塗りつぶされます。
4
Enter → 開いたパスを確定
閉じずにパスを確定したい場合はEnterキーを押します。開いたパスはアウトライン（線）として書き出されます。
04

グリッドガイド

描画キャンバスにはGlyphsアプリと同様のガイドラインが表示されます。GRIDボタンでON/OFF切替可能。

A
ASC — 上端（アセンダー）
CAP — 大文字上端
X — 小文字上端（エックスハイト）
BASE — ベースライン ★
DESC — 下端（ディセンダー）
— TIP

大文字は CAP〜BASE の範囲に収めるとバランスが整います。小文字（b, d, f, h, k, l）の上端は ASC まで伸ばせます。g, p, q, y の下端は DESC まで下げます。

05

文字セット

GLYPHSタブ上部のタブで文字セットを切り替えます。全セット横断で保存され、OTF書き出しには全描画済み文字が含まれます。

A-Z — 大文字 26文字
a-z — 小文字 26文字
0-9 — 数字 10文字
記号 — .,!?;:@#$%など
ひらがな — 64文字
カタカナ — 64文字
— TIP

全文字を描く必要はありません。A〜Zだけ描いてエクスポートしてもフォントとして使えます。描いていない文字は他のフォントにフォールバックされます。

06

SVGインポート

IllustratorなどのベクターツールのデータをDISASTERに取り込めます。

方法①
SVGファイルをドロップ
描画キャンバスに .svg ファイルを直接ドラッグ&ドロップします。
方法②
FILEボタンからファイル選択
ツールバーのFILEボタンからファイルピッカーを開いてSVGを選択します。
方法③
d属性をペースト
IllustratorでパスをコピーしてSVGとしてペーストするか、SVGソースの d="M..." 属性の値をSVG入力欄にペーストしてIMPORTボタンを押します。

Illustratorからの手順

1
Illustratorでパスを描く
文字アウトラインを作成します。テキストを使う場合は「書式→アウトラインを作成」を実行。
2
ファイル → 別名で保存 → SVG
SVG形式で書き出し。プリセットは「SVG 1.1」を選択。
3
DISASTERにドロップ
書き出したSVGファイルを描画キャンバスにドロップするとインポート完了。
— 注意

SVGインポートは自動的にキャンバスのサイズに合わせてスケーリングされます。インポート後も手描きストロークやベジェパスと組み合わせて加筆できます。

07

OTFエクスポート

描いたグリフをOpenTypeフォント（.otf）として書き出します。書き出したフォントはFigma・Illustrator・Word・Photoshopなどすべてのアプリで使用できます。

1
EXPORTタブを開く
または画面右上の EXPORT .OTF ボタンをクリック。
2
フォント名を入力
NAME フィールドにフォントファミリー名を入力します（例: MyFont, DISASTER-v1）。
3
GENERATE & DOWNLOAD
ブラウザで即座にOTFを生成してダウンロードが始まります。サーバーへの送信はありません。
4
フォントをインストール
macOS: ダウンロードしたOTFをダブルクリック → 「フォントをインストール」。Windows: 右クリック → 「インストール」。その後アプリを再起動するとフォント一覧に表示されます。
— フォントの仕様

UPM: 1000 / アセンダー: 800 / ディセンダー: −200 / アドバンス幅: 700（固定幅）。フリーハンドストロークはアウトライン化されてOTFに変換されます。

08

キーボードショートカット

描画ウィンドウが開いている間に使えます（テキスト入力中は無効）。

キーアクション
Enterベジェパスを確定（開いたパスのまま終了）
Esc描画ウィンドウを閉じる（破棄）
⌘Z / CtrlZUNDO（最後のストローク / アンカーを取り消し）
09

Tips & 注意事項

データの保存について

グリフデータはブラウザのlocalStorageに自動保存されます。ブラウザの「サイトデータ」をクリアすると消えますので注意してください。大事なデータは EXPORTタブの SAVE ボタンで明示的に保存するか、OTFとして書き出しておくことをお勧めします。

— 注意：ブラウザデータのクリア

「キャッシュされた画像とファイル」の削除は安全ですが、「サイトデータ（Cookieなど）」を削除するとlocalStorageのグリフデータが失われます。

きれいなフォントを作るコツ

①
線の太さを統一する
全グリフで同じ太さボタンを使うとフォントとしての統一感が出ます。
②
ベースラインを揃える
文字の底がBASEラインに乗るように描くと、横並べにしたとききれいに揃います。
③
ベジェで丸みを表現する
OやGのような丸い文字はベジェペンで描くとなめらかに仕上がります。
④
薄いガイド文字を参考に
キャンバスに表示される薄い文字（ガイドレター）をなぞると字形のバランスが取りやすくなります。

動作環境

Chrome / Edge / Safari（最新版）でご利用ください。Firefox でも動作しますが、一部のSVGインポート機能が異なる場合があります。モバイル（タッチ）にも対応しています。