Amazonで商品を見るセール会場へ

Photoshopのデータセットの使い方|CSVで文字・画像を差し替えてPSDを書き出す

Photoshopのデータセットは、テンプレートの文字・画像・レイヤーの表示を、表の値に合わせて切り替える機能です。同じレイアウトのバナーやテロップを別の内容で作るときに使います。標準のデータセット書き出しではPSDを生成し、JPG・PNGへの変換はその後に行います。

最初は文字だけの2件で、変数名、読み込み、保存名を確認します。

その後に表示切替や画像差し替えを加えると、エラーの原因を分けて確認できます。

2026年10月17日に、Windows 11 ProのPhotoshop 2026(27.11.0)で、文字だけの2件と表示切替の2件を画面から操作し、PSDの書き出しまで確かめました。

「旧記事の掲載画面」と書いた画像は2025年3月公開の旧記事から引き継いだもので、撮影時期とPhotoshopの版は未確認です。

画像の差し替えは、今回は確かめていません。

目次

データセットと文字の検索・置換の使い分け

行ごとに異なる見出しや商品画像を入れて複数のPSDを作る場合は、データセットを使います。開いている文書の「2025」を一律に「2026」へ変える場合は、文字の検索・置換が候補です。グループ内の文字を数えて、複製文書で置換したい場合は、文字レイヤーを一括置換するJSXを参照してください。

データセットはレイアウトそのものを作り直す機能ではありません。短い文字で作った枠へ長い見出しを入れると、改行やはみ出しが変わることがあります。文字量や画像の縦横比が異なる行を、出力前の確認対象にします。

スポンサーリンク

文字だけのテンプレートを作り、変数を定義する

練習用のPSDに、表示する文字レイヤーと、保存名を扱うID用の文字レイヤーを用意します。旧記事ではID用の文字レイヤーの不透明度を0%にして、見た目へ表示しない方法を使っていました。文字として編集できる状態を残し、練習用PSDと原本のコピーを分けて保存します。

テキストを入力し、ファイル名として扱う透明なIDレイヤーを作成したテンプレート画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

[イメージ]→[変数]→[定義]で、表示する文字レイヤーに「テキストの置き換え」を設定し、変数名を text にします。ID用の文字レイヤーにも同じ種類の変数を設定し、変数名を id にします。CSVの見出しは、この変数名と対応させます。レイヤーの名前と変数の名前は別の項目です。

変数の定義でテキストの置き換えやIDの変数を設定する画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

Photoshop 27.11.0では、文書に変数が1つもないうちは、[イメージ]→[変数]→[データセット]が灰色で選べませんでした。

先に[定義]で変数を作ります。

「テキストの置き換え」にチェックを入れると、名前の欄に「テキスト変数1」が自動で入るので、id・textに書き換えます。

レイヤー名の右の▶を押すと次のレイヤーに移り、同じ画面のまま続けて設定できます。

Photoshopの[変数]の[定義]で、textレイヤーにテキストの置き換えの変数textを設定した画面
2026-10-17撮影。Adobe Photoshop 2026 (27.11.0)、Windows 11 Pro (10.0.26200)。[イメージ]→[変数]→[定義]で、textレイヤーに「テキストの置き換え」を設定し、名前をtextにした実機画面。

この最小例では id と text の2変数だけを定義します。別の変数も定義してあるPSDを使う場合は、その変数もCSVへ含める必要があります。初回は複製した練習用PSDで、使わない変数が残っていないか確認してください。

CSVは1行目を変数名、2行目以降を差し替えデータにする

表計算ソフトでは、A1へ id、B1へ text を入力します。変数名を並べるのは1行目で、1列目ではありません。 2行目以降が差し替えデータで、下の例は2件です。旧記事の表の画面でも、変数名は横方向に並んでいます。

Excelの1行目にidとtextの変数名を横に並べ、2行目以降へ値を入力した旧記事の表。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。
id,text
A001,春のキャンペーン
A002,"対象商品, 2点セット"

