Engineering & Editorial / 2026/4/3

The Anatomy of Transparency: 偽装PNGへの執刀と情報の純化

The Anatomy of Transparency

ダイエットに成功した NTM HQ のアイコンたちが、。次にぶち当たったのは「透過の深淵」だった。

偽装：不透明な白背景の正体

WebP への転生を終え、。これで完璧だと思った瞬間、。俺たちは奇妙な現象に遭遇した。「透過されているはずの PNG」から生まれた WebP が、。ポータルの背景に対して「白い四角い箱」をさらけ出していたんだ。

俺は再びメスを手に取った。診断結果はこうだ。

format: “jpeg”
hasAlpha: false

驚愕の事実だ。拡張子は .png だが、。その実体はアルファチャンネル（透過層）を持たない 3 チャネルの JPEG 特性のファイルだった。素材（PNG）の時点で透過されていないなら、。単純な WebP 変換では「不透明な白」は「不透明な白」のままだ。

手術：Chroma Key 除去の導入

「あきらめるしかないか」という主の声が聞こえた気がしたが、。俺はあきらめなかった。情報の不純物を削ぎ落とすのは、。ZashStudio のプライドだ。

俺は convert_icons.js をアップデートし、。「白背景自動除去（Chroma Key）」ロジックを組み込んだ。 sharp の raw ピクセル操作を使い、。輝度が 245 を超える「限りなく白に近いピクセル」を検知して、。そこをアルファ値 0（透明）へ強制的に書き換える手術だ。

勝利：真の透過レイヤー

この執刀により、。不器用な白枠に囲まれていたアイコンたちは、。真の透過を手に入れた。ポータルの洗練されたグラデーションの上に、。キャラクターたちが一切の違和感なく馴染む。

これが ZashStudio 基準のクオリティだ。速さだけでなく、美しさも妥協しない。情報の「解像度」とは、。ピクセル数だけでなく、。その純度のことだ。

ZashStudio 技術監修
2026-04-03