Spineへインポートするための書き出しスクリプト「PhotoshopToSpine」の詳しい使い方と、日本語化の手順を解説します。
2026年10月3日に公式配布の PhotoshopToSpine.jsx（ファイル内の scriptVersion は7.42）と公式READMEを照合しました。
掲載画像と後半の行番号表は2020年当時の記録で、今回の確認は資料とソースの照合までです。
PhotoshopでのPSD書き出し、Spineへの読み込み、日本語化した画面の動作は再検証していません。
Spine 4.2以降ではPSDを直接読み込む方法もあるため、スクリプトの導入前に公式のPSDインポート案内を確認してください。
Spine用書き出しスクリプト「PhotoshopToSpine」のインストール
Spineでよく使う「PhotoshopToSpine」のインストール手順です。
公式READMEのDownloadから PhotoshopToSpine.jsx を取得し、保存した拡張子が .jsx であることを確認します。
GitHubのファイル一覧のページをそのまま保存するとHTMLになることがあるため、README内の配布リンクを使います。
ダイアログにロゴを表示する場合だけ、同じ配布元の logo.png をスクリプトと同じフォルダへ保存します。
Spineのインストールフォルダからコピーする旧手順は、そこに同梱された版を使う場合の記録です。
Photoshopのインストール先にある Presets\Scripts に PhotoshopToSpine.jsx を置き、Photoshopを再起動します。
インストール先へコピーしない場合は、Photoshopの「ファイル → スクリプト → 参照」から保存した .jsx を選ぶ方法が公式READMEにあります。
「PhotoshopToSpine」の使い方
「PhotoshopToSpine」を使った書き出し手順を解説します。
Photoshopの定規（ルーラー）の（0, 0）地点がSpine上の原点になるため、
定規の原点をドラッグし、基準にしたい位置（風鈴の根本など）を（0, 0）に合わせます。
Photoshopの上部メニューから次の順に選択します。
ファイル＞スクリプト＞PhotoshopToSpine
設定を確認して「OK」をクリックします。
「Trim whitespace」は各レイヤー画像の透明な余白を削る設定で、JSONの出力や出力先は別の項目です。
※「PhotoshopToSpine」の各オプション設定の詳細は後述します。
PSDを閉じると定規の原点がリセットされることがあるため、基準位置にガイドを残して書き出し前に確認してください。
➡オプションの詳細へ
掲載した旧作例ではPSDと同じ階層へ出力していますが、保存先はダイアログのImagesとJSONで指定します。
- imagesフォルダ（中身はレイヤー毎にPNG画像で書き出される）
- fuurin.json（画像のパスと画像の位置情報を記したjsonファイル）
「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」もあり、選択したレイヤーだけを対象にする設定です。
「PhotoshopToSpine」のタグ機能
レイヤー管理を効率化する「PhotoshopToSpine」のタグ機能を解説します。
- 例：head[bone]
目的に応じて、レイヤー名やグループ名の先頭または末尾にタグ名（すべて半角小文字）を角括弧付きで記述します。
- [bone]➡ボーンを作り、その下へレイヤー、スロット、ボーンを配置します。
- [slot]➡レイヤーを指定したスロットへまとめます。
- [skin]➡レイヤーを指定したスキンへ入れ、画像をスキン用のサブフォルダに出力します。
- [merge]➡グループ名に指定し、そのグループ内のレイヤーを1枚の画像へ結合します。
- [folder]➡画像を指定したサブフォルダへ出力します。
- [ignore]➡対象のレイヤーまたはグループと、その子グループを出力しません。
[slot:head]のように名前を指定でき、省略した場合はレイヤー名かグループ名を使います。[merge]はグループ名に付けるタグです。- 同じ名前のアタッチメントを同一スキン・スロットへ重ねる指定は避け、書き出し時のエラー内容を確認します。
「PhotoshopToSpine」の日本語化
この節は2020年当時のダイアログ表示を手動で日本語へ置き換えた記録です。
この記事では改変済みスクリプトを配布せず、元ファイルは公式配布元から取得する手順を案内します。
元ファイルを別名で退避し、編集に失敗した場合は元ファイルへ戻してください。
コードの変更箇所
下表の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」の詳細と日本語化のまとめ
Spine向けの素材切り出し作業は工程数が多いため、Photoshopの書き出しスクリプトを活用して効率化を図りましょう。
ここに書いた行番号は、当時のPhotoshopToSpine.jsxのものです。
スクリプトは更新されるため、版が違うと行番号がずれます。
編集する前にオリジナルを退避し、書き換える箇所は行番号ではなく英文そのもので探してください。
