テキストを手書き風に変換

スクラップブックに添える一言、モックアップの小道具、画像として投稿したい引用文。打ち込んだ文字を手書きに見せたい場面はときどきあります。行を入力または貼り付け、5 種類の手書きフォントから 1 つを選び、無地・罫線・方眼のいずれかの用紙に載せ、インクの色と文字の揺れ具合を決めると、ブラウザ内のキャンバスに 1 枚の紙として描かれ、PNG として保存されます。先にお伝えしておくと、この 5 書体はいずれも日本語の文字を含んでいないため、かなや漢字は端末の標準フォントで表示され、手書きには見えません。

紙が描かれるまで

  1. 1

    文字を入力または貼り付ける

    改行を打つたびに新しい行になります。自動的な折り返しはありません。

  2. 2

    手書きフォントを選ぶ

    同梱の 5 書体:Caveat、Shadows Into Light、Patrick Hand、Kalam、Indie Flower。いずれもラテン文字用です。

  3. 3

    用紙を選ぶ

    無地、赤い余白線つきの罫線、または淡い方眼。いずれもクリーム色の紙の上に描かれます。

  4. 4

    インク・文字サイズ・揺れを決める

    カラーピッカーの任意の色、18 から 56 ピクセルの文字サイズ、0 から 6 の揺れ幅。

  5. 5

    生成して保存する

    キャンバスが出力するのは PNG 画像 1 枚だけで、handwriting.png という名前で保存されます。

日本語を入力するとどうなるか

5 書体のいずれにも、ひらがな・カタカナ・漢字は含まれていません。日本語を入力すると、ブラウザはその文字だけを端末の標準フォントに静かに差し替えます。文字は問題なく表示され読めますが、見た目は手書きではなく打ち込んだ活字のままで、行の高さも不ぞろいに見えることがあります。日本語の手書き風の紙面が目的なら、行書体や楷書体などの日本語手書きフォントを指定できるテキスト画像化ツールを使うほうが、はるかに良い結果になります。

とはいえ、このツールが日本語の制作物で役に立つ場面もあります。全体は日本語でも、英字の引用や人名、サイン風の見出しなど、ラテン文字の部分だけを手書きにしたいときです。

手書きらしく見える理由

文字は整った 1 行の活字として印刷されるわけではありません。1 文字ずつ個別に置かれ、上下左右へごくわずかにランダムにずらされ、さらに左右どちらかに約 1 度回転します。そのため同じ文字が二度とまったく同じ位置には収まりません。揺れのスライダーは、そのずれをどこまで許すかを決めます。

揺れ 仕上がり
0 どの文字も基準線にぴったり。整っているぶん、フォントだと一目でわかる
1〜2 わずかな不ぞろい。既定値であり、いちばん自然に見える
3〜4 明らかに急いだ筆跡。会議中に走り書きしたメモのような雰囲気
5〜6 殴り書き。文字どうしがぶつかり始める

文字間隔そのものは常にフォントどおりなので、揺れをどれだけ上げても単語がばらばらになることはありません。

用紙の選び方

用紙 描かれるもの 向いている用途
無地 クリーム色の紙だけ 手紙、引用、日記のページ
罫線 青い横罫と、左端の赤い縦の余白線 学校のノートや作文
方眼 24 ピクセル間隔の薄いグレーのマス目 計算の書き出し、下書きメモ

青い罫線は行の高さに合わせて引かれるため、文字は罫線の上に乗り、行間に浮くことはありません。

画像の大きさ

紙の幅は常に 900 ピクセルです。高さは行数とともに増え、1 行あたり文字サイズの 1.6 倍を占め、上下に 60 ピクセルずつの余白が入ります。既定の文字サイズ 32 なら 1 行 51 ピクセルなので、10 行のメモは 900 x 630 ピクセルで出力されます。

折り返しがないため、長い段落を 1 行で打ち込むと紙の右端を越えてそのまま進み、はみ出した部分は失われます。自分で行を分け、保存する前にプレビューを確認してください。

この 5 書体が対応する文字体系

文字体系 含んでいる書体
ラテン文字(アクセント付き、ą・ł・ő・ş などの中欧文字を含む) 5 書体すべて
キリル文字(ロシア語・ウクライナ語・ブルガリア語) Caveat のみ
ベトナム文字(ế・ữ のような重ね記号つき) Patrick Hand のみ
デーヴァナーガリー文字(ヒンディー語・マラーティー語) Kalam のみ
アラビア文字、タイ文字、中国語、日本語、韓国語、ギリシャ文字 どれにも含まれない

誠実に使う

これは装飾、モックアップ、教材、創作のためのツールです。生成した文章を手書きの提出物として通すための手段ではありませんし、よく見ればすぐに破綻します。文字はすべて同じ 5 書体から出てくるので、複数の人がこのツールを使えば、明らかに同一の筆跡の紙が並ぶことになります。

つまずきやすい点

  • 紙からはみ出す行。 折り返しもページ送りもありません。区切りたい位置で改行してください。
  • 小さい文字サイズで揺れを最大にする。 22 ピクセルあたりを下回ると、揺れ 5 や 6 では文字どうしが重なります。
  • クリーム色の紙に淡いインク。 黄色や薄いグレーは紙に溶けてほとんど見えません。既定の濃紺のほか、黒や茶色がよく読めます。
  • PDF を期待すること。 1 回の生成で出るのは PNG 1 枚です。複数ページの文書にしたい場合は、ページごとに画像を作り、画像から PDF に変換するツールでまとめてください。

よくある質問

手書きとしては対応していません。5 書体のいずれにも、ひらがな・カタカナ・漢字は含まれていないため、ブラウザが端末の標準フォントで代替します。表示も判読もできますが、見た目は打ち込んだ活字のままです。日本語の手書き風にしたい場合は、日本語の手書きフォントを指定できるテキスト画像化ツールをお使いください。

5 種類です。Caveat、Shadows Into Light、Patrick Hand、Kalam、Indie Flower。傾いた速書き風から、丸みのあるブロック体寄りのものまで揃っています。5 書体ともページに同梱されているため、作業中に外部から読み込まれるものはありません。

できません。同梱の 5 書体がすべての選択肢です。自分の筆跡で作りたい場合は、Calligraphr のようなサービスで手書きからフォントを作り、それを画像編集ソフトで使ってください。

できません。1 回の生成につき PNG 画像が 1 枚、handwriting.png という名前で保存されます。長い文章は区切って 1 つずつ生成し、あとでまとめる必要があります。

直接は変えられません。紙の幅は 900 ピクセル固定で、行間は文字サイズの 1.6 倍に固定されています。そのため、サイズのスライダーを動かすと両方が同時に変わります。

されません。紙面はブラウザ内の HTML キャンバスで描画され、ダウンロードもそのキャンバスから直接行われます。入力した文字も完成した画像も、端末の外に出ることはありません。

関連ツール

このツールは他の言語でも利用できます