手書きの文字をWEBサイトで表示する方法

Tool/App

今回は紙に書いた手書きのサイン等をWEBサイトに綺麗に表示する方法を紹介します。

リアルで紙に手書きで書いた実筆サインをWEBサイトに表示させたい。
といった要望はたまーにあります。

単純に考えると、サインした紙を写真に撮って画像としてWEBサイトに載っける。といった発想になりますが、ただそれだけだと下記の様に非常に汚い感じになってしまいます。

この何だか汚い感じを解決して綺麗に手書きサインをWEBサイトに載っける方法を今回は紹介します。

画像編集で透過

一番に思いつく方法は、手書き文字を写真で撮ってから、画像編集で背景を消して透過画像にする方法です。
この方法を使えば、下記の様に手書き文字も綺麗に表示させる事が出来ます。

画像を透過にするにはMacの場合はプレビューアプリで可能です。
プレビューアプリを開いたら編集ボタン(鉛筆マーク)を押してツールの左から2番目にあるインスタントアルファツールを選択します。後は下記の様に透過したい部分を選択してdeleteを押すだけです。
その後に微調整をすれば綺麗な透過画像が出来ます。

もしくは以下のWEBツールを使えば、それを自動で行ってくれます。
https://www.remove.bg/ja

*手書き文字を書いた紙を撮影する際になるべく影やゴミなど余計な色や線が入らない様に撮った方が綺麗にくり抜けます

以下の記事では、Macのプレビューの使い方に関してを詳しく書いています。
興味のある方は合わせてどうぞ。

手書き風フォントを使う

もう一つの方法は、手書きは諦めて手書きフォントを使う方法です。
手書き風フォントは、探せばクオリティの高いものも多く存在します。
より綺麗に見せたい場合は、こちらの方がお勧めです。

以下はAdobe Fontsの筆記体です。
手書き風のフォントもいくつかあるので、これで納得いくならばCSSでフォント指定をするだけで簡単に手書き風文字を表現出来ます。

Adobe Fontsはこちらから

以下はFont Factoryという有料フォントサイトです。
より希望に近い手書き風フォントを見つけたい場合は有料も視野に入れておくのも一つです。

Font Factoryはこちらから


以上が「紙に手書きで書いた文字をWEBサイトで表示する方法」でした。

クライアントに「手書き文字を入れたい」と言われた場合は今回の記事を思い出して頂いて、お客様の要望と、より綺麗に見せる方法といった具合に2つの提案をしてみて下さい。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Tool/App
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました