Filmora
Filmora - AI動画編集アプリ
強力でシンプルなビデオ編集アプリ
入手

アニメーション動画作り方

Filmoraのアニメーション動画メーカーで一気に作成
  • アニメ文字・モーショングラフィック・ストップモーションなど多彩に対応
  • AI画像生成でキャラ&背景を自動作成、演出もスムーズ
  • YouTube・SNS向け比率調整&共有もワンクリック
  • 初心者歓迎、非破壊編集で安心。今日からアニメ制作スタート
無料で試してみる

アニメーション動画の作り方完全ガイド!Filmoraのキーフレーム機能でプロ並みの動画を制作

fukuda
fukuda リリース日: Nov 11, 25, 更新日: Nov 11, 25

「アニメーション付きの動画を作りたいけど、手順が複雑そう……」「動画ソフトは使い方が難しいのでは?」とお悩みの方は少なくありません。ですが動画編集ソフトFilmora(フィモーラ)を使えば、動画制作が初めてでも、思い通りのアニメーション付き動画を簡単に作れるんです。この記事では、アニメーション作りの要となる「キーフレーム」の基本と、Filmoraを使ってPC・スマホからアニメーション動画を作る方法をお伝えします。

Filmoraアニメーション 動画メーカー

目次
  1. キーフレームとは?アニメーション動画作りの必須知識と、各ソフトでの設定方法を解説
  2. アニメーション動画の制作にはFilmoraがおすすめ!使い方・使い方もカンタン
  3. PC/スマホで実践!キーフレームを使ったアニメーション動画の作り方【Filmora 完全ステップガイド】
  4. アニメーション動画の作り方に関するよくある質問(FAQ)

キーフレームとは?アニメーション動画作りの必須知識と、各ソフトでの設定方法を解説

キーフレームの概要

まず、アニメーション動画を作るうえで欠かせない「キーフレーム」について説明します。キーフレームを簡単にいうと、動きが切り替わるポイントとなる瞬間。実際の動画作りでは、アニメーションの「開始点」「終了点」のそれぞれでキーフレームを設定します。するとその途中の動きは、動画編集ソフトが自動的に作成・補間してくれるのです。

キーフレームの概要

キーフレームで実現できる4大アニメーション

キーフレームを使いこなすことで、どんなアニメーションを作れるのか、実例を交えて見ていきましょう。

オブジェクトの移動

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

車のはじめの位置でキーフレームを設定した後、動かし終えた位置で再度キーフレームを設定します。すると、途中の動きはソフトウェアがなめらかに調整してくれます。

オブジェクトの拡大・縮小(スケーリング)

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

最初の大きさを調整してキーフレームを設定し、拡大・縮小を終えたいタイミングで再度キーフレームを設定します。キーフレームを追加すれば、変化のテンポを変化させたり、拡大・縮小を繰り返したりすることも可能です。

オブジェクトの回転

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

最初の角度(0°)を指定してキーフレームを設定し、回転を終えたいタイミングで再び角度(360°)を指定し、キーフレームを設定します。終わりのキーフレームで「720°」を指定すれば、オブジェクトは2回転します。

フェード(不透明度)の変化

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

2つのキーフレームを設定して、それぞれ異なる不透明度を指定すれば、徐々にオブジェクトが浮かび上がる、あるいは消えていく効果を生み出せます。シーンの切り替えなど、応用次第で幅広い活用が可能です。

FilmoraAIで3D/2Dアニメーション動画を生成する

アニメーション動画の制作にはFilmoraがおすすめ!使い方・使い方もカンタン

キーフレームを設定できる動画編集ソフトは数多くありますが、初めてアニメーション動画を作るなら「Filmora(フィモーラ)」がイチオシ。ここではその理由とFilmoraが備えるさまざまな機能を、アニメーション動画作りの観点から紹介します。

Filmoraアニメーションプロンプト

動画化プロンプト例【Filmora】: スタジオジブリ作品風のアニメ少女が髪をなびかせ、桜の木の下に座っている。古い本を読む少女の周りを、ピンクの花びらが舞っている。木の幹の後ろから不思議な生き物が顔を出すと、少女は戸惑った後、目を輝かせる。柔らかい水彩で、穏やかな動きのアニメーション。

初心者にFilmoraをおすすめする3つの理由

1. ほとんどクリック・タップだけで使える、直感的なインターフェース

Filmora-アニメーション動画の制作

