先日ポートフォリオを制作する際に、Procreateを使って初めてGIFアニメーションに挑戦しました。
自身のメモ兼どなたかの役に立てればと思い、つくりかたをご紹介します。
※ アプリの基本的な使用方法については割愛します。
はじめに
Procreateとは
Procreateとは、iPadなどで使用できる有料のイラスト描画アプリのこと。
2000円（2025年6月現在）の買い切り型で、ブラシが豊富であったり、カスタマイズも可能なので自身の思い描く表現が可能です。
（買い切り型ではあるものの、値段がだんだん上がっているようなので、早めの購入がおすすめかもしれません…！）
わたしは長らくAdobeFrescoを使用していたのですが、今年初めにProcreateに乗り換えました。
▼ 詳細はこちらから（公式サイト）
使用機材
ちなみに、わたしが使用しているのはiPad Air Wi-Fi 256GB（第4世代）とApple Pencil（第2世代）です。
描き心地をよくするために、ペーパーライクフィルムを貼っています。
つくりかた
制作したのは、こちらの星がきらきらと輝くアニメーション。
全部で７枚のレイヤーでできています。
準備
キャンバスを開き、左上の「スパナ」アイコンをクリック。「キャンバス」→「アニメーションアシスト」をONにします。
画面下部に「再生／設定／フレームを追加」のバーが表示されたら準備完了です。
レイヤーを増やし、描画する
右上の「レイヤー」をタップし、レイヤーを増やします。
１枚目のレイヤーが透けて表示されるので、動きをなんとなく予想しながら、重ねて描画をします。
※ 下レイヤー（ガイドとなるイラスト）の濃さは「設定」→「オニオンスキンの不透明度」から調整できます。
画面下部の「再生」をタップするとアニメーションが再生されます。
動きを確認しながら、必要枚数を描画します。
アニメーション設定をする
必要な枚数がそろったら、「設定」から動きの設定をします。
用語を解説すると、
・ループ：アニメーションを最初から最後まで再生を繰り返す
・ピンポン：アニメーションを最初から最後まで再生→最後から最初まで再生を繰り返す
・ワンショット：アニメーションを最初から最後まで一回再生して停止する
・フレーム／秒：アニメーションの速度
となります。
いろいろ試しながら、お好みの動きや速度を設定してみてください。
▼ 公式のガイドもよければ参考にどうぞ。
保存 & 書き出し
アニメーションが完成したら、保存。
今回はWebサイトに使用する素材として書き出しました。
左上の「スパナ」マークをタップ→「共有」→「アニメーションGIF」をタップ
「ウェブ対応」→必要に応じて「透明な背景」→「アルファのしきい値」（＝エッジの調整）を任意で設定→「書き出す」で完了です！
おわりに
ここまでProcreateでのアニメーションのつくりかたをご紹介しましたが、いかがでしたか？
わたしは「イラストを動かすのってむずかしそう……」と漠然と思っていたのですが、意外と簡単にGIFアニメーションがつくれることがわかり、もっといろいろなものを動かしてみたくなりました。
みなさんもぜひ、「動かすたのしみ」を体感してみてください◎
おまけ：アイキャッチ画像解説
今回はなかなか苦しんだ制作でした。
方向性は２つ考えました。レイヤー要素をデザインに用いるか、Procreateのサイトやアプリの色合いを参考にするかです。
ただ、レイヤーが重なっている様子をデザインに取り入れるとなんだか見づらいし、どうも画面が決まらない……。
改めて「アニメーション」と聞いて連想されるモチーフ（ループや進行を表す矢印、再生ボタンの三角、手描き風の効果など）を書き出して整理。
結果的に、画面がスッキリしつつ、コマアニメーションであることも一目でわかる現在のデザインに落ち着きました。
タイトルまわりの文字は、アニメーションらしいポップさが出るように縁取りを。
キャラクターの位置を少しずらしただけでは移動していることがわかりにくかったため、左上に太陽のようなモチーフを追加。表情にも変化をつけました。
また、キャラクターにラフの効果を適用し、手描き感をプラスしています（画像ではほとんど分かりませんが）。
まだまだ引き出しが少なく、参考の集めかたやデザインの考え方にも改善の余地があると感じたので、「自分ができる」ものではなく、やったことのないテイストや表現にもどんどん挑戦していかないといけないと感じました☁️
伸びしろしかないと信じてがんばります✊
