アメブロ ツール・ガジェット

Canvaで作る簡単GIFアニメーション/ブログにも貼れる動くバナー画像の作り方

2021年6月21日

須崎純一
こんにちは、須崎純一(ロッキー)です。
プロフィールはコチラ

今日はCanvaでGIFアニメーションバナーの作成方法を具体的に解説していきます。

Canvaで作るGIFアニメーション

GIFアニメーションとは

GIFアニメーションとは、画像をコマ割りして連続再生した「動く静止画像」です。

もりのゆかアイコン(笑)
もりのゆか
パラパラ漫画みたいなイメージですね!

GIF動画とは

パラパラ漫画のように一枚一枚画像を作成し、それをつなぎ合わせることで動画になります。

今回は画像を一枚一枚作成してつなぎ合わせるという方法はとても手間なので、Canvaを使って、GIFアニメーションを使ったブログ用バナーの作成方法を3ステップでお伝えしていきます。

Canvaとは?

Canvaは、オンラインで使える無料のグラフィックデザインツールです。

Canva

パソコンでもスマートフォンでもデザインが可能!素人でも素敵な画像が作成できちゃうオススメのツールです。

canvaを始める(プレミアム素材特典つき)

GIFアニメーションバナーの作成方法

それでは早速GIFアニメーションを使ったバナーを作っていきましょう。

step
1
Canvaを開き「デザインを作成」をクリック

Canvaを開き、画面の右上「デザインを作成」→「カスタムサイズ」をクリックして作成したいバナーのサイズを入力します。

Canvaを開く

サイズを入力できたら「新しいデザイン」をクリックして作成していきましょう。
(※ここでは「1200」×「300」で作成しています)

カスタムサイズ

step
2
使いたい素材を選ぶ

続いて、「素材」から自分の使いたい「素材を検索」していきます。

素材を検索する

例えば

  • 本に関するアニメーションを作りたいなら「本」
  • 人物のアニメーションが欲しかったら「人物」

など、色々検索してみましょう。

検索できたら、検索バーの右にあるアイコンから、アニメーションにチェック✔️を入れ、「絞り込む」をクリックし、アニメーションのみの素材に絞ります。

アニメーションで絞る

▼アニメーションのみの素材に絞られました▼

アニメーションのみの素材に絞り込み

ここから自分の気に入ったアニメーションを選択し、バナーを作成していきます。

テキストも自由に入力しよう

step
3
動画をダウンロードする

バナーが完成したらダウンロードしていきます。

画面右上の「ダウンロード」→「∨」をクリックして一覧を表示させます。その際、「MP4形式の動画」でダウンロードしないように注意しましょう。

MP4形式の動画でダウンロードしないようにする

バナーをダウンロード

一覧の一番下にある「GIF(短いクリップ、音声なし)」を選択しましょう。

GIF形式を選択

ファイルの種類が「GIF」になっていることを確認して、「ダウンロード」しましょう。

画像をダウンロード

▼これでGIFアニメーションのバナーが完成です▼

GIFアニメーションサンプル

canvaを始める(プレミアム素材特典つき)

まとめ

ワードプレスをはじめ、アメブロなどにもGIFアニメーションのバナーは使用できます。

もりのゆかアイコン(笑)
もりのゆか
動いてると、なんだかパッと目を引きますね
須崎純一
この他にも、GoogleやZOOMに関する記事などもありますので、ぜひご覧ください

>>Googleに関する記事はこちら

>>ZOOMに関する記事はこちら

YouTubeとVimeo
【2021年最新】YouTubeとVimeoの違い/動画配信サービスを徹底比較

続きを見る

無料で登録する

※登録特典あり!

  • この記事を書いた人

ロッキー

8年間で4社転職→社会不適合と自覚し逃げの起業→貯金をすり減らすも、FXで一発逆転を狙う→200万円の損失→経営塾で修行→起業コンサルデビュー→初クライアントさんが3ヶ月で月収7桁超え→月収8桁超えのクライアントを多数輩出→場所に制限がない「フーテンの寅さん生活」で全国を転々としてます。(本名:須崎純一)

-アメブロ, ツール・ガジェット

© 2021 脱サラダ