【簡単】Canvaで動くアニメーションも作れる!?やってみた!

canva

「Canvaは、動くアニメーションも作れるの?」

「アニメーションって難しそうだけど、初心者にもできる?」

と気になっているブログ初心者の人に向けて、ここでは次のことを解説します。

ここでわかること
  • デザインツール「Canva」で作ったアイキャッチ画像のできる過程
  • 「Canva」で作った画像を簡単にアニメーションにする方法

実際にアイキャッチ画像で使用した素材、中身を解体してご紹介しているので、ぜひ参考にしてみてください!

目次
PR

Canvaで作ったアイキャッチ画像のできる過程

アイキャッチ画像の完成図

こちらの記事»【ブログ初心者必見!】Canva ならオシャレでハイクオリティなアイキャッチ画像が無料で簡単に作れる!?で実際に使用しているアイキャッチ画像です。

canva

アイキャッチ画像を解体!

実際に使った素材と作成STEPをご紹介します。

STEP.1
ノートパソコン小の画面に映る画像を作成

1. 無料の素材・図形「四角」を使用。ノートパソコン小の画面に映る画像を作成。

2. 無料の素材・図形「ひし形」を使用。ノートパソコン小の影を作成。

STEP.2

1. 無料の素材「ノートパソコン」を使用。STEP.1で完成した画像をノートパソコン小の画面に配置

2. 「テキスト」を使って記事タイトルを作成

↓ ノートパソコン小

STEP.3
スクショを撮る

1. STEP.1〜2で完成した画像のスクショを撮る。Canvaにアップロード。

canva

STEP.4
ノートパソコン大・タブレット・スマホの画面に映る画像を配置。背景を作成

1. 無料の素材・フレーム「ノートパソコン」「タブレット」「スマホ」を使用。

2. ノートパソコン大の画面に、STEP.3で撮ったスクショを挿入

3. タブレット・スマホの画面も同様。

4. 無料の素材「グラデーション」を使用。色を変更。背景に配置。

↑ ノートパソコン大

補足
  • 今回、ノートパソコンは、ノートパソコン大=⦅フレーム⦆とノートパソコン小=⦅素材⦆で、フレーム⦆と⦅素材⦆で元が異なる素材を使用しています。同じでも問題ないです。
  • ⦅フレーム⦆の場合、ノートパソコンの画面サイズに調整する必要がありますが、⦅素材⦆の場合はドラッグ&ドロップするだけで自動配置してくれるので楽です。

STEP.5
完成
\できあがり/

canva

ふくうら
こんな感じのアイキャッチ画像が無料の素材を使うだけ簡単に作れます!

使った素材のまとめ

Canvaで動くアニメーションを作ってみよう!

やってみた【1】

ふくうら

さらに、Canvaでは無料で動くアニメーション機能が使えます!

ふくうら

方法はとても簡単!

アイキャッチ画像を解体!」STEP.1〜2で完成した画像にアニメーションをつけてみます。

STEP.1
「タンブル」をクリック!

canva

STEP.2
「ページのアニメーション」をクリック!

STEP.3
つけたいアニメーション「タンブル」をクリック!

ふくうら

たったこれだけ!

完成したアニメーションがこちら。

アニメーションの種類は、無料の範囲だと計16点あります。

アニメーションの時間も長くしたり短くしたり、調整が可能です!

やってみた【2】

当記事「【簡単】Canvaで動くアニメーションも作れる!?やってみた!」のアイキャッチ画像にも、アニメーションをつけてみました!

ふくうら

ぜひ色々試してみてくださいね!

サイトにアップする前は、動画の圧縮を行う

アイキャッチ画像と同じく、サイトにアップする前には、必ず動画の圧縮をしてくださいね。

動画はとくに重たいので必須です。

アプリのダウンロードや登録不要で使えます。

まとめ

無料で使えるグラフィックデザインツール「Canva/キャンバ」について、実際の「アイキャッチ画像に使用した素材」「動くアニメーション」をご紹介しました。

まとめ
  • Canvaで、無料の素材を使えば、ブログ初心者でもオシャレでハイクオリティなアイキャッチ画像が作れる!
  • Canvaなら、人目を引く動くアニメーションも無料で作れる

\無料トライアルを試してみる/

気になった人は、Canva Proの30日間の無料トライアルで使い勝手を試してみることをおすすめします!

Canvaを使って、簡単!オシャレなアイキャッチ画像を作成、読者の目を引くサイト作りを目指してみてくださいね!

「Canvaでオシャレなアイキャッチ画像の作ってみたい!」という人は、こちらの記事もおすすめです。

この記事が、みなさんのお役に立てたらうれしいです! ふくうら(@fkr099)でした。

ふくうら

シェアいただけると、とても励みになります!

canva

この記事が気に入ったら
フォローしてね!

シェアする
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ふくうらのアバター ふくうら フリーランスWebライター

「Webライターで叶える」
「自分を大切に、わたしらしい働き方を」

未経験・初心者×元会社員・内向型ライターのノウハウ・働き方などについて発信しています。

・元事務職OL、未経験・スキルなしからWebライターに転身。
・内向型・HSP(繊細さん)
・アパレル→事務職→ライター
・疲れたら猫を吸う人

メディア記事や企業サイト・LP文章、電子書籍、動画・絵本シナリオの執筆、取材を行うなど幅広く活動。人や商品、サービスの魅力を深掘りし、必要な情報をわかりやすく伝える文章を得意とする。

ポートフォリオ »
note »

お仕事ご依頼などのお問い合わせはこちら »

目次