A001 と A002 は、この例のデータセット名にも使う値です。表示する文言にファイル名を兼ねさせると、改行や記号が保存名へ入るため、短いIDを別に用意しています。IDは重複させず、Windowsのファイル名に使えない記号や末尾の空白も避けます。

値の中にコンマを含める場合は、値全体を半角の二重引用符で囲みます。値の中に二重引用符を入れる場合は、CSV上で二重にします。例えば "商品""A""" は 商品"A" という値です。本文内の改行を含むセルも、引用符で囲まれた1つの値として保存します。

日本語を含むCSVはUTF-8で保存し、Photoshop側の読み込み設定もその文字コードに合わせます。表計算ソフトで保存したら、拡張子が .csv になっていることと、ID・改行・区切りが変わっていないことをテキスト表示でも確認します。.xlsx を拡張子だけ変更してもCSVにはなりません。

CSVを読み込み、すべてのデータセットをプレビューする

[イメージ]→[変数]→[データセット]から[読み込み]を開き、CSVを選びます。「最初の列をデータセット名として使用」を選ぶと、上の例では id 列の値をデータセット名に使います。最初の列は自由な管理列として無条件に追加できるものではなく、定義した変数との対応が必要です。

データセットダイアログで作成したCSVファイルを選択して読み込む設定画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

Photoshop 27.11.0の[データセットの読み込み]には「エンコーディング」の選択があり、初めは「自動」になっていました。

今回はUTF-8(BOMなし)で保存した上のCSVを、「Unicode (UTF-8)」を選んで読み込み、日本語が化けないことを確かめました。

「既存のデータセットの置き換え」には、初めからチェックが入っていました。

[ファイルを選択]で開く窓は、ファイルの種類が「テキストファイル (*.TXT)」になっていて、CSVは一覧に出ませんでした。

右下の種類を「CSV (*.CSV)」に切り替えるか、ファイル名の欄に名前を入力して選びます。

データセットの読み込みで、エンコーディングをUnicode (UTF-8)にし、最初の列をデータセット名として使用にチェックを入れた画面
2026-10-17撮影。Adobe Photoshop 2026 (27.11.0)、Windows 11 Pro (10.0.26200)。[データセットの読み込み]で、エンコーディングを「Unicode (UTF-8)」、「最初の列をデータセット名として使用」にチェックを入れた実機画面。

「既存のデータセットを置き換え」は、読み込み前に既存のデータセットを削除する設定です。以前のデータも残したい場合は、テンプレートを別名保存してから設定を選びます。CSVを修正したときは、その変更をPhotoshopへ反映するために読み込み直します。

読み込み後は、プレビューをオンにして A001 と A002 を切り替えます。表示文字、改行、はみ出し、フォントを確認してください。下の画像は旧記事でのプレビューで、今回の2件を実行した出力ではありません。

読み込んだデータセットを切り替えてテキストの差し替え結果を確認するプレビュー画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

2026年10月17日の確認では、A001で「春のキャンペーン」、A002で「対象商品, 2点セット」がカンバスに表示されました。

コンマを含む値は引用符で囲んであるため1つの値として読み込まれ、列がずれることはありませんでした。

データセットA002を選び、idがA002、textが対象商品, 2点セットになったプレビュー中の変数ダイアログ
2026-10-17撮影。Adobe Photoshop 2026 (27.11.0)、Windows 11 Pro (10.0.26200)。A002を選んだ[データセット]の画面。コンマを含む値が1つの値として読み込まれた実機画面。
プレビューでA002に切り替え、カンバスに対象商品, 2点セットと表示された練習用の文書
2026-10-17撮影。Adobe Photoshop 2026 (27.11.0)、Windows 11 Pro (10.0.26200)。A002のプレビュー中のカンバス(文書の窓のカンバス部分を切り出し)。

プレビューを表示したまま[OK]で閉じると、文書の文字は元の「サンプル見出し」に戻りました。

