このページでは、絵を1コマずつ描いて GIFアニメを作る方法 を説明します。完成させるのは、上下に動いて表情が変わる3コマの小さなキャラクターです。同じ考え方で、まばたき、手振り、弾むボール、動くスタンプも作れます。
写真を自動で動かすAI機能や、動画をGIFに変換する機能ではありません。自分で描いたコマが順番に再生されます。WigglyPaintでは線自体も揺れるため、少ないコマでも手描きらしい動きになります。
この GIFアニメの作り方 は、画像を自動変換する方法ではなく、手でコマを描く 手描きアニメーション です。コマは1枚の絵、ループは最後から最初へ戻る動き、オニオンスキンは前のコマを薄く見る機能です。これが分かると、動くイラストの作り方 や基本の アニメーションの作り方 も理解しやすくなります。
最短手順
最初の絵を描く、コマを複製する、動く部分だけ直す、3コマ目を加える、最後から最初へのつながりを確認する、GIFで書き出す、の順です。
描く前に決めること
- 主役は1つ、動きも1つにする。
- 色はまず2〜3色に絞る。
- トーク画面の小さな表示でも読める大きさで描く。
- 最初は3〜4コマで完成させる。
手描きGIFアニメの作り方
1. 最初のポーズを描く
WigglyPaintを開き、ブラシと色を選んで動きの始まりを描きます。例では目を開けた黄色い顔を使います。1コマ目は静止画のプレビューになることが多いので、止まっていても意味が伝わる絵にします。
2. Animationパネルを開く
画面下の Animation frames を開きます。コマのサムネイル、再生、オニオンスキン、大きなプラスボタンが表示されます。1コマ目が選ばれているか確認します。
3. コマを複製する
顔の形を残して目や口だけ変えるなら Copy frame を使います。全体が急に変形しにくくなります。まったく別の絵を描くときだけ空のコマを追加します。
4. オニオンスキンを使う
おばけの形のボタンを押すと、前のコマが薄いガイドとして見えます。この線は完成GIFには入りません。動かさない部分を重ね、動く部分だけずらします。
5. 3つ目のポーズを作る
もう一度複製し、小さな変化を加えます。ジャンプなら「上・下・上」、まばたきなら「開・閉・開」で十分です。最初のコマ送りアニメーションは3コマで完成させましょう。
6. ループを3回見る
再生して、最後のコマから最初のコマへ戻る瞬間を確認します。速すぎるポーズは同じコマを複製すると長く見せられます。現在、個別のFPSやコマごとの時間設定はありません。
7. GIFを書き出して開く
Export からGIFを保存し、編集画面の外で開きます。小さく表示しても読めるか、動いているか、ループが急に飛ばないかを確認します。
完成したGIF
下はこの手順で実際に書き出したファイルです。主役を大きくし、色を減らし、位置と表情だけを変えています。メッセージやSNSで小さく表示されても動きがわかります。
見やすい動くイラストにするコツ
- まわりの余白を増やしすぎない。
- 1コマで変える動きは1つにする。
- 細部より大きな形を優先する。
- 止めたいポーズは同じコマを複製する。
- 最後から最初への動きを必ず見る。
- 投稿前に保存したGIFを開く。
描き込み前に知っておきたいGIFの制限
GIFに音声は入らず、1コマで使える色は最大256色です。少ないベタ塗り色、太い形、短い ループアニメーション は、グラデーションや長い動きより見やすく軽くなります。
うまくいかないとき
- 速すぎる： 見せたいポーズのコマを複製します。
- ループが跳ねる： 最後と最初の位置を近づけるか、中間のポーズを足します。
- 大きさが変わる： オニオンスキンで動かない部分を合わせます。
- 1枚しか見えない： 各サムネイルに絵があるか、全コマ作成後に書き出したか確認します。
- ぼやける・重い： コマ数、色、余白、細かい線を減らします。
- 保存した絵が動かない： ブラウザなどGIFを再生できるアプリで開きます。写真アプリは最初のコマだけを見せる場合があります。
何に使える？
短いループは、リアクション画像、SNS投稿、プロフィールの飾り、授業の例、ゲームの動きメモに向いています。GIFには音がないので、絵だけで意味が伝わる動きにします。操作を先に詳しく知りたい場合はコマ送りアニメの入門、ほかの制作サイトを比べたい場合は初心者向けアニメーションサイトもどうぞ。
よくある質問
無料でGIFアニメを作れますか？
はい。ブラウザ版でコマを描き、GIFを書き出せます。デスクトップソフトのインストールは不要です。
写真や動画を自動で動かせますか？
いいえ。自分で1コマずつ描くための機能で、画像や動画の変換ツールではありません。
初心者は何コマから始めればいい？
3〜4コマがおすすめです。つながりが足りないときだけ中間のコマを増やします。
1コマだけ長く表示できますか？
個別の時間設定はまだありません。同じコマを複製すると長く表示できます。
自然につながるループにするには？
最後と最初のコマを並べ、位置を近づけます。まだ跳ねる場合は、始まりへ戻る中間コマを足します。
GIFアニメに音は入りますか？
GIFは音声を保存できません。音がなくても意味が伝わる動きと間にします。
このWeb版から動画を書き出せますか？
この手順で案内しているのはGIF書き出しです。同じコマ編集から動画ファイルを出せるとは案内していません。