手描きのイラストや文字を透過PNG画像にする方法

手描きのイラストをパソコンに取り込んで背景を透過させたPNG画像にすると、活用の幅が広がります。

例えばこのイラスト・・・

魚沼情報サービス代表の対馬の家で「目玉おやじ」と呼ばれているキャラクターです。

これをパソコンに取り込んで、この記事で紹介するやり方で背景を透過にしたものを写真に重ねるとこのような出来上がりになります。

達筆の人に書いてもらった屋号や題字などもこのやり方で加工してパンフレットやウェブサイトで利用することができますよ。

ということで、そのやり方を紹介します。

手順１．イラストをスキャンする

まず複合機などでスキャンして、スキャンした画像をパソコンに取り込んでおきます。

そしてイラストのまわりの不要な部分を トリミングにより削除しておきます。

これがその画像(JPEG形式)です。

このままでは背景が透過になっていないので、使いみちが限定されてしまいます。

写真に重ねるとこんなかんじになってしまいます。

手順２．Inkscape に画像を読み込む

ここからは Inkscape というフリーソフトを使用します。Inkscape は以下のサイトから入手できます。

https://inkscape.org/ja

Inkscape を起動して、手順１．で保存した画像ファイルを Inkscape のウィンドウにドラッグして読み込みます。

ビットマップ画像のインポート画面が表示されますので、そのまま [OK] ボタンをクリックします。

手順３．ビットマップのトレースを行う

読み込んだ画像を選んで、[パス] メニュー ⇒ [ビットマップのトレース] を実行します。

表示された画面で [ライブプレビュー] にチェックをつけて、ライブプレビューを見ながらしきい値を調整して [OK] ボタンをクリックします。

[OK] ボタンをクリックしたら、このビットマップのトレースの画面は × ボタンで閉じておきます。

この時点で Inkscape の画面には読み込んだ画像とトレースしてできた画像の2つがあります。

この2つは区別しづらいですが、右クリックしてみるとわかります。

メニューに [フィル/ストローク] が含まれるのが トレースしてできた画像です。

読み込んだ画像はもう不要ですので、選択して Delete キーで削除しておきます。

手順４．色を指定する

トレースしてできた画像を選んで、[オブジェクト] メニュー ⇒ [フィル/ストローク] を実行し、フィル/ストロークの画面で色を指定します。

R・G・Bのスライダーを動かして色を選ぶこともできますし、右下の RGBA の入力欄の8桁の先頭6桁にカラーコードを指定することもできます。最後の2桁は ff のままにしておきます。

手順５．PNG 形式で保存する

[ファイル] メニュー ⇒ [PNG 画像にエクスポート] を実行し、PNG 画像にエクスポート の画面でエクスポート先(保存先とファイル名)を指定してから、[エクスポート] ボタンをクリックします。

これで作業完了です。

フィル/ストロークの画面で色を変えて何パターンか保存しておくとよいです。

この方法でデータ化するメリット

Inkscape 以外のソフトを使って背景部分を透明化する方法もありますが、この記事で紹介したやり方でデータ化すると輪郭がくっきりなめらかに仕上がってファイルサイズも小さくなります。

もうひとつ、色を自由に変更できるという大きなメリットもあります。

お試しください。

投稿者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• ホームページ制作事例2025年10月24日ホームページ制作事例「北里アパート組合」
• WordPress2025年10月2日枠線ボックス風のブロックパターン
• WordPress2025年9月24日スターターパックの見出しのデザインを追加しました
• VK Blocks2025年9月16日オリジナルのモバイル固定ナビを Lightning サイトに実装しました