イラストの白い背景を透過にする方法

昨日の投稿に続き、Inkscape のネタです。

こういう ↓ イラストがあって・・・

この稲穂のイラストを写真に重ねて ↓ こういうふうにしたいと思っているのに・・・

このような結果 ↓ になってしまうことがあります。

稲穂のイラストの背景が透過ではなく白色になっているために期待外れの結果になっているんです。

このような用途に使えるようにイラストの背景を透過にするやり方を紹介します。

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

昨日の投稿と同じく、フリーソフトの Inkscape を使用します。Inkscape は以下のサイトから入手できます。

https://inkscape.org/ja

Inkscape を起動して、イラストの画像ファイルを Inkscape のウィンドウにドラッグして読み込みます。

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

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

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

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

背景の白色を透過するときには、しきい値を 0.980 くらいにするのがよいです。

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

この時点で Inkscape の画面には2つの画像があります。

• 読み込んだイラスト
• トレースしてできた黒い画像

黒い画像に隠れてイラストが見えなくなっています。

【注意!!】ここで画像を動かしてはいけません。

手順３．クリップを設定

マウスでドラッグしてイラストとトレースした画像を囲みます。イラストをすっぽりと完全に囲めるように大きく囲んでください。

両方の画像が選択されてこのような状態になります。

画像を右クリックして [クリップを設定] をクリックします。

これで背景が透過になりました。

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

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

これで作業完了です。

投稿者プロフィール

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

【日本全国対応】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 サイトに実装しました