テキストから手書きへの変換

仕組み

このツールは、罫線紙のラインを持つHTMLキャンバスにレンダリングされたGoogle Fontsの手書きフォントを使用します。結果は自然な手書きに非常に似ています。ニーズに合わせてフォント、インクの色、紙のスタイルをカスタマイズします。

これは何のためですか?

ノート、手紙、ソーシャルメディアコンテンツ、教材、または手書き風のアートプロジェクトを作成するのに最適です。結果は高品質のPNG画像としてダウンロードできます。

このツールができること（とできないこと）

入力したテキストを受け取り、手書き風フォントを選んで、選んだインク色、フォントサイズ、行の高さ、単語間隔で罫線入り、黄色のリーガルパッド、プレーンホワイト、グラフ用紙などの紙風のキャンバスにレンダリングする。結果はPNGとしてダウンロードされる。内部では実際に新しいストロークを生成しているわけではなく、HTML Canvas APIのfillText()関数を通じてオープンソースのウェブフォントからグリフを描画し、toBlob()またはtoDataURL()でキャンバスを画像にシリアライズしている。

このツールができないこと：Wacomタブレットのリプレイやあなたのハンドライティングサンプルで訓練された深層学習モデルのような本物の手書きシンセサイザーではない。特定の文字に対するすべてのグリフが同一であるため出力は一貫した1人の手書きのように見えるが、文字ごとのサイズのジッター、ストロークの変動、わずかな回転はない。本物の手書きにはそれらがすべて存在する。法文書の専門家を欺くことが目的なら、このツールは適していない。スライド、モックアップ、ソーシャル投稿をカジュアルな手書き風に見せることが目的なら、それを十分に達成できる。

選択できるフォント

すべての同梱フォントはGoogle Fontsで提供される無料のオープンソースSIL Open Font License（OFL）フォントで、商用利用、PDFへの埋め込み、自社ソフトウェアへのバンドルが自由にできる：

• Caveat：Pablo Impallariデザイン。カジュアルで親しみやすく、わずかに傾いている。日常的なメモのような雰囲気。本文テキストの最も良いデフォルトとして一般的。
• Dancing Script：流れるような半筆記体。文字がつながる。ヘッダー、招待状、装飾的な1行テキストに最適。
• Indie Flower：Kimberly Geswein制作。プリントスタイルで丸みがあり親しみやすい。素早く書いた個人メモのように見える。段落程度の長さのコンテンツに適している。
• Patrick Hand：プリントスタイルで、Indie Flowerよりわずかに整っている。教室の掲示物に教師が使うような「丁寧な手書き」として読まれる。
• Shadows Into Light：軽く、エアリーで、わずかにスタイライズされている。長いテキストブロックよりも短いキャプションやオーバーレイに最適。

すべてのフォントが一般的なラテン文字範囲でレンダリングされる。一部は拡張ラテン文字、キリル文字、デーヴァナーガリー文字をサポートしている（Indian Type FoundryのKalamはマルチスクリプト作業に特に優れている）。手書きフォントにグリフがない場合、絵文字、CJK文字、右から左に書くスクリプトはシステムフォントにフォールバックする。

結果が「フォント風」に見えるか「手書き風」に見えるかの分かれ目

出力がどれだけ本物の手書きに見えるかは、いくつかの小さな選択に大きく左右される：

• くっきりではなく、粗い端を持つフォントを選ぶ。CaveatとIndie Flowerはグリフの形状にわずかなペン圧変動が組み込まれている。Dancing Scriptの完璧な接続はデジタルであることを露呈する。
• フォントサイズを小さくしすぎない。本物の手書きは小さいことがほとんどない。22〜32 pxは14〜16 pxよりも自然に見える。
• インク色を紙に合わせる。白い紙には黒または濃い青のインク。黄色のリーガルパッドには濃い青または黒のインク。色のついた紙に色のついたインクは明らかにデジタルに見えるので避ける。
• 不均一に感じる行の高さを使う。本物の手書きは線にぴったり乗っていない。罫線入り用紙では行間1.8〜2.2程度が自然に見える。それより狭いとロボット的に見える。
• きれいにしすぎない。段落区切りのない長い連続した段落は機械生成に見える。本物の手書きには自然な休止と改行がある。

主な使用例

• デザインモックアップ。UIプロトタイプ内の手書きメモ画像、ウェディング招待サイトの封筒モックアップ、旅行アプリのオンボーディングにおける日記ページ。
• ソーシャルメディアコンテンツ。Instagramの「手書き手紙」投稿、Pinterestのピン、カジュアルで個人的に見えるブログ投稿のヒーロー画像。
• 教育用・宿題テンプレート。手書きの模範解答を示すワークシート、教室のポスター、学習教材のモックアップ。
• ウェディング文具とプレイスカード。カリグラファーに依頼する代わりに、印刷用のカリグラフィー風名前リストを生成する。
• アプリでのメモ取り風デザイン。Notion / Obsidianのバナー、日記アプリのオンボーディング、「付箋」UIエレメント。
• 書体デザイナーの参考資料。同じテキストに対するCaveat、Indie Flower、Patrick Handの形状の違いを比較研究する。

倫理的な境界

このツールが適しているもの2つ、適していないもの2つ：

