
目次
これからは動画の時代がやってくる!?
こんにちは、動画市場に参入したい空生 直(ソラオナオ)です。
2018年9月から、AdobeのAfter Effects(映像加工ソフト)の勉強を独学で始めました。
それもこれも、これからの時代は、動画の時代だと実感したからです。
最近はテレビよりもYouTubeを見る時間が長くなりました。自分の子供もYouTubeが大好きです。こんなに、時代の波を感じているのに動画市場に参入しないなんてないですよね!
で、After Effectsを勉強していく過程で、モーショングラフィックスというものを知りました。
モーショングラフィックスとは、グラフィックデザインに動きや音をつけ、動画にしたものことです。
モーショングラフィックスの中にも、色んな種類があり、その中にキャラクターのアニメーションがあります。
テレビのCMに使われていたり、最近ではSNS上のプロモーション動画でもよく見ますね。
その中で、キャラクターイラストを動かしているアニメーション動画見たことありませんか?
〈この動画は、私がIllustratorで作ったイラストをAfter Effectsで動かしたものです〉
これからは、こういったものを使ったプロモーション動画がSNS上にも増えてくると思います。
企業などのから動画制作会社やフリーの動画クリエイターに、アニメーション動画制作の依頼も増えてきていると思います。
しかし、予算が多く出せない企業もあるでしょう、そういった場合、動画クリエイターの方は、ストックイラスト(デジタル素材を販売しているサイトから)を購入して、それをアニメーションさせることになる場合があります。
しかし、まだストックイラストにはモーショングラフィックス用に加工されている素材が多くありません。
動画クリエイターの方は購入した素材を、自分でモーショングラフィックス用に加工するか、人に頼むしかありません。
そこで、ストックイラストもモーショングラフィックスもやっている私は考えました!!
「モーショングラフィックス用のキャラクター素材のストックイラストの作り方を、まとめて発表しよう!!!」
ストックイラスト仲間にこの話をしたところ好評だったので、イソイソと時間を作ってなんとか形にすることができました。
ストックイラストクリエイターと動画クリエイターをつなぐ架け橋になれたらいいなと思っています。
モーショングラフィックス用のストックイラストの作り方
まずストックイラストに投稿できるファイル形式は、ai(もしくはeps), png(もしくはjpeg)〈販売サイトによってことなります〉です。
この中で、レイヤー構造をもてるのは、ai(またはeps)です。
モーショングラフィックスでイラストをパーツごとに動かすには、パーツごとに別れたレイヤー構造が必要です。
なので、ストックイラストでモーショングラフィックスのキャラクター素材を作るにはIllustratorが必須となります。
作り方解説画像①

・上の画像は、Illustratorで作ったキャラクター素材を、解説したものです。
左の人物は、パーツをまとめた完成図です。
真ん中のパーツがバラバラのものが、モーショングラフィックスに使える素材となっています。
右側のそれぞれのパーツは、付け替え用のパーツです。
作り方解説画像②

・Illustratorのレイヤー構造を説明している画像です。このように、パーツごとにレイヤーが分かれていることが大切です。
作り方解説画像③

・関節など曲げる部分の制作のコツを解説しています。
その他、付け替え用のパーツの説明です。
作り方解説画像④

・IllustratorからAfter Effectsにファイルを読み込んだ様子の画像です。
作り方解説画像⑤

・ストックイラストでモーショングラフィックス素材を作る利点とストックイラストでの課題
作り方解説画像(追加)

・等身が高いキャラクターの注意点と横向きのキャラクター素材を作る時のポイント
(横向きの場合、奥の右手・右足は見えてませんが、作るのを忘れずに)
以上です。基本的なことを解説しました。
その他の追加点
・後ろ髪が首より後ろにある場合、後ろ髪だけのレイヤーで作りましょう。(他の髪と同じレイヤーにしない)
・パーツのパターンとして、色んな髪型をセットにするのもいいかもしれません。
・Illustratorのキャラクター素材を使えるソフト(Adobe)は、After Effects、Animate CCなど。(他のソフトのことは良く知らないので、、)
これからの展望
現在、ストックイラスト仲間にこの方法を伝えていますが、自分が言い出しっぺなので、自分で実験すべく、ストックイラスト用に素材を作っている途中です。
ストック素材の審査に通り、販売になりましたら、追記でお知らせします。
(追記)
ストック素材サイトPIXTAでモーショングラフィック用の素材の販売をはじめました。これから少しづつ素材を増やしていくつもりです。
(c)Sorao-N – イラスト素材 PIXTA –
まだ、動画初心者のため情報に不充分なところもあると思います。これからも勉強しながら、新たな記事を書いたりしていきたいと思います。
動画については色んな挑戦をしていきたいと思っています。
・ストックイラストをやっている方で興味がありましたらぜひ、参考にして下さい。
・動画クリエイターの方で、イラストレータの方にモーショングラフィックス用のキャラクターを依頼する時に説明に利用できるかも!?
デジタル素材(写真・イラスト・動画)販売サイト
《こちらではイラストを販売しています。購入には会員登録が必要です。》
●PIXTA(ピクスタ)/ピクスタ株式会社運営 日本のデジタル素材(写真・イラスト・動画)販売サイトでは代表格
●Adobe Stock(アドビストック)/USAの会社 Adobeがfotoliaを買収 Adobe Stockでも同じものが販売されています
●Shutterstock(シャッターストック)