[OK]では変数とデータセットが文書に記録されるだけで、[適用]を押さない限り文字は書き換わりませんでした。

[適用]は開いている文書の内容を変更する操作です。原本を残したまま試すために複製した練習用PSDを使い、プレビューだけで終了する場合と、値を文書へ適用する場合を分けます。元のファイルへ保存するかどうかも別に判断します。

データセットからPSDを書き出し、JPG・PNGへ変換する

[ファイル]→[書き出し]→[データセットからファイル]を開きます。

Photoshop 27.11.0のメニューでも、この名前でした。

保存先は既存ファイルのない専用フォルダーにし、出力するデータセットの範囲と、ファイル名の組み合わせを確認します。

データセットからファイルを書き出しを選択する画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。
保存先や出力ファイル名を設定する書き出しオプション画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

Photoshop 27.11.0では、ファイル名の初期値は「ドキュメントの名前」+「アンダースコア (_)」+「データセット名」で、名前の例にdataset-practice_A001.psdと表示されました。

[フォルダーを選択]で保存先を選ぶまで、[OK]は押せません。

一度も保存していない練習用の文書のままでも、書き出せました。

データセットからファイルを書き出しで、保存先を選び、ファイル名の例がdataset-practice_A001.psdになった画面
2026-10-17撮影。Adobe Photoshop 2026 (27.11.0)、Windows 11 Pro (10.0.26200)。[ファイル]→[書き出し]→[データセットからファイル]の実機画面。保存先は作業用に割り当てた一時ドライブ。

[OK]を押すと、保存先に2つのPSDができました。

データセットファイル名文字レイヤー textID用の文字レイヤー id
A001dataset-practice_A001.psd春のキャンペーンA001(不透明度0%)
A002dataset-practice_A002.psd対象商品, 2点セットA002(不透明度0%)

書き出したPSDの文字レイヤーは、どちらも編集できる文字のままでした。

書き出した後も、開いていた文書の文字は「サンプル見出し」のままでした。

この例ではデータセット名にIDを使い、保存名へその名前を含めます。出力後は、CSVの2件に対応するPSDがあるか、各ファイルを開いて文字が合っているかを照合してください。同名ファイルへの上書き動作に頼らず、別の出力先で確認します。次の一覧も旧記事の出力記録です。

データセットの数だけ自動生成された複数のファイル一覧画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

標準のデータセット出力でJPG・PNGまで直接作成したと考えないようにしてください。PSDが正しく生成できたら、イメージプロセッサーやフォルダー内のPSDをJPG・PNGへ出力するJSXへ進みます。透過PNGが必要なら、透明部分を残す設定と、変換後の実画像を確認します。

レイヤーの表示・非表示をCSVで切り替える

文字の例とは別の練習用PSDで、表示を切り替えるA・Bのレイヤーを用意します。[変数]→[定義]で、それぞれの「表示」に layerA と layerB を設定します。

表示を切り替えるためのレイヤーを2つ用意したテンプレート画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。
変数の定義で表示にチェックを入れレイヤーの変数名を設定する画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。
layerA,layerB
true,false
false,true

1件目はAを表示してBを非表示、2件目はその反対にする入力例です。このCSVは2変数だけを定義したPSD用です。前の文字用PSDへ追加する場合は、id と text を含めた全変数を同じCSVの1行目へ並べ、各行の値もそろえます。

変数名に対し表示や非表示の値を入力したCSV作成用のExcel画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

読み込んだら、切り替え対象以外のレイヤーも含めてプレビューします。親グループの表示状態も見ながら、意図した組み合わせになっているかを確認します。

データセットを読み込み、プレビューでレイヤーの表示切り替えを確認する画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

2026年10月17日に、A・Bの2つの文字レイヤーを置いた練習用の文書で、上の表示用CSVをそのまま読み込んで確かめました。

このCSVには名前の列がないので、「最初の列をデータセット名として使用」のチェックを外して読み込みました。