Filmoraの特徴は、なんといっても操作がわかりやすいこと。動画制作の初心者でもわかりやすいインターフェースで、あっという間に本格的な動画が仕上がります。名前を聞いただけではイメージしにくいエフェクト(視覚効果)やトランジション(画面遷移)にもプレビューが付いているため、理想の効果をすばやく見つけられるでしょう。

2. 複雑な設定いらずで、各種プラットフォームに最適化

Filmora-アニメーション動画の制作

YouTube、Instagram、TikTokなど、プラットフォームによって画面の比率はさまざま。Filmoraならそれらに応じたアスペクト比があらかじめ用意されているので、1クリックで適切な設定が完了します。さらにAI機能により、横長動画をあっという間に縦長ショート動画に変換することも可能です。

関係記事: クロスプラットフォーム対応のおすすめ動画編集アプリ・ソフト6選

Filmora-アニメーション動画の制作

3. デスクトップ版・モバイル版の両方があり、いつでもどこでも動画を編集可能

Filmoraには、Windows/Macで使えるデスクトップ版と、Android/iOSで使えるモバイル版があります。外出先で撮った動画をモバイル版で素早く編集・共有したり、デスクトップ版でじっくり思い通りの編集を加えたり。いつでもどこでも、自由な動画編集がかないます。

アニメーション動画作りに役立つ!Filmoraの便利機能

ここでは、アニメーション動画を作るうえで特に便利な、Filmoraの機能を紹介します。

230万点以上のロイヤリティフリー素材がそろうアセットセンター

Filmora-アニメーション動画の制作

動画作りには、すてきな画像・動画・音楽などが欠かせません。Filmoraからシームレスにアクセスできるアセットセンターには、それらがすべてそろっています。Vlog、ゲーム配信、映像作品から企業向けのプロモーション素材まで、幅広いシーンに対応。ロイヤリティフリーなので商用利用も安心です。

画像・音楽・ステッカーなどを自由自在に作り出すAI生成機能

Filmora-アニメーション動画の制作

動画にもっとオリジナリティを加えたいときは、AI生成機能を試してみましょう。画像・音楽や効果音、アクセントに使えるステッカーなど、幅広いものが手に入ります。さらにAI機能「文字自動起こし」や「AI翻訳」を併用すれば、字幕付き・多言語対応の動画もあっという間にできてしまいます。

Filmoraの新機能テキストから動画生成!Google Veo 3で高品質動画を作ろう!

多様な動きを1アクションで設定できるアニメーション機能

Filmora-アニメーション動画の制作

動画制作に慣れていないうちは、アニメーションでどんな動きが付けられるのかもイメージしにくいもの。そこで役立つのが、「アニメーションプリセット」です。タイムライン上の動画や画像を選んで、プロパティパネルの「ビデオ」>「アニメーション」を順に選んだら、使いたいアニメーションをダブルクリックするだけ。キーフレームと動きを自動的に付けてくれます。

PC/スマホで実践!キーフレームを使ったアニメーション動画の作り方【Filmora 完全ステップガイド】

Filmoraの特徴がわかったところで、いよいよ実際にアニメーション動画を作っていきましょう。1ステップずつ具体的に操作方法をお伝えするので、動画制作が初めての方もぜひチャレンジしてみてください。

デスクトップ版Filmoraでアニメーション動画を作る手順

例として、下記のようにイラストがズームアップするアニメーション動画を作成します。

Filmora-アニメーション動画の制作

Filmoraを起動し、「新しいプロジェクト」をクリックする

「新しいプロジェクト」をクリック

「インポート」をクリックして、画像・動画・音楽などをインポートする

「インポート」をクリック

インポートした素材をタイムライン上にドラッグ&ドロップする

素材をタイムライン上にドラッグ&ドロップ

Filmoraのストック素材・エフェクト・ステッカーなども、同様にドラッグ&ドロップで追加できます。

アニメーションを開始したい位置まで、タイムライン上の再生ヘッドを移動し、プロパティパネルから開始時点の設定を変更する。

その後、項目右側にある、ひし形の「キーフレームを追加」アイコンをクリックする

「キーフレームを追加」アイコンをクリック

これでアニメーション開始時点のキーフレームが設定できました。

今回は、開始時点のスケール(拡大縮小率)をX・Yともに「10%」にしています。

アニメーションを終了したい位置まで、タイムライン上の再生ヘッドを移動し、同様に設定を変更する

キーフレームを設定

キーフレームは自動的に設定されます。

今回は、終了時点のスケールをX・Yともに「150%」に設定しました。

動画を再生し、思い通りの結果になっていることを確認できたら、キーフレームを使ったアニメーション動画作成は完了です! 