• 適している：デザインと装飾目的。「手書き」の美学が本物の個人手書きだと主張することなく温かみを加えるあらゆる場所。
• 適している：プロトタイプとモックアップ。本物の手書きコンテンツを依頼する前に、完成したデザインの雰囲気を示す。
• 適していない：学術的な課題で自分の手書きとして提出すること。大学はますます手書きの提出物をタイピングパターンや文体的特徴と照合している。生成された「手書き」は検出可能で、ほとんどの誠実性規定の下で学術的不正行為とみなされる。
• 適していない：文書の偽造。特定の人の筆跡に見せかけたり法的文脈で欺くことを意図した手書きの生成は、使用された技術に関わらず詐欺だ。

筆跡学について：手書きから性格を判断するとされる民間的な疑似科学は査読研究では有効性がない（英国心理学会は学術文献においてそれを「ゼロの有効性」と評している）。それを法文書鑑定と混同しないように。法文書鑑定は測定可能な精度を持つ実際の学問分野であり、性格評価とは無関係だ。

プライバシー

テキストは人が生成する最も個人的なものの一つだ。元パートナーへの手紙の下書き、日記の記録、ラブノート、弔いの手紙、祈り――手書きツールに入力するものはすべて深くプライベートなものになりうる。キーストロークのたびに（またはダウンロード時にのみ）テキストを取得するサーバーサイドの手書きツールはそれらすべてのコピーを取得する。このツールはHTML Canvas APIを通じてレンダリングをすべてブラウザ内で実行する。テキストはテキストエリアからキャンバスのfillText()呼び出しに渡され、サーバーには送られない。ダウンロードはキャンバスをどこかにアップロードすることなく、ブラウザプロセス内でcanvas.toBlob()によって生成される。

よくある間違い

1. 完璧すぎる筆記体フォントを選ぶ。Dancing Scriptの滑らかな文字の接続は美しいがすぐにデジタルと読まれる。Caveat、Indie Flower、またはPatrick Handはより自然な手書きに見える。
2. 1つの画像に複数のフォントを混在させる。本物の手書きは1人の人のもの。ページの途中でフォントを変えると錯覚が崩れる。
3. 紙に合わない色のインク。黄色のリーガル用紙に白インクは間違い。グラフ用紙に明るいピンクのインクも間違い。薄い色の紙には黒、濃い青、または濃いグレーを使う。
4. 小さすぎるフォントサイズ。約18 px以下では手書きフォントがピクセル化して見え始め、自然なペンの感触が失われる。22〜32 pxが快適な範囲だ。
5. 長い連続した段落。本物の書き手が休止するところに改行を追加する。単一ブロックのテキストの壁は機械出力に見える。
6. 狭い行間。手書きテキストが線にぴったり乗ることはほとんどない。行間1.8〜2.2は1.0〜1.4よりも自然に感じる。
7. 重要な場面で「本物の」手書きとして提出する。学術的な課題、署名付き文書、著者性の認証が求められる場所には提出しないこと。

よくある質問

出力は毎回同一に見えるか？

同じテキストと同じフォント・サイズ・色・用紙の選択に対しては、出力は決定論的だ。文字ごとのジッターやランダム化はないため、2回実行しても同一のPNGが生成される。文字間の変動が必要な場合は、より高度な手書きシンセサイザーが必要だ。このツールは予測可能でデザインに適した出力のために作られている。

ダウンロードした画像を商用利用できるか？

はい。フォントはSIL OFL（Open Font License）でライセンスされており、レンダリングされた出力の商用利用、さらにはフォントファイルを自社製品にバンドルすることもできる。テキストと生成された画像はあなたのものだ。

ズームインするとピクセル化して見えるのはなぜか？

PNGはラスター形式で、固定ピクセルグリッドだ。キャンバスはデフォルトで800×1000でレンダリングされ、画面表示やほとんどのソーシャルメディア使用には十分だが、ネイティブ解像度を超えて拡大するとピクセル化して見える。より高解像度の出力には、このツールが現在出力していないベクター形式（SVGまたはPDF）が必要だ。

テキストはどこかにアップロードされるか？

いいえ。すべてはブラウザ内で実行される。テキストはテキストエリアからHTML Canvas APIのfillText関数に渡され、キャンバスはtoBlobでPNGにシリアライズされ、ダウンロードはローカルでトリガーされる。サーバーには何も送信されない。テキストが個人的な手紙、日記、下書きのラブノート、または誰かのアナリティクスデータベースにコピーされたくないものであれば、これが重要だ。

英語以外の言語でも動作するか？

フォントによって異なる。同梱フォントのほとんどはラテン文字と拡張ラテン文字をカバーしているため、スペイン語、フランス語、ドイツ語、ポーランド語、ベトナム語はすべて動作する。キリル文字、ギリシャ語、デーヴァナーガリー文字のカバレッジは部分的で、Kalam（Indian Type Foundryの手書きフォント）はデーヴァナーガリー文字を十分にカバーしている。その他はサポートされていないスクリプトにシステムフォントが使われる。CJK文字（中国語、日本語、韓国語）は一般的に手書き風ウェブフォントではサポートされておらず、システムフォントにフォールバックする。

出力を実際の紙に印刷できるか？

はい。PNGのダウンロードは普通に印刷できる。開いてプリンターに送り、サイズを合わせる。最高の印刷品質のためには、プロジェクトが許す最高解像度で生成すること（キャンバスはデフォルトで800×1000；それより大きく印刷すると柔らかく見えることがある）。手書き風コンテンツの本物の高品質印刷には、本物の書道やベクター形式が依然として最高の選択肢だ。

関連ツール