透過PNGの作品をWebへ載せる 原画像と背景を一緒に渡す

透過PNGの作品をWebへ載せるときは、原画像と、作品を見せたい背景を一緒に渡します。白い線が見えにくい場合も、画像を描き直す前に、掲載する画面の背景を変えて確かめると判断しやすくなります。

作品のPNG、希望する背景色、その組み合わせで確認した表示見本、掲載先。この四つがあると、制作担当へ「どの見え方を残したいか」を具体的に伝えられます。

白い描画と、透過した余白を分けて見る

PNGには、色のある部分だけでなく、背景が透ける部分を含められます。白で描いた部分と透明な部分は別です。白い帆を白い画面へ置くと、描画が残っていても輪郭が分かりにくくなることがあります。半透明の色も、後ろの背景と合わさって表示されます。PNG仕様のアルファ処理では、画像の色と透明度を、背景と組み合わせて表示する仕組みが示されています。

まずは元PNGを保管し、描いた白い部分と透明な余白がどこにあるかを確認します。掲載用の見本を作るために白い背景を焼き込むと、透過した原画像とは別のファイルになります。渡すときは、原PNGと表示見本が混ざらない名前にしておくと安心です。

同じ原画像を、白と濃紺の背景で比べる

自主制作のデジタル作例「夜の渡し」は、600×720画素の透過PNGです。白い大きな帆と船体、月、薄い帆、四本の波線を描き、背景は制作時に濃紺の「#1B3348」と指定しました。以下は同じ原PNGを使い、表示枠の背景だけを変えた比較です。

この比較では画像の色や透明度、縦横比を変えていません。白い帆が消去されたのではなく、白い背景と同じ色になって輪郭が分かりにくくなっています。濃紺へ戻すと、同じ描画が見えます。原画像を修正するか決める前に、作品と背景の組み合わせを確認する理由がここにあります。

上の選択で、同じPNGの背景を切り替えられます。作品画像を押すと原PNGの全体を開くことができます。元の比較へ戻ったら、選んだ背景と作品全体を確かめてください。

これは一つのブラウザで確認した作例です。濃紺がすべての作品に合うという意味ではありません。背景は、作品ごとに残したい見え方から選びます。

原PNGと、採用する背景の表示見本を渡す

Web編集を依頼するときは、原PNGだけを送るのではなく、背景の指定と確認した見本を添えます。「濃い青」などの色名に加え、色番号と見本があると、希望する組み合わせを共有しやすくなります。

原画像	透過を保った元PNG。作品名と画素寸法も伝えます。「夜の渡し」では600×720画素です。
背景と表示見本	希望する背景色と、その背景で作品全体を確認した見本。白い帆や波線など、残したい箇所を短く添えます。
掲載先	掲載予定のページや制作中の画面。どの作品枠に使うか、周囲の配色も含めて制作担当と確認します。

今回の見本なら、「原PNGはそのまま使い、この作品枠を#1B3348で表示したい。白い帆と月、薄い帆と四本の波線が分かる状態を残したい」と伝えられます。画像ファイルと画面の背景を分けて渡すことで、掲載用の見本から元画像を切り出す必要もなくなります。

掲載する画面で、作品全体を確かめる

希望する背景を伝えた後は、実際に掲載する画面で、作品の四辺・縦横比・白い描画・半透明の部分を確認します。大きな画面と携帯幅では表示サイズが違うため、作品全体と、残したい線や形の両方を見ます。

Webの背景色は画面側の設定です。MDNのbackground-colorの説明も、要素の背景に色を指定する性質を示しています。掲載先の背景や配色を編集する担当と、作品枠の指定を確認しましょう。色番号だけで、すべての画面に同じ色が出るとは限りません。

複写の作品集制作の案内では、手元の作品データや説明から、紹介する順番や紙面・Webの構成を相談できます。透過PNGを使いたい場合は、原画像、希望背景と表示見本、掲載予定の画面を添えてください。作品をどこへ載せるかと、背景を含めてどの範囲を整えるかを具体的に相談できます。