【ロゴアニメーションの作り方】テンプレ使えば初心者でもプロっぽい?!

ロゴアニメーション

こんにちは。
ネット系フリーランサー mammina です。

ネット上のコンテンツは、文章が画像だけでなく、動画コンテンツが急増してますよね。

これだけ多いと、ただ YouTube 動画を公開するだけだと、なかなか集客やアクセスアップにはつながらないもの。

検索されやすいようにメタ情報をキッチリ入れても、ファンになってもらうには、やっぱり動画のクオリティが効いてきます。

そして、YouTube 動画では、何よりも冒頭が大事

まみーな
最初に数秒見てイケてないと、
飽きっぽい視聴者の方はすぐにいなくなってしまいます……

そこで、今回は……!

動画の最初のオープニングで、ロゴが動きながらチャンネル名をかっこよくコールされる「ロゴアニメーション」を格安の3,000円以内で作る方法を紹介します。動画の冒頭に数秒組み込むだけで一気に動画がクオリティアップしますよ。

ロゴアニメーションって、そもそも何?

よく CM の最初や最後などに、ロゴが動いたり、効果音が入ったりする映像がありますよね? あれを「ロゴアニメーション」と言います。「モーションロゴ」とも言ったりもします。

ロゴアニメーションのサンプル

実際に、実物を見てみた方がイメージが湧きやすいので、いくつか貼っておきますね!

ロゴアニメーション制作の相場

そもそも、ロゴアニメーションを作るのに、外注したら普通はいくらくらい費用が掛かるのでしょうか? 相場を調べてみました!

ロゴアニメーション制作の相場1

ロゴアニメーション制作の相場2

まみーな
「ロゴアニメーション」で検索しても
……あんまり出てこない(-。-)

ただ、数秒のロゴアニメーション制作の相場は数万円レベルだとわかりました……

でも、ここで朗報です! (私も調べていて気付いたのですが……)

テンプレートのようなものが販売されていて、その中の「ロゴ画像」や「テキスト」を差し替えるだけで、自分用のロゴアニメーションが出来てしまうらしいのです。

【制作事例】実際に自分でロゴアニメーションを制作してみました!

そこで、実際に私も作ってみました! まずは仕上がりから紹介します。

どうですか? はじめてにしては、結構かっこよくないですか?

初めてのアニメーション制作!初めてのAfterEffects!……でも、できた!

使ったソフトは、Photoshop (フォトショップ) で有名な、Adobe の映像編集ソフト AfterEffects (アフターエフェクト) です。

今回、初めて使ったソフトだったので使い方にちょっと手間取ったものの、制作時間はわずか10分! 5分でもできると思います。作った後に「レンダリング」という動画に書き出す「待ち時間」に 30分くらいかかりました。こっちの方が長かった……

まみーな
AfterEffects を持ってなくても、
1ヶ月間無料で試せる体験版が公開されているので、
まずは体験版を使ってアニメーションを作ってみるというのも、ひとつの手ですよ。

ロゴアニメーションを自分で作ってみた全手順【画像付き】

それでは、さっそく自分でロゴアニメーションを作る手順を紹介しています。はじめての方向けに、全手順に画像を付けておいたので参考にしてみてくださいね!

まみーな
私も初めてこのソフトに触ったけど、
サクッと出来ました。きっとあなたも大丈夫♪

動かしたいロゴを用意

私の場合は、これを使いました。

logo

このサイト、37min.com のサイトロゴですね。この時↓↓↓にカスタマイズして作ったものです。

WordPressテーマ「Simplicity」のカスタマイズしやすさに感動!使用5日目のレビュー公開
SEO 内部対策済の ワードプレス テーマ「Simplicity」を使い始めて5日目の私のレビュー。 このテンプレートはネットの知識ありなしを問わず、それぞれの段階でカスタマイズしやすいと判明。 実際に使用して感動したポイント8つをご紹介してます。現状のサイトのカスタマイズ内容も全て公開中。

あなたがロゴアニメーションを作ろうとされているなら、きっと元々ロゴはお持ちかと思いますが、なかったら作るか外注するかしてくださいませ。

外注の価格はピンキリですが、安く上げるならココナラで 500円〜 作ってもらえます。

映像販売サイト MotionElements.com で「ロゴアニメーション」テンプレートを購入

ここでの作業は、大きくわけて4ステップです。

  1. 映像購入サイト MotionElements.com にアクセス
  2. リストから使いたいロゴアニメーション映像を選ぶ
  3. テンプレートを決めたら購入する
  4. テンプレートをダウンロードする

順に見ていきましょう。

【ステップ1】映像販売サイト MotionElements.com にアクセス

今回、私は MotionElements というサイトを使いました。

MotionElements - ロイヤリティーフリー 動画素材マーケット、音楽、アフターエフェクト テンプレート

このサイトでロゴアニメーションのテンプレートは 1,000円台、2,000円台が多いです。だから、3,000円あれば、それなりのものが作れちゃいます。

まみーな
中には、650円というのもありましたよ!

MotionElements トップページ

購入していく過程で会員登録をすることになるので、まずは気に入るロゴアニメーションがあるか見てみましょう。

メニューから、[After Effects] – [ロゴアニメーション] をクリック

「ロゴアニメーション」カテゴリを選択

【ステップ2】リストから使いたいロゴアニメーション映像を選ぶ

「ロゴアニメーション映像のリスト」画面が表示されます。

このリスト画面でサムネイル画像にマウスを重ねると、アニメーションの動きのプレビューが見られます。

ロゴアニメーション映像リスト

ひとつ選んでクリックすると、「ロゴアニメーション映像の詳細」画面に移動します。

使いたいテンプレートを決める

【注意】購入前に、自分の要望にマッチしているか確認を!

購入前に、必ず、映像の下にあるスペック情報をチェックしてくださいね。

変更できると思っていたところが変更できなかったり、音楽や効果音付きだと思っていたのに入ってなかったら、ガッカリですからね……

スペック情報に注目

もしもあなたが、After Effects がはじめてなら、

  • 必要なプラグイン:いいえ

となっているものを選ぶ方が余計なことを考える必要がなくて安心です。

まみーな
「プラグイン」とは After Effects に
機能追加するミニプログラムのようなものです。

「テキスト置換スポット」と「ロゴ置換スポット」は、テキストやロゴをいくつ差し替えられるか、です。

  • テキスト置換スポット: 1
  • ロゴ置換スポット: 1

この場合だと「ひとつずつ差し替えられる」という意味になります。

【ステップ3】テンプレートを決めたら購入する

「映像」を購入するとはいえ、購入方法は普通のネットショップと変わらないので、難しいことはありません。

まずは、選んだロゴアニメーションをカートに追加します。

カートに追加

カートに移動して、「お支払い」をクリックします。

カートに移動

自動で [会員登録] 画面が開くので、メールアドレスを入力します。
ここでメールが届くのですが、……とりあえず放置して先に進みます。

会員登録メッセージ

続いてカード情報を入力します。

カード情報入力

購入完了です。

購入完了

【ステップ4】テンプレートをダウンロードする

続いて、テンプレートをダウンロードします。これでロゴアニメーション制作に必要なテンプレートが手に入りました!

テンプレートのダウンロード

最後に:アカウントの有効化も忘れずに

【ステップ3】で、メールアドレスを入力しました。

……が、メールが届いているのを放置して手順を進めてしまっているので、あとで忘れずにメールをチェックして「アカウントの有効化」をしておいてください。

メールが届いている

リンクをクリックすると、パスワードの設定画面が表示されます。

パスワードの設定

その他、メールでの案内の有無などの設定もできます。ここはよしなに。

その他アカウントの設定

映像編集ソフト After Effects を使って「ロゴデータ」差し替え

今回購入したテンプレート 1,820円 は、こんなのです。カッコいいですね!

いよいよ、After Effects を使って、中のロゴを自分のものに差し替えていきます。

テンプレからの「ロゴとテキスト文字の差し替え」手順はこちらです。

  1. 【ステップ1】テンプレートの使い方を確認する
  2. 【ステップ2】ロゴファイルを自分のものに置き換える
  3. 【ステップ3】After Effects のプロジェクトファイルを開く
  4. 【ステップ4】テキスト文字を変更する

注意:After Effects が入ってないなら、まずインストールする

まずはじめに……

もしも After Effects をお持ちでなければ、とりあえず ここからAfter Effects 体験版をダウンロードして、インストールして使いましょう。

まみーな
今の Adobe のクリエイティブ系ソフトは
買い切りではなく、月額課金の料金体系で
AfterEffects は、1ヶ月 2,160円です。

After Effects のインストール方法はこちらです。

【ステップ1】テンプレートの使い方を確認する

テンプレートファイルをダウンロードして解凍すると、中身はこうなっていました。

テンプレートファイルの中身

ReadMe.txt があるので、まず、これを確認してテンプレートの使い方を理解しましょう。

ReadMe.txt の内容

