stylus_note 署名作成ツール（描いてダウンロード） star

滑らかなインク効果の仕組み

マウスや指をタッチパッドやタッチスクリーン上でドラッグすると、ブラウザはその軌跡に沿った一連の生の座標点しか報告しません — そして通常の描画速度では、それらの点の間隔は、直線で結ぶと明らかにギザギザとした角張った結果になるほど離れています。特に署名の末尾のような速い動きではその傾向が顕著です。本物のインクはそのようには動きません。ペンは連続した曲線を描いて滑らかに進みます。このギャップを埋めるため、このツールは生の点同士を直線で結ぶことを一切行いません — 各点の並びを二次ベジェ曲線補間にかけ、連続する点を、直線的に次の点へ飛び移るのではなく、その間の線を滑らかに曲げる制御点として扱います。

これは、ベクターイラストソフトの曲線ツールが使っているのと同じ数学的な考え方です。制御点は、線が必ずしもそこを通過しなくても、その方向に線の経路を引き寄せ、角ではなく滑らかな弧を生み出します。描画中のフリーハンドのストロークにリアルタイムで適用することで、生の角張ったマウスの軌跡を、点をつないだだけのスケッチではなく自然な手書き文字として読める何かへと変えます — 入力が速く不規則であるほど、この平滑化の重要性は増します。

ダウンロード前に知っておきたいこと

すべての処理はブラウザ内のHTML canvas上で行われます — 何もアップロードされず、ページを離れると何も残らないため、他のページに移動する前にPNGをダウンロードしてください。黒か青のインクとストロークの太さを選び、線を間違えた場合は一筆ごとに取り消すことができ、どんな書類にも自然になじむ透明背景のPNG、または透明度を受け付けないフォーム向けの白背景バージョンを書き出すことができます。法的に触れておくべき点があります。手書き署名の画像は、日常的な承認や社内の書類作業では一般的に受け入れられますが、法的な意味での適格電子署名とは異なります — 適格な電子署名を特に要求する契約には、画像ファイルではなく証明書ベースのプロバイダーが必要です。

この平滑化処理は、ハードウェア側の制約も補っています。タッチスクリーンやトラックパッドは、一般的に1秒あたり60〜120回という固定された頻度で位置をサンプリングするため、完璧に安定した本物の手の動きであっても、デジタルに取り込まれた時点では連続した曲線ではなく角張った折れ線になってしまいます。ベジェ補間は、そのサンプリングされた折れ線を再び連続したインクのように読める形へと戻す処理です。だからこそ同じ技術は、署名パッドだけでなく、ベクターペンツール、デジタル描画タブレット、スタイラス対応のメモアプリなど幅広い場面で使われているのです。