本記事では、Spine初心者向けに画像の取り込みからリグとアニメーションを作る流れを解説します。
掲載画面と風鈴の操作手順は、2020年当時のSpine 3.8.84体験版・Photoshop CC 2017による例です。
現行版では画面や導入手順が異なるため、ダウンロードとPSD取り込みの最新の案内を先に確認してください。
連動して動く簡単なリグも組むので、Spineの一通りの制作工程がわかります！
今回は風鈴を揺らすSpineのリグとアニメーションを、工程ごとに見ていきます。
Spineは画像の取り込みから骨組み作成、メッシュやアニメーション設定まで行えます。
- Photoshopスクリプトで書き出した画像をSpineに取り込みます。
- ボーンやパス、メッシュとウェイトを設定してリグを構築します。
- アニメ化モードでキーフレームを打ち動きやグラフを調整します。
Spineのインストール
まずは無料のトライアル版をインストールします。
体験版ではProfessionalの機能を試せますが、プロジェクトの保存、テクスチャパック、アニメーションデータ・画像・動画のエクスポートはできません。
有料版の機能と価格は、Spine公式の購入ページで確認できます。
体験版の制限は、Spine公式のダウンロードページに記載されています。
公式のダウンロードページで、使用するOSに合った体験版を選びます。
以下の実行ファイル名、インストール先、メールでのトライアルコード入力は旧Windows環境の記録です。
現行版でも同じ画面や認証手順になるとは限らないため、公式ページとインストーラーの表示に従ってください。
ダウンロードした「SpineTrialSetup.exe」を実行してインストールを進めます。
旧Windows環境では、次のフォルダーにインストールした例です。
「SpineTrial.exe」を実行するとSpineが起動します。
C:\Program Files (x86)\SpineTrial
旧記事で示していた製品版のインストール先は次のとおりです。
C:\Program Files (x86)\Spine
製品版の入手先は、購入時に届く個別のライセンスページです。
「SpineTrial.exe」を起動するとメールアドレスの入力画面が表示されるため、自身のアドレスを入力します。
届いたメールに記載されている「トライアルコード」を入力すると、トライアル版が使用可能になります。
「新規プロジェクト」をクリックすると作業画面に切り替わります。
| 機能 | 体験版 | Essential版 | Professional版 |
|---|---|---|---|
| メッシュ・ウェイト | 使える | 使えない | 使える |
| IKなどのコンストレイント | 使える | 使えない | 使える |
| プロジェクトの保存・書き出し | できない | できる | できる |
Essential版で使えない機能（メッシュ・ウェイト・IK）
Essential版ではメッシュやウェイトを使えません。
IKなどのコンストレイントやクリッピングもProfessional版だけの機能です。
これらを使ったプロジェクトはEssential版で保存も書き出しもできません。
体験版で試せる機能と利用できない保存・書き出しについては、前述の公式ダウンロードページも確認してください。
この記事の手順もメッシュとウェイトを使うため、Essential版では保存できません。
料金はSpineとは？初心者向けの始め方の表にまとめています。
現行版ではPSDを直接取り込む方法もある
現在のSpineには、PSDファイルを直接取り込む「Import PSD」があります。
Photoshop以外でも、PSDを書き出せる画像編集ソフトで用意したファイルを利用できます。
公式手順は、メインメニューの「Import PSD」から入力PSD、PNGの出力先、取り込むデータを指定する流れです。
詳しい設定と制限は、Spine公式：Import PSDを確認してください。
以下は旧記事のPhotoshopToSpineでPNGとJSONを作る方法で、PSD直接取り込みとは別の手順です。
今回、現行版Spine・Photoshopやスクリプトの実行は検証していません。
Spine用Photoshopスクリプトのインストール
以下の旧スクリプト経由の例は、Photoshopでイラストを準備する方法です。
Spineのインストールフォルダ内にあるPhotoshop用スクリプトを確認します。
C:\Program Files (x86)\SpineTrial\scripts\photoshop
旧環境では、このフォルダーからPhotoshopToSpine.jsxとlogo.pngをコピーしていました。
- logo.png（ダイアログのロゴ表示用・任意）
- PhotoshopToSpine.jsx
旧記事では、Photoshopの「Scripts」内に「Spine」フォルダーを作り、ファイルを配置しています。
下記はPhotoshop CC 2017の例で、末尾は画像と同じ「Spine」です。
現行の公式READMEでは「Presets」内の「Scripts」にPhotoshopToSpine.jsxを配置し、Photoshopを再起動する方法が案内されています。
logo.pngは任意で、置く場合はスクリプトと同じフォルダーに入れます。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\Spine
以上で、PhotoshopからSpine用データを書き出すためのスクリプトの準備は完了です。
Spineテスト用イラストの用意
以前Anima2Dの解説でも使用した「いらすとや」の風鈴のデータを使用します。
Photoshopで風鈴のイラストをパーツごとにレイヤー分けします。
- fuurin_bottom
- fuurin_top
下図のようにパーツを分割します（※確認しやすいよう各パーツの位置をずらして配置しています）。
このPhotoshopToSpineの例では、ルーラーの交差部をドラッグして風鈴の吊り元を0,0に合わせます。PSDを開き直した際も原点を再確認してください。PSD直接取り込みでは原点の指定方法が異なり、公式ガイドでは最初の水平・垂直ガイド、またはレイヤーの[origin]タグを使います。
Photoshop上部メニューの「ファイル」>「スクリプト」>「PhotoshopToSpine」を実行します。
スクリプトの設定ダイアログが表示されます。
下図はPhotoshopToSpine v4.8の旧設定画面で、すべての環境にそのまま適用できる設定例ではありません。
「Trim whitespace（余白のトリム）」のチェックを外し、「OK」をクリックします。
この旧例では、PSDと同じフォルダーにJSONとimagesフォルダーを出力しています。
実際の出力先は「Images output path」と「JSON output path」を確認してください。
「PhotoshopToSpine」の詳細はこちらに書きました
- imagesフォルダ（中身はレイヤー毎にPNG画像で書き出される）
- fuurin.json（画像のパスと画像の位置情報を記したjsonファイル）
以上で、Photoshopでのパーツ分けとSpine用データの書き出しが完了しました。
Spineへの画像データの取り込み
Spine（この記事を書いた2020年当時のバージョンは3.8.84）を起動します。
先ほどPhotoshopから書き出した風鈴のデータを取り込みます。
新規プロジェクトを作成して作業を開始します。
インポートを実行すると、書き出した風鈴のパーツ配置がSpine上で再現されます。
Photoshopで設定した原点位置が正しく反映されているか確認します。
これでSpineへの画像データのインポートは完了です。
Spineのカメラ操作とツリーパネル
UIには多数の機能がありますが、まずは基本となるカメラ操作とツリー構造を把握します。
ビューポートのカメラ操作方法
- カメラのズームはマウスホイール（ペンタブの人はCtrl+右ドラッグ）
- カメラの位置移動は右ドラッグ
- イラスト100%表示はCtrl+F（カメラ動かしすぎた時は100%表示にフォーカスする）
ツリーパネルの構成
ツリーパネルには、プロジェクトを構成する全要素が階層順にリスト表示されます。
ツリーパネルの要素
- 「root」と書かれた場所に骨や画像（アタッチメント）を管理する場所です
- 「表示順序」は名前の通りの意味です。キーを変化させることも可
- 「イメージ」は画像のパスを管理します。リンク切れはここのフォルダパスを修正
ボーン・アタッチメント・スロットの関係
公式ドキュメントにある通り、Spineのモデルは「ボーン」「スロット」「アタッチメント」の階層構造で構成されています。
- 骨（ボーン）
後ほど骨を作成しますが、位置や回転、スケールなどの情報を管理する場所です。 - 領域（Region）アタッチメントは、画像を表示する種類のアタッチメントです。アタッチメントにはメッシュやパスなど他の種類もあり、すべてが画像ではありません。アタッチメントはスロットに属します。
- スロット
白丸のアイコン。アタッチメントの描画順序を管理します。
重要なことですがスロットの中のアタッチメントは1つしか表示されません
ただし「前顔」「斜め顔」「横顔」といった切り替えたい時のパーツは複数のアタッチメントを格納することがあります。
以上、カメラ操作と最低限、構成されている要素を紹介しました！
Spineのセットアップ
風鈴を動かすための骨組み（セットアップ）を構築していきます。
ツールバーの「作成」をクリックし、ボーン作成モードに切り替えます。
「Ctrl+クリック」でアタッチメントを選択した状態にしてから、ドラッグしてボーンを作成します。
この方法で作成すると、選択したアタッチメントとスロットの親階層にアタッチメントと同じ名前でボーンが自動生成されます。
アタッチメントを選択せずにドラッグすると「bone」という汎用名で作成されるため、名前の変更が必要になります。
さらに画像スロットをボーンの階層下へ手動移動する手間もかかるため、事前にCtrl+クリックで選択してから作成するのが効率的です。
続いて短冊（紙）部分をCtrl+クリックで選択し、下図のようにボーンを作成します。
このボーンは後から分割するため、まずは1本作成すれば問題ありません。
鈴のボーンと短冊のボーンの接続位置を合わせるため、アタッチメントの位置は保持したままボーンの位置のみを調整します。
- 下メニューの「Compensate」のイメージを点灯
- 下メニューのトランスレートを点灯させて、位置を1番目の骨の先端へ移動します。
2番目に作成した短冊のボーンを選択し、ツリーパネル下部の「分割」をクリックします。
オプションは変更せず、ボーンを5分割に設定して実行します。
ボーンが連続した5本に分割されます。
ツリーパネル下部の「新規」から「パス」を選択し、下図のように短冊に沿ってパスを作成します。
階層構造を整えた後、作成したボーンをパスに追従させます。
分割した5つのボーンを選択し、ツリーパネルの「新規」>「パスコンストレイント」を選択します。
対象として先ほど作成した「パス」を指定します。
これでパスコンストレイントが適用され、選択したボーン群がパスの曲線に沿って配置されます。
さらに、パスの回転設定を「チェーンスケール」に変更します。
Chain Scaleはボーンの先端がパス上の次の位置へ届くよう、回転と長さを調整します。公式ガイドでは、対象ボーンをすべて同じ親の下に置くか、最初のボーンを残りすべての親にする構成を求めています。分割直後の連続した親子階層のままにせず、ツリーで確認してください。Spine公式：Path constraints
短冊のアタッチメントを選択し、「メッシュ」にチェックを入れてメッシュ編集を開始します。
メッシュ編集モードに移行したら、作業しやすいように「減光」にチェックを入れます。
「作成」で頂点を追加し、「変更」で位置を微調整します。
不要な頂点はダブルクリックまたは「削除」で取り除きながらメッシュを構築します。
曲がりやすさを考慮し、短冊の横方向へ細かく分割を入れます。
編集が終わったら、スペースキーを押すか「メッシュ編集」ボタンを再度クリックして編集モードを終了します。
画面右上の「ビュー」から「ウェイト」パネルを表示します。
短冊のアタッチメントを選択した状態で、ウェイトパネル下部の「バインド」をクリックし、先ほど分割した5つのボーンを指定します（ビューポート・ツリーのどちらから選択しても構いません）。
指定が完了したら、スペースキーまたは「バインド」ボタンを押してバインドモードを終了します。
バインド後、「自動」で初期ウェイトを計算します。「オーバーレイ」はウェイトを色で確認する表示機能で、自動計算の必須条件ではありません。頂点やボーンを選択している場合は、その選択範囲に計算対象が限られる点に注意してください。
自動計算がうまくいかない場合は、対象のメッシュ、バインド先、頂点・ボーンの選択範囲と位置関係を確認します。
距離だけで原因を決めず、メッシュの形状も確認し、必要なら手動でウェイトを調整します。Spine公式：Weights view
自動割り当てされたウェイトを手動で微調整します。
作業前に、下部パネルの目のアイコン下にあるチェックを外し、パスやボーンの表示を非表示にしておくと頂点が見やすくなります。
調整の基本手順は、頂点を選択し、影響度を設定したいボーンを選択してウェイト値を増減させる作業の繰り返しとなります。
100%・66%・33%のような数値は、特定のボーンの影響を段階的に減らす例です。各頂点に影響する他のボーンも確認し、実際の曲がり方に合わせて調整してください。
ボーンがパスに拘束されているため、パスの頂点を動かすことでアタッチメントの変形具合を確認できます。
アニメーション付け用の親ボーン（コントローラー）を作成します。
図の位置を参考に、操作用ボーンを新規作成します。
通常のボーンと区別しやすくするため、プロパティで「アイコン」や「カラー」を変更しておきます。
作成したコントローラーで動かせるよう、パス自体にもウェイトを設定します。
同様の手順でパスを選択し、ルート側のボーンとコントローラー用ボーンをバインドします。
パスの頂点を選択し、コントローラーの影響度となるウェイト値を割り振ります。
これでコントローラーを動かした際に、短冊全体が連動してしなるようになります。
この段階のウェイトは仮設定のため、実際にアニメーションを再生させながら最終調整を行います。
- パスはオーバーレイ表示されないので注意
- またパスのハンドルにもウェイト値が触れるので注意
Spineでのアニメーション作成
画面をアニメーションモードに切り替え、風鈴の揺れモーションを作成します。
画面左上の「設定」をクリックして「アニメ化」モードへ切り替えます。
トランスフォームツールでコントローラーを動かし、鍵アイコンをクリックしてキーフレームを打ちます（例: 0フレーム、20フレーム）。
この例では50フレーム目に0フレーム目と同じキーを置きます。動かしたすべてのプロパティの始点・終点が一致しているか確認し、ループの境目で速度が急変しないようグラフも調整してください。
再生ボタン（▷）で動きを確認しながら、短冊が自然にたなびくようパスのウェイトを微調整します。
「グラフ」ボタンをクリックしてグラフエディタを開き、動きの緩急（イージング）を調整します（再生中にも調整可能です）。
鈴本体のボーンにもわずかに揺れを加え、全体の動きを整えます。
体験版で確認できるのはSpine内の再生で、画面キャプチャは保存やエクスポートの検証にはなりません。
他の3DCG関連記事は、まとめページから確認できます。
Spineの概要や基本機能については、別記事で詳しくまとめています。
Spineの記事は、ほかにもあります。
IKコンストレイントの作り方
IKコンストレイントは手先や足先の位置に合わせて途中のボーンの回転を自動で決めます。
歩くときに足を地面に固定する用途などに使います。
ボーンを1本か親子の2本選び、ツリーのプロパティの「New」（新規）から「IK Constraint」を選びます。
ターゲットのボーンを指定して作成します。
2本のボーンのIKでは、「Positive」のチェックで曲がる向きを切り替えます。
初心者向けチュートリアル（導入から使い方まで）のまとめ
SpineのインストールからPhotoshop連携、セットアップ（リギング）、基本アニメーション作成までの一連の流れを解説しました。
トライアル版は保存・エクスポートに制限があるものの、リギングやアニメーション付けの操作感を無料で試すことができます。
Spineの導入を検討している方はぜひ挑戦してみてください。
初めて触った時は「1軸なくして機能を簡素にした3Dソフト」という印象でした。3Dソフトが扱える人はすぐに扱えるようになるくらい、シンプルで使いやすい2Dアニメーションソフトです。
公式資料の確認日は2026年10月8日です。
よくある質問：Spineの初心者チュートリアルを進めるときのチェックリスト
この記事では、何を作りますか？
Spine初心者向けに、画像の取り込みから、リグとアニメーションを作る流れを解説しています。風鈴を揺らすリグとアニメーションを、工程ごとに見ていきます。ボーンやパス、メッシュとウェイトを設定してリグを構築し、アニメ化モードでキーフレームを打って、動きやグラフを調整します。
Spineの体験版では、何ができますか？
体験版では、Professionalの機能を試せますが、プロジェクトの保存、テクスチャパック、アニメーションデータ・画像・動画のエクスポートはできません。有料版の機能と価格は、Spine公式の購入ページで確認できます。体験版の制限は、Spine公式のダウンロードページに記載されています。
この記事の画面は、今のSpineでも同じですか？
掲載画面と風鈴の操作手順は、2020年当時のSpine 3.8.84体験版・Photoshop CC 2017による例です。現行版では画面や導入手順が異なるため、ダウンロードとPSD取り込みの最新の案内を、先に確認してください。インストールの実行ファイル名やインストール先も、旧Windows環境の記録です。
Photoshopのスクリプトは、どう入手しますか？
記事の旧手順では、Spineのインストールフォルダ内にあるスクリプトをコピーしていました。現在のスクリプトの入手方法と設定は、公式のPhotoshopToSpineのREADMEを参照してください。現行の公式READMEでは、「Presets」内の「Scripts」に、PhotoshopToSpine.jsxを配置し、Photoshopを再起動する方法が案内されています。同じ階層にあるLayersToPNG.jsxは、旧仕様のスクリプトのため使用しません。
PSDを直接読み込む方法は、ありますか？
現行版では、PSDを直接取り込む方法もあります。記事内の見出し「現行版ではPSDを直接取り込む方法もある」と、公式の案内を確認してください。
ボーン・スロット・アタッチメントとは、何ですか？
ボーンは位置・回転・スケールなどを管理し、スロットにはアタッチメントが属します。スロットごとに同時に有効にできるアタッチメントは1つです。領域アタッチメントは画像を表示しますが、アタッチメントにはメッシュやパスなどもあります。スロットの順序は描画順に関係します。
ボーンの作り方で、気をつけることは？
「作成」をクリックしてボーン作成モードに切り替え、Ctrlクリックでアタッチメントを選択した状態にしてから、ドラッグしてボーンを作成します。選択したアタッチメントとスロットの親階層に、アタッチメントと同じ名前でボーンが自動生成されます。アタッチメントを選択せずにドラッグすると、「bone」という汎用名で作成されるため、名前の変更や、スロットの移動が必要になります。
ウェイトの自動計算で、「ウェイトを計算できません」と出ます。
バインド先、メッシュ形状、頂点・ボーンの選択範囲と位置関係を確認します。Autoは距離だけで計算する仕組みではありません。オーバーレイはメッシュ上にウェイトを色で表示する機能で、自動計算を行う条件ではありません。必要に応じて手動で調整してください。