モバイル版Filmoraでアニメーション動画を作る手順

モバイル版Filmoraでも、同様にアニメーション動画を作成できます。

Filmoraを起動し、「新しいプロジェクト」をタップする

「新しいプロジェクト」をタップ

デバイス内や「ストック」から、使いたい画像・動画を選んでインポートする

画像・動画をインポート

タイムラインの動画・画像クリップをタップし、再生ヘッドをアニメーションを開始したい位置まで動かす

アニメーションを動かす

画面中央右のひし形アイコンをクリックし、アニメーション開始のキーフレームを設定する。

合わせてオブジェクトのズーム・移動など、アニメーション開始時点の設定を変更する

アニメーション開始時点の設定を変更

再生ヘッドをアニメーション終了位置まで動かし、ステップ4と同じように設定を変更する

キーフレームを設定

キーフレームは自動的に設定されます。動画を再生し、思い通りの結果になっていることを確認できたら、キーフレームを使ったアニメーション動画作りは完了です!

アニメーション動画作り

iOS版ダウンロード Andriod版ダウンロード

Filmora mobile版|直感的な操作性と豊富な機能

アニメーション動画の作り方に関するよくある質問(FAQ)

Q:キーフレームとモーショントラッキングの違いは何ですか?

キーフレームとモーショントラッキングは、どちらも動画編集を半自動化してくれる機能です。キーフレームは、この記事で説明した通り、アニメーションのポイントとなるフレームを指します。アニメーションの開始点・終了点にそれぞれキーフレームを設定することで、その間の動きは編集ソフトが自動的に補間してくれます。

また、モーショントラッキングは、動画内のオブジェクトを自動的に追いかける機能です。たとえば、映り込んだ人の顔にモザイクをかけたいときにモーショントラッキングを使えば、フレームごとに手動でモザイク範囲を指定しなくても、人の動きに合わせてモザイク範囲が自動的に調整されます。

Q:無料版のFilmoraでも十分なアニメーション動画は作れますか?

はい! デスクトップ版・モバイル版を問わず、Filmoraは無料版でも充実した機能を備え、高クオリティなアニメーション動画を作れます。ただしデスクトップ版Filmoraでは、無料体験版をお使いの場合、動画のエクスポート時にはウォーターマーク(透かし)が入ります。

Q:スマートフォンだけでも、キーフレームを使ったアニメーション動画は作れますか?

はい、モバイル版のFilmoraを使えば、スマートフォンだけでキーフレームを使ったアニメーション動画を作れます! タップ・スワイプ・ピンチイン/アウトといったなじみ深い操作で編集できるのがモバイル版Filmoraの強み。スマートフォンで撮った写真や動画を、スピーディーにアニメーション動画にできます。

Q:人気のアニメーション動画のスタイルには、どんなものがありますか?

特にショート動画では、視聴者にインパクトを与えるアニメーションがよく使われます。おすすめのアニメーションスタイルを、動画の種類別にご紹介します。

  • 旅行系Vlog:シーンの切り替えにフェード(透明度)を活用することで、動画がより自然で洗練された印象に仕上がります。
  • おもしろ動画・配信切り抜き:拡大・縮小を繰り返したり、オブジェクトや画面を回転させたりと、ダイナミックな動きを加えれば、視聴者に飽きずに楽しんでもらえます。
  • 企業の製品プロモーション:製品の細部をゆっくりとズームアップして見せることで、製品を印象付けるとともに高級感を演出できます。

まとめ

この記事では、アニメーション動画を作るには欠かせない「キーフレーム」について説明しました。始めと終わりを設定するだけで、間の動きを自動的に補ってくれるキーフレーム機能を使いこなせば、本格的な見た目の動画をカンタンに作れます。

動画編集ソフトFilmoraなら、パソコンからでもスマホからでも、キーフレームを使ったアニメーション動画を制作可能。ぜひお気に入りの画像や動画を題材に、一味も二味も違う動画を作ってみてくださいね!

役に立ちましたか?コメントしましょう!

登録 / ログイン してからコメントを書いてください
user
{{item.name || userName}}
{{item.time}}
{{item.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください
user
{{item1.type == 2 ? authName : item1.name ? item1.name : userName}}
{{item1.time}}
@{{item1.reply_to_type == 2 ? authName : item1.reply_to_name ? item1.reply_to_name : userName}} {{item1.message}}
{{item.likes}} 返信をキャンセルする 返信
登録 / ログイン してからコメントを書いてください
fukuda
fukuda Nov 11, 25
記事をシェアする: