Photoshop│書き出し超便利！「画像アセット」の使い方と注意点

Photoshopの「画像アセット」機能を使うと、スライスツールを使わずにレイヤー名から直接画像を書き出せます。

本記事では、画像アセットの設定手順、レイヤーの命名ルール、意図しない色で出力される場合の対処法を解説します。

「画像アセット」機能のメリット

• レイヤーごとに拡張子・サイズ（px）・拡大縮小の倍率を設定できる
• カンマ区切りで指定し、1つのレイヤーから複数サイズの画像を出力できる
• グループ（フォルダ）単位でも命名ルールに従って書き出せる
• レイヤーを編集・保存するたびに書き出し画像が自動更新される
• レイヤーマスクを適用している場合、マスクの範囲で書き出せる
• / でサブフォルダを作成して書き出し先を整理できる

「画像アセット」機能の使い方

STEP 1：書き出したいレイヤーに名前をつける

レイヤー名に拡張子やサイズを含めて指定することで、出力形式やサイズを制御できます。

基本の命名ルール

• ピクセル指定 → 128 x 128 logo.png
• 倍率指定 → 90% logo.png
• 複数サイズ出力 → logo.png, 200% logo@2x.png

STEP 2：「画像アセット」機能を有効にする

1. Photoshop 25.11以降は[ファイル] → [自動処理] → [生成プラグイン] → [画像アセット]を選びます。旧版の[ファイル] → [生成]とは場所が異なります。
2. 保存済みのローカルPSDでは、PSDと同じ場所のアセット用フォルダへ出力されます。未保存の文書やクラウドドキュメントでは保存先が異なります。

意図しない色調で書き出される場合の修正方法

現象

• 特定の色で作成したレイヤーを書き出した際、意図しない色や色かぶりが発生して出力される場合がある。

原因

• グループの描画モードが「通過」になっていると、下層や上位の調整レイヤーなどの効果が意図せず反映される場合がある。

解決方法

1. グループレイヤーの描画モードを「通過」から「通常」に変更する
2. グループ内部を先に合成してから外側と描画する状態になります。見た目自体が変わる場合もあるため、変更前後を比較して判断してください。

補足:

• グループの既定は「通過」です。すべてのグループを一律に「通常」へ変えるのではなく、調整レイヤーの影響が意図と違う場合に切り替えを試します。
• グループ外にある調整レイヤーの影響範囲を確認し、書き出し対象に影響しない配置にする。

Photoshopの基本操作や関連テクニックは、まとめのリンクから確認できます。

読み込みと書き出しの記事は、ほかにもあります。

まとめ

画像アセット機能を活用すると、スライスを作成する手間を省き、レイヤー名を整えるだけで効率的に書き出しを行えます。

メリット

• レイヤー単位でサイズや拡張子などの書き出し条件を細かく指定できる
• Web用アイコン・UI素材・各種バナーなど複数アセットの一括出力に向いている
• デザイン修正後もファイルを保存するだけで自動更新される

注意点

• 書き出し対象グループの描画モードを必要に応じて「通常」に変更する
• 意図しない色変化を防ぐため、調整レイヤーの影響範囲を確認する

命名ルールとレイヤー構造を整理して、書き出し作業を効率化しましょう。