🎬アニメーションGIFで簡単アニメーション作成

boubura

2025年11月6日 08:13

🪄 はじめに

Procreateでは、アニメーションGIFを使うことで、透過も可能なアニメーションを簡単に作成できます。
特別なアプリは不要。レイヤーをフレームとして描くだけで、動きのある作品が完成します。

🎯 こんなときにアニメーションGIF！

Webやスライドで動く素材を使いたい

背景透過で合成したい

ふんわり動く「小さな命」を作品に与えたい

⚙️ 推奨キャンバス設定

推奨値
・サイズ：1024×1024 px（正方形）
・背景：透明
・レイヤー名：「01_開く」「02_閉じる」など番号付き

🩶 方法A：最短！「レイヤー＝フレーム」方式

1️⃣ 各レイヤーを1フレームとして作画
　（例）01_閉じる → 02_半開き → 03_全開
2️⃣ レイヤーを順に並べる
3️⃣ アクション（🔧）→「共有」→アニメーションGIF
4️⃣ FPS（フレーム／秒）を調整
5️⃣ プレビュー確認後に保存！

💡 6〜12枚程度のフレームで、滑らかで軽い動きが作れます。

🩷 方法B：アニメーションアシストで本格アニメ！

有効化

アクション → キャンバス → アニメーションアシストをオン
→ 画面下にタイムラインが表示されます。

基本操作

「フレームを追加」でコマを追加

「オニオンスキンの不透明度」でスライダー調整

「設定」で再生速度を調整（6〜10FPSが自然）
　　・ループ or Ping-Pong（往復）を選択可能

書き出し

アクション → 共有 → アニメーションGIF

背景OFFで透過書き出し

💫 作品例

🌟キラッと光るアニメ

1️⃣ 通常 →
2️⃣ 小さな光 →
3️⃣ 大きな光 →
4️⃣ 最大の輝き✨ →
5️⃣ 繰り返す（ループでエンドレス）

💨 呼吸のように動く

少しずつ大きく → 小さく

拡縮のFPSを微調整

💡 ちょっと上級：効果のコツ

効果
・光の演出
設定：レイヤーモード「スクリーン」「加算」
ポイント：輝きを足す

・柔らかい動き
設定：FPSを6〜8に
ポイント：ゆっくり呼吸するように

・滑らかさ
設定：中間フレーム追加
ポイント：チラつきを防ぐ

🧭 APNG / アニメーションGIF / MP4の使い分け

APNG
特徴：高画質・透過OK
用途：Web・作品展示向き

アニメーションGIF
特徴：互換性高・色数少
用途：SNS・軽量向き

MP4
特徴：長尺・音付き
用途：YouTube・プレゼン用

📋 チェックリスト

✅ アニメーションGIFを選んだ
✅ 背景レイヤーをOFFにした
✅ FPS：6〜10
✅ ループ設定ON
✅ サイズ：1024px程度
✅ プレビューで動作確認OK

🔗 関連リンク

「レイヤーアシストの使い分けで効率アップ！」
　→ 作画の整理術（描画アシストレイヤーの活用）

「放射対称でマンダラ模様を描こう！」
　→ 放射線対称を利用した装飾的アニメーションに応用可能

「縁取り＋影で立体感を出す！」
　→ アニメーションGIFで“光る文字”を作る練習にもおすすめ