何やらごちゃごちゃ書いてありますが、大事なポイントは2つです。

  • LOGO REPLACEMENT: ロゴの置き換え方法
  • SUBTEXT CHANGE : テキストの変更方法

【ステップ2】ロゴファイルを自分のものに置き換える

この ReadMe.txt ファイルによれば……

「 1 EDIT LOGO & TEXT HERE 」ファイルを開いて、logo.png ファイルを自分のロゴファイルに置き換えなさい。

logo.png 差し替え

と言ってますね。まず、これをやりましょう。これでロゴの方は置き換えられるようですね。

まみーな
お詫びこの方法でも差し替えられるのですが、
上記は英語の読み違いでした……
ReadMe.txt 通りであれば、「テキストの変更」と同様に
After Effects のアプリケーション上から行います……

テキストの変更は、After Effect のアプリケーション上から行うみたいですね。さっそく After Effects を立ち上げていきましょう!

【ステップ3】After Effects のプロジェクトファイルを開く

After Effect のプロジェクトファイル(拡張子「.aep」)ファイルをダブルクリックして開きます。

Classy_Logo_1

プロジェクトを開くと自分のロゴに置き換わっていますね!

プロジェクトを開くと自分のロゴに置き換わっている

【ステップ4】テキスト文字を変更する

[ 1 EDIT LOGO & TEXT HERE ] の横の 「右向き三角」をクリックします。

[ 1 EDIT LOGO & TEXT HERE ] の横の 「右向き三角」をクリック

[ edit text here ] をダブルクリックします。

[ edit text here ] をダブルクリック

テキストが表示されました。

テキストの上でダブルクリックすると 編集できます。

文字の上でダブルクリックすると 文字を編集できる

フォントを変えたいときは [文字] をクリックして……

フォントを変えたいときは [ 文字 ] をクリック

表示された [文字] パネルでフォントの種類やサイズを変更できます。

文字パネルでフォントを変えられる

まみーな
これで、ロゴデータとテキストの変更は完了です!
はじめてやったけど、意外と簡単でした!!!

「どんな感じに仕上がったかな?」と確認したい時は、画面右の [ 文字 ] パネルの近くにある [ プレビュー ] パネルでプレビューできます。

動画として書き出して完成!

このままでは、動画を After Effect 上からしか見られないので、普通にパソコンで見られるように「レンダリング」をします。

まみーな
「レンダリング」とは映像関連の専門用語で
動画の書き出し処理のことです。

動画の書き出しの手順は2ステップです。

  • 【ステップ1】[レンダーキュー] に、書き出す動画設定(コンポーネント)を追加する
  • 【ステップ2】動画の保存先を決めて[レンダリング] ボタンを押す

あとちょっとなので、がんばっていきましょう!

【ステップ1】[レンダーキュー]に、書き出す動画設定(コンポーネント)を追加する

[ 2 RENDER HERE ] の横の 「右向き三角」をクリックしてフォルダを開き、書き出す動画サイズのコンポーネントを選びます。

まみーな
「コンポーネント」とは、After Effect の用語で
動画サイズなどの動画設定をひとまとめにしたもの
のことです。

メニューから [コンポジション] – [レンダーキューに追加] をクリックします。

レンダーキューにコンポーネントを追加

これで、画面の下の方にある [レンダーキュー] という枠組みに、今回出力したいコンポーネントが追加されました。

レンダーキューに追加された様子

まみーな
「キュー」とは IT 用語で
待ち行列を溜めて置く場所のことを意味します。
プリンタの印刷待ちも「プリントキュー」に入ります♪

【ステップ2】動画の保存先を決めて[レンダリング] ボタンを押す

[レンダーキュー] の [出力先] の横にある [▼] をクリックして保存先を設定したら、[レンダリング] ボタンをクリックします。

出力先を決めてレンダリング開始

……30分後、レンダリングが終わりました。

レンダリング完了

まみーな
レンダリング処理って、すごく時間がかかるんですね。
(今回の9秒の動画に30分掛かったくらいです……)

出来上がりがコチラです。

まとめ

いかがでしたか? よくCMの最初や最後にあるロゴが動くアニメ「ロゴアニメーション」もテンプレートを使えば、自分でも意外と簡単に作れることに驚かれたのではないでしょうか?

オリジナルのロゴアニメーションを発注すると普通は数万円かかります。

でも、MotionElementsなどの映像販売サイトでテンプレートを購入して、Adobe AfterEffectでロゴを差し替えれば3000円以内で完成させることができます。実際、私は 1,820円で作れました

もしも、YouTube での集客を考えているなら、ぜひやってみてくださいね!