みなさん、こんにちは！ロゴデザメディアへようこそ。
ロゴデザでは、ロゴに関するあらゆる情報を提供していきます。

本日は、アニメーションするロゴ、またの名をモーションロゴを言いますが、動画のように動くロゴの作成方法についてご紹介いたします。

時代はアニメーションへ。ロゴの魅力を引き出すモーションロゴとは

さて、アニメーションして動くロゴと言われても、どういうロゴのこと？とイマイチ掴めない人もおられると思うので、言うより見たほうが早い！ということで、こちらの動画をどうぞ。

plusairのモーションロゴ

アクア・メディカル・クリニックのモーションロゴ

DISNEY／PIXARのモーションロゴ

このように、CMの最初や最後、映画の冒頭で良く見かけるアニメーションロゴのことをモーションロゴと呼びます。

ロゴが動くことで、ロゴデザインのコンセプトがより明快に伝わってきますね。
さらに、ロゴの印象も強くなって、記憶に残りやすくなります。

これは流行るのも納得では？

モーションロゴのメリット・デメリット

モーションロゴがどのようなものか理解していただいたところで、ロゴがアニメーションすることで生まれるメリットとデメリットについてご紹介いたします。

ロゴがアニメーションするメリット

前述したように、ロゴを覚えてもらいやすいというのがまず大きなメリットです。

静止しているロゴと、動画のロゴ、どちらを注目して人は見るかと言われると、もちろん動いているロゴを注意深く見るというデータがあります。

ロゴは会社やサービスの「顔」ですから、ロゴを覚えてもらうというのは、色んな面でプラスに働きますよね。

あと、何よりカッコイイ！

ロゴが動くだけで、クオリティがグッと上がって、デザインがかっこ良くなります。

会社の受付のテレビ、ホームページ、広告等々、広報資料でモーションロゴが使われていると、それだけで会社が大きくリッチに見え、信頼感が生まれてきます。

ロゴをアニメーションさせるデメリット

ロゴをアニメーションさせるデメリットは何よりコスト面です。やはりアニメーションするというのは制作に費用がかかり、通常のロゴデザインとは比べ物にならない見積金額になりがちです。

しかし、これから解説するアニメーションするロゴ（モーションロゴ）の作り方が非常に一般化したことで価格面も抑えられてきました。

そして、時代はどんどん動画の時代に進んでいます。

昔から考えれば、Youtubeのようなサービスは重くて絶対にサービスとして成り立ちませんでした。
Youtuberなんていう動画を作成して仕事をする職業まで生まれてきています。

これからさらにネット環境が整っていき、スマホでもサクサク動画が見れるようになるでしょう！電車や駅の広告もどんどんタブレット化されて動画広告へと移行していくでしょう。

続いて、アニメーションするロゴの作成方法をご紹介いたします。

モーションロゴの作り方

After Effectsでアニメーションロゴを作る

最も一般的なロゴのアニメーション作成方法は、Adobe After Effectsというソフトを使用することです。

Adobe After Effects（アドビ アフターエフェクト）、通称AEとは、カメラで撮影した動画の切り貼りや編集作業ではなく、短い動画を1から作成することが出来るアプリケーションです。

いわゆるモーショングラフィックスが作成可能で、映画・テレビ番組・ゲーム・CMなどかなり幅広く使用されています。

拡張子もmp4など一般的な動画として書き出し可能です。

例えば、最初に紹介したモーションロゴでは、SONY・plusair・アクアメディカルクリニック等のアニメーションロゴは、After Effectsが使用されていると予測できます。

光の表現なども巧みに操作可能で、思い通りのアニメーションが作成できます。

またAdobe製品なので、ロゴデザインを行う際に使用しているAdobe Illustrator（イラストレーター）やAdobe Photoshop（フォトショップ）との互換性があり、エフェクト作成がしやすいのが利点です。

After Effectsは、3D空間を持っているので、2D映像だけではなく、３Dのアニメーションの制作も可能なのは素晴らしいですね。

但し、複雑な３Dアニメーションとなると、After Effectsよりも他のものを使用するのがベターです。

MAYAなどの3D作成ソフトでアニメーションロゴを作る

そこで、続いて紹介したいのがMAYA、3DSMAX、CINEMA4Dなどの3Dソフトです。
PIXARのモーションロゴはMAYAで出来ていると思います。

確かPIXAR映画はすべてMAYAで出来ていたと思いますよ。MAYAは本当にスゴイ。

これらのソフトは買ってすぐに使いこなせるような代物ではなく、相当勉強が必要ですが、使いこなせた際には、思い通りのモーションロゴを作成できると思います。

MAYA、3DSMAX、CINEMA4Dはどれもモデリングとレンダリングの両方が出来るソフトです。

3D作成ソフトで何故動画が作れるの？と疑問に思われるかもしれませんが、3D作成ソフトにはカメラの概念があって、そのカメラを動かすことで動画を作ることが出来るのです。

サイト上ではFLASHやCSS、Jqueryでアニメーション！

これはWEBサイト限定ですが、ホームページ上でロゴをアニメーションさせる場合は、CSS3のアニメーションや、Jquery、Flashなどを使う方法もあります。

Flashの場合、気をつけなければいけないのは、iPhoneで見ることが出来ないという点。

Flashもモーショングラフィックスを作るのに適したソフトで、簡単にアニメーションが作れることから、比較的コストが安いのが利点です。

一時期、flashを使ったアニメーションのホームページが一世を風靡しましたね。

JqueryやCSS3アニメーションは、インターネット上でした動かすことが出来ませんが、簡単に、安く、そして軽くアニメーションさせられるので、難しい複雑な動きではない場合は、CSS3アニメーションなどを使うのが一般的です。

SVGという画像ファイル形式を利用して、CSS3で様々なかっこいい面白いアニメーションが登場しているので、今の時代はAdobe After EffectsとSVGを使ったCSS3アニメーションが流行中と言えますね。

企業の方などは予算に合わせて、上記の２つから選ぶと良いと思います！

これらを使用すれば、ロゴをアニメーションさせて動かすことが出来、よりユーザーの印象に残るロゴデザインが可能になります。

まとめ

今大流行中のアニメーションするロゴ、モーションロゴについての紹介と作り方をご説明させて頂きました。

是非、モーションロゴを取り入れてよりカッコイイロゴデザインを追い求めてください。

モーションロゴの作成をご希望の方は、ロゴデザからオリジナルロゴの制作依頼をお願い致します。

おまけ

Googleってたまにアニメーションするロゴ使っていますよね。
イベントの時期になるとGoogleのロゴデザインが変わるのは有名です。実はあれ昔はひとりでデザインしていたんですよ、スゴイ。

あのGoogleロゴはGoogle Doodleと呼ばれています。

デニス・ホワン（Dennis Hwang）氏というGoogleのシニアウェブマスターマネージャーさんがデザインしています。階級が高そうです……。

世界一有名な無名デザイナーと形容されているのだとか。

現在は、チームが出来てそれぞれデザイナーが担当しているそうな。

日本のGoogle Doodleロゴを手掛けるのは、Google社員「川島優志」氏。

このようにロゴに遊び心を持って、アニメーションさせるのは面白くて、良い取り組みだなぁと感心します。