見出し画像

Canvaのデザインをアニメーション化する方法

LottieFiles Japan 公式note

あなたは中小企業の経営者、あるいはマーケティング担当者で、グラフィックデザイナーのチームを編成するリソースがないのではないでしょうか？

それなら、Canvaを使ったことがあるだろう。Canvaは、ソーシャルメディアの投稿、ポスター、ウェブサイト、プレゼンテーション、ホワイトボードの共同スペースなど、あらゆる種類のデザイン資料を、デザインスキルがなくても簡単に作成できる無料のオンラインプラットフォームです。

しかし、Canvaのデザインは静的なものだけではありません。Canvaにアニメーションを追加して、デザインをアップグレードする方法をご紹介します！

なぜCanvaのデザインをアニメーション化するのか？

2023年2月、Canvaのプラットフォームで作成されたデザイン数は150億件にのぼり、毎秒200件以上の新しいデザインが作成されていると報告されました。この膨大なクリエイティビティの海の中で、どうすればあなたのデザインを上位に表示させることができるでしょうか？解決策は、アニメーションのような動きの力です。アニメーションの画像は目を引くだけでなく、静止画像よりも長く印象に残ります。

アニメーションの方法

アニメーションには、GIFやLottieなどいくつかの方法があります。GIFは楽しく生き生きとしたアニメーションですが、Lottieはファイルサイズの削減やカスタマイズ性に優れており、魅力的で効率的なデザインを作成するのに最適な選択肢です。

Canvaのアニメーションで何ができる？

アニメーションは、ほとんどすべてのデザインに生命を吹き込み、その魅力とエンゲージメントを高めます。Canvaの強力なVisual Suiteを使えば、自由に使える包括的なプラットフォーム群を手に入れることができます。モーションデザインを取り入れることで、そのインパクトをさらに増幅させることができます。

ビジュアルを作るだけでなく、それらを動かし、共鳴させ、より効果的に伝えることが重要なのです。モーションのパワーを吹き込むことができる：

  • LinkedIn、Facebook、Instagram、Twitterなどのソーシャルメディア

  • オンライン広告

  • プレゼンテーション

  • インフォグラフィックス

  • ビデオや写真

  • ウェブサイトのデザイン

  • モバイルアプリのプロトタイプ

  • 会社イベント、チャリティーディナー、お祭りなどのイベント招待

Canvaのデザインに使える無料のアニメーションはどこで手に入りますか？

Canvaでは、デザインに追加できる独自のアニメーション要素を提供しています。すべてのライブラリーにアクセスするには、Canva Proのサブスクリプションが必要です。

LottieFilesは、あなたのデザインニーズに合わせて、すぐに使える10万以上のアニメーションを無料で提供しています。Canvaを使用する際にLottieFilesをお勧めする理由は以下の通りです：

豊富なアニメーションライブラリ - LottieFilesは、無料で使える世界最大級のアニメーションコレクションを持っています。ユーザーインターフェイス（UI）要素、キャラクター、アイコンのアニメーションなど、Lottieコミュニティによって作成された大量の無料アニメーションが見つかります。テーマやスタイル、ユースケースやターゲットにしている業界に関係なく、Lottieのアニメーションがぴったり合う可能性があります。

カスタマイズ可能 - 色、スピード、サイズなどをカスタマイズできるので、あなたのブランドのためにカスタムメイドされたようなアニメーションを手に入れることができます。

無許可で使用可能 - LottieFilesで公開されているアニメーションはすべて無料で使用できます。また、これらのアニメーションを使用する際、帰属表示をする必要はありません（していただけるとありがたいですが！）。

Explore free animations　https://lottiefiles.com/featured

CanvaでLottieのアニメーションを追加する方法

さあ、ここからが魔法の始まりです。これが楽しくてエキサイティングなところです。新しく登場したLottieFiles for Canvaアプリを使えば、Lottieの豊富なライブラリにアクセスできるだけでなく、Canva内であなただけのアニメーションやチームアニメーションも作成できます。

複数のタブを操作してダウンロードし、Canvaにアップロードする時代は終わりました。すべてがCanvaの中にあり、すぐに挿入できます。では、手順を説明しましょう。

１）LottieFiles for Canvaをインストールする。
プロジェクトの左側の検索バーに "LottieFiles "と入力すると、アプリが表示されます。そして

  • LottieFilesをクリックし、使用ボタンを押します。

  • LottieFilesにつながるはずです。アカウントをお持ちでない場合は、サインアップしてください。

  • LottieFiles for Canvaへのアクセス許可を求めるページがポップアップ表示されます。アクセス許可をクリックします。

  • LottieFilesアプリがインストールされると、Canvaのエディターパネル左側に表示されます。使いたいときにクリックしてください。

2) アニメーションを選択する
LottieFiles for Canvaアプリをインストールしたら、メニューバーのLottieFilesロゴアイコンをクリックします。2つのオプションが表示されます：

  • Discoverタブ： 発見]タブ：Lottieライブラリにある、すぐに使える無料公開アニメーションにアクセスできます。100,000以上のアニメーションから選ぶことができ、特集、人気、最近使用されたカテゴリーに整理されているので、ナビゲーションも簡単です。

