手書き風文字ジェネレーターとは、入力した文字を手書きの書体で描き直し、PNG・JPG・SVGの画像として書き出せる無料のブラウザツールです。会員登録もインストールも不要で、ブログのアイキャッチやYouTubeのサムネイル、SNS投稿に使えるサイズをテンプレートから選べます。縦書き、原稿用紙、罫線ノートにも対応しています。
手書き風のフォントを入れてみたのに、思ったほど手書きに見えなかった。そんな経験はないでしょうか。原因は書体ではなく並び方にあります。フォントは1文字ずつ決まった幅で、定規で引いたようにまっすぐ並びます。人が書いた文字は、行が少し傾き、途中でゆるく波打ち、1字ごとに大きさも角度もばらつきます。書体だけを手書きにしても、その並びの規則正しさが残っている限り、印刷物の顔つきから抜けられません。
この記事では、このツールでできることと使い方を先に整理し、そのうえで並びをどう崩せば手書きに見えるのかという仕組みまで踏み込んで説明します。書き出し形式の使い分けと、書体の商用利用についてもまとめました。ツールの仕様は2026年9月10日時点のものです。
手書き風文字ジェネレーターとは
このツールは「文字を画像にする」ことに絞ったツールです。書体を探すためのものでも、サイトに手書きフォントを読み込むためのものでもありません。入力した文章をその場で描画して、画像ファイルとして手元に落とすところまでを担当します。
そのため、次のような場面が向いています。
- ブログのアイキャッチに、手書きのひとことを載せたい
- YouTubeのサムネイルの文字を、印刷物っぽくない見た目にしたい
- スライドや資料に、注釈風の書き込みを足したい
- 引用や詩を、原稿用紙の縦書きで画像にしたい
- サンクスカードや付箋メモの画像を、手書きを撮影せずに用意したい
逆に、書体そのものをサイトの本文に使いたい場合は、画像ではなくWebフォントとして読み込む必要があります。その手順はGoogleフォントおすすめ日本語・英語14選【2026年版】導入方法も解説にまとめてあります。
このツールでできること
調整できる項目は大きく4つに分かれています。左の操作パネルもこの順に並んでいます。
| 区分 | できること |
|---|---|
| 文字 | 書体の選択、横書きと縦書きの切り替え、文字サイズ・行間・字間・余白 |
| 紙とペン | 無地・罫線・方眼・原稿用紙・レポート用紙・付箋・透過の切り替え、ボールペン・万年筆・サインペン・マーカー・鉛筆の切り替え、インク色と紙の色、紙の傾き |
| 手書きらしさ | 行の傾き、行のうねり、字ごとの傾き・位置・大きさの揺らぎ、線の太さ、揺らぎのパターン |
| 書き出し | 用途テンプレート、キャンバスサイズの指定、はみ出し時の自動縮小、PNG・JPG・SVG、書き出し倍率 |
収録している書体は、日本語が5種類、英字が5種類です。日本語の書体でも英数字は描けるので、迷ったら日本語の書体を選んでおけば失敗しません。
| 書体 | 言語 | 雰囲気 |
|---|---|---|
| Yomogi | 日本語 | ゆるい手書き。力の抜けた印象 |
| Zen Kurenaido | 日本語 | ペン字風。落ち着いた実用的な手書き |
| Yusei Magic | 日本語 | マジック風。線が太く目立つ |
| Hachi Maru Pop | 日本語 | 丸文字。かわいらしい方向 |
| Klee One | 日本語 | 硬筆・楷書。手書きの中では最も端正 |
| Caveat | 英字 | 速く書いたメモのような筆致 |
| Indie Flower | 英字 | 丸みのあるカジュアルな手書き |
| Patrick Hand | 英字 | 読みやすく整った手書き |
| Architects Daughter | 英字 | 製図の書き込み風 |
| Kalam | 英字 | 細めで軽い筆記体寄り |
ペンは5種類あり、線の太さだけでなく字ごとの太さのムラと濃さのムラが書体とは別に乗ります。万年筆は太さのムラが大きく濃淡も出ます。マーカーはにじみ、鉛筆はかすれが加わります。ボールペンだけはムラなしの均一な線で、文字の形をそのまま見せたいときに使います。
使い方は3ステップ
最短の手順は次の3つです。細かい操作は使い方・FAQページにまとめてあるので、ここでは流れだけ押さえます。
- 文章を入力する。改行するとそのまま行が分かれます。長い1行より、自分で改行を入れた方が仕上がりを制御しやすくなります
- 用途テンプレートを選ぶ。アコーディオンを開いて選ぶと、キャンバスサイズと紙・ペン・組み方向がまとめて切り替わります
- 書き出す。PNG・JPG・SVGのボタンを押すとその場で保存されます。書き出し倍率は1倍・2倍・3倍から選べます
最初に書体を切り替えたときだけ、読み込みに少し時間がかかります。日本語の書体はファイルが大きく、ツールの表示で3.1MBから8.7MBあります。英字の書体は0.1MBから0.4MB程度なので一瞬で切り替わります。同じ書体を選び直したときはキャッシュから読むため、2回目以降は待ち時間がありません。
なぜ手書き風フォントを当てるだけでは手書きに見えないのか
ここからは仕組みの話です。手書きらしさは、1文字ずつをランダムに揺らしても出ません。むしろ、1字ごとに独立した乱数で回転させると、切り抜いた文字を貼り合わせた脅迫状のような見た目になります。人が書いた文字の乱れには構造があるからです。
行の流れが先にあり、手の震えはその上に乗る
罫線のない紙に書くと、行はまず全体として斜めに流れます。そして書き進むうちに、ゆるい波を描いて上下します。1字ごとのばらつきは、その流れの上に重なる細かい震えです。順番が逆ではありません。
このツールも同じ順序で組み立てています。まず行ごとに「傾き」と「うねりの波」を決め、各文字はその曲線の上に置かれます。ここで効いているのが、文字を波の接線の角度に合わせて傾けている点です。行が上がっていく場所では文字も上向きに、下がる場所では下向きに寝ます。実際の手書きで、行が流れると文字の軸も一緒に倒れるのと同じ動きです。
そのうえで、字ごとの微揺れが3種類乗ります。操作パネルの「傾きの揺らぎ」「位置の揺らぎ」「大きさの揺らぎ」がそれです。行の傾き・うねりを先に決めてから、字ごとの揺らぎを少しだけ足すのが、自然に見せるときの配分になります。字ごとの揺らぎを上げすぎると、行の流れが揺らぎに埋もれて、また脅迫状の方向へ戻ってしまいます。
同じ揺らぎを何度でも呼び戻せる
揺らぎは完全な乱数ではなく、「揺らぎのパターン」の番号から決まる疑似乱数で作られています。番号を変えれば別の崩れ方になり、番号を戻せば前とまったく同じ崩れ方が戻ってきます。気に入った崩れ方を番号で覚えておけば、あとから文字色やサイズだけを変えて同じ表情のまま作り直せます。
細かい話ですが、空白文字のところでも乱数を同じ回数だけ空回しする作りになっています。1文字が使う乱数の個数を空白でも揃えておかないと、文中にスペースを1つ足しただけで、それ以降の文字の揺らぎが全部入れ替わってしまうためです。文章を少し直すたびに全体の表情が変わるのでは、番号で再現できる意味がなくなります。
かすれを「網点」に見せない
鉛筆を選ぶと線がかすれます。これは文字の上からノイズで削って作っていますが、一様なノイズで削ると、かすれではなく印刷の網点に見えます。粒が均等に散らばってしまい、紙の凹凸で墨が乗らなかった感じが出ません。
そこで、粗い濃淡のむらを先に作っておき、そのむらで「削る確率」を場所ごとに変えています。こうすると抜けが塊で発生し、線の一部がまとめて薄くなります。実際の鉛筆のかすれも、点が均等に抜けるのではなく、ある区間だけ乗りが悪くなる形で出ます。
原稿用紙を選ぶと、組み方そのものが変わる
紙の切り替えは、背景の絵を差し替えているだけではありません。原稿用紙を選ぶと、文字の組み方が等幅に変わります。1マスに1文字ずつ、字の幅に関係なく同じ間隔で送られ、それぞれの文字はマスの中央に寄せて置かれます。原稿用紙なのに文字が詰まったり空いたりしていると一目で嘘に見えるため、ここは組み方から切り替える必要があります。
罫線とマス目の位置にも同じ考え方が入っています。罫線は文字の位置を基準に引かれます。紙の上に固定の罫線を描いてから文字を乗せるのではなく、組み上がった行に合わせて線を並べるため、キャンバスサイズを固定しても行と罫線がずれません。
縦書きに切り替えると、行は右から左へ列として積まれ、うねりは左右方向に出ます。原稿用紙との組み合わせが、引用や詩を画像にするときの定番です。用途テンプレートの「縦書きの引用」は、この組み合わせが最初から入った状態で開きます。
PNG・JPG・SVGの使い分け
迷ったときの基準は次のとおりです。
| 形式 | 選ぶ場面 | 注意点 |
|---|---|---|
| PNG | 背景を透過させたい。写真やデザインの上に重ねる | 大きいサイズだとファイルが重くなる |
| JPG | 写真と一緒に扱う。ファイルを軽くしたい | 透過を持てない。紙を「なし」にしても紙の色で塗られる |
| SVG | あとから拡大する。印刷する。デザインツールで加工する | にじみ・かすれのあるペンだけは細部が変わる |
3つの見た目が一致する理由
画像に文字を描くとき、多くの実装はブラウザに「この書体でこの文字を描いて」と指示します。この方式は手軽ですが、SVGで書き出したときに困ります。SVGの中には文字コードと書体名しか残らないため、その書体を持っていない環境で開くと別の書体に置き換わって崩れます。
このツールは別の道を通ります。書体ファイルを直接読み込んで解析し、1文字ずつを「輪郭の線」に変換してから描いています。文字ではなく図形として扱うわけです。使っているのはopentype.jsというライブラリで、ライセンスはMITです。
この変換を先に済ませておくと、画面表示・PNG・JPG・SVGのすべてが同じ輪郭データから描かれます。プレビューで見たものがそのまま書き出されるのはこのためです。書き出したSVGの中身は、おおよそ次のような形になります。
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<rect x="0" y="0" width="1200" height="630" fill="#fffdf7"/>
<g fill="#2b3a4a" stroke="#2b3a4a" stroke-linejoin="round" stroke-linecap="round">
<path d="M120.34 210.5C118.7 209.2 ..." stroke="none"/>
<path d="M186.02 208.7C184.4 207.6 ..." stroke="none"/>
</g>
</svg>座標の桁は省略していますが、構造はこのとおりです。text要素もfont-familyの指定も現れず、1文字ごとにpathが並びます。書体名がどこにも書かれていないので、その書体を持っていない相手に渡しても同じ見た目で開けます。
SVGはIllustratorやFigmaでそのまま編集できる
輪郭になっているということは、デザインツール側ではパスとして扱えるということです。色を変える、線を足す、一部だけ動かす、他の図形と組み合わせる、といった加工が普通にできます。文字としては編集できませんが、アウトライン化した文字を受け取ったときと同じ状態だと思えば扱いに迷いません。
WordPressのメディアライブラリにSVGを上げたい場合は、初期状態ではアップロードが許可されていないため設定が必要です。手順はWordPressでSVGをアップロードする方法｜プラグインとコードの両方にまとめてあります。
にじみ・かすれのあるペンだけは例外
マーカーと鉛筆を選んだときだけ、SVGとPNGで細部が一致しません。にじみとかすれは、PNG側ではぼかしとノイズの合成で作っているのに対し、SVG側ではフィルタとして書き出されるためです。フィルタの計算は開くソフトに委ねられるので、輪郭そのものが同じでも表面の質感は完全には揃いません。
ツール側でもこの2つを選ぶと注意書きが出ます。SVGで納品する予定があるなら、ボールペン・万年筆・サインペンから選んでおくと安全です。この3つは純粋なパスだけで書き出されます。
用途テンプレートの使いどころ
「用途テンプレート・キャンバスサイズ」のアコーディオンを開くと、サイズと設定がまとまったテンプレートを選べます。テンプレートは入力した文章には触りません。書いた内容はそのままに、キャンバスサイズ・紙・ペン・組み方向・文字サイズだけが切り替わります。
| テンプレート | サイズ | 初期の組み合わせ |
|---|---|---|
| フリー | 文字量に合わせて自動 | 横書き・罫線・ボールペン |
| ブログのアイキャッチ | 1200×630 | 横書き・無地・サインペン |
| YouTubeサムネイル | 1280×720 | 横書き・無地・マーカー |
| SNS正方形 | 1080×1080 | 横書き・方眼・ボールペン |
| 縦書きの引用 | 800×1200 | 縦書き・原稿用紙・万年筆 |
| サンクスカード | 1050×600 | 横書き・無地・万年筆 |
| 付箋メモ | 600×600 | 横書き・付箋・マーカー |
| ノートのメモ | 1000×700 | 横書き・レポート用紙・鉛筆 |
| 名札・見出し | 600×300 | 横書き・透過・サインペン |
ブログのアイキャッチ（1200×630）
1200×630は、SNSでシェアされたときのカード画像としても使われる比率です。アイキャッチとOGP画像を兼ねる前提なら、文字を大きめに、行数を3行までに抑えると、タイムライン上に小さく表示されても読めます。
作ったあとに実際のシェア表示を確認しておくと安心です。OGPプレビューツール｜SNSでのシェア表示をリアルタイムで確認で、投稿前に見え方を確かめられます。
YouTubeサムネイル（1280×720と書き出し倍率）
ここは書き出し倍率とあわせて理解しておくと得をします。YouTubeヘルプのカスタムサムネイルの仕様によると、推奨される解像度は3840×2160ピクセル、最小幅は640ピクセル、比率は16:9です。ファイルサイズの上限はパソコンからのアップロードで50MB、モバイルからは2MBとされています（2026年9月10日確認）。
テンプレートのキャンバスは1280×720ですが、これは書き出し倍率3倍を選ぶとちょうど3840×2160になります。1280×720は編集しやすい大きさで、最終的な解像度は書き出し時に決まる、という関係です。推奨解像度で出したいなら、書き出し倍率を3倍にしてください。
3840×2160のPNGはファイルが大きくなるため、モバイルからアップロードする場合は2MBの上限に注意してください。JPGで書き出すか、画像圧縮・WebP変換・切り抜きがブラウザで完結する無料ツールで軽くしてから上げると確実です。
縦書きの引用・付箋・名札
「縦書きの引用」は原稿用紙と万年筆の組み合わせで、書籍からの引用や詩の紹介に向きます。「付箋メモ」は付箋紙の色と角の影が付いた状態で開くので、記事中に注意書きを差し込みたいときに使えます。
「名札・見出し」は紙が透過に設定されているテンプレートです。PNGで書き出すと文字だけが残るので、写真やデザインの上に重ねられます。背景を透過にしたいときは、紙を「なし」にしてPNGで書き出すと覚えておけば、どのテンプレートからでも作れます。
収録している書体と商用利用
収録している10書体は、すべてSIL Open Font License（OFL）で公開されている書体です。作った画像を商用の場面で使うことに制限はありません。
これはOFLの公式FAQに明記されています。フォントで作った制作物について、OFL-FAQの1.1は「OFLで公開されたフォントの作者は、あらゆる種類のデザイン作業にそのフォントを使うことを認めている」と述べ、1.1.1では作られた図版の著作権は作った人のものであり、フォントのライセンスとは切り離されると説明しています。
OFLが禁じているのは、フォントファイルそのものを単独で販売することです（同FAQ 1.6）。画像を書き出して使う分にはこの条項に触れません。文書へのフォント埋め込みも許可されています（同1.12）。
フォントライセンス全般の読み方は【初心者向け】Webデザインのためのフォント選び完全ガイドで扱っています。他のフォントを使うときの判断基準はそちらを参照してください。
入力した文字が外部に送信されないことを確かめる
入力した文章はブラウザの中だけで処理され、サーバーへは送られません。ただし「送っていません」と書いてあることを信じる必要はなく、自分で確かめられます。手紙の下書きや社外に出せない文言を入れる場合は、一度確認しておくと安心です。
- ツールを開き、使いたい書体を選んで表示されるまで待つ（書体の読み込みだけは通信が発生します）
- パソコンをオフラインにする、または機内モードにする
- そのまま文章を入力し、書き出しボタンを押す
- 通信を切ったままでも画像が保存できれば、処理がブラウザ内で完結している証拠になります
より厳密に見たい場合は、ブラウザの開発者ツールを開いてNetworkタブを表示したまま操作してください。文字を入力しても書き出しても、新しい通信が発生しないことを目で確認できます。
つまずきやすいポイント
英字の書体を選んだまま日本語を入力している
Caveat以下の5書体は英字用で、日本語のグリフを持っていません。日本語を書くときは、日本語の5書体から選んでください。日本語の書体は英数字も持っているので、日本語と英語が混ざる文章でも日本語の書体を選んでおけば問題ありません。
キャンバスからはみ出したまま書き出している
サイズを固定するテンプレートを使うと、文字量によっては入りきらないことがあります。「はみ出したら自動で縮小する」を有効にしておけば自動で縮められますが、縮小は数回までしか試行されず、文字サイズにも下限があります。プレビュー上部にはみ出しの警告が出たままなら、文章を短くするか改行位置を調整してください。
揺らぎを上げすぎて読めなくなっている
手書きらしさのスライダーは上げるほど効果が分かりやすいので、つい上げすぎます。サムネイルやアイキャッチのように小さく表示される画像では、揺らぎは控えめの方が読みやすくなります。先に行の傾きとうねりだけを動かし、字ごとの揺らぎは最後に少し足す順番がおすすめです。
透過させたいのにJPGで書き出している
JPGは透過を扱えない形式です。紙を「なし」に設定していても、JPGで書き出すと紙の色で塗られた状態になります。透過が必要ならPNGを選んでください。
よくある質問
Q. 作った画像は商用利用できますか？
できます。収録している書体はすべてSIL Open Font License（OFL）で公開されており、公式FAQの1.1と1.1.1で、フォントを使って作った制作物の著作権は作った人に帰属し、商用利用にも制限がないことが明記されています。禁止されているのはフォントファイルそのものを単独で販売することだけです。
Q. 会員登録やインストールは必要ですか？
不要です。ブラウザでページを開けばすぐ使えます。アカウントの作成もソフトのインストールもありません。
Q. 入力した文章はどこかに送信されますか？
送信されません。文字の描画も画像の書き出しも、すべてブラウザの中で完結します。通信が発生するのは書体ファイルを読み込むときだけなので、書体を読み込んだあとにオフラインにしても書き出しは動きます。
Q. YouTubeの推奨解像度で書き出せますか？
書き出せます。「YouTubeサムネイル」テンプレートのキャンバスは1280×720ですが、書き出し倍率を3倍にすると3840×2160になり、YouTubeヘルプが推奨する解像度と一致します。
Q. SVGはIllustratorやFigmaで編集できますか？
できます。文字はアウトライン化されたパスとして書き出されるため、そのまま図形として編集できます。文字として打ち直すことはできませんが、書体を持っていない環境で開いても見た目が崩れません。
Q. 背景を透過にできますか？
できます。紙の設定を「なし（透過）」にして、PNGで書き出してください。JPGは透過を扱えない形式のため、紙をなしにしても紙の色で塗られた画像になります。
Q. 気に入った崩れ方をもう一度出せますか？
出せます。揺らぎは「揺らぎのパターン」の番号から決まるため、同じ番号・同じ設定に戻せば同じ崩れ方が再現されます。気に入った番号を控えておけば、あとから色やサイズだけを変えて作り直せます。
まとめ
- 手書きに見えない原因は書体ではなく並び方にある。行の傾きとうねりを先に作り、字ごとの揺らぎは少しだけ足す
- 揺らぎはパターン番号から決まるので、気に入った崩れ方は番号で呼び戻せる
- 文字はアウトライン化して描いているため、PNG・JPG・SVGの見た目が一致し、SVGは書体がない環境でも崩れない
- SVGで渡すならボールペン・万年筆・サインペンを選ぶ。マーカーと鉛筆はフィルタになり細部が変わる
- YouTubeサムネイルは書き出し倍率3倍で3840×2160になり、公式の推奨解像度と一致する
- 収録書体はすべてOFLで、作った画像の商用利用に制限はない
まずはテンプレートを選んで、書き出しまで一度通してみてください。設定の意味は、実際に動かしてみた方が早く掴めます。