Photoshopの「画像アセット」機能を使うと、スライスツールを使わずにレイヤー名から直接画像を書き出せます。
本記事では、画像アセットの設定手順、レイヤーの命名ルール、意図しない色で出力される場合の対処法を解説します。
2026年10月17日に、Photoshop 2026（27.11.0）とWindows 11で、練習用のPSDを使って命名ルール・保存先・自動更新・描画モードによる色の違いを確かめた結果も載せています。
「画像アセット」機能のメリット
- レイヤーごとに拡張子・サイズ（px）・拡大縮小の倍率を設定できる
- カンマ区切りで指定し、1つのレイヤーから複数サイズの画像を出力できる
- グループ（フォルダ）単位でも命名ルールに従って書き出せる
- レイヤーを編集すると、保存しなくても書き出し画像が自動で更新される
- レイヤーマスクを適用している場合、マスクの範囲で書き出せる
/でサブフォルダを作成して書き出し先を整理できる
「画像アセット」機能の使い方
STEP 1：書き出したいレイヤーに名前をつける
レイヤー名に拡張子やサイズを含めて指定することで、出力形式やサイズを制御できます。
基本の命名ルール
- ピクセル指定 →
128 x 128 logo.png - 倍率指定 →
90% logo.png - 複数サイズ出力 →
logo.png, 200% logo@2x.png
STEP 2：「画像アセット」機能を有効にする
- [ファイル] → [自動処理] → [ジェネレータープラグイン] → [画像アセット]を選びます。旧版の[ファイル] → [生成]とは場所が異なります。
- [ジェネレータープラグイン]が灰色で選べないときは、[編集] → [環境設定] → [プラグイン]で「ジェネレーターを有効にする」をオンにします。
- 保存済みのローカルPSDでは、PSDと同じ場所の「ファイル名-assets」フォルダへ出力されます。未保存の文書やクラウドドキュメントでは保存先が異なります。
2026年10月17日の確認：練習用PSDで書き出した結果
確かめた環境は、Photoshop 2026（27.11.0）とWindows 11 Pro（10.0.26200）です。
400×300pxの練習用PSDに、色の違う長方形のレイヤーとグループを作り、記事の命名ルールどおりに名前を付けました。
練習用の文書とレイヤーはスクリプトで用意したので、レイヤーを作る操作は確認に含めていません。
保存（[ファイル] → [別名で保存]）、環境設定の変更、メニューからの実行は画面で行いました。
開始時は、[ファイル] → [自動処理]の中の[ジェネレータープラグイン]が灰色で、選べませんでした。
[編集] → [環境設定] → [プラグイン]で「ジェネレーターを有効にする」をオンにして[OK]を押すと、Photoshopを再起動しなくても選べるようになりました。
続けて[ファイル] → [自動処理] → [ジェネレータープラグイン] → [画像アセット]を選ぶと、数秒でPSDと同じ場所に「assets-practice-assets」フォルダーができました。
書き出された画像の大きさは、次のとおりです。
| レイヤー名 | 元の大きさ | 書き出された画像 |
|---|---|---|
128 x 128 icon.png | 200×100px | icon.png（128×128px。縦横比は保たれず、引き伸ばされた） |
90% badge.png | 60×60px | badge.png（54×54px） |
logo.png, 200% logo@2x.png | 80×40px | logo.png（80×40px）とlogo@2x.png（160×80px） |
sub/btn.png | 60×30px | subフォルダーの中のbtn.png（60×30px） |
グループ card.jpg | 中身は140×100px | card.jpg（140×100px、JPEG） |
ファイル名には、サイズや倍率の指定は入りませんでした。
幅と高さを両方指定すると、元の縦横比と違っていても、その大きさに引き伸ばされます。
縦横比を保ちたいときは、倍率で指定するか、元のレイヤーと同じ比率の数値を指定します。
書き出し画像が更新されるタイミング
次に、「90% badge.png」のレイヤーを選んで[イメージ] → [色調補正] → [階調の反転]を選びました。
PSDを保存していないのに、数秒後にbadge.pngだけが反転した色で書き直されました。
その後に[ファイル] → [保存]を選んでも、書き出し済みの画像は書き直されませんでした。
今回の確認では、書き出し画像は保存のときではなく、レイヤーを変えた時点で更新されました。
意図しない色調で書き出される場合の修正方法
現象
- 特定の色で作成したレイヤーを書き出した際、意図しない色や色かぶりが発生して出力される場合がある。
原因
- グループの描画モードが「通過」になっていると、グループの中の調整レイヤーがグループより下のレイヤーにも効き、そのレイヤーを書き出した画像の色が変わる。
- グループの外で上にある調整レイヤーは、グループの描画モードに関係なく、その下の書き出し画像に効く（2026年10月17日の確認）。
解決方法
- グループレイヤーの描画モードを「通過」から「通常」に変更する
- グループ内部を先に合成してから外側と描画する状態になります。見た目自体が変わる場合もあるため、変更前後を比較して判断してください。
補足:
- グループの既定は「通過」です。すべてのグループを一律に「通常」へ変えるのではなく、調整レイヤーの影響が意図と違う場合に切り替えを試します。
- グループ外にある調整レイヤーの影響範囲を確認し、書き出し対象に影響しない配置にする。
2026年10月17日の確認：通過と通常で書き出しが変わる条件
同じ練習用PSDで、[階調の反転]の調整レイヤーを置く場所を変えて、書き出された色を比べました。
調整レイヤーは[レイヤー] → [新規調整レイヤー] → [階調の反転]で作り、グループの描画モードはレイヤーパネルで切り替えました。
調整レイヤーとレイヤーの移動、グループの中のレイヤーの名前の変更（line.png）はスクリプトで行ったので、その操作は確認に含めていません。
| 調整レイヤーの場所 | グループが「通過」 | グループが「通常」 |
|---|---|---|
| いちばん上（グループの外） | すべての書き出し画像が反転した | すべての書き出し画像が反転したまま |
グループの中（グループより下の sub/btn.png） | btn.pngも反転した | btn.pngは元の色 |
| グループの中（グループ自身と中のレイヤー） | card.jpgとline.pngが反転した | card.jpgとline.pngが反転したまま |
「通過」から「通常」に変えて色が戻ったのは、調整レイヤーがグループの中にあり、書き出したレイヤーがグループより下にある場合だけでした。
グループの外で上にある調整レイヤーは、描画モードを変えても書き出し画像に効いたままでした。
その場合は、調整レイヤーの置き場所を見直す必要があります。
Photoshopの基本操作や関連テクニックは、まとめのリンクから確認できます。
読み込みと書き出しの記事は、ほかにもあります。
まとめ
画像アセット機能を活用すると、スライスを作成する手間を省き、レイヤー名を整えるだけで効率的に書き出しを行えます。
メリット
- レイヤー単位でサイズや拡張子などの書き出し条件を細かく指定できる
- Web用アイコン・UI素材・各種バナーなど複数アセットの一括出力に向いている
- デザインを修正すると、保存しなくても書き出し画像が自動で更新される
注意点
- 書き出し対象グループの描画モードを必要に応じて「通常」に変更する
- 意図しない色変化を防ぐため、調整レイヤーの影響範囲を確認する
命名ルールとレイヤー構造を整理して、書き出し作業を効率化しましょう。
よくある質問：Photoshopの「画像アセット」
Photoshopの「画像アセット」とは、何ですか？
スライスツールを使わずに、レイヤー名から直接画像を書き出せる機能です。レイヤーごとに拡張子・サイズ（px）・拡大縮小の倍率を設定できます。
どんなメリットがありますか？
カンマ区切りで指定して、1つのレイヤーから複数サイズの画像を出力できます。グループ（フォルダー）単位でも、命名ルールに従って書き出せます。レイヤーを編集すると、保存しなくても書き出し画像が自動で更新されます。レイヤーマスクを適用している場合は、マスクの範囲で書き出せます。スラッシュでサブフォルダーを作成して、書き出し先を整理できます。Web用アイコン・UI素材・各種バナーなど、複数アセットの一括出力に向いています。
レイヤー名は、どう付けますか？
レイヤー名に拡張子やサイズを含めて指定することで、出力形式やサイズを制御できます。記事の命名例では、ピクセル指定は「128 x 128 logo.png」、倍率指定は「90% logo.png」、複数サイズ出力は「logo.png, 200% logo@2x.png」のように書きます。
画像アセットは、どうやって有効にしますか？
［ファイル］→［自動処理］→［ジェネレータープラグイン］→［画像アセット］を選びます（Photoshop 2026（27.11.0）の日本語版で確認）。選べないときは、［編集］→［環境設定］→［プラグイン］で「ジェネレーターを有効にする」をオンにします。旧版の［ファイル］→［生成］とは場所が異なります。
書き出した画像は、どこに保存されますか？
保存済みのローカルPSDでは、PSDと同じ場所の「ファイル名-assets」フォルダーへ出力されます。未保存の文書やクラウドドキュメントでは、保存先が異なります。
書き出した画像の色が、意図と違うときは？
特定の色で作成したレイヤーを書き出した際に、意図しない色や色かぶりが発生して出力される場合があります。グループの中の調整レイヤーが、描画モード「通過」のグループより下のレイヤーにも効いていることがあります。その場合は、グループの描画モードを「通過」から「通常」に変えると、下のレイヤーの書き出し画像が元の色に戻りました。グループの外で上にある調整レイヤーは、描画モードに関係なく書き出し画像に効くので、置き場所を見直してください。グループ内部を先に合成してから外側と描画する状態になるため、見た目が変わらないかも確認してください。
書き出しの注意点は、ほかにありますか？
書き出し対象グループの描画モードを、必要に応じて「通常」に変更すること、意図しない色変化を防ぐため、調整レイヤーの影響範囲を確認することが挙げられています。命名ルールとレイヤー構造を整理して、書き出し作業を効率化しましょう。
記事の画面は、今のバージョンでも同じですか？ 最新はどこで確認しますか？
2026年10月17日に、Photoshop 2026（27.11.0）とWindows 11 Pro（10.0.26200）で、メニューの位置・命名ルール・保存先・自動更新・描画モードの違いを確かめました。Macやほかのバージョン、レイヤーマスクでの書き出し、クラウドドキュメントや未保存の文書での保存先は確かめていません。メニューの名称や位置は、バージョンによって変わることがあるため、最新はAdobe公式のヘルプと、ご自分の画面で確認してください。
