はじめに

はじめまして。青けーです。

今回は私が「机上のキャラメルマキアート」という曲のMVを担当した際に制作した、女の子がまばたきをするアニメーションについて解説したいと思います。

目の差分を3パターンを作って繰り返すだけの簡単なアニメーションなので初めての人にもぜひ挑戦してほしいです！

 

最終的に下のGIF画像のようなものが作れるところまでを解説します。

準備

今回は既に作成済みのイラストの目をまばたきさせようと思うので、動かしたいイラストを描いたclipデータを用意してください（clipデータがない人は結合済みの画像でも大丈夫です）。

 

用意したデータをCLIP STUDIO PAINTで開き、タイムラインウィンドウが表示されていない人はツールバーの「ウィンドウ」から「タイムライン」を表示しておきましょう。

タイムラインウィンドウの「新規アニメーションフォルダー」をクリックして、新しくアニメーションフォルダーを作成しましょう。アニメーションフォルダーが作成されると、「新規アニメーションセル」ボタンがアクティブになります。クリックしてアニメーションセルを作成しましょう。

次に「新規タイムライン」ボタンをクリックして、アニメーションを作るためのタイムラインを作成しましょう。CLIP STUDIO PAINT Proでは24フレームまでのアニメーションを製作できます。

今回はまばたきというとても短いアニメーションなので、フレームレートを「２４」、再生時間も「２４」として、1秒間のアニメーションを作成します。

まばたきさせるための準備

それでは、実際に目を描いていこうと思います。今回は作成済みの絵を動かしていくので、まずはキャラクターの顔をのっぺらぼうの状態にしましょう。

この際、使用するデータがレイヤーが未統合で、目のレイヤーだけを非表示にできる人はそのレイヤーを非表示の状態にするだけでokです。　目だけを非表示にすることが難しい人は、先ほど作成したアニメーションレイヤーの下に新しくレイヤーを作成し、目の部分だけをいい感じに塗りつぶしましょう。

塗りつぶした上から目を描いていきます。先ほど作成したアニメーションフォルダー内のレイヤー（デフォルトのレイヤー名は１）に描いていきますが、今はアニメーションフォルダーのプレビューマーク（目のアイコン）が半透明になっていて、描くことができません。

そこで、タイムラインウィンドウの「セルを指定」ボタンをクリックしてレイヤーをタイムラインにリンクさせます。

タイムライン上に白いキャンバスが表示され、アニメーションフォルダーのプレビューマークも半透明ではなくなっているのが確認できると思います。それでは、アニメーションフォルダー内のレイヤーに目を描いていきましょう！

目を描く(開いた目)

さて、ようやく目を描いていくわけですが、レイヤー１枚で描くのは大変です。そこで、新たにレイヤーを追加してみると、またプレビューマークが半透明になっています...

 

そこで登場するのがレイヤーフォルダです。レイヤー１、２を選択して右クリックし、「フォルダーを作成してレイヤーを挿入」を選択してください。「１」というフォルダの中に先ほどのレイヤーが入っている状態になるのと同時に、「２」レイヤーのプレビューマークが有効になっているのが確認できると思います。

今作成したフォルダ内に好きなようにレイヤーを追加して目を描きましょう。

先ほど目のレイヤーを非表示にしただけの人は、今作成した「１」レイヤーの中に先ほど非表示にしたレイヤーをコピーするだけでokです。

目を描く(閉じた目)

魅力的な目は描けましたか？

次に、閉じた状態の目を描きます。「新規アニメーションセル」ボタンをクリックすると、「２」というレイヤーフォルダの中に、「１」レイヤーフォルダの中と全く同じ構成で空のレイヤーが作成され、「１」レイヤーフォルダのプレビューマークが半透明になります。

同時に、先ほどまで描いていた目が消えてしまうと思いますが、安心してください。

「オニオンスキンを有効化」ボタンをクリックすると、先ほどまで描いていた目（レイヤーフォルダ「１」の目）が半透明の青色で表示されます。これを頼りに、新たに作成されたレイヤーフォルダ「２」の中に閉じた目を描いていきましょう。閉じた目の場合白目などのレイヤーが不要になると思いますが、不要なレイヤーは削除しても大丈夫です。

動かしてみる

閉じた目が完成したら、ここで一度動かしてみましょう。

先ほどまではタイムラインウィンドウ上のボタン類しか触れて聞いませんでしたが、次はタイムラインを編集します。

上の画像のようにタイムラインの赤い線をドラッグして、「１２」の位置まで移動させましょう。このとき同時に「ループ再生」も有効化しておきましょう。

 

「ループ再生」の左にある矢印の形をしたボタンの真ん中にある「再生/停止」ボタンをクリックしてください。0.5秒おきにまばたきする動画が再生されると思います。

このままだとまばたきとはちょっと違うので、一瞬だけパチッと目を閉じるようにしたいと思います。

タイムラインの１５の位置をクリックして赤いラインを移動させた後、「セルを指定」ボタンをクリックし、レイヤー１を選択してokを押しましょう。

次のようなタイムラインになっていると思うので、もう一度再生してみましょう。

こんどは、一瞬だけ目を閉じるまばたきのようなアニメーションになっているはずです。

クオリティーアップしてみる

今のままでもまばたきしているように見えますが、まだちょっと不自然です。

そこで、閉じかけている目を描くことでより自然なまばたきに見えるようにしたいと思います。

 

それでは、閉じかけている目を描くために新しくアニメーションセルを作成しましょう。

「新規アニメーションセル」ボタンをクリックすると、レイヤーフォルダ「３」が生成され、赤いラインのあったところに新しいコマが挿入されます。

 

コマの長さは後で調整することとして、まずは次の画像のようにセルの順番が「１，２，３，１」となるようにセルを移動しておきましょう。

半開きの目といってもいろいろなタイミングがありますが、今回はほぼ開きかけている目を追加したいと思います。簡単な図で描くとこのようになります。

このような中間の目を追加することで、デフォルメした目で比較してもより自然なまばたきになっている気がします。

実際に追加した目は上のようなジト目気味の目です。タイムラインでは閉じた目(2)が4フレーム、半開きの目(3)が2フレームとなっています。

どうでしょうか？好みもあると思いますが先ほどのまばたき(下)と比べても上の動画のほうが自然に見えると思います。

書き出す

最後にツールバーの「ファイル → アニメーション書き出し → アニメーションGIF」で描きだしてTwitterなどのSNSでフォロワーさんに自慢しちゃいましょう！

最後に

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

今回は絵はちょっと描けるけどアニメーションは全く触ったことがない人を対象に作成してみましたが、どれくらいの人に役に立ったかは謎です。(役に立ってたらいいなあ)

 

今回初めてメイキングのようなものを作ってみて、世にあるメイキングを生み出した人たちの苦労を知ることができました。みんな大変な作業してるんやな...

 

要望や疑問点などコメントに書いてもらえたら可能な限り返答したいと思っているので気軽に聞いてください。　ツイッターのほうがレスポンスは早いと思うので返答遅かったらそちらにリプ飛ばしてくれても大丈夫です。

 

以上、ここまで読んでくれてありがとうございました！