EN JA ZH ES

透過画像の作り方と活用法 - PNG, WebP, SVG での透明背景の実現

· 約 9 分で読めます

透過画像の基本概念とアルファチャンネル

透過画像とは、背景が透明な画像のことです。通常の画像は各ピクセルが RGB (赤・緑・青) の 3 チャンネルで構成されますが、透過画像にはこれに加えてアルファチャンネル (A) が存在します。アルファチャンネルは各ピクセルの透明度を 0 (完全に透明) から 255 (完全に不透明) の 256 段階で表現します。

アルファチャンネルの重要な特性は「半透明」を表現できる点です。アルファ値が 128 (50%) のピクセルは、背景色と画像の色が半分ずつブレンドされて表示されます。これにより、被写体のエッジが背景に自然に溶け込む滑らかな切り抜きが実現できます。アルファ値が 0 か 255 のみ (完全透明か完全不透明) の場合は「1 ビットアルファ」と呼ばれ、エッジがギザギザ (ジャギー) になります。

Web ブラウザでの透過画像の表示は、CSS の background プロパティと組み合わせることで真価を発揮します。透過画像を任意の背景色やグラデーション、パターンの上に重ねることで、1 つの画像素材を様々なデザインコンテキストで再利用できます。ダークモードとライトモードの切り替えにおいても、透過画像であれば背景色の変更に自動的に適応します。

ファイルサイズの観点では、アルファチャンネルの追加は画像データ量を約 33% 増加させます (RGB 3 チャンネル → RGBA 4 チャンネル)。ただし、透明領域が多い画像では圧縮効率が高くなるため、実際のファイルサイズ増加は画像の内容に依存します。

PNG での透過画像作成

PNG (Portable Network Graphics) は透過画像の最も一般的なフォーマットです。8 ビットのアルファチャンネルをサポートし、256 段階の半透明表現が可能です。ロスレス圧縮のため画質劣化がなく、テキストやロゴなどシャープなエッジを持つ画像に最適です。

PNG の透過タイプ:

  • PNG-32 (RGBA): フルカラー + 8 ビットアルファ。写真品質の透過画像に使用。ファイルサイズは大きい
  • PNG-24 + tRNS チャンク: 特定の 1 色を透明色として指定する方式。GIF と同様の「インデックス透過」。半透明は不可
  • PNG-8 + アルファ: 256 色パレット + アルファチャンネル。色数が少ないイラストやアイコンに最適。PNG-32 の 1/3〜1/5 のファイルサイズ

Photoshop での作成手順:

  • 背景レイヤーのロックを解除し、通常レイヤーに変換する
  • 不要な背景を選択ツール (マジックワンド、クイック選択、ペンツール) で選択し削除する
  • 「ファイル」→「書き出し」→「Web 用に保存」で PNG-24 を選択し、「透明部分」にチェックを入れる

Figma での作成手順:

  • フレームの背景色を削除する (背景色のチェックを外す)
  • エクスポート設定で PNG を選択し、書き出す。Figma は自動的にアルファチャンネル付きの PNG を生成する

pngquant を使用すると、PNG-32 を PNG-8 + アルファに変換してファイルサイズを大幅に削減できます。視覚的な品質低下はほとんどの場合で知覚できないレベルです。

WebP と AVIF での透過画像

WebP は PNG と同様にアルファチャンネルをサポートしますが、はるかに高い圧縮効率を実現します。透過画像において、WebP は PNG の 26% 程度のファイルサイズで同等の品質を維持できるとされています (Google の公式ベンチマーク)。Web 用の透過画像では、PNG から WebP への移行が最も効果的なファイルサイズ削減策です。

WebP の透過モード:

  • ロスレス WebP + アルファ: PNG と同等の品質でファイルサイズを 26% 削減。テキストやロゴに推奨
  • ロッシー WebP + アルファ: RGB チャンネルは非可逆圧縮、アルファチャンネルはロスレス圧縮。写真の切り抜きに最適。PNG の 10〜20% のファイルサイズ

AVIF も透過をサポートしており、WebP よりさらに高い圧縮効率を持ちます。ただし、AVIF のアルファチャンネルは非可逆圧縮されるため、エッジの品質が WebP のロスレスアルファより若干劣る場合があります。ロゴやテキストなどシャープなエッジが重要な画像では、WebP ロスレスの方が適切です。

実装上の注意点として、WebP の透過画像を <picture> 要素でフォールバック配信する場合、PNG をフォールバックとして用意する必要があります:

  • <picture>
  • <source srcset="logo.webp" type="image/webp">
  • <img src="logo.png" alt="ロゴ">
  • </picture>

CSS の background-image で透過 WebP を使用する場合は、@supports ルールまたは JavaScript による対応検出が必要です。

SVG による透過とベクター画像の活用

SVG (Scalable Vector Graphics) はベクター形式の画像フォーマットであり、本質的に透過をサポートしています。SVG の背景はデフォルトで透明であり、アルファチャンネルの概念すら不要です。ロゴ、アイコン、シンプルなイラストなど、ベクターで表現可能な画像には SVG が最適な選択肢です。

SVG の透過に関する特性:

  • 背景は自動的に透明。明示的な設定は不要
  • opacity 属性で要素全体の透明度を制御可能 (0〜1)
  • fill-opacity と stroke-opacity で塗りと線の透明度を個別に制御可能
  • RGBA カラー指定 (fill="rgba(255, 0, 0, 0.5)") で半透明の色を直接指定可能

SVG の最大の利点は解像度非依存であることです。Retina ディスプレイや 4K モニターでも、SVG は常にシャープに表示されます。PNG の透過画像では 2x、3x のバリエーションを用意する必要がありますが、SVG なら 1 ファイルですべての解像度に対応できます。

ファイルサイズの面でも、シンプルな図形やアイコンでは SVG が圧倒的に小さくなります。例えば、64×64 ピクセルのアイコンは PNG で 2〜5KB ですが、同等の SVG は 500B〜1KB 程度です。さらに gzip 圧縮 (サーバー側で自動適用) により 60〜80% 縮小されるため、実効的な転送サイズは極めて小さくなります。

ただし、写真のような複雑な画像を SVG で表現することは現実的ではありません。SVG はパスとシェイプで構成されるため、写真をトレースすると膨大なパスデータが生成され、ファイルサイズが PNG を大幅に超えます。SVG は「幾何学的に表現可能な画像」に限定して使用すべきです。

背景除去の実践テクニック

既存の写真から背景を除去して透過画像を作成する作業は、画像編集で最も頻繁に行われる操作の一つです。AI 技術の進歩により、かつては熟練のデザイナーが数十分かけていた作業が、数秒で完了するようになりました。

AI ベースの背景除去ツール:

  • remove.bg: Web ベースの自動背景除去サービス。人物写真に特に高精度。API も提供しており、バッチ処理に組み込み可能
  • Photoshop の「被写体を選択」: Adobe Sensei AI による自動選択。髪の毛のような複雑なエッジも高精度に検出する
  • rembg (Python ライブラリ): オープンソースの背景除去ツール。U2-Net モデルを使用し、ローカルで実行可能。コマンドラインからバッチ処理できる

手動での精密な切り抜き:

  • ペンツール: 最も精密な切り抜きが可能。商品写真やロゴなど、エッジの正確さが求められる場合に使用。曲線のアンカーポイントを適切に配置することで、滑らかなパスを作成する
  • 「選択とマスク」ワークスペース (Photoshop): エッジの検出精度を調整し、髪の毛や毛皮などの複雑な境界を処理する。「エッジをシフト」で選択範囲を内側に縮小し、背景色のフリンジ (にじみ) を除去する

背景除去後の仕上げとして、エッジの「マット処理」が重要です。切り抜いた被写体のエッジに元の背景色が残る (フリンジ) 場合、「マットの除去」(Photoshop) や「エッジを調整」機能で不要な色を除去します。特に暗い背景から切り抜いた場合、エッジに暗い縁取りが残りやすいため注意が必要です。

画像編集の入門書は Amazon でも探せます

透過画像の Web デザインでの活用パターン

透過画像は Web デザインにおいて多様な活用パターンがあります。適切に活用することで、デザインの柔軟性と再利用性が大幅に向上します。

主要な活用パターン:

  • ロゴ配置: 透過ロゴは任意の背景色・画像の上に配置できる。ヘッダー、フッター、OGP 画像など、異なるコンテキストで同じロゴファイルを再利用可能
  • 商品画像の合成: 背景を除去した商品画像を、季節やキャンペーンに応じた背景と組み合わせる。1 つの商品画像から複数のバナーを生成できる
  • オーバーレイ効果: 半透明の図形やテクスチャを写真の上に重ねて、テキストの可読性を確保しつつ写真の雰囲気を活かすデザイン
  • ダークモード対応: 透過画像はライトモード・ダークモードの両方で自然に表示される。背景色に依存しないため、モード切替時の画像差し替えが不要

CSS との組み合わせテクニック:

  • mix-blend-mode: 透過画像と背景のブレンドモードを制御。multiply で暗い部分を強調、screen で明るい部分を強調
  • filter: drop-shadow(): box-shadow と異なり、透過画像の形状に沿った影を生成する。切り抜き画像に自然な影を付ける際に使用
  • mask-image: 透過画像をマスクとして使用し、別の画像や要素の表示領域を制御する

パフォーマンスの観点では、透過画像は不透明画像よりもレンダリングコストが高くなります。ブラウザは透過ピクセルごとにアルファブレンディング計算を行うため、大きな透過画像を多数重ねるとスクロール性能に影響する可能性があります。will-change: transform や contain: paint を活用して、レンダリングの最適化を図りましょう。

関連記事

背景透過の技術解説 - セグメンテーションとマット処理の仕組み

画像の背景透過 (背景除去) に使われる技術を解説。セマンティックセグメンテーション、トリマップベースのマット処理、エッジ検出の仕組みと精度の違いを比較します。

画像フォーマット比較表 - JPEG/PNG/WebP/AVIF/GIF/BMP の特徴と使い分け

主要な画像フォーマット 6 種類の技術的特徴を比較。圧縮方式、対応色深度、透過、アニメーション、ブラウザ対応状況を一覧表で整理し、用途別の最適な選択を解説します。

Web 用画像のファイルサイズ最適化戦略 - 品質を保ちながら軽量化する技術

Web パフォーマンスを最大化するための画像ファイルサイズ最適化手法を、フォーマット選択からメタデータ除去まで体系的に解説します。

画像圧縮の仕組みを徹底解説 - JPEG ・ PNG ・ WebP の違い

JPEG、PNG、WebP の圧縮アルゴリズムの違いを技術的に解説。非可逆圧縮と可逆圧縮の原理、各フォーマットの得意分野、実務での使い分けを具体的なデータとともに紹介します。

favicon の作り方完全ガイド - ICO, SVG, PNG の使い分け

favicon の仕組みから、ICO, SVG, PNG 各フォーマットの特徴、ダークモード対応、各ブラウザの対応状況まで実践的に解説します。

WebP のメリットと対応状況 - 次世代画像フォーマットの実力

Google が開発した WebP フォーマットのメリット、デメリット、ブラウザ対応状況を解説。JPEG や PNG からの移行判断に必要な情報をまとめます。

関連用語