この記事でできること
レイヤー名を使って画像をまとめて書き出す手順と、書き出せないときの確認方法を紹介します。バナー1枚だけを書き出す場合は「ファイル ＞ 書き出し ＞ 書き出し形式」も選択肢です。繰り返し素材を更新する場合に画像アセットを使うと便利です。
学習順に迷ったら、Photoshop初心者の学習ロードマップで、基礎からバナー制作・保存までを確認できます。
概要
Photoshopの応用機能解説です。
この記事では「画像アセット」機能を紹介します。
こちらの機能は通常のPhotoshop機能と異なる点が多いです。
まずどんな機能か把握しましょう。
Photoshop 画像アセットの基本
PhotoshopのWebサイトデザインデータはコーディング担当が受け取り、実際に動く形にする「コーディング」をする必要があります。
コーディングではどのような形のデータが必要なのでしょうか。
Photoshopで作成したWebページのデザインは、次のような縦に長い見本として確認できます。
しかし実際にコーディングで必要なのは画像単体のデータです。
例で言えばTOPのビジュアル部分、Aboutの3枚の画像、そしてサイトロゴです。
このようなデータはデザイン前の画像を受け取ることもあります。
しかし、デザイン上で画像加工をしていたり、サイズも適切なサイズに加工されていることから、デザインデータから「抽出する」ことが一般的な作業工程となっています。
この「必要な画像をPhotoshopから取り出す」機能が「画像アセット」なのです。
プロフィールリンク課題から、こちらのPhotoshopのデータから書き出し設定をしてみましょう。
元データ
画像アセット機能の設定を有効にする
こちらPhotoshop CC2024の画面です。
メニューの位置がころころ変わる機能なので、もしかしたら最新画面だと異なっていることがあるかもしれません。
generatorを有効にします。
デザインデータ（psd）を開く
Photoshopデータの置き場所を変えておく
Photoshopデータをどこに置いておくかも重要です。
今回はわかりやすく「デスクトップ」に置いておきます。
レイヤー名を拡張子付きの画像ファイル名に変更する
レイヤー名を書き出したい画像の名前に変更します。
ここでは「icon.png」にします。
「.png」「.jpg」等が使えます。
SVGが必要な場合は、出力後にブラウザで形や表示を確認してください。写真素材はJPEG、透過が必要な素材はPNGを候補にし、編集用のPSDも残しておきます。
画像アセット機能を有効にする
ファイル > 生成 > 画像アセットをチェックが入った状態にします。
CC2025の場合は
自動処理＞ジェネレータープラグイン＞画像アセット
チェックが入っている間はずっと機能は動作しています。
デザインファイルの隣に「xxxxx-assets」フォルダーができる
この機能を有効にした時点で自動でフォルダが作成されます。
そのフォルダの中にレイヤーにつけた名前のファイルができていれば成功です。
この機能の強みは「リアルタイム性」です。
チェックが入っている間は自動で動きますので、文字レイヤーを含むグループに設定を有効にしていた場合、その内容を書き換えれば即時に書きかわった画像が入手できます。
うまくいかない時は…
レイヤーの名称変更は「グループ」に対してもできます。
グループ内に調整レイヤーを含めれば画像加工後の状態の画像が入手できます。
グループでサイズがおかしくなってしまう場合はレイヤーをスマートオブジェクト化すると非表示部分が削除され、適切なサイズになる場合があります。
適宜グループ化とスマートオブジェクトを活用しましょう。
画像アセットのオプション
2倍、３倍の画像を書き出す
スマートフォンは解像度が高いため、そのままのサイズを書き出して利用しても綺麗に表示されないことがあります。
この場合は2倍や3倍の画像を書き出す設定をして、その画像を利用しましょう。
このように最初に200%とつけましょう。
100%と200%と300%の画像が同時に欲しい場合は次のようにします。
jpgの品質を指定する
このようにすると80%品質のjpgで出力されます。
書き出せない・見た目が違うときの確認
- まず練習用PSDをパソコン内の分かる場所へ保存します。レイヤー名を「icon.png」にし、画像アセットを有効にしてPSDを保存してください。
- ファイルが出ないときは、拡張子の入力と機能のチェックを確認します。レイヤー名に「:」「*」を使わないでください。現在の公式手順は「ファイル ＞ 自動処理 ＞ ジェネレータープラグイン ＞ 画像アセット」です。本文の旧バージョンの画面とは位置が異なります。
- 出力された画像を実際に開き、サイズ・余白・透過・文字の欠けを見ます。PSDだけを見て完了にしないでください。
- 2倍画像は元の写真にない細部を復元する機能ではありません。表示する大きさでぼけや容量を確認し、必要な倍率だけを書き出します。
練習：素材を更新してから公開用に確認する
練習用PSDを複製し、画像1点のレイヤー名を「icon.png」にします。保存して出力を確認したら、色や文字を1か所変更し、再保存後の画像にも反映されたか比べてください。編集用PSDと公開用画像は分けて保管しましょう。
素材がそろったら、プロフィールリンクのデザイン課題やバナー制作の学習ロードマップへ進めます。HTML/CSSのページに組み込んで公開する段階では、Webサイト公開ガイドで無料公開・サーバー・独自ドメインの使い分けを確認してください。画像を書き出すだけならサーバー契約は不要です。
出典：Adobe公式：レイヤーから画像アセットを生成（2026年10月17日確認）。操作画面はバージョンにより異なります。
