PSDをPNGに変換する方法（レイヤーを正しく統合する）
PSDからPNGへの変換が意外と難しい理由
PSDファイルは単一の画像ではありません。それは複雑なレシピのようなものです。レイヤー、調整レイヤー、マスク、スマートオブジェクト、描画モードが積み重なっており、Photoshopのような高性能なアプリがそれらを処理して初めて一つの画像として成り立ちます。このことを理解せずにPSDをPNGに変換しようとすると、問題が発生します。透明であるべき部分が真っ白な背景になったり、フォントレイヤーがレンダリングされずにテキストが消えてしまったり、調整レイヤーが無視されて奇妙な色味になったりするのです。 PNGは単純なラスター形式です。ピクセルのグリッドを保存するものであり、指示のリストではありません。変換作業は、実際にはレンダリング作業です。Photoshopのすべての指示を最終的なピクセルグリッドに集約し、そのグリッドを可逆圧縮のPNGとして保存するのです。最終的な画像の品質は、ソースファイルに詰め込まれたすべてをレンダリング処理がどれだけうまく扱えるかにかかっています。 最も一般的な失敗は、何を探すべきかを知っていれば簡単に見つけられます。透明部分は、白や黒のベタ塗りに置き換えられることがよくあります。ドロップシャドウや光彩のようなレイヤー効果は、完全に消えてしまうことがあります。スマートオブジェクトは、最初にラスタライズされなかったために低解像度でレンダリングされるかもしれません。そして、カラープロファイルが削除されると、キャリブレーションされた画面で画像が色あせて見えることがあります。これらの落とし穴を事前に知っておくことで、多くのフラストレーションや手戻りを防ぐことができます。
Photoshopで書き出す前にレイヤーを統合する
Adobe Photoshopをお持ちなら、手動で統合して書き出すことで、完全にコントロールできます。重要な選択肢は、「画像を統合(Flatten Image)」と「表示レイヤーを結合(Merge Visible)」です。似ているように聞こえますが、やることは全く違います。 「画像を統合(Flatten Image)」（レイヤー > 画像を統合）は、非表示のものも含め、すべてのレイヤーを結合し、透明な領域をすべて白で塗りつぶします。透明な背景が必要なPNGにとっては、これはほとんどの場合、間違った選択です。代わりに、「表示レイヤーを結合(Merge Visible)」（WindowsではShift+Ctrl+Alt+E / MacではShift+Cmd+Option+E）を使いましょう。この素晴らしいショートカットは、表示されているすべてのレイヤーの結合コピーをスタックの一番上に新しいレイヤーとして作成し、元のレイヤーは下にそのまま残してくれます。その後、その新しい結合レイヤーだけを、透明度を保ったまま書き出すことができます。 書き出し自体には、古い「別名で保存(Save As)」コマンドを使わないでください。ファイル > 書き出し > 書き出し形式(Export As)を直接使いましょう。そのダイアログで、形式をPNGに設定し、「透明部分」のチェックボックスがオンになっていることを確認してください。画面表示用なら、72 PPIが標準です。印刷用やRetinaディスプレイ用など、高解像度のものには144または300 PPIを使用します。PPI値は単なるメタデータであることを覚えておいてください。72 PPIの2000×2000ピクセルのキャンバスは、2000×2000ピクセルのPNGを書き出します。物理的な寸法は変わりません。 最後にもう一つプロのヒントです。PSDがCMYKやAdobe RGB 1998のような印刷用のカラープロファイルを使用している場合、Web用に書き出す前にsRGBに変換しなければなりません。編集 > プロファイル変換(Convert to Profile)に進み、sRGB IEC61966-2.1を選択し、「黒点の補正」にチェックを入れた相対的な色彩を維持(Relative Colorimetric)レンダリングを使用します。このステップを飛ばすことが、丹念に作り上げたデザインがWebブラウザでくすんで色あせて見える一番の原因です。
CocoConvertを使ってオンラインでPSDをPNGに変換する
誰もがPhotoshopのサブスクリプションを持っているわけではありませんし、持っていたとしても、フォルダいっぱいのPSDを一つずつ変換するのは気の遠くなるような作業です。CocoConvertの[PSDからPNGへのコンバーター](/convert/psd-to-png)は、サーバー上でレンダリングを処理することでこの問題を解決します。PSDをアップロードするだけで、適切に統合されたPNGが返ってくるので、手元にデザインソフトは必要ありません。 このコンバーターは、アルファチャンネルを維持しながら、表示されているすべてのレイヤーをインテリジェントに結合します。つまり、Photoshopファイル内の透明な領域は、最終的なPNGでもあの忌まわしい白い背景になることなく、透明なまま維持されます。ラスター画像、テキストレイヤー（ドキュメントのネイティブ解像度でレンダリングされます）、レベル補正、カーブ、色相・彩度などの基本的な調整レイヤーなど、一般的なレイヤータイプを確実に処理します。 使い方は簡単です。/convert/psd-to-pngにアクセスし、PSDをページにドラッグするか、「ファイルを選択」をクリックして、「変換」を押すだけです。ツールは最大50MBのファイルに対応しています。処理は通常、一般的なファイルで5～15秒ほどで完了し、その後、可逆圧縮のPNG出力用のダウンロードリンクが表示されます。 アイコンセットやUIキットなど、大量のファイルを扱う場合は、一度に複数のPSDをアップロードできます。それぞれが個別に処理され、出来上がったPNGを個別にダウンロードするか、すべてをまとめて単一のZIPアーカイブとして取得することができます。これは大きな時間節約になります。
CocoConvertが対応できないこと（正直に話します）
自動化ツールには限界があり、クライアントにアセットを納品した後に発見するより、事前に知っておく方が良いでしょう。 スマートオブジェクトは、主に注意すべき点です。PSDに埋め込みまたはリンクされたスマートオブジェクトが含まれている場合、CocoConvertはそれらをドキュメント内のサイズでレンダリングし、それ自体のネイティブ解像度ではレンダリングしません。例えば、4000pxのベクターグラフィックを1000pxのキャンバスにスマートオブジェクトとして配置すると、1000pxでレンダリングされます。キャンバスに対する品質は失われませんが、スマートオブジェクトが持つより高い内部解像度の恩恵も受けられません。そのためには、まずPhotoshopでスマートオブジェクトをラスタライズする必要があります（レイヤー > スマートオブジェクト > ラスタライズ）。 3Dレイヤーとビデオレイヤーはサポートされていません。これらを含むPSDでは、これらの特定のレイヤーは最終的なPNGから省略され、その下にあったレイヤーが表示されます。 いくつかの複雑な描画モードは扱いにくい場合があります。具体的には、ディザ合成(Dissolve)、ハードミックス(Hard Mix)、および特定の輝度ベースのモードは、Photoshopでのレンダリングとわずかに異なる場合があります。違いは通常ごくわずか（チャンネルあたり数色の値）ですが、ピクセルパーフェクトな作業のためには、常にPhotoshopからの参照書き出しと出力を比較検証すべきです。 CMYKのPSDは、処理中に自動的にsRGBに変換されます。この変換には標準のICCプロファイルが使用され、ほとんどのWebおよび画面での使用には正確です。ただし、カスタムの印刷用にキャリブレーションされたワークフローとは完全には一致しません。オフセット印刷用のアセットを準備している場合は、最大限のコントロールを得るためにPhotoshopで自分でカラー変換を行ってください。
適切なPNG設定の選択：ビット深度と圧縮
PNGには主に8ビットと24ビット（それぞれPNG-8、PNG-24と呼ばれることが多い）の2種類があり、適切な方を選ぶことが重要です。 PNG-24は高品質なオプションです。1670万色に加えて、滑らかな透明度のための完全な8ビットアルファチャンネルを保存します。写真、複雑なグラデーション、微妙な色の変化があるあらゆる画像に必要なのはこれです。CocoConvertはデフォルトでPNG-24を使用しており、これはリッチなPSDファイルを変換する上で正しい選択です。 PNG-8は軽量な代替案です。256色のパレットに制限されており、はるかに小さいファイル（多くの場合60～70%小さい）を生成します。その代償として、グラデーションには目に見えるカラーバンディングが発生し、透明度はオールオアナッシング（ピクセルは完全に透明か完全に不透明かのどちらかで、中間はありません）になります。PNG-8は、フラットカラーのアイコンのような、エッジがはっきりしたシンプルなグラフィックにのみ適しています。PNG-8を得るには、PNG-24の出力をPhotoshopのようなツールで処理するか、pngquantのようなコマンドラインユーティリティを使用する必要があります。 PNGの圧縮は常に可逆圧縮であり、画質を低下させることはありません。圧縮レベルの設定は、純粋にファイルサイズとファイルの保存にかかる時間のトレードオフです。CocoConvertはバランスの取れた圧縮レベルを自動的に使用します。パフォーマンスにこだわり、Webプロジェクトで絶対的に最小のファイルサイズが必要な場合は、oxipngやpngcrushのような専用のオプティマイザに出力を通すことで、さらに10～20%絞り出すことができます。これらのツールは、ピクセルに一切触れることなく、データをより積極的に再圧縮します。 最後に、そもそもPNGが適切なフォーマットなのかを常に自問してください。透明度が必要ない場合は、高品質のJPEGの方が劇的に小さくなります。透明度が必要な現代のWeb用途では、WebPやAVIFが優れた圧縮率を提供します。しかし、マスターファイル、デザインの引き渡し、そして再編集が必要になる可能性のあるものについては、PNG-24が依然として王様です。
透明部分を正しく扱う：さらに詳しく
PNGの透明度はアルファチャンネルを介して機能します。これは追加の8ビットグレースケールマップで、各ピクセルに0（完全に透明）から255（完全に不透明）までの透明度の値が割り当てられます。これにより、どんな背景上でもきれいに見える、エッジが滑らかなドロップシャドウやアンチエイリアスのかかったテキストが可能になります。 最も一般的な変換エラーの1つは、事前乗算アルファに関連するものです。事前乗算された画像では、色の値がすでに背景色とブレンドされているため、表示するアプリケーションがストレートアルファを期待している場合に、エッジの周りに暗いまたは明るいハロー（縁取り）が生じる可能性があります。アイコンの周りの醜い黒いフリンジと戦ったことがある人なら、この痛みを知っているでしょう。CocoConvertはストレートアルファのPNGを出力します。これはWebブラウザやほとんどすべての現代のソフトウェアで期待される標準です。 透明度が変換後も維持されていることを確認するには、出力をテストしてください。最も手っ取り早い方法は、色付きの背景を持つWebブラウザでPNGを開くことです。色付きのbodyと、あなたのPNGを指す`<img>`タグを持つ、ごく単純なHTMLファイルを作成するだけです。透明な部分が背景色を表示し、エッジがきれいであれば、問題ありません。白いボックスや暗いハローが見える場合は、アルファチャンネルが誤って処理されたということです。 また、PSDの「背景」レイヤー（鍵アイコンが付いたデフォルトのレイヤー）を確認してください。このレイヤーは常に100%不透明です。最終的なPNGで透明度が必要な場合は、その背景レイヤーを削除するか、通常のレイヤーに変換する必要があります（PhotoshopのレイヤーパネルでダブルクリックしてOKを押すだけです）。CocoConvertはこれを賢くチェックします。PSDに不透明な背景レイヤーしかない場合、出力されるPNGにはアルファチャンネルが含まれません。これは正しく、より効率的な動作です。
再現性の高い実践的なワークフロー
UIキット、ブランドライブラリ、またはクライアントの仕事で定期的にPSDを変換する場合、一貫したワークフローがあなたの親友になります。時間を節約し、つまらないミスをなくすことができます。 単一ファイルや少数のバッチでPhotoshopが手元にある場合は、手動の方法にこだわりましょう。表示レイヤーを結合のスタンプ（Shift+Cmd+Option+E）を使用し、カラープロファイルがsRGBであることを再確認し、その後、透明度を有効にして「書き出し形式」を使用します。ファイルあたり1分もかからず、最大限のコントロールが得られます。 大量のバッチやPhotoshopがない場合は、CocoConvertの[PSDからPNGへのコンバーター](/convert/psd-to-png)を使いましょう。面倒な作業を代行してくれます。アップロードする前に、PSDに複雑なスマートオブジェクトや3Dレイヤーがないか、さっと目を通すことをお勧めします。ピクセルパーフェクトな精度が譲れない場合は、まずそれらのレイヤーをラスタライズしてください。バッチをダウンロードした後、結果のPNGのいくつかをブラウザでスポットチェックし、透明度が正しく見えることを確認します。 本番のWebアセットにとって、ファイルサイズはすべてです。変換後、PNGをoxipngのようなオプティマイザに通しましょう。`oxipng -o 4 --strip safe *.png`のような単純なコマンドは、圧縮と速度の素晴らしいバランスを提供し、不要なメタデータを安全に削除します。 最後に、チーム（そして未来の自分）のために、設定を文書化しましょう。アセットを引き渡す際には、フォーマットに関する一文のメモを添えます。「すべてのPNGはsRGB、PNG-24、透明度ありで、oxipng -o4で最適化済みです」といった具合です。この簡単なステップが、「なぜ私の画面ではこの色が変に見えるのですか？」という、全員の時間を無駄にする会話を防ぎます。