今回は紙に書いた手書きのサイン等をWEBサイトに綺麗に表示する方法を紹介します。
リアルで紙に手書きで書いた実筆サインをWEBサイトに表示させたい。
といった要望はたまーにあります。
単純に考えると、サインした紙を写真に撮って画像としてWEBサイトに載っける。といった発想になりますが、ただそれだけだと下記の様に非常に汚い感じになってしまいます。
この何だか汚い感じを解決して綺麗に手書きサインをWEBサイトに載っける方法を今回は紹介します。
画像編集で透過
一番に思いつく方法は、手書き文字を写真で撮ってから、画像編集で背景を消して透過画像にする方法です。
この方法を使えば、下記の様に手書き文字も綺麗に表示させる事が出来ます。
画像を透過にするにはMacの場合はプレビューアプリで可能です。
プレビューアプリを開いたら編集ボタン（鉛筆マーク）を押してツールの左から2番目にあるインスタントアルファツールを選択します。後は下記の様に透過したい部分を選択してdeleteを押すだけです。
その後に微調整をすれば綺麗な透過画像が出来ます。
もしくは以下のWEBツールを使えば、それを自動で行ってくれます。
https://www.remove.bg/ja
＊手書き文字を書いた紙を撮影する際になるべく影やゴミなど余計な色や線が入らない様に撮った方が綺麗にくり抜けます
以下の記事では、Macのプレビューの使い方に関してを詳しく書いています。
興味のある方は合わせてどうぞ。
手書き風フォントを使う
もう一つの方法は、手書きは諦めて手書き風フォントを使う方法です。
手書き風フォントは、探せばクオリティの高いものも多く存在します。
より綺麗に見せたい場合は、こちらの方がお勧めです。
以下はAdobe Fontsの筆記体です。
手書き風のフォントもいくつかあるので、これで納得いくならばCSSでフォント指定をするだけで簡単に手書き風文字を表現出来ます。
以下はFont Factoryという有料フォントサイトです。
より希望に近い手書き風フォントを見つけたい場合は有料も視野に入れておくのも一つです。
以上が「紙に手書きで書いた文字をWEBサイトで表示する方法」でした。
クライアントに「手書き文字を入れたい」と言われた場合は今回の記事を思い出して頂いて、お客様の要望と、より綺麗に見せる方法といった具合に2つの提案をしてみて下さい。
