PSD前処理ガイド

当記事では、ファイルサイズの縮小化や複雑なファイルの簡略化といった前処理により、ファイルのアップロード変換効率や製品上での操作効率が向上します。

Note：Ptengine Landing Pageは今後も最適化を進め、一般的なPSDファイルとの互換性を高めていきます。しかし、より複雑なデザインや、ネットワークの状態が安定していない場合は、アップロードに影響を与える可能性があります。

PSDの前処理 #

• 1背景画像の処理（重要）
  ページ分の長さの画像をページの背景に使用することはお勧めいたしません。

  理由:
  1. 背景画像が長い場合、背景画像が非常に長いレイヤーになり、アップロードに失敗しやすいです。
  2. 長い背景画像が正常にアップロードできた場合でも、ブロック分割や、アクセスデータの集計に影響を与えます。
  3．長い背景画像はページのローディングや操作感に影響が出る可能性があります。
  そのため、以下の処理を推奨しています。

  単色またはグラデーションの背景の場合
  単色またはグラデーションの背景であれば、Ptengine Landing Pageのエディタ上で再現しましょう。

  1.長いレイヤーの場合はPSDファイル上で直接削除してください（非表示にだけでは不十分です）。
  長い場合でもベタ塗りや短いキャンバスの場合は特別なことをする必要はなく、アップロード後に削除することができます（削除しないとブロック分割に影響します）。
  2.背景色はPtengine Landing Pageのブロック設定で直接設定してください。

  デザインされた背景の場合
  デザインされた背景画像の場合、PSD上での分割が必要となります。

  1.ブロックごとに背景画像を切り取ります。
  背景レイヤーを選択し、長方形の投げ縄で分割する背景を枠で囲み、 CTRL+SHIFT+Jで元の長い背景から選択した部分を切り取ります。
  ▲(Photoshop)長方形選択ツールで背景レイヤーの分割箇所を囲み、「 CTRL+SHIFT+J」で個別レイヤー化

  2.キャンバスにアップロードした後、該当箇所をブロック化し、１で分割した画像を「ブロック背景として設定」を選択して変換します。
  ▲(Ptengine Landing Page)該当画像を「背景ブロックとして設定」

• 2要素の過剰処理の最適化（推奨）
  1.マウスペインティングによる要素の多さ
  デザイナーによってはPSDのキャンバス上に直接イラストを描くこともあるかと思います。

  その場合、解析されアップロードも正常に完了可能ですが、ページ編集時に壊れてしまう恐れがあります。
  そこで、イラストが完成したらスマートオブジェクトとして今後も編集可能な状態で保存します。
  また、Ptengine Landing Page 上で柔軟性を持たせる必要がない場合(個別要素でABテストなど行わないなど)は、変更を加えない要素をより広範囲に一つの要素として結合し、機能的な部分（ボタン、フォーム、固定バーなど）を残すことで早く処理が可能です。
  

  Note：PCページの場合、背景を他コンテンツと結合しないことが重要です。背景はアップロード後にエディタ内で直接「ブロック背景に変換」することができ、異なる解像度にもうまく適応できます。

  2.テキストの画像に変換による過剰要素化
  通常はあまり発生しない事象ですが、特定のツールの操作によって引き起こされることもあります。

  通常、Ptengine Landing PageはPSDファイルからテキストの状態でエディタ上にアップロードし、いつでも変更できるようにしています。
  テキストがPSD内ですでに画像レイヤーになっている場合、アップロード後に修正できないだけでなく、品質が不安定になり、テキストの段落ごとに冗長なレイヤーが作成され、エディタのパフォーマンスを大幅に低下させてしまいます。
  このような場合は、デザインチームと連携新しいファイルを作成する必要があります。

