文書に重ねる素材として
透明PNGを書き出し、スライド、画像、図版を入れられる文書に手書き署名のレイヤーとして配置します。
Guide
手書き署名ツールは、ブラウザの署名パッドにマウス・指・スタイラスで書いた筆跡を記録し、背景が透明なPNG、白背景のJPG、またはベクターのSVGとして書き出します。signature_pad を必要時に読み込み、デバイスピクセル比とウィンドウサイズに合わせて描画します。サイズが変わるときは、筆跡データを保存してからキャンバスを初期化し、そのうえで筆跡を再生します。描画面ではページのスクロール操作を無効にしているので、モバイルでもそのまま書けます。
更新日 2026-09-102 min read
| 入力 | 出力 | 説明 |
|---|---|---|
| 手書きの筆跡 | 署名.png |
背景は透明 |
| 同じ筆跡 | 署名.jpg |
書き出し前に白背景を敷く |
| 同じ筆跡 | 署名.svg |
signature_padが出力するベクターパス |
minWidth が太さ×0.4、maxWidth が×1.3になります。signature_pad のストロークデータ1組を単位とし、最後の1本を消します。ピクセル単位の消しゴムではありません。透明PNGを書き出し、スライド、画像、図版を入れられる文書に手書き署名のレイヤーとして配置します。
タブレットやスマートフォンを横向きにして手書きし、フォントではなく筆跡そのままを書き出します。
PNGは透明の背景を保ちます。JPGは書き出しの前に白を塗るため、透明レイヤーに対応しないシステムに向いています。
実装は高DPI用のキャンバスを初期化する前にストロークデータを保存して再生するため、通常のリサイズで意図的に筆跡が失われることはありません。
筆跡は現在のブラウザのキャンバスとメモリにだけ存在し、書き出しもブラウザがローカルで行います。サーバーへのアップロードはありません。
更新日 2026-09-10
オンラインで手書き電子署名。ペンの色と太さを調整でき、透過 PNG・白背景 JPG・SVG で書き出し
このツールの翻訳は未完了です。一部は原文または代替言語で表示されます。
マウス・指・スタイラスで書けます。スタイラスは筆圧で線の太さが変わります
モバイル向け:署名エリアではページのスクロール操作が無効になり、指で直接署名できます。横向きでの署名がおすすめです。