パパっと手軽にイラストを動かしたい！方向けのイラストアニメーション｜大阪の動画制作・映像制作会社なら株式会社シードアシスト

みなさんこんにちは！

 

わいわいと楽しそうな家族のイラスト。

こんなイラストを、動画では使用する場面があると思います。

イラストを挿入するだけでとても華やかに、楽しい画面になります。

でもただ挿入するだけじゃせっかくの動画なのにもったいないですよね。

今回は、少ない手順で簡単にできるアニメーションの作り方をご紹介します。

後半は、もう少し素材を細かくしてイラストの動きを意識して動かすパターンも紹介してますので、

是非参考にしてみてください。

・プラグイン無し

・一部エクスプレッションあり

・キーフレームアニメーション

→過去関連記事　『キーフレームと速度の変化』　『キーフレームだけでできる！簡単アニメーション』

 

制作手順

今回ご紹介するアニメーションの手順は大きく分けて3段階あります。

１ アンカーポイントの設定

２ 素材にキーフレームを打つ

３ ループのエクスプレッション入力

 

これだけでとっても簡単です！

今回はすべてこの手順でアニメーションを作成しています。

 

まずは今回使用するイラストをご用意しました。

こちらはイラストACのうたのさんが作成されたイラストです。

 

ポップでかわいい家族のイラストです。

特にキュートなおばあさんが最高です！

 

後ほど全員動かしますが、手順をまずはご紹介します。

では私が特に気に入ったおばあさんのイラストを使って説明します。

 

◆準備

女性イラストのコンポジションを作成した状態です。

コンポジションの大きさは目的に合わせてください。

今回は軽くゆらゆらと揺らしてみようと思います。

 

STEP１　【 アンカーポイントの設定 】

まずはアンカーポイントの場所を決めましょう。

今回のイラストは人物ですね。

基本的には画像の端っこにアンカーポイントを置きますが、

私は一応そのイラストが何かによってアンカーポイントの位置を決めます。

例えば人間は体を揺らす時、腰辺りから揺らしますよね。

なので支点は腰辺りになる、という感じで考えます。

今回はイラストが腰からあるので、画像の一番端にアンカーポイントを置きました。

さらに腰の中心が画像の中心からズレている為、腰の中心に合わせています。

 

STEP２　【 キーフレームを打つ 】

回転をキーフレームで打ちます。

ショートカットは「R」キーです。

 

今回はこのように、

0秒　回転 0°

1.5秒　回転 -2°

3秒　回転 0°

とキーフレームを打ちました。

ここでポイントです。

どんな値を入力しても大丈夫ですが、

始まりと終わりのキーフレームは値を同じにしてください。

 

これを全部選択して、ショートカットキー「F9」キーで

イージーイーズにできます。

 

STEP３　【 ループのエクスプレッション入力 】

エクスプレッションをつけましょう。

回転の時計のマークを「Alt」キー(Mac:「Option」キー)を押しながらクリックで、エクスプレッションを追加できます。

回転の数値下にある4つのアイコンの内、一番右にある三角のマークをクリック

出てくるウィンドウから　「Property」→「loopOut(type = “cycle”, numKeyframes = 0)」を選択。

これでループアニメーションは完成です。

 

再生するとこんな感じです。

 

少し動きが変だな…って感じた時はキーフレームを調整してみましょう。

 

これだけでも簡単ですぐにイラストを動かすことができます！

 

 

パーツを細かくしてみよう

パーツが多ければ多いほど、細かい動きにすることができます。

ここからはパーツを分けていくとどんな動きの変化があるのかを見てもらいながら、

一つ一つの動きを意識してアニメーションさせていきます。

 

パターン１

まずは一番簡単に。

先程ご紹介した、1人1パーツを動かす方法で6人全員を動かしてみました。

それぞれのキャラクターごとに少し回転の幅を変えてます。

子供は元気いっぱいに大きく動いてほしいので大きめに、

大人4人は少し控えめに。

動きが少なく単純なので、少し硬さを感じると思います。

 

今回のイラストは一人一人ちゃんとデータが分かれるので、

6人の家族のイラストをAI上で人物ごとに分けてデータを用意しました。

↓↓ 分解パーツはコチラ

—————————————————————————————————————————————————

—————————————————————————————————————————————————

 

とってもシンプルで簡単ですね。

これだけでも動いているしかわいいのですが、物足りない部分があると思います。

数が多ければ動いているように見えますが、特に１体だけだとすごく単純な動きになってしまうので、

できればパーツをもう一段階増やして、動きを大きくつけてみましょう。

 

 

パターン２

1人約2～3パーツ

もう少し動かしたい、そしてお手軽にいくのなら一番これが効率良いと思います。

 

身体の回転はほぼパターン1のままですが、そこに頭の回転を追加してみました。

先程よりも動きが追加されて、賑やかになりました。

頭の動きも先ほどの手順で動かしています。

 

頭と体の2～３パーツに分けるだけで、パターン１と比べて動きに差がついたのがわかると思います。

 

↓↓ 分解パーツはコチラ

—————————————————————————————————————————————————

—————————————————————————————————————————————————

基本的に、頭と体の2パーツでできます。

お母さんのイラストは、後ろ髪があったので頭パーツにせずに別にしました。

AEで配置する時、頭パーツは体パーツよりも上に配置して、髪パーツは体より下に配置しないといけない為です。

 

↓↓ アンカーポイント

頭のアンカーポイントは、首と接触している部分にしましょう。

体パーツは先ほどと同じ場所です。

 

この方法ならある程度イラスト数が多くなっても、

結構すぐにアニメーションも作れちゃうのでおすすめです。

 

もっとイラストを活かしたい！

という場合は、素材が許す限り細かくしちゃいましょう！

私もついつい細かくしてしまうタイプです。

楽しいですよね。

 

パターン３

ということで、一人当たり4～6パーツくらいにわけてみました。

手順はすべて同じにしているので動きが緩やかですが、これだけでも動きが増えて賑やかになったと思います。

 

イラストを動かす時、そのキャラクターはどんな動きが似合うのか、どんな動きをしそうなのか、

そんなことを考えて動かしております。

全員一緒だと硬い動きになってしまうので、個性を意識しながら動かします。

ただし、どこまで細かくできるのかはイラスト作成者の作り方にも結構左右されるので、ここは要注意です。

 

↓↓ 分解パーツはコチラ

—————————————————————————————————————————————————

—————————————————————————————————————————————————

・顔

・目

・髪の毛

・体

・手

それぞれ分けたパーツはところどころ違いますが、大体この5つで分けてみました。

今回動かした時に不自然にならないように一部パーツを足している部分があります。

必要であれば少し腕の付け根を足したり、不要な部分を削ったりしてみてください。

 

↓↓ アンカーポイント

【前髪・目】

【腕】

頭と体は同じ場所に。

髪の毛は付け根部分

目はそのまま中央

腕は肘辺りに。

 

これでそれぞれ回転を掛けています。

目に関しては回転ではなく、開いたり閉じたりするように、スケールで同じようにループさせています。

 

 

◆もっと動きを追加してもOK！

まだまだ素材を細かくしてそれぞれをもっときちんと動かしていけば、より動きのあるアニメーションが作れます。

目をぱちぱちと瞬きさせたり、髪の毛の揺れのタイミングを少しずらしてより自然な揺れを表現したり…

そんな自然な動きを作るのが好きです。どんな個性を持たせるのか考えるのも楽しいですね。

 

★おまけ

最後に私がパターン3の動きを作る時、どんなことをイメージしながら動きを付けたのかご紹介します。

 

今回私が動きを作るときに意識したイメージです。

キャラクターごとに、どんな感情なのかで微妙に動きを変えています。

【　おじいさん：誇らしい家族で嬉しい気持ち　】

→首を少し大きめに回転させて自信があるような動き

【　おばあさん：そんなおじいさんと、家族に満足するおばあさん　】

→体と頭を少し大きめに揺らして、嬉しい感情を表現

【　男の子：元気いっぱいにピースで主張　】

→右手にスケールを少し加えて手の存在感を出し、大きく揺れて元気な感情を表現

【　女の子：元気に手を振って楽しむ　】

→同じく大きく揺れて元気に、男の子よりはおとなしいイメージで手の振り幅は控えめに

【　お母さん：子供を優しく見守る　】

→おばあさんと似た感情だが、母というしっかりしないといけない立場なので揺れを少なく、

やさしさも表現したかったので、首は体よりも大きめに振ってにこやかに

【　お父さん：元気な子供たちに笑顔になる　】

→堂々と立たせるために全体的に揺れは少ない動き

 

 

意識したいポイント

複数のキャラクターを動かすときは、できるだけ動きが被らないように意識しています。

見ている方もその方が飽きずに楽しめると思うので。

また、イラストの作り方によって、アニメーション出来る箇所がかなり変わってきます。

おすすめは、パーツごとに分かれているのはもちろん、

見えないところ、塗り足しの部分まで作ってくれている素材です。

動きをつけるとどうしても静止画では見えなかった部分が見えてくるので、

本当にこれがあるだけでアニメーションのクオリティがグッと上がります。

(動く範囲も大きくできたりとメリットしかありません！)

素材を探すときは是非、動画で使いやすい素材を探してみてください。

 

 

いかがでしたでしょうか？

1人1人の人物像や、性格などを意識して作成すると、より個性が出て楽しい動きになります。

作るのも楽しいので、是非あなただけのキャラクターを作りあげてください。