MENU

【ぬるぬる4作例】Canva動画編集でモーショングラフィックス風アニメーションの作り方

Canvaアニメーションサムネ

この記事では、以下4つのアニメーションの作り方をご紹介します。
Canvaの無料版機能で作成可能です。

Canva モーショングラフィックス
目次

Canvaの動画編集でできること

動画編集に挑戦したいけど、難しそう…と感じていませんか?

Canvaでは、動画のカット編集やテロップ作成に加え、テキストやイラスト素材に簡単なアニメーションを付けることができます。直感操作で動画作成ができ、初心者でも動画編集のやり方を掴みやすいのが魅力です。

ただしCanvaは細かい調整が苦手で、Adobe製品の「After Effect」で作るような高度なモーショングラフィックスを完全再現するのは難しいです。

とはいえ、アニメーションの組み合わせ次第でそれっぽく見せる工夫は可能なので、今回はオリジナルで作成したアニメーション動画の作り方をご紹介します。

Canvaアニメーション動画の作例

具体的にCanvaでどんなアニメーション動画が作れるか気になる方は、以下の動画を参考にしてください。
過去にCanvaのみで作ったサービス紹介動画です。

バーコードピッキングシステム サービス紹介動画(2:30)

BtoB ECサイト構築サービス サービス紹介動画(3:06)

ふくおかクリエイティブでは、動画制作サービスを提供しております。
動画制作のご相談はこちら

アニメーション4選の作り方

Canva 見出しアニメーション
Canva 見出し風アニメーション
矢印アニメーションの作り方
Canva ズームアニメーション

はじめに…
アニメーション作成の手順では、動画の新規プロジェクト作成手順素材にアニメーションを適用する手順を割愛しています。
※やり方が分かる方は読み飛ばしてください。

🔰動画の新規プロジェクト作成手順🔰

Canva動画の新規プロジェクト作成手順

①Canvaのホームから「動画」をクリックする

Canva動画の新規プロジェクト作成手順

②動画のサイズを選ぶ。
 手順では「YouTube動画(横)」を選択しています。

新規プロジェクト作成完了!

左のメニューバーから、イラストやテキストの追加ができます。
動画のタイミング調整、カット編集などは下のタイムラインパネルからできます。

🔰素材にアニメーションを適用する手順🔰

Canva アニメーションの付け方

①素材をクリックする

②上部の「アニメーション」をクリックする

Canva アニメーションの付け方

③左部の「アニメーション」から各アニメーションを選ぶ

簡単!見出し風アニメーションの作り方

Canva モーショングラフィックス

動画の始まりや見出しなどに使えるアニメーションの作り方をご紹介!

ぽよんっとした動きがお気に入りです。

STEP
素材を配置する
Canva 見出しアニメーションの作り方

以下、お好みで素材を配置してください。

・図形の円形 
 ※私はグラデーションの枠線を付けてます

・イラスト(みかん)
・テキスト

STEP
素材にアニメーションを適用する
Canva 見出しアニメーションの作り方

←説明画像はクリックで拡大できます。

①円形にアニメーション「ポップ」を適用する

②イラストにアニメーション「ベースライン」を適用する

③テキストにアニメーション「バウンス」を適用する

完成!

無料版のCanvaでは、アニメーションの速度や強度を自由に調整できません。
有料版の方は、お好みで調整してください。

超簡単!見出し・テロップアニメーションの作り方

Canva モーショングラフィックス

お次は、見出しや重要ポイントに使えそうなアニメーションの作り方をご紹介!

使いどころが多く、重宝してます。

STEP
素材を配置する
Canva アニメーションの作り方

以下、お好みで素材を配置してください。

・図形の長方形
 ※私はグラデーションの枠線を付けてます

・テキスト

STEP
素材にアニメーションを適用する
Canva アニメーションの作り方

説明画像はクリックで拡大できます

①長方形にアニメーション「ワイプ」を適用する

②テキストにアニメーション「バースト」を適用する

完成!

無料版のCanvaでは、アニメーションの速度や強度を自由に調整できません。
有料版の方は、お好みで調整してください。

見出し・矢印アニメーションの作り方

Canva 矢印アニメーション

手順を説明する際の見出しに使えそうなアニメーションの作り方をご紹介!

矢印のみのアニメーション活用も◎

STEP
素材を配置する
Canva 矢印アニメーションの作り方

以下、お好みで素材を配置してください。

・図形の矢印

・テキスト

STEP
素材にアニメーションを適用する
Canva 矢印アニメーションの作り方

説明画像はクリックで拡大できます。

①図形の矢印にアニメーション「ワイプ」を適用する。

②テキストにアニメーション「ブロック」を適用する。

完成!

無料版のCanvaでは、アニメーションの速度や強度を自由に調整できません。
有料版の方は、お好みで調整してください。

脱初心者!ズームアニメーションの作り方

イラストがぽよんと出現し、ズームするアニメーションの作り方をご紹介!

こちらはやや難易度上がりますが、マスターすれば応用していろいろ活用できます。

STEP
素材と空白を配置する
Canva ズームアニメーションのやり方

説明画像はクリックで拡大できます

【1】タイムラインに空白を配置する。
 ①タイムライン上の「+」をクリック
 ②「空白」をクリック

【2】空白の長さを1秒にする。

Canva ズームアニメーションのやり方

【3】お好みのイラスト(みかん)を配置し、長さを1秒にする。

Canva ズームアニメーションのやり方

【4】イラストと空白のカットをもう1つ作る

STEP
イラストにアニメーションを適用する
Canva ズームアニメーションのやり方

1カット目のイラストにアニメーション「ポップ」を適用する。

Canva ズームアニメーションのやり方

2カット目のイラストのサイズを1カット目より大きくする。

STEP
切り替え(トランジション)を適用する
Canva ズームアニメーションの作り方

①1カット目と2カット目の間にカーソルを合わせてクリックし、(→切り替えマークが出現)
切り替えマークをクリックする。


②トランジション「マッチ&ムーブ」を適用する。

完成!

無料版のCanvaでは、アニメーションの速度や強度を自由に調整できません。
有料版の方は、お好みで調整してください。

まとめ

今回は、Canvaを使ってモーショングラフィックスのようなアニメーションの作り方をご紹介しました。

SNS投稿やサービス紹介動画、社内資料など、さまざまなシーンで活用できるため、ぜひ今回ご紹介した手順を参考に、Canvaアニメーションを取り入れてみてください。

また、作成した動画に無料でAIナレーションを付ける方法も下記ブログでご紹介しているので、併せてご覧ください。

ふくおかクリエイティブでは、動画制作サービスをご提供しています。
「コストを抑えて動画を作りたい」、「自社サービスの紹介動画を作りたい」などお客様のご要望にお応えします。
まずはお気軽にご相談ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

IT企業に勤めるデザイナー。
主にデザインや動画制作、マーケティング・データ分析を行っています。

梅のお菓子が大好きです。

目次