Adobe PSDバイナリ仕様の解読：8BPSから透過PNGへの変換技術
Adobe Photoshop Document（PSD）形式は、世界中のプロフェッショナルデザイナー、レタッチャー、CGアーティストに愛用されているデジタル制作の事実上の業界標準規格です。しかし、PSDは単なる画像ファイルではなく、複数レイヤーの構造木、スマートオブジェクト、ベクターパス、テキスト情報、レイヤースタイル、描画モード設定などをカプセル化した巨大な「プロジェクト作業データ」です。そのため、Webブラウザやスマートフォン、標準的な画像ビューアでは直接開くことができません。PSDファイルを標準的な透過PNG（Portable Network Graphics）形式へと変換することで、Photoshopがレンダリングした最終合成立体を1ピクセルも損なうことなく抽出し、Web公開やFigmaでの再利用をスムーズに実現できます。
PSDファイルの内部構造：5つの主要バイナリセクション
Adobe公式のファイルフォーマット仕様に基づき、ブラウザ内エンジンがPSDファイルを解析する際には以下の5つのセクションを順次処理します。
- 1. ファイルヘッダー（先頭26バイト）： マジックナンバー
0x38 0x42 0x50 0x53（"8BPS"）、バージョン番号（通常PSDは1、PSB大判は2）、予約領域（6バイト）、カラーチャンネル数（RGBなら3または4、最大56）、キャンバスの縦横ピクセル寸法（PSD規格では最大30,000px）、ビット深度（通常8ビット）、およびカラーモード（RGB、CMYK、グレースケール等）が記録されています。 - 2. カラーモードデータ部： インデックスカラー画像のカラーパレットテーブルや、デュオトーン（2色刷り）印刷用のカーブパラメータなどが格納されます。
- 3. 画像リソース部： 署名
8BIMで区切られたリソースブロック群です。解像度情報（DPI/PPI）、ガイド線や定規の座標、パスデータ、およびPhotoshopが生成した高速プレビュー用のサムネイル（リソースID 1033 / 1036）などが含まれます。 - 4. レイヤーおよびマスク情報部： 個別のレイヤー名、レイヤー矩形座標、描画モード（乗算
mul、スクリーンscrn、オーバーレイover等）、レイヤーマスクのビットマップデータなどが階層構造で格納されています。 - 5. 実画像データ部（マスター合成立体）： Photoshopがドキュメント保存時に全レイヤーの描画結果を1枚の平面画像として焼き込んだ「マスター合成ラスター」が記録されています。この領域は非圧縮（生データ）またはApple PackBits連長圧縮（RLE）で符号化されています。
ブラウザ内でのPackBits RLE展開と透過PNG生成パイプライン
当ツールのクライアントサイド変換エンジンは、外部サーバーへのアップロードを行わずに以下の工程で高速処理を行います。
- 8BPSヘッダーの検証と寸法抽出： ファイル先頭のマジックバイトを検証し、キャンバスの幅・高さ、チャンネル数（RGB＋透明アルファプレーンの有無）を瞬時に取得します。
- PackBits RLEストリームの高速デコード： 第5セクションに格納されている合成データがPackBits圧縮（Photoshopの標準設定）されている場合、2バイト単位の走査線長テーブルを走査し、赤（R）、緑（G）、青（B）、およびアルファ（A）の各チャンネルをプレーンごとに高速展開します。
- ピクセルインターリーブ処理： プレーン別に分かれている色データを、メモリ上で連続した32ビットRGBA（Red, Green, Blue, Alpha）ピクセルアレイへと並べ替えます。CMYK画像の場合はITU-R BT.601色空間マトリクスを用いてsRGB値へと精密に色変換します。
- 適応型PNGエンコード： RGBAバッファに対し、PNGの適応型差分フィルタ（Paeth, Sub, Up）を適用した上でDeflate圧縮を行い、標準的な透過PNG画像バイナリを構築します。
PSD形式とPNG形式の技術仕様比較表
| 比較項目 | PSD（Adobe Photoshop Document） | PNG（Portable Network Graphics） |
|---|---|---|
| データ構造形態 | 多層レイヤー、マスク、テキスト、効果を含む作業プロジェクト | 透過アルファチャンネルを持つ単一平面ラスター画像 |
| 閲覧ソフトウェア環境 | PhotoshopやIllustrator等の専用有料ソフトが必要 | 不要（全ブラウザ、全OS、全オフィスソフトで標準閲覧可能） |
| ファイルサイズ傾向 | 極めて巨大（数十MB〜数GBに達する） | 高効率に最適化（数百KB〜数MB程度） |
| 透明度サポート | レイヤーマスクおよびドキュメント透過チャンネル | 標準的な8ビットアルファチャンネル（256段階半透明） |
| 主な用途 | プロフェッショナルなデザイン制作・編集マスターデータ | Web配信、アプリ組み込み、プレゼン資料、クライアント共有 |
PSDからPNGへの変換が活躍する実務現場
現場においてPSDをPNGへ変換する代表的なユースケースには以下があります。
- クライアントや社内関係者へのデザイン確認提出： Photoshopを持っていない発注者やディレクターにデザイン案を確認してもらう際、重いPSDを送信すると開けずにトラブルになります。透過PNGへ変換して共有すれば、スマホやメール上で即座に確認できます。
- Figma、Canva、Miroなどのクラウドツールへのインポート： FigmaなどのUIデザインツールはPSDのレイヤースタイルを完全に解釈できないことがあります。合成立体を透過PNGとして書き出すことで、デザイン崩れのない忠実なアセット配置が可能です。
- Webフロントエンド開発・アプリ実装アセットの抽出： エンジニアがデザイナーから受領したPSDから、ロゴやバナー、アイコンなどの切り抜き透過アセットを取り出す際、Photoshopを起動することなくブラウザ上で即座にPNG化できます。
- プレゼンテーション資料（PowerPoint / Keynote）への配置： スライド資料にデザインカンプを挿入する際、背景が透過されたPNG形式であれば、自社のスライド背景デザインと違和感なく綺麗に調和します。