spineでアニメーションをつくる際に参考にさせていただいたサイトをご紹介します。
◆全体のながれ
spineでどういうことができるかをつかむには
https://blog.nagisa-inc.jp/archives/2334
こちらのサイトを見てみると、どんな作品が作れるのか
spineにはどんな機能があるのか、などの概要がわかるかとおもいます。
イメージがつかめましたら、さっそく作成…
といきたいのですが、spineにはいくつか種類があるので、そちらを先にご紹介します。
◆spineのパッケージの違い
・トライアル版（体験版）
・Essential（エッセンシャル） 約7千円
・Professional(プロフェッショナル) 約3万円
上記３つがありますが、ざっくりいうと
・トライアル版
⇒体験版なのですが、作ったデータの保存や書き出しができません。あくまで操作を試したりという使い方になります。
・エッセンシャル版
⇒保存ができるようになります。が、IK（ボーンの関節をアニメーションさせやすくする機能）とメッシュ（髪やしっぽなどふにゃっとした揺れを表すのに使う機能）がエッセンシャルでは使えません。
ボーンとタイムライン、書き出しが主に使える機能になります。
・プロ版
⇒すべての機能が使えるようになります。エッセンシャル版を先に買っている場合は、差額のみの支払いでいいそうです。
まずは体験版をやってみて、使えるかどうかを確認してから購入がよいかと思います。
余談ですが、私はエッセンシャル版の機能制限を知らずに買ってしまい、使えない機能があることにしょんぼりしました 笑
◆イラストの作り方
2Dモーション（モーショングラフィック）を作成する場合は どのソフトを使っても
イラストの描き方（動きに対応できる描画）はだいたい同じです。
以下はsprite studioでのイラストの作り方が書かれていますが、大変参考になりますのでご参照ください。
http://www.webtech.co.jp/help/ja/spritestudio/guide/tips/partsdivision/
「動かしてから欠けた画像だけを書き足す」という方法だと、なんども修正が必要になってしまうので、
最初から 腕や足を非表示にした状態で体などを描いた方があとあと楽になります。
色塗りまで終わったら、
psdを複製して
部位ごとに線と塗りをスマートオブジェクトにして１レイヤーにしていきます。
◆イラストをspineに取り入れる
spineのソフトには「LayersToPNG.jsx」という便利なスクリプトがついていますので
それを使って psdの絵をspineで使える状態にします。
基本的には以下のURLに書かれている内容で大丈夫なのですが、
スクリプトの場所がwindowsでは違うので、ご注意ください。（後述します）
SpineにPhotoshop上のデザインを取り込む（基本編）
https://qiita.com/harayoki/items/22597daa586bccdd7d9a
【windowsの場合】
spineのソフトのショートカットを右クリック⇒「ファイルの場所を開く」⇒（場所を開いてもまたショートカットが表示された場合は再びファイルの場所を開く）⇒「spine」というフォルダにたどりつけたら、「scripts」フォルダ⇒「photoshop」フォルダ⇒そこにLayersToPNG.jsxがあります。
◆アニメーションづくり ボーンの入れ方・ＩＫの設定の仕方
https://whomor.com/whomorpictures/?p=5531
SpineのIKでキャラクタに足付きを
http://marupeke296.com/IKDADV_SPN_IK.html
上記の２サイトでは必要な情報が多く掲載されています。
（whomor Picturesさんの方は絵素材の配置方法も紹介されていますが
先ほど紹介した「LayersToPNG.jsx」を使う方が楽かと思います）
腰などのポイントは点ボーンにしておきましょう。
あとは思い思いのアニメーションをつくったり、動画として書き出してＳＮＳに載せてみたり、ゲームに組み込んでみたり、いろいろ試してみましょう