Web制作ツール Proof of Care、手書き文字のコピー＆ペーストを最適化するSVG実装を公開
画像とテキストを重ねたSVGで手書きの質感を維持しつつ、JavaScriptによるイベント制御でテキストのコピー＆ペーストを可能にする実装手法。
リリース: 2026-07-13 · 読了 3 分記事の要約
1. 核心（What）
- 手書きの質感を維持したまま、テキストを選択・コピー可能なSVG実装を公開した。
- フォントには「Barlow Condensed」を使用し、手書きの行間や文字間隔を再現している。
- バックティック（`）文字を狭いスペースとして挿入し、コピー時にJavaScriptで除去する仕組みを採用。
2. 影響（Why）
- 視覚表現と利便性の両立: 従来の画像ベースの手書き表現ではテキスト検索やコピーが不可能だったが、本手法はアクセシビリティを損なわずにデザイン性を担保できる。
- 国内クリエイティブ現場への示唆: [広告・Web制作業種] のような、ブランド独自のフォントや手書き風デザインを多用する中規模制作チームにとって、HTML/CSSの制約を超えたUI実装の選択肢となる。
3. 根拠・詳細（How）
- SVGとJavaScriptの連携: Inkscapeで作成したSVG内のアンカー機能でハイパーリンクを定義し、HTMLへ直接<svg>タグとして埋め込むことで、on-copyイベントのトリガーを可能にした。
- テキスト抽出の最適化: バックティック（`）をSix-per-em Spaceに置換して表示上の違和感を消し、コピー時にJavaScriptで不要なスペースを正規化して除去する処理を実装した。
4. 展望・課題（Next）
- ブラウザ互換性の検証: SVGの埋め込み方式に依存するため、主要ブラウザ間でのコピーイベントの挙動差異について追加の検証が必要。