画像の透過

画像の透過は、アルファチャンネルを使い、画像内のピクセルを完全に表示するか、半透明にするか、完全に透明にするかを制御する仕組みです。

透過の仕組み

標準的なRGB画像では、各ピクセルが赤、緑、青の3つの値を保存します。この3チャンネルを組み合わせて、見える色を作ります。透過では4つ目のアルファチャンネルを加え、ピクセルごとの不透明度を調整します。

アルファチャンネルは、通常、完全な透明を表す0から完全な不透明を表す255までの値をピクセルごとに保存します。アルファ値128のピクセルは50%の透明度になり、背後の色が半分の強さで見えます。ピクセルごとに制御できるため、不透明から透明へ移る滑らかなグラデーション、どの背景にもなじむ柔らかな影、階段状のぎざつきを避けるアンチエイリアスの輪郭を作れます。

透過画像を別の画像や色付きの背景へ重ねると、描画エンジンがレイヤーを合成します。各ピクセルについて、アルファ値に応じて前景色と背景色を混ぜます。この処理は、ブラウザ、デザインツール、画像ビューアーでリアルタイムに行われます。

アルファチャンネルは各ピクセルに値を1つ追加するため、ファイルサイズも増えます。1,000×1,000ピクセルの画像なら、圧縮前のアルファチャンネルはおよそ100万バイトです。圧縮によって増加分は小さくなりますが、透過を持つ画像は、同じ内容の完全に不透明な画像より多少大きくなります。

透過に対応する形式

すべての画像形式が透過を扱えるわけではなく、対応する形式にも違いがあります。

• PNG： ピクセルごとに256段階の不透明度を持つ完全なアルファ透過に対応します。透過スクリーンショット、アイコン、UI要素で標準的に使われ、幅広い環境に対応します
• WebP： 非可逆モードと可逆モードの両方で、完全なアルファ透過に対応します。多くの場合、PNGより小さい透過画像を作れます。ブラウザ対応も広がっています
• GIF： 二値透過だけに対応します。各ピクセルは完全な透明か不透明のどちらかです。半透明にできないため輪郭がぎざつきます。単純なアニメーションには使えますが、高品質な透過には向きません
• AVIF： 高い圧縮効率と完全なアルファ透過に対応します。透過画像を小さくできますが、エンコードが遅く、対応プラットフォームもほかの形式より限られます
• SVG： CSSと属性を使い、図形ごとに不透明度を指定できます。ベクター形式なので、透過はピクセルではなく要素ごとに定義します
• JPG： 透過には対応しません。保存時に透明部分が単色になります

形式は作業環境に合わせて選びます。互換性を最優先するならPNGが安全です。Web向けに小さくするなら、WebPはサイズと対応状況のバランスが取れています。

透過とスクリーンショット

通常のスクリーンショットは、背景を含め、画面の見た目をそのまま撮影します。画面は不透明な内容を表示しているため、できあがる画像にも透明なピクセルはありません。

スクリーンショットの制作では、いくつかの場面で透過が役立ちます。マーケティング素材、ドキュメント、プレゼンテーション用にウインドウやUI要素を撮影する場合、背景を除いて透明にすると、どの面にも自然に配置できます。

撮影時にデスクトップやアプリの背景を除き、個別のウインドウを透明背景で直接撮影できるツールもあります。通常の不透明な画像を出力し、あとから背景削除ツールで被写体を切り出して透過を加える方法もあります。

アプリストアの掲載画像、ランディングページ、提案資料に使う製品画面では、透過画像が特に便利です。長方形の境界を見せずに、ブランドに合わせた背景やデバイスモックアップへ配置し、ほかの要素と並べられます。

透過は、撮影中より撮影後の処理として使われることも多くあります。ウインドウやUIカードを一度切り出し、透過画像として保存すれば、マーケティングのレイアウト、ドキュメント、デバイスモックアップで繰り返し使えます。

よくある失敗

• 透過画像をJPGで保存する： JPGは透過に対応しません。透明な領域が単色で埋まり、透過データは失われます。PNG、WebP、AVIFを使ってください
• 異なる背景で確認しない： 白背景ではきれいに見えても、暗い背景では色の縁や光輪が目立つ場合があります。公開前に複数の背景色で確認します
• 市松模様を画像の内容だと思う： 画像編集ソフトに表示される灰色と白の市松模様は、透明な領域を示すもので、画像の一部ではありません。正しく書き出せば、模様が出力へ写ることはありません
• アルファチャンネルによるファイル増加を無視する： 透過はデータを増やします。透明な領域が不要なら、アルファチャンネルなしで保存するとファイルを小さくできます。書き出しツールによっては、不要なアルファチャンネルを削除できます