13 620 130 new

絵の描き方やペンタブ情報などをお届け

【Procreate】アニメーションの作り方。うごくイラストを描こう

更新日:2023.09.15
Procreateアニメーションアイキャッチ

人気のiPadアプリ「Procreate」は、イラストだけでなくアニメーション作品も作ることができます。

Procreateのアニメーション機能を活用して、作品を作ってみましょう。

今回は、Procreateでアニメーションを作る手順をご紹介します。

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

Procreateの概要

イラスト・アニメーションが制作できる「Procreate」

「Procreate」は買い切り制のペイントアプリで、iPadで使用できます。

描きやすいキャンバス画面や様々なタッチが表現ができるブラシ、多機能なフィルタ・ツールが特徴で、iPadで絵を描いている方に人気のアプリです。

iPhone用には「Procreate Pocket」が提供されており、Procreateの機能をiPhoneでも使うことができます。

アニメーション制作に特化した「Procreate Dreams」もリリース予定

アニメーションアプリ「Procreate Dreams」が、2023年の11月22日にリリース予定であると発表されました。

Procreate DreamsはiPad用のアプリケーションで、アニメーション制作に特化した機能が搭載されています。

  • タッチ操作でモーション・視覚効果を制作
  • アニメーション制作がしやすいタイムライン
  • 音響の追加や動画の編集

Procreate Dreamsは買い切り制のアプリで、価格は$19.99 USDとのことです。

アニメーションだけを作りたい方や、アニメーション機能が充実したアプリをお探しの方は、Procreate Dreamsも検討してみてください。

Procreate アニメーションの作り方

①ファイルを作成する

ファイルを作成する

Procreateを起動後に右上の「+」ボタンを押します。

スクリーンサイズやA4サイズなど、お好みのファイルサイズでキャンバスを作成します。

②アニメーション制作用の設定をする

アニメーションアシストをONにする

アニメーション制作用の設定をする Procreateでアニメーションを制作する場合、画面左上のアクションボタンを押して「アニメーションアシスト」の設定をONにしましょう。

アニメーションアシストをONにすると、キャンバスの画面下にタイムラインが表示されます。

Procreateでは、このタイムラインを操作してアニメーションを制作していきます。

フレームを追加する手順

アニメーションを構成する1枚の静止画を「フレーム(コマ)」と呼びます。

フレームごとに物の位置・形を少しずつずらしていき、連続して表示することで絵が動いているように見せます。 フレームを追加する

フレームを増やしたいときは、タイムライン上のフレームのサムネイルをタップして、ポップアップ内の「複製」を押します。

もしくは、タイムラインの右上にある「フレームを追加」を押します。

Procreateではフレーム=レイヤーとして扱う

Procreateではフレーム=レイヤー

タイムラインからフレームを追加すると、自動的に新しいレイヤーも作成されます。

反対に、新規レイヤーを追加する操作をしても、自動的に新しいフレームが作成されます。

Procreateのアニメーション制作では、1フレームを1枚のレイヤーとして扱います。

③前景・動く物体・背景の3層で考える

アニメーションの完成形をイメージする

アニメ

まずは、どのようなアニメーションを作るか考えてみましょう。

解説の作例では、バスケットボールを投げるアニメーションを作成します。

1枚のイラストで考える

画面の構成

いきなり完成形のアニメーションをイメージするのが難しい場合は、1枚のイラストを作ることから考えてみましょう。

解説のイラストでは、3つのレイヤーから構成されています。

  • バスケットボール
  • 体育館とゴール(ボールの後ろにある)
  • テキスト(ボールの手前にある)

バスケットボールを投げるアニメーションなので、バスケットボールだけを動かせば成立させられそうです。

体育館とゴール、左下のテキストは動かさなくてもよさそうです(シュートが入るアニメーションの場合、ゴールネットも動かす必要があります)。

何を動かして何を動かさないか、ということを最初に明確にしておくと作業がスムーズに進みます。

背景を設定する

絵を動かす必要のないレイヤーは、背景・前景に設定しておきましょう。

背景・前景に設定されたレイヤーは、アニメーション中は常に表示されます。