ワー クスペース： プライベートまたはチームのアニメーション・ワークスペースに移動します。プロジェクトフォルダやコレクションに保存されているアニメーションを選択してください。

3) Lottieアニメーションをカスタマイズする

Canvaは年々大きく進化し、現在ではLottieアニメーション（Lottie JSON）ファイルにネイティブ対応しています。これにより、デザインプロセスが簡素化されるだけでなく、アニメーションの最適なパフォーマンスと互換性が保証されます。この軽量なアニメーションを簡単にエクスポートし、Canva内で好みに合わせてカスタマイズする方法を見てみましょう。

a) カラーパレットを使ったカスタマイズ
CanvaにLottieFilesアプリが統合されたことで、アニメーションの色調整が簡単になりました。

デザイン機能により、すべてのアニメーションをあなたのブランドアイデンティティに合わせて事前にカスタマイズすることができます。これにより、ユーザーは即座にブランドカラーやデザイナーのカラーパレットでアニメーションを見ることができます。方法は以下の通りです：

・カラーパレットアイコンをクリックします。

・既存のカラーパレットから選択するか、新しいカスタムパレットを作成します。

・必要なアニメーションを選択し、デザインに使用する。

b) リサイズ、回転、移動したい場合

・希望のアニメーションをCanvaのデザインに挿入して配置します。

・アニメーションを移動するには、クリックしてお好きな場所に挿入します。

・サイズを変更するには、アニメーションの端をクリックし、要件に応じて調整します。

回転させるには、回転アイコンをつかみ、希望の角度にひねる。

c) より複雑なカスタマイズが必要な場合

・LottieFilesのウェブサイトで、修正したいアニメーションを選択します。

・edit animationボタンをクリックしてください。レイヤー、サイズ、フレームレート、スピード、色などを調整することができます。Lottie Editorを使ったアニメーションの編集については、こちらの記事をご覧ください。

・編集が終わったら、アニメーションを新しいコピーとして保存するか、オリジナルを上書き保存するかを選択してください。これでCanvaのプライベートアニメーションダッシュボードに保存されます。

・Canvaに戻って、LottieFiles for Canvaアプリからワークスペースに移動し、新しく編集したアニメーションを選択します。

IconScoutを使ってCanvaにLottieのアニメーションを追加する方法

IconScout for Canvaを使って、Canvaでアニメーションを作成することもできます。ただし、現在のところアニメーションや背景色のカスタマイズには対応していませんのでご注意ください。

  • IconScout for Canvaをインストールします。

  • Canvaのデザインにアクセスします。

  • 左側のパネルにあるIconScoutアイコンをクリックします。

  • Lottie Animationsをクリックします。

  • Canvaのデザインにアニメーションを挿入します。

  • アニメーションのトリミング、位置変更、サイズ変更ができます。

Lottieアニメーション以外にも、IconScout for Canvaアプリではアイコン、イラスト、3Dイラストなどのデザインアセットを追加することができます。

CanvaのデザインをアニメーションGIFや動画としてエクスポートする方法

デザインの準備ができたら、CanvaでアニメーションGIFやビデオを作成するにはどうすればよいでしょうか？

・Canvaの右上にあるShareをクリックします。

・Downloadをクリック

  • ドロップダウンメニューで、MP4ビデオまたはGIFを選択

  • ダウンロードをクリック

これで完成です！作成したアニメーションGIFまたはMP4デザインは、ソーシャルメディア、ウェブサイト、Eメールなど、これらのファイル形式に対応しているメディアで使用できます。

エクスポートせずにCanva内でアニメーションデザインプロジェクトを使用

Canvaでは、アニメーションデザインのエクスポートは必ずしも必要ではありません。プロジェクトの内容や読者に応じて、エクスポートすることも、Canvaのプラットフォームから直接表示することもできます。これにより、便利でシームレスな方法で、あなたのアニメーションをそのままの形で見せることができます。例えば、以下のような場面が考えられます：

プレゼンテーション： Canvaに内蔵されているプレゼンテーションスライド形式を使えば、エクスポートすることなく、アニメーションの輝きをそのままにデザインを見せることができます。

ウェブサイト： Canvaを使ってウェブサイトを公開するのは簡単で、他のオンラインデザインプラットフォームと同じような体験ができます。ウェブサイトを公開するだけで、Lottieのアニメーションが生き生きと動き出します！

Canvaでアニメーションの旅を始めよう

以上です！このガイドを読めば、LottieFiles for CanvaとIconScout for Canvaを使って、静的なデザインを魅力的なアニメーションに変換する準備ができました。

この2つのツールを使えば、誰でも、誰でもアニメーションを作成することができます！ ソーシャルメディア、ウェブサイト、プレゼンテーションなどのアニメーションに飛び込むとき、覚えておいてください：重要なのは、実験し、探求し、そして最も重要なことは、楽しむことです！

Explore LottieFiles for Canva　https://lottiefiles.com/plugins/canva

今すぐLottieFiles for Canvaをインストールする

https://lottiefiles.com/LottieFiles

引用元：https://lottiefiles.com/blog/tips-and-tutorials/how-to-create-animated-canva-designs

この記事が気に入ったらサポートをしてみませんか？