ブラウザ上で背景が透明のPNG(ピング)画像を作る方法【初心者向け】

専用の画像編集ソフトを使わずに、ブラウザ上だけで背景が透明になっている「透過PNG画像」を作る方法を紹介します。

透過PNG（ピング）画像とは

「PNG」画像は、よく見る画像形式の「jpeg（ジェイペグ）」と同じような画像形式の１つです。

ただ１つ特徴があって、普通は白くなる背景を透過色として指定する事ができます。背景が透明でオブジェクトのみの画像を「透過PNG（ピング）画像」といいます。

背景に色がある資料などに白背景のイラスト画像を載せると、イラストの周りだけ白くなってしまいますよね。

そんな時に背景が透明の【透過PNG素材】のイラストを使うと、背景が白色にならずにスマートにイラストを挿入することが出来ます。

まずは背景を透明にしたい画像を準備します。

こちらの手書きしたダルマの画像の背景（黄色の部分）を透明にし、ダルマの透過PNG画像を作成したいと思います。

Photoshop（フォトショップ）などの画像編集ソフトをお持ちでない場合は、WEBブラウザ上で画像を編集できるサービスを使用します。
ここでは「無料で画像を加工できるサイト PEKO STEP」さんを使用し透過PNGを作成していきます。

無料で画像を加工できるサイト PEKO STEP
https://www.peko-step.com/tool/alphachannel.html

無料で画像を加工できるサイトPEKO STEPさんにアクセスし、「ここに画像をドロップしてください」と書かれた場所に、透明にしたい画像をドラック＆ドロップで持っていきます。

画像を開くと上のようになります。

左のツールが「色の透明」、下の透過対象が「クリックした色」を選択していることを確認し、画像中の透明にしたい箇所をクリックします。

すると、クリックした色が一瞬で透明に変わります。

もし完全に透明ではなく、薄く見えている状態にしたい場合は「透過対象」の下の「不透明度」の数値を「0」ではなく「50%」などに変更してください。

ですがこのままではダルマの周りに微妙に黄色の箇所が残ってしまっています。

そんな時は左のツールから「消しゴム」ツールを使って黄色いところを消していきます。

下の「線の太さ」で太さを調整して、ダルマの周りの黄色をグルっと消します。

細かいところが見えにくい場合は、上の「拡大率」でアップにして調整して完成です！

完成したら「ファイル」の保存から保存場所、ファイル名を決めて保存します。

透過PNG画像が完成しました！
これで他の画像やいろんな所に合成し放題です！

いかがでしたでしょうか。
以前は、画像編集ソフト「Photoshop（フォトショップ）」を使用した作成方法をご紹介しましたが、今回は特別な画像編集ソフトを使わないで作成する、背景が透明の透過PNG（ピング）画像の作り方をご紹介いたしました。
WEB上で画像の編集ができるなんて！感謝です。

プレゼン資料やホームページの制作では非常に便利な透過PNG画像ですので上記の方法で作って使ってみてください。

Photoshop（フォトショップ）での作成方法、Macの標準アプリ「プレビュー」での作成方法はこちらの記事よりご覧下さい。