手書き署名

機能

• マウス・指・スタイラスで書けます（タッチ画面でもページがスクロールせず、線が途切れません）
• ⚠️ 線は中点経由の二次ベジェで平滑化するため、拡大してもギザギザが出ません
• 既定は透明背景の PNG。文書の上にそのまま重ねられます（白背景も選べます）
• 書き出し時に余白を自動で切り詰め、余白の量は調整できます
• インクの色（墨黒・ペンの青・赤）と太さを選べます
• 1 画だけ戻す／すべて消す
• 高解像度ディスプレイでは devicePixelRatio に合わせて書き出すので、ぼやけません
• 線が短すぎるときは知らせます —— ほぼ空白の画像を書き出してしまう事故を防ぎます
• 処理はすべてブラウザ内で完結し、線は送信されません

使い方

1. 枠内で名前を書きます（マウス・指・スタイラスいずれでも）
2. 必要ならインクの色と太さ、書き出しの背景と余白を調整します
3. 書き損じたら「1 画を戻す」か「クリア」
4. 「PNG をダウンロード」で透明背景の画像を取得します

よくある質問

書き出しは透明ですか、白ですか

既定は透明です。文書の上に重ねても下の内容を隠さず、PDF や Word にそのまま画像として入れられます。⚠️ 画面の市松模様は「ここが透明である」という表示で、このツールで最も混乱しやすい点です：プレビューでは背景があるように見えて、ファイルには残りません。白が必要なら背景の設定を切り替えてください。

書き出しで余白が切り詰められるのはなぜですか

キャンバスが署名よりずっと大きいためです。切らないと 1920×1080 の中に小さな署名が一つという画像になり、自分でトリミングすることになります。切り詰めでは線の太さも考慮するのでインクの縁が切れません。余白は調整でき、0 にすれば端まで、大きくすれば広く残せます。

拡大すると線がギザギザになりませんか

なりません。ポインターイベントは密にサンプリングされ、その点を直線で結ぶと目に見える折れ線になり、拡大すれば一目で分かります。ここでは近すぎるサンプルを間引いたうえで、残りを中点経由の二次ベジェでつなぐため、拡大しても滑らかです。書き出しは画面の画素密度に合わせるので、高解像度でもぼやけません。

「画像から署名を抜き出す」ツールと併用できますか

できますし、補完関係にあります。紙に書いた署名の写真しか無い場合は画像側のツールで切り出し、手早く電子署名が欲しい場合はこちらで書いてください。どちらも透明背景の PNG を出力するので、得られた画像は同じように使えます。