本記事では、Spine初心者向けにインストールから基本的な使い方までを解説します。
連動して動く簡単なリグも組むので、Spineの一通りの制作工程がわかります！
今回は風鈴を揺らします。Spineが初めてでも数時間で作れます！
Spineのインストール
まずは無料のトライアル版をインストールします。
全機能を利用できますが、プロジェクトの保存やエクスポートは制限されています。
なお、有料のProfessional版は449ドルです（2026年9月19日時点のセール表示は379ドル）。
価格は改定やセールで変わるため、購入前に公式の購入ページで確認してください。
下記のリンクからインストーラーをダウンロードできます。
ダウンロードした「SpineTrialSetup.exe」を実行してインストールを進めます。
デフォルトでは下記のパスにインストールされます。
「SpineTrial.exe」を実行するとSpineが起動します。
C:\Program Files (x86)\SpineTrial
※製品版の場合は下記のパスになります。
C:\Program Files (x86)\Spine
※製品版を購入済みの場合は、この認証手順は不要です。
「SpineTrial.exe」を起動するとメールアドレスの入力画面が表示されるため、自身のアドレスを入力します。
届いたメールに記載されている「トライアルコード」を入力すると、トライアル版が使用可能になります。
「新規プロジェクト」をクリックすると作業画面に切り替わります。
Spine用Photoshopスクリプトのインストール
※Photoshopでイラストを作成・準備することを前提とします。
Spineのインストールフォルダ内にあるPhotoshop用スクリプトを確認します。
C:\Program Files (x86)\SpineTrial\scripts\photoshop
該当フォルダ内にある2つのファイルをコピーします。
- logo.png（せっかくなのでロゴ付きで）
- PhotoshopToSpine.jsx
Photoshopの「Scripts」フォルダ内に「Spine」フォルダを作成し、先ほどコピーした2つのファイルを配置します。
C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts\Spin
以上で、PhotoshopからSpine用データを書き出すためのスクリプトの準備は完了です。
Spineテスト用イラストの用意
以前Anima2Dの解説でも使用した「いらすとや」の風鈴のデータを使用します。
Photoshopで風鈴のイラストをパーツごとにレイヤー分けします。
- fuurin_bottom
- fuurin_top
下図のようにパーツを分割します（※確認しやすいよう各パーツの位置をずらして配置しています）。
Photoshopの定規（ルーラー）の「0, 0」位置がSpine上での原点となるため、ルーラーの交差部をドラッグして風鈴の根本（紐の吊り元）を「0, 0」に合わせます。
Photoshop上部メニューの「ファイル」>「スクリプト」>「PhotoshopToSpine」を実行します。
スクリプトの設定ダイアログが表示されます。
各設定項目は基本的に初期設定のままで問題ありません。
「Trim whitespace（余白のトリム）」のチェックを外し、「OK」をクリックします。
PSDファイルと同じフォルダに書き出しデータが生成されます。
「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のモデルは「ボーン」「スロット」「アタッチメント」の階層構造で構成されています。
- 骨（ボーン）
後ほど骨を作成しますが、位置や回転、スケールなどの情報を管理する場所です。 - 領域（アタッチメント）
青い四角のアイコン。
画像を管理しているのでわかりやすいと思います。
アタッチメントの上階層には必ずスロットというもの（次に説明）に格納されています。 - スロット
白丸のアイコン。アタッチメントの描画順序を管理します。
重要なことですがスロットの中のアタッチメントは1つしか表示されません
ただし「前顔」「斜め顔」「横顔」といった切り替えたい時のパーツは複数のアタッチメントを格納することがあります。
以上、カメラ操作と最低限、構成されている要素を紹介しました！
Spineのセットアップ
風鈴を動かすための骨組み（セットアップ）を構築していきます。
ツールバーの「作成」をクリックし、ボーン作成モードに切り替えます。
「Ctrl+クリック」でアタッチメントを選択した状態にしてから、ドラッグしてボーンを作成します。
この方法で作成すると、選択したアタッチメントとスロットの親階層にアタッチメントと同じ名前でボーンが自動生成されます。
アタッチメントを選択せずにドラッグすると「bone」という汎用名で作成されるため、名前の変更が必要になります。
さらに画像スロットをボーンの階層下へ手動移動する手間もかかるため、事前にCtrl+クリックで選択してから作成するのが効率的です。
続いて短冊（紙）部分をCtrl+クリックで選択し、下図のようにボーンを作成します。
このボーンは後から分割するため、まずは1本作成すれば問題ありません。
鈴のボーンと短冊のボーンの接続位置を合わせるため、アタッチメントの位置は保持したままボーンの位置のみを調整します。
- 下メニューの「Compensate」のイメージを点灯
- 下メニューのトランスレートを点灯させて、位置を1番目の骨の先端へ移動します。
2番目に作成した短冊のボーンを選択し、ツリーパネル下部の「分割」をクリックします。
オプションは変更せず、ボーンを5分割に設定して実行します。
ボーンが連続した5本に分割されます。
ツリーパネル下部の「新規」から「パス」を選択し、下図のように短冊に沿ってパスを作成します。
階層構造を整えた後、作成したボーンをパスに追従させます。
分割した5つのボーンを選択し、ツリーパネルの「新規」>「パスコンストレイント」を選択します。
対象として先ほど作成した「パス」を指定します。
これでパスコンストレイントが適用され、選択したボーン群がパスの曲線に沿って配置されます。
さらに、パスの回転設定を「チェーンスケール」に変更します。
ボーンのスケールが連動し、より自然にパスへ追従するようになります。
短冊のアタッチメントを選択し、「メッシュ」にチェックを入れてメッシュ編集を開始します。
メッシュ編集モードに移行したら、作業しやすいように「減光」にチェックを入れます。
「作成」で頂点を追加し、「変更」で位置を微調整します。
不要な頂点はダブルクリックまたは「削除」で取り除きながらメッシュを構築します。
曲がりやすさを考慮し、短冊の横方向へ細かく分割を入れます。
編集が終わったら、スペースキーを押すか「メッシュ編集」ボタンを再度クリックして編集モードを終了します。
画面右上の「ビュー」から「ウェイト」パネルを表示します。
短冊のアタッチメントを選択した状態で、ウェイトパネル下部の「バインド」をクリックし、先ほど分割した5つのボーンを指定します（ビューポート・ツリーのどちらから選択しても構いません）。
指定が完了したら、スペースキーまたは「バインド」ボタンを押してバインドモードを終了します。
ウェイトパネルの「オーバーレイ」にチェックを入れ、「自動」をクリックすると、頂点に初期ウェイトが自動割り当てされます。
ボーンとアタッチメントが離れすぎていると「ウェイトを計算できません」と警告が出ることがあります。
その場合はボーンの位置関係を確認してください。
自動割り当てされたウェイトを手動で微調整します。
作業前に、下部パネルの目のアイコン下にあるチェックを外し、パスやボーンの表示を非表示にしておくと頂点が見やすくなります。
調整の基本手順は、頂点を選択し、影響度を設定したいボーンを選択してウェイト値を増減させる作業の繰り返しとなります。
均等に変形させたい場合、隣接する頂点間の数値を100%・66%・33%のように等間隔で割り振るのも有効です。
ボーンがパスに拘束されているため、パスの頂点を動かすことでアタッチメントの変形具合を確認できます。
アニメーション付け用の親ボーン（コントローラー）を作成します。
図の位置を参考に、操作用ボーンを新規作成します。
通常のボーンと区別しやすくするため、プロパティで「アイコン」や「カラー」を変更しておきます。
作成したコントローラーで動かせるよう、パス自体にもウェイトを設定します。
同様の手順でパスを選択し、ルート側のボーンとコントローラー用ボーンをバインドします。
パスの頂点を選択し、コントローラーの影響度となるウェイト値を割り振ります。
これでコントローラーを動かした際に、短冊全体が連動してしなるようになります。
この段階のウェイトは仮設定のため、実際にアニメーションを再生させながら最終調整を行います。
- パスはオーバーレイ表示されないので注意
- またパスのハンドルにもウェイト値が触れるので注意
Spineでのアニメーション作成
画面をアニメーションモードに切り替え、風鈴の揺れモーションを作成します。
画面左上の「設定」をクリックして「アニメ化」モードへ切り替えます。
トランスフォームツールでコントローラーを動かし、鍵アイコンをクリックしてキーフレームを打ちます（例: 0フレーム、20フレーム）。
ループアニメーションにするため、50フレーム目には0フレーム目のキーをコピー＆ペーストして配置します。
再生ボタン（▷）で動きを確認しながら、短冊が自然にたなびくようパスのウェイトを微調整します。
「グラフ」ボタンをクリックしてグラフエディタを開き、動きの緩急（イージング）を調整します（再生中にも調整可能です）。
鈴本体のボーンにもわずかに揺れを加え、全体の動きを整えます。
※トライアル版ではプロジェクトの保存およびエクスポートが制限されているため、動作確認は画面キャプチャ等で行います。
他の3DCG関連記事は、まとめページから確認できます。
Spineの概要や基本機能については、別記事で詳しくまとめています。
Spineの記事は、ほかにもあります。
初心者向けチュートリアル（導入から使い方まで）のまとめ
SpineのインストールからPhotoshop連携、セットアップ（リギング）、基本アニメーション作成までの一連の流れを解説しました。
トライアル版は保存・エクスポートに制限があるものの、リギングやアニメーション付けの操作感を無料で試すことができます。
Spineの導入を検討している方はぜひ挑戦してみてください。
初めて触った時は「1軸なくして機能を簡素にした3Dソフト」という印象でした。3Dソフトが扱える人はすぐに扱えるようになるくらい、シンプルで使いやすい2Dアニメーションソフトです。