ShiftBase LabPhotopea / 画像編集
白い背景だけ消す。
白いカップは、そのまま。
背景を透明にして、資料やサムネイルに使えるPNGを作ります。
使うアプリ：Photopea
ブラウザで使える画像編集アプリ。選択・手直し・PNG保存を、無料の基本機能で実演しました。
今回はAIなし。消す場所を自分で選ぶ基本を練習します。
まず、練習画像を保存
練習画像を保存保存先を聞かれたら「ダウンロード」を選びます。聞かれない場合は、Chromeのダウンロード履歴で確認します。
練習素材の利用範囲
個人の学習・練習のために保存・加工できます。練習成果をSNS等で紹介する場合は「練習素材：ShiftBase Lab」と紹介元を記載してください。素材やキットの再配布、販売、商品化、企業・店舗のロゴ等への使用は対象外です。
利用条件を確認して、同じ画像で練習してください。
利用案内の全文動画で一緒に進める
01 画像を開く
- Photopeaで、左上の「ファイル」→「開く」を選びます。
- 保存した
raana-import-640.pngを選び、右下の「開く」を押します。
白い背景付きのラーナが表示されたらOK。
「開く」って何？
保存してある画像を、編集画面に呼び出すことです。
02 自動選択を準備する
- 左の選択ツールを長押しし、「自動選択」を選びます。
- 許容値は 16、境界をぼかすは 0px。
- 「アンチエイリアス」「隣接」はオンにします。
カップの白を残すため、「隣接」を確認。
自動選択・隣接って何？
自動選択は、近い色をまとめて選ぶ道具。「隣接」は、つながった場所だけを選ぶ設定です。
03 外側の白を消す
- 外側の白い背景をクリックします。
- カップや髪が選ばれていないことを確認し、Deleteを1回押します。
- 白いカップが残っていたら、Ctrl＋Dで選択を解除します。
外側が市松模様になり、カップが残ればOK。
点線と市松模様は何？
点線は変更する範囲。市松模様は「透明」の表示で、画像に模様が描かれたわけではありません。
04 腕の隙間も消す
- ズームツールで、腕とカップのまわりを拡大します。
- 自動選択に戻し、16・0pxを確認。カップの上の白い隙間をクリックします。
- 隙間だけが選ばれたら Delete。カップと腕を確認し、Ctrl＋D。
カップ本体の白は、そのまま残します。
外側を消したのに、なぜ残る？
隙間は外側の白とつながっていないため、別に選びます。
05 白い縁を1px整える
- 自動選択で、透明になった外側をクリックします。
- 「選択」→「変更」→「拡張」で 1px。「Apply at canvas bounds」はオフのまま「OK」。
- Deleteを1回、Ctrl＋Dで解除。髪や指が削れすぎていないか確認します。
白い縁が気になる場合の仕上げです。1pxは今回の640px画像の値。
px（ピクセル）って何？
画像を作る小さな点のこと。1pxは点ひとつ分です。別の画像では調整量を見直します。
06 輪郭の色を仕上げる
- 選択を解除して、「レイヤー」メニューを下へスクロールします。
- 「フリンジ削除」を1回使い、髪・指・カップの輪郭を確認します。
濃い背景で、白い縁が目立たないか見比べます。
フリンジって何？
切り抜いた輪郭に残る縁の色です。細い線にも影響するため、繰り返す前に仕上がりを確かめます。
07 PNGで保存する
- 「ファイル」→「別名で保存」→「PNG」を選びます。
- 幅640・高さ640・品質100%を確認します。
- 名前を
raana-background-clear.pngなどに変え、「保存」を押します。
実演の保存先はダウンロードフォルダ。自分のブラウザの保存先を確認します。
PNGって何？
透明な部分を保存できる画像形式です。PNGに変えるだけで背景が消えるわけではありません。英語のメニュー名は File → Export As → PNG です。
08 保存した画像を確認する
- ペイントの「ファイル」→「開く」で、保存したPNGを開きます。
- 全体が見えないときは、下部の「ウィンドウに合わせる」を選びます。
- 外側と腕の隙間が透明で、カップ・髪・指・全身が残れば完成です。
透明部分が白く見えるアプリもあります。表示だけで失敗と決めつけないでください。
この確認画面について
動画では実際に操作した画面の静止画を使用しています。表示を縮めても画像自体の640×640pxは変わりません。
できあがりを見比べる
つまずいたら、ここを確認。
カップまで消えてしまいました
Ctrl＋Zで直前の消去を戻します。自動選択の「隣接」がオンか、クリックした場所がカップではなく背景かを確かめます。許容値16は今回の素材の設定です。別の画像では見た目に合わせて調整します。
腕の隙間に白が残ります
外側とつながっていない場所は別に選びます。ズームツールで大きく表示し、カップの上の白い隙間だけをクリックしてください。
保存したのに背景が白く見えます
まず保存形式がPNGか確認します。表示アプリが透明部分を白く表示する場合もあります。Photopeaなど透明部分を確認できるアプリで開き、外側と隙間を見てください。
スマホでも同じ手順ですか？
この教材の操作はWindowsとChromeで実演しています。記事はスマホから読めますが、同じ手順で練習する場合はパソコンを使ってください。
AIで背景を消さないのはなぜ？
今回は消す場所を自分で選ぶ基本を練習するためです。AIで背景を消した後の消し残しにも応用できます。AI機能の現在の料金・回数条件は、この教材では比較していません。
実演条件・出典・クレジット
Photopea公式の教材ではありません。操作画像は実演動画から抽出。機能名は2026年9月29日に公式説明と照合しています。今回使わないAI機能の料金・回数は比較していません。