• 3レイヤーマスクの最適化（推奨）
  Photoshop上でレイヤーマスクを使用している場合、Ptengine Landing page上でも自動的に処理を行います。しかし、期待通りアップロード後に自動処理されないケースもあるため、Photoshop上での処理が必要になるケースがあります。
  レイヤーマスクに高度な設定（フェザリング効果など）が使われている場合、またはPSDを再調整するのが面倒な場合は、以下の手順で事前に処理しておくこともできます。
  PSDのレイヤーには、ベクターマスクとクリッピングマスクの2種類があるので分けて説明いたします。

  ベクトルマスクの場合
  ベクトルマスクは、下記の状態のマスクのことです。
  この場合、Photoshopに付属しているスクリプトを使えば、素早くバッチ処理ができます。
  「ファイル」→「スクリプト」→「すべてのマスクを結合」にあります。
  

  クリッピングマスクの場合
  クリッピングマスクは下記の状態のマスクのことです。
  クリッピングマスクは、Photoshopのスクリプト機能では動作しません。
  レイヤー検索からクリップというプロパティを検索し、該当レイヤーをレイヤーごとに選択してから、CTRL+Eで下方向に結合する必要があります。(3つ以上のレイヤーを一度に統合しないように注意してください）。
  ▲レイヤー検索で「属性」>「クリップ」より結合するレイヤーを選択し、 CTRL+Eで下方向に結合

• 4レイヤー効果の最適化（推奨）
  不透明度、塗りつぶし、ドロップシャドウなどの一般的なレイヤー効果もPtengine Landing Pageが自動的に処理します。
  ただし、フィルターやエンボス、光彩などの高度なエフェクトは、あらかじめバッチ処理しておくことをお勧めします。

  1. レイヤー検索で「属性」>「レイヤーの効果」を選択
  2. 効果のあるレイヤーをすべて選択し、右クリック「レイヤーをラスタライズ」を選択

  Note：Photoshopのスクリプトでもレイヤー効果のラスタライズは可能ですが（スクリプト機能の場所は上記の「ベクターマスクの場合」を参照）、スクリプトの方が処理が遅く（時には処理エラーも発生します）、この方法の方が早く処理が完了します。

  

PSDファイルが大きすぎる場合 #

Ptengine Landing Pageは200Mまでサポートしていますが、容量を超えるファイルはネットワーク環境の影響を受けやすく、アップロードに時間がかかりすぎたり、失敗してしまうことがあります。
通常、前述の前処理を行った後のPSDは、すでに50M程度になっているはずです。しかし、それでもまだ大きすぎる場合は、次のような処理でファイルを効果的に縮小することができます。

非表示レイヤーの削除

アップロードの用途のみであれば、非表示レイヤーを利用する必要はありません。
非表示レイヤーがあることでファイルサイズも大きくなってしまうので、ファイルサイズによってアップロードできない場合は削除することを検討してください。

非表示レイヤーの一括削除：
1.レイヤー検索で「属性」>「非表示」を指定
2.すべての非表示レイヤーを選択し、直接削除する

容量の大きい写真データ

画素の大きいオリジナルの写真をそのまま利用する場合、PSDファイルサイズも大きくなります。
元データを読み込んだ後、デザイナーは多かれ少なかれマスキングやエフェクト処理を行いますが、ほとんどの場合、上記のようなマスクの結合やレイヤーエフェクトの操作でファイルサイズを低減することができます。
それでもまだ大きい場合は、すべてのレイヤーを直接選択して「ラスタライズ」してください。

原因不明の場合

上記の操作をすべて行ってもファイルが大きく、原因不明の場合は、操作中にPSDファイルのキャッシュ処理が行われたことが原因と考えられます。
その場合は下記の手順で新しいファイルを作成します。
1.すべてのレイヤーを選択する
2.右クリックして「レイヤーを複製」を選択し、新しいファイルを作成する
3.コピーした新しいファイルを直接保存する などです。

PSDを複製保存する場合では、必要のない情報も引き継がれてしまうので注意が必要です。レイヤーだけをコピーするとファイルサイズが減少しやすいです。

アップロード失敗の一般的な理由 #

PSDは解像度72、RGB 8bitモードで保存してください。

PSDには、Webデザイン、写真、印刷用にそれぞれ異なる色の解像度モードがありますが、Ptengine Landing PageではWebデザイン用のPSDファイルとして一般的な72の解像度、RGB8ビットのモードを採用しています。(これは、特に変更がない場合、通常、Photoshopのデフォルトのファイルサイズです）。ただし、何らかの理由でWebページがこのモードでデザインされていない場合は、その対応が必要になります。

修正方法
新しいファイルを作成して、同じ解像度モードに設定します。
すべてのレイヤーを選択し、右クリックして「レイヤーを複製」を選択し、新しいファイルとして「保存先」を選択して確定します。
新しいファイルとして保存し、再度アップロードしてください。