PhotoshopToSpineは、PSDの各レイヤーをPNG画像と配置情報のJSONへ書き出すスクリプトです。
2026年10月26日に公式READMEと PhotoshopToSpine.jsx 7.42を再照合しました。
掲載画像と後半の行番号表は2020年当時の記録です。
2026年10月16日に、Windows 11 Pro（10.0.26200）のPhotoshop 27.11.0で7.42を「参照」から起動し、設定画面の項目と初期値、定規の原点の移動までを確かめました。
書き出しの完了（PNGとJSONの出力）、Spineへの読み込み、日本語化した画面の動作は確かめていません。
Spine 4.2以降ではPSDを直接読み込む方法もあるため、スクリプトの導入前に公式のPSDインポート案内を確認してください。
PSD直接取り込みとスクリプトの使い分け
まずSpineのメインメニューにある Import PSD で、PSDを直接取り込む方法を検討します。
レイヤースタイルや調整レイヤーなど、PSDに画素として保存されない効果は、そのまま取り込めません。
その場合は元PSDの複製で該当レイヤーをスマートオブジェクト化するか、PhotoshopToSpineを使います。
原点の指定も異なり、直接取り込みでは最初の縦ガイドがX、最初の横ガイドがYの基準です。
ガイドがない軸はキャンバスの中央を使い、[origin] を付けたレイヤーでも原点を指定できます。
以下の定規の原点を動かす手順は、PhotoshopToSpine用です。
Spine用書き出しスクリプト「PhotoshopToSpine」のインストール
Spineでよく使う「PhotoshopToSpine」のインストール手順です。
公式READMEのDownloadから PhotoshopToSpine.jsx を取得し、保存した拡張子が .jsx であることを確認します。
GitHubのファイル一覧のページをそのまま保存するとHTMLになることがあるため、README内の配布リンクを使います。
ダイアログにロゴを表示する場合だけ、同じ配布元の logo.png をスクリプトと同じフォルダへ保存します。
Spineのインストールフォルダからコピーする旧手順は、そこに同梱された版を使う場合の記録です。
Photoshopのインストール先にある Presets\Scripts に PhotoshopToSpine.jsx を置き、Photoshopを再起動します。
インストール先へコピーしない場合は、Photoshopの「ファイル → スクリプト → 参照」から保存した .jsx を選ぶ方法が公式READMEにあります。
2026年10月16日にPhotoshop 27.11.0で試したところ、「ファイル」→「スクリプト」の一番下に「参照」があり、保存した PhotoshopToSpine.jsx を選ぶと「PhotoshopToSpine v7.42」の設定画面が開きました。
「PhotoshopToSpine」の使い方
書き出すPSDを保存し、複製したファイルで作業を始めてください。
PhotoshopToSpineでは、定規（ルーラー）の（0, 0）がSpine上の原点になります。
定規の原点をドラッグし、基準にしたい位置（風鈴の根本など）を（0, 0）に合わせます。
2026年10月16日にPhotoshop 27.11.0で、256×128ピクセルの画像の中央へ定規の原点をドラッグすると、上と左の定規の0が画像の中央に移りました。
この原点が書き出したJSONの座標に反映されるかは、書き出しを確かめていないため未確認です。
Photoshopの上部メニューから次の順に選択します。
ファイル＞スクリプト＞PhotoshopToSpine
設定を確認して「OK」をクリックします。
「Trim whitespace」は各レイヤー画像の透明な余白を削る設定で、JSONの出力や出力先は別の項目です。
2026年10月16日にPhotoshop 27.11.0で開いた7.42の設定画面では、Scaleが100%、Paddingが1px、Trim whitespaceとWrite Spine JSONがオン、Ignore hidden layersがオフでした。
Output Pathsは、Imagesが ./images/、JSONが ./ で、PSDファイルの場所を基準にした指定です。
※「PhotoshopToSpine」の各オプション設定の詳細は後述します。
PSDを閉じると定規の原点がリセットされることがあるため、基準位置にガイドを残して書き出し前に確認してください。
初回は新しい出力フォルダを指定し、既存のPNGやJSONと分けて保存します。
掲載した旧作例ではPSDと同じ階層へ出力していますが、保存先はダイアログのImagesとJSONで指定します。
2026年10月16日の確認は設定画面の表示までで、書き出しの完了（imagesフォルダとJSONの出力）は確かめていません。
下の出力例は2020年当時の記録です。
- imagesフォルダ（中身はレイヤー毎にPNG画像で書き出される）
- fuurin.json（画像のパスと画像の位置情報を記したjsonファイル）
書き出したJSONをSpineへ取り込む
次は公式のImport Data手順に沿った取り込み方法です。
今回、この取り込み操作を実機では再確認していません。
- 指定した出力先にPNGとJSONがあることを確認します。
- Spineのメインメニューから
Import Dataを開き、JSONを選択します。 - 初回の確認は
New projectを選び、新しいプロジェクトへ取り込みます。 - 画像の欠落、位置、重なり順を元PSDと比較し、別名でプロジェクトを保存します。
既存スケルトンへ取り込む場合、Ignore は既存項目を保持し、Replace は置き換えます。
再取り込みの前にプロジェクトと画像を複製し、編集済みの内容が変わっていないか確認してください。
PNGやJSONが出力されないとき
以下は7.42の公式ソースにある設定とエラー条件です。
- JSONがない：
Write Spine JSONをオンにし、JSONの出力先が空欄でないか確認します。 - PNGがない：Imagesが空欄だと画像を書き出さないため、保存先を指定します。
- 保存を求められる：開いているPSDを保存してから再実行します。
- RGBのエラーが出る：元ファイルの複製で画像モードをRGBカラーに変更します。
- 一部のレイヤーがない：
Selection onlyと非表示レイヤーの除外設定を確認します。 - 名前の重複エラーが出る：表示されたレイヤー名・スキン・スロットを確認し、名前やタグの指定を見直します。
「PhotoshopToSpine」のオプション設定
- Ignore hidden layers➡非表示レイヤーの書き出しを無視します
- Write Spine JSON➡素材情報（パスやサイズ）を記したJSONファイルを出力します
- Ignore background layer➡背景レイヤータイプを無視します
- Write template image➡表示中のレイヤーを統合した下絵用のPNG画像を書き出します。
- Trim whitespace➡余白を削除します。
- Scale➡素材のサイズを変更します
- Padding➡素材に余白をもたせます
- Output Paths➡ImagesとJSONの書き出し場所を指定します
取得した7.42のソースには「Selection only」もあり、選択したレイヤーだけを対象にする設定です。
2026年10月16日に表示した7.42の設定画面にも「Selection only」があり、いちばん上には「Language」の欄もありました。
「PhotoshopToSpine」のタグ機能
レイヤー管理を効率化する「PhotoshopToSpine」のタグ機能を解説します。
- 例：head[bone]
目的に応じて、レイヤー名やグループ名の先頭または末尾にタグ名（すべて半角小文字）を角括弧付きで記述します。
- [bone]➡ボーンを作り、その下へレイヤー、スロット、ボーンを配置します。
- [slot]➡レイヤーを指定したスロットへまとめます。
- [skin]➡レイヤーを指定したスキンへ入れ、画像をスキン用のサブフォルダに出力します。
- [merge]➡グループ名に指定し、そのグループ内のレイヤーを1枚の画像へ結合します。
- [folder]➡画像を指定したサブフォルダへ出力します。
- [ignore]➡対象のレイヤーまたはグループと、その子グループを出力しません。
[slot:head]のように名前を指定でき、省略した場合はレイヤー名かグループ名を使います。[merge]はグループ名に付けるタグです。- 同じ名前のアタッチメントを同一スキン・スロットへ重ねる指定は避け、書き出し時のエラー内容を確認します。
「PhotoshopToSpine」の日本語化
この節は2020年当時のダイアログ表示を手動で日本語へ置き換えた記録です。
7.42のソースで選べる表示言語は英語と中国語（簡体字）の2つで、日本語はありません。
2026年10月16日に日本語表示のPhotoshop 27.11.0で開いたところ、「Language」は「Automatic」で、設定画面は英語で表示されました。
この記事では改変済みスクリプトを配布せず、元ファイルは公式配布元から取得する手順を案内します。
元ファイルを別名で退避し、編集に失敗した場合は元ファイルへ戻してください。
コードの変更箇所
下表の8項目と行番号は旧版用で、取得した7.42へそのまま適用する手順ではありません。
| 旧版の場所 | 内容 |
|---|---|
| 394行目 | " Ignore hidden layers"を" 非表示レイヤーを無視する"に |
| 394行目 | " Write template image"を" テンプレート画像書き出し"に |
| 396行目 | " Ignore background layer"を" 背景レイヤーを無視する"に |
| 398行目 | " Trim whitespace"を" 余白をトリミングする"に |
| 404行目 | " Write Spine JSON"を" JSONを書き出す"に |
| 414行目 | "Scale:"を"指定倍率:"に |
| 415行目 | "Padding:"を"余白:"に |
| 445行目 | "Output Paths"を"出力先"に |
取得した7.42では表示文言が translations.en にまとめられ、たとえば旧版394行目の設定名は37行目にあります。
英語の表示文言を探し、タグ名、JSONのキー、ファイル名、Photoshopの識別子は翻訳しないでください。
表示が崩れたり実行できなくなったりした場合は、変更前の .jsx へ戻して元の状態で開き直します。
Spineや3DCGに関するその他の解説記事は、まとめ一覧から確認できます。
SDイラストからSpine用データを制作する全体の流れはこちらです。
Spineの記事は、ほかにもあります。
書き出しスクリプト「PhotoshopToSpine」の詳細と日本語化のまとめ
まず複製したPSDから新しいフォルダへ書き出し、Spineで画像の位置と重なり順を確認してください。
ここに書いた行番号は、当時のPhotoshopToSpine.jsxのものです。
スクリプトは更新されるため、版が違うと行番号がずれます。
編集する前にオリジナルを退避し、書き換える箇所は行番号ではなく英文そのもので探してください。