データセット名は「データセット 1」「データセット 2」になりました。

表示用CSVを読み込み、データセット 2でlayerAが非表示、layerBが表示になった変数ダイアログ
2026-10-17撮影。Adobe Photoshop 2026 (27.11.0)、Windows 11 Pro (10.0.26200)。表示用CSVの2件目(データセット 2)。layerAが非表示、layerBが表示になった実機画面。

書き出したPSDでは、1件目はAが表示でBが非表示、2件目はAが非表示でBが表示になっていました。

ファイル名には、visible-practice_データセット 1.psdのように、データセット名の空白がそのまま入りました。

一方、ダイアログを開いたまま2件目に切り替えたとき、レイヤーパネルではAの目のアイコンが消えたのに、カンバスにはAが残って見えました。

表示の切り替えは、プレビューのカンバスだけで判断せず、レイヤーパネルの目のアイコンか、書き出したファイルで確かめてください。

画像を差し替える変数と、画像パスを設定する

画像用の練習用PSDでは、差し替え対象を通常の画像レイヤーとして用意します。「背景」レイヤーには変数を定義できません。対象が背景の場合は、複製した練習用PSDでそのレイヤーを選び、[レイヤー]→[新規]→[背景からレイヤーへ](Layer From Background)を選択します。名前を指定して[OK]で通常レイヤーに変換してから、[変数]→[定義]へ進みます。これはAdobe公式の背景から通常レイヤーへの変換手順に基づく補足で、今回実機では確認していません。旧記事ではスマートオブジェクトのままではピクセルの置き換えを設定できない場合に、ラスタライズする手順を示していました。原本を直接ラスタライズせず、複製側で試し、元の編集可能な画像を残します。

差し替え対象となる2つの画像レイヤーを配置したテンプレート画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

[変数]→[定義]で「ピクセルの置き換え」を選び、imageA と imageB を定義します。挿入画像の縦横比が異なる場合は、枠へ収めるか、枠を埋めるか、切り抜くかを目的に合わせて決め、端が欠けていないかをプレビューで確認します。

変数の定義でピクセルの置き換えにチェックを入れて変数名を設定する画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

CSVの1行目を imageA,imageB とし、各値へ実在する画像ファイルのパスを入れます。文字用の text と違い、画像の見出しやファイルの説明を入れる列ではありません。

列ごとに変数名と差し替える画像のパスを入力したCSV作成用のExcel画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

最初はCSVと画像を同じフォルダーに置き、picture1.png のようなファイル名で確認すると、参照先を追いやすくなります。下の旧記事の配置例ではCSVの横に images フォルダーがあり、images/picture1.png のような相対パスを使っています。CSVや画像を別の場所へ移動した場合は、パスも見直してください。

フォルダにまとめた画像ファイルを相対パスで指定している例の画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

画像の読み込みは、存在確認だけで終えず、内容と大きさ、位置、透明部分まで確認します。下の画像は旧記事のプレビューで、現行版での新規出力結果ではありません。

CSV読み込み後にプレビューで各画像の差し替え結果を確認する画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

読み込めない・文字化け・保存名のエラーを切り分ける

変数名の解析エラーは、まずPSDの定義とCSVの1行目を照合します。使っていない列、足りない変数、名前の違いを確認し、その後に各行の値の数と引用符を確認します。値の中のコンマを囲み忘れると、列が増えたように読まれるためです。

定義していない列memoを足したCSV(1行目がid,text,memo)を読み込むと、Photoshop 27.11.0では次のメッセージが表示されました。

定義していない列を足したCSVを読み込んだときの、変数名が多すぎますというエラーメッセージ
2026-10-17撮影。Adobe Photoshop 2026 (27.11.0)、Windows 11 Pro (10.0.26200)。1行目がid,text,memoのCSVを読み込んだときに表示されたメッセージの実機画面。

このとき、読み込む前のデータセットは消えずに残っていました。

管理用のメモ列などをCSVに足すと、この形で止まります。

CSVが使用中と表示された場合は、表計算ソフトなどでそのファイルを閉じてから読み込み直します。旧記事にある警告は、そのときの操作記録です。ファイルを開いた状態で必ず同じ警告が出るとは限りません。

CSVファイルが開いたままのときに表示される警告メッセージ画面。
旧記事の掲載画面。今回のPhotoshop実機確認ではありません。

文字化けではCSVの文字コードと読み込み設定を照合します。画像だけ差し替わらない場合は、変数の種類、画像レイヤーの状態、パス、実ファイルを確認します。複数の条件を一度に変更せず、文字だけの2件が通るかを先に確認すると、問題のある列を特定しやすくなります。

保存名のエラーでは、データセット名へ使う列に改行、禁止記号、末尾の空白がないかを確認します。複数行の本文をそのまま名前に使わず、重複しないIDを使います。出力数が期待と違う場合は、CSVのデータ件数と書き出し範囲を照合してください。

公式資料と今回の確認範囲

Adobeのデータ駆動型グラフィックの説明を2026年10月3日に確認しました。CSVの見出しと変数の対応、プレビューと適用、PSD出力の説明を照合しています。

2026年10月17日に、Windows 11 Pro(10.0.26200)のAdobe Photoshop 2026(27.11.0)で、この記事の文字用CSVと表示用CSVを読み込み、プレビューとPSDの書き出しまで画面から確かめました。

練習用の文書(文字レイヤーの配置)はスクリプトで作り、書き出したPSDの文字と表示状態もスクリプトで読み取りました。

画像の差し替え(ピクセルの置き換え)、エンコーディング「自動」での読み込み、Shift_JISのCSV、改行を含む値、JPG・PNGへの変換、Macと他の版は確かめていません。

旧記事の画面と過去の操作記録は、その確認を代替するものとして扱っていません。

ほかの操作はPhotoshopの総合案内から探せます。

スポンサーリンク

よくある質問:Photoshopのデータセット

Photoshopのデータセットとは、何ですか?

テンプレートの文字・画像・レイヤーの表示を、表の値に合わせて切り替える機能です。同じレイアウトのバナーやテロップを、別の内容で作るときに使います。標準のデータセット書き出しではPSDを生成し、JPG・PNGへの変換はその後に行います。

文字の検索・置換や、JSXとは、どう使い分けますか?

行ごとに異なる見出しや商品画像を入れて複数のPSDを作る場合は、データセットを使います。開いている文書の「2025」を一律に「2026」へ変える場合は、文字の検索・置換が候補です。グループ内の文字を数えて、複製文書で置換したい場合は、「文字レイヤーを一括置換するJSX」を参照してください。データセットはレイアウトそのものを作り直す機能ではなく、短い文字で作った枠へ長い見出しを入れると、改行やはみ出しが変わることがあります。

CSVは、どう作りますか?

表計算ソフトで、1行目に変数名を横方向に並べ(1列目ではありません)、2行目以降を差し替えデータにします。表示する文言にファイル名を兼ねさせると、改行や記号が保存名へ入るため、短いIDを別に用意します。IDは重複させず、Windowsのファイル名に使えない記号や末尾の空白も避けます。値の中にコンマを含める場合は、値全体を半角の二重引用符で囲み、値の中に二重引用符を入れる場合は、CSV上で二重にします。日本語を含むCSVはUTF-8で保存し、Photoshop側の読み込み設定もその文字コードに合わせます。拡張子だけを変更してもCSVにはなりません。

CSVは、どうやって読み込みますか?

[イメージ]→[変数]→[データセット]から[読み込み]を開き、CSVを選びます。「最初の列をデータセット名として使用」を選ぶと、IDの列の値をデータセット名に使います。最初の列は自由な管理列として無条件に追加できるものではなく、定義した変数との対応が必要です。「既存のデータセットを置き換え」は、読み込み前に既存のデータセットを削除する設定です。以前のデータも残したい場合は、テンプレートを別名保存してから設定を選びます。CSVを修正したときは、その変更をPhotoshopへ反映するために読み込み直します。読み込み後は、プレビューをオンにして切り替え、表示文字、改行、はみ出し、フォントを確認します。

データセットから、JPGやPNGを直接作れますか?

作れません。標準のデータセット書き出しではPSDを生成します。[ファイル]→[書き出し]のデータセット書き出し(旧記事の画面では「データセットからファイル」)を開き、保存先は既存ファイルのない専用フォルダーにして、出力するデータセットの範囲と、ファイル名の組み合わせを確認します。出力後は、CSVの件数に対応するPSDがあるか、各ファイルを開いて文字が合っているかを照合します。PSDが正しく生成できたら、イメージプロセッサーや、フォルダー内のPSDをJPG・PNGへ出力するJSXへ進みます。透過PNGが必要なら、透明部分を残す設定と、変換後の実画像を確認します。

レイヤーの表示・非表示を、CSVで切り替えられますか?

できます。文字の例とは別の練習用PSDで、表示を切り替えるA・Bのレイヤーを用意し、[変数]→[定義]で、それぞれの「表示」に変数を設定します。記事の例では、1件目はAを表示してBを非表示、2件目はその反対にします。親グループの表示状態も見ながら、意図した組み合わせになっているかを確認します。

画像を差し替えるには、どうしますか?

差し替え対象を、通常の画像レイヤーとして用意します。「背景」のままでは変数を定義できないため、複製文書で対象を選び、[レイヤー]→[新規]→[背景からレイヤーへ]で通常レイヤーに変換してから定義します。この変換は今回実機では未確認です。旧記事では、スマートオブジェクトのままではピクセルの置き換えを設定できない場合に、ラスタライズする手順を示していました。原本を直接ラスタライズせず、複製側で試し、元の編集可能な画像を残します。[変数]→[定義]で「ピクセルの置き換え」を選び、変数を定義します。CSVには、各値へ実在する画像ファイルのパスを入れます。最初はCSVと画像を同じフォルダーに置くと、参照先を追いやすくなります。CSVや画像を別の場所へ移動した場合は、パスも見直してください。挿入画像の縦横比が異なる場合は、枠へ収めるか、枠を埋めるか、切り抜くかを目的に合わせて決め、端が欠けていないかをプレビューで確認します。

読み込めない、文字化けする、保存名のエラーが出るときは? 記事の画面は最新ですか?

変数名の解析エラーは、まずPSDの定義とCSVの1行目を照合し、使っていない列、足りない変数、名前の違いを確認し、その後に各行の値の数と引用符を確認します(値の中のコンマを囲み忘れると、列が増えたように読まれます)。CSVが使用中と表示された場合は、表計算ソフトなどでそのファイルを閉じてから読み込み直します。文字化けでは、CSVの文字コードと読み込み設定を照合します。画像だけ差し替わらない場合は、変数の種類、画像レイヤーの状態、パス、実ファイルを確認します。保存名のエラーでは、データセット名へ使う列に、改行、禁止記号、末尾の空白がないかを確認します。定義していない列をCSVに足すと、Photoshop 27.11.0では「テキストファイルの最初の行に変数名が多すぎます。」と表示されました。なお、2026年10月17日にWindows 11 ProのPhotoshop 2026(27.11.0)で、文字の2件と表示切替の2件を読み込み、プレビューとPSDの書き出しまで確かめています。メニュー名は「データセットからファイル」のままでした。画像の差し替え、エンコーディング「自動」での読み込み、Macと他の版は確かめていません。「旧記事の掲載画面」とある画像は2025年3月公開の旧記事から引き継いだもので、撮影時期と版は未確認です。画面や設定は変わることがあるため、最新はAdobe公式のデータセットの案内と、ご自分の画面で確認してください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Photoshopのおすすめ書籍

動作要件とPCの確認項目

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次