イラストを動かす方法

描いた絵をアニメーションさせるやり方は、大きく3つあります。それぞれの向き不向きと、いちばん手軽な方法の手順をまとめました。

「せっかく描いたイラストを動かしてみたい」と思ったとき、最初にぶつかるのは「何を使えばいいのか分からない」という壁です。調べると専門ソフトの名前ばかり出てきて、値段を見て諦める。よくある話です。

でも、やりたいことによってはソフトを買う必要も、絵を描き直す必要もありません。

3つの方法と、その違い

1. コマ撮り — 絵を少しずつ動かして記録する

イラストの位置や角度を少しずつ変えて、その状態を1コマずつ記録していく方法です。紙のパラパラ漫画と同じ考え方で、絵を描き直す必要がありません。

手を振る、飛ぶ、揺れる、画面を横切る、といった動きはこれで作れます。絵を分解する作業も不要なので、1枚の完成したイラストがあればすぐ始められます。

2. パーツ分け — 部位ごとに分けて関節を動かす

腕、脚、髪、目、口といった部位を別レイヤーに分け、それぞれに動きをつける方法です。Live2DやAfter Effectsがこの方式です。

表情や自然な関節の動きまで作り込めますが、代償が大きい方法でもあります。イラストを部位ごとに描き直す必要があり、腕の下に隠れていた胴体も描き足さなければなりません。ソフトの習得にも時間がかかります。

3. AIで動画にする

画像を渡すと自動で動く映像を作ってくれるサービスです。手間はかかりませんが、どう動くかを細かく指定できません。 何度か生成して気に入ったものを選ぶ、という使い方になります。

思いどおりの動きを作りたい場合には向きません。

どれを選ぶか

実際にやってみる

ここから先は、コマ撮りスタジオを使った手順です。ブラウザで動くので、インストールも登録も必要ありません。 読み込んだ画像が外部に送信されることもないので、公開前の絵でも安心して使えます。

手順

1. イラストを読み込む — 「＋ イラストを追加」からPNGやJPEGを選びます。透過PNGならそのまま背景と重なります
2. 最初の位置に置く — 枠の中でドラッグして動かし、角のハンドルで大きさと角度を決めます
3. 「コマを記憶」を押す — この状態が1コマ目として保存されます
4. 少し動かして、また記憶 — 2コマ目。これを3〜4回くり返します
5. 再生する — 記憶した位置を順につないで動きます

記録されるのは位置だけではありません。角度・大きさ・不透明度も一緒に保存されるので、「回転しながら大きくなる」「だんだん消える」といった動きも、同じ操作で作れます。

もう少し良く見せる

背景を流す — 背景画像を追加して速度を決めると、キャラクターをほとんど動かさなくても「進んでいる」ように見えます。歩行や飛行の表現はこれが基本です。

直線をやめる — 2つのコマの間を結ぶ線を引っぱると、弧を描く動きになります。まっすぐ移動するより自然に見えます。

上下に数ピクセル揺らす — 歩きや浮遊感を出すコツです。大きく動かす必要はありません。

できあがったら

MP4かWebMの動画として書き出せます。大きさは枠の2倍まで選べるので、960×540で作ればフルHD（1920×1080）で出力できます。そのままSNSに投稿できる形式です。

1コマだけ切り出して、透過PNGの静止画として保存することもできます。スタンプや配信用の素材にするときに便利です。

よくあるつまずき

動きが硬く見える — コマ数を増やすより、弧を描かせるほうが効果があります。人や動物の動きは直線になりません。

キャラクターがすぐ画面外に出る — 本体は少しだけ動かして、背景を流してください。いつまでも歩き続けられます。

絵の切り替えがずれる — 複数の絵を切り替える場合は、動き方を「カクカク」にしてください。「なめらか」だと位置が徐々に動いて、切り替わりと合わなくなります。