背景・前景の設定をしないと、体育館やテキストを全てのフレームに描き込むことになってしまいます。

背景のレイヤーを設定する

タイムラインの一番左にあるフレームは、背景として設定することができます(長押し+ドラッグ操作で、各フレームの位置を移動できます)。

体育館が描かれているフレームをタップして、「背景」のスイッチをONに設定します。

前景を設定する

前景を設定する

タイムラインの一番右にあるフレームは、前景として設定することができます。

テキストが描かれているフレームをタップして、「前景」のスイッチをONに設定します。

これで、体育館は背景として常に表示されるようになり、テキストは前景として常に表示されるようになります。

レイヤー構成

レイヤー構成

現在のレイヤー構成を表示しています。

レイヤーの階層を移動させると、フレームの位置も入れ変わってしまうので注意してください。

複数のレイヤーを一つのフレームに割り当てたい場合は、グループ化の機能を利用します(レイヤー名の部分を左から右にスワイプするとレイヤーを複数選択でき、ポップアップの右上に「グループ」ボタンが表示されます)。

④アニメーション再生の設定をする

アニメーションの設定

タイムラインの「設定」からは、アニメーションを再生したときの設定を行えます。

アニメーションの「再生」ボタンはタイムラインの左上にあります。

アニメーションの再生方法の設定

  • ループ
  • ピンポン
  • ワンショット

ループはアニメーションを再生した後、最初のフレームに戻って繰り返し再生します。

ピンポンはアニメーションを再生した後、最後のフレームから最初のフレームに向かって再生されます。

ワンショットを設定した場合、アニメーションを再生した後に繰り返しません。

アニメーションの再生方法が決まらない場合は、GIFアニメでよく見かける「ループ」に設定しておくのがオススメです。

アニメーションの速度の設定

「フレーム / 秒」のスライダーでは、1秒間に何枚のフレームを使用するかを設定します。

値を低くすると、1秒間に使用するフレーム数が少なくなります。

アニメーションは、ゆっくりカクついて動いているように見えます。

値を高くすると、1秒間に使用するフレーム数が多くなります。

アニメーションは、速く滑らかに見えます。

一般的なアニメーション作品では「24フレーム / 秒」に設定されることが多く、作例も「24フレーム / 秒」に設定しています。

動きをゆっくりにしたい方は、「12フレーム/ 秒」ぐらいに下げてみてもよいかもしれません。

⑤オニオンスキンで連続性のある絵を作る

オニオンスキンの設定

オニオンスキンとは、前後のフレームの絵を半透明に表示して、連続した絵を描きやすくする機能です。 オニオンスキンの設定

「オニオンスキンのフレーム」で設定したフレーム数だけ、前後の絵が表示されます。

現在は値を「1」に設定しているので、1フレーム前と1フレーム後の絵が半透明に表示されています。

不透明度とカラーは設定できるので、見やすい色に設定してみてください。

「メインフレームをブレンド」のスイッチをONにすると、現在のフレームの絵を透過させることができます。

前後からの動きが小さくて確認しづらいときに使用する機能です。

オニオンスキンを使って絵を描いていく

オニオンスキンを使って絵を描いてい

まずは、ボールが画面に入るフレーム、ボールが頂点に達するフレーム、ゴールに当たるフレームなど、キーとなるフレームの絵から描いていきましょう。

オニオンスキンの機能で前後のフレームのボールを表示させて、位置や大きさを確認しながら描いていきます。

その後は、更にキーフレームとキーフレームの間の絵を作るようにフレームを増やしていきます。

細部の描き込みは後回しにして、位置や大きさなどの大枠を一通り決めておくとスムーズに進められます。

⑥フレームオプションでタイミングを調整する

Procreateアニメーション12

各フレームの絵をタップするとポップアップが表示され、「保持する時間」の値を調節して、フレームを表示する長さを決めます。

「保持する時間」を1に設定すると、デフォルトの表示フレーム数に1が加算され、2フレーム分だけ同じ絵を表示することになります。

連続して物体が動く場合は、「保持する時間」に大体1~3の値を設定しておきましょう。

作例のボールの場合、ボールが画面に入り込む辺りでは動きを速く見せたいので「1」を設定して、途中からは「2」を設定しています。

⑦アニメーションの完成

ボールの軌道

奥に行くほどボールを小さくして、飛んでいくボールの軌道も歪んでいないことを確認します。

全てのフレームでボールの位置・大きさを決めた後に、バスケットボールの色と模様を描き込んで仕上げています。

アニメーションが完成したら、アニメーションをファイルに出力しましょう。

⑧アニメーションをファイルに出力する

GIFやMP4の形式で出力する

共有ボタン

画面左上のアクションボタンを押して、「共有」ボタンを押します。

下の方に「アニメーションGIF」や「アニメ―ションMP4」の項目があるので、お好みの形式を選択します。

出力時の設定をする

出力時の設定

「最大解像度」は、高画質で出力できますがファイルサイズが大きくなりがちです。

今回は、低画質でファイルサイズを抑えられる「ウェブ対応」の形式を選択しています。

画面右上の「書き出す」を押してファイルの保存場所を選択すると、アニメーションがファイルに出力されます。

出力されたアニメーションファイル

アニメ 出力時に「ウェブ対応」を設定したので、自動的にファイルサイズの小さいGIFファイルに出力されます。

Procreateの使い方を解説した記事

関連記事

こちらの記事では、Procreateの画面操作の基本的な使い方を解説しています。

アニメーション制作に入る前にツールの使い方を覚えたい方は、参考にしてみてください。

Procreateのイラスト制作を解説した動画

お絵描き講座「パルミー」は、オンラインで絵の描き方が学べるWebサイトです。

パルミーの月謝制講座「Procreateで描く!キャラクターイラスト講座」では、初心者の方向けにProcreateを用いたイラスト制作の手順を動画で詳しく解説しています。

関連講座
  • Procreateの基礎知識やレイヤー機能の解説
  • Procreateの環境設定やブラシ紹介
  • イラストのラフを描く工程
  • イラストの線画を描く工程
  • イラストの色塗りの工程

Procreateの使い方を基本から習得することができます。

「Procreateで描く!キャラクターイラスト講座」でイラスト制作の方法を学んで、Procreateを使いこなしてみてください。

クリスタでチャレンジ!厚塗り風イラスト講座

厚塗りのエッセンスを取り入れた「厚塗り風」イラストの製作工程を実演を交えて解説します。
厚塗りイラストに興味がある方、情報量の多い絵を描きたい方にオススメ!

詳細はこちら >

クリスタでチャレンジ!厚塗り風イラスト講座

厚塗りのエッセンスを取り入れた「厚塗り風」イラストの製作工程を実演を交えて解説します。
厚塗りイラストに興味がある方、情報量の多い絵を描きたい方にオススメ!

詳細はこちら >

まとめ

Procreateを使ったアニメーションの作り方の解説でした。

Procreateはイラスト制作だけでなく、アニメーション制作にも便利な機能が搭載されています。

また、アニメーションの制作に特化したProcreate Dreamsもリリース予定です。

iPadをお持ちの方は、ProcreateやProcreate Dreamsを使ってみてください。

関連講座

お絵描きのスタートはここから!超・初心者向けのイラスト入門講座!

なぞり描きお手本つき!
線の引き方練習から、最終目標のバストアップ(胸から上)の絵の描き方まで、分かりやすく解説♪
今なら無料お試し実施中!!

詳細はこちら >

カラーのキャラクターイラストを完成させてみよう!

アタリ〜ラフ〜線画〜色塗り〜仕上げの手順とポイントを、初心者にもわかりやすく実演します♪
今なら無料お試し実施中!!

詳細はこちら >

立体感のある頭を描こう!

正しく頭の立体構造を理解して、アタリの取り方を知ることで
平面的な顔を卒業しましょう!
\ 7日間の無料お試し実施中 /

詳細はこちら >

意外と知らない!ラフの描き方講座

「ラフの時は良い絵に見えたのに、線画にしたら微妙……」 そんなふうに思ったことはありませんか? この講座では、そんなよくある問題を解決します!
7日間の無料お試しで体験できます!

詳細はこちら >
記事の先頭に
もどる
記事の先頭にもどる
22 620 174

×