22 Infographics Animation


 

 

  1. クライアントの情報
  2. クライアントの要望
  3. アニメーション制作の課題
  4. 課題克服の考え方
  5. アニメーションのコンセプト
  6. アニメーションのアプローチ
  7. アニメーションのデザイン & レイアウト
  8. アニメーションの制作
  9. アニメーションのスケジュール
  10. アニメーションの成果

クライアントの情報

企業名・名称

  • ウゴモーション(UGO MOTION)
  • ウゴモーションは、動画広告、プロモーション動画、サービス紹介動画などを、アニメーションで制作しています。モーショングラフィックス、3DCGでのアニメーション制作を中心にしていて、企画立案から完成までを行うことができます。

クライアントの要望

ウゴモーションは、モーショングラフィックスを得意とした小さな工房です。ところが、多くの人から、モーショングラフィックがどんなアニメーションなのか知らない、よく分からない、具体的なイメージが持てない... と言われることが多くて困っていました。
 
そこで、モーショングラフィックスって、こんなことが得意なアニメーションです! と分かってもらえるアニメーション動画を作ると良いかもしれないと考えました。同時に、ウゴモーションがどんな力量を持っている工房なのか、それも合わせて表現できれば良いのではないかと思いました。

アニメーション制作の課題

モーショングラフィックスにも、実はいろんな表現や方法があります。どんな表現や方法でアニメーションを作れば、多くの人にモーショングラフィックスを理解してもらえるか? そして、モーショングラフィックスのおもしろさや、可能性まで感じてもらうためには、どうすれば良いか? それが大きな課題となりました。

課題克服の考え方

課題克服のために最初に考えたのは、ウゴモーションに仕事を依頼したいと言ってくれる人の多くが、企業やチームで働いている人たちだということです。そんな人たちに、モーショングラフィックスを理解してもらうには、普段の仕事で目にしているものを、アニメーション化すると、理解しやすいのでは? というのが課題克服の最初の一歩でした。
 
そこで、働いている人たちが普段の仕事で目にしているものの中から、なにがモーショングラフィックスの表現にもっとも良いだろうか検討しました。さまざまな案から浮かび上がってきたのが、図や表です。図や表というのは、数字や要素の変化や特徴を、視覚情報として分かりやすく表現したもので、最近は、インフォグラフィックスと呼ばれたりしています。
 
インフォグラフィックスのように視覚的な図や表をアニメーション化するのであれば、モーショングラフィックスに合っていて、その特徴や長所をとても表現しやすいという結論になりました。そこで、国内海外のインフォグラフィックスを参考にして、よく使われる22種類のインフォグラフィックスを元にして、アニメーションを作ることにしました。

アニメーションのコンセプト

あなたが仕事で使っている図や表も、モーショングラフィックスになるだけで魅力的に変わる!

アニメーションのアプローチ

ダイナミックな展開 & 未来的な世界観!

アニメーションのデザイン & レイアウト

制作でまず最初に進めたのが、インフォグラフィックスのデザインでした。代表的なもの22種類選んで、ウゴモーションのメインとサブの色彩となる、オレンジと黄色でデザインしていきました。最終的にはアニメーション化するので、それがやりやすくなるように、デザインと構造を作りました。
 
デザインの次に進めたのが、全体のレイアウトでした。アニメーションの画面となる縦横1920 × 1080の中に、22種類のインフォグラフィックスとタイトルを配置していきます。ところが、22種類はどれも形が違うので、それらを隙間なく配置して、全体としてバランス良くするのが、想像以上に大変でした。同じようなタイプが近くに並ばないように、試行錯誤しながら配置していきました。

22 Infographics Animationのデザイン & レイアウト画像01

ノードグラフ

22 Infographics Animationのデザイン & レイアウト画像02

波線グラフ

22 Infographics Animationのデザイン & レイアウト画像03

ピラミッドグラフ

22 Infographics Animationのデザイン & レイアウト画像04

レーダー図

22 Infographics Animationのデザイン & レイアウト画像05

帯グラフ

22 Infographics Animationのデザイン & レイアウト画像06

ヘックス図

22 Infographics Animationのデザイン & レイアウト画像07

電池残量図

22 Infographics Animationのデザイン & レイアウト画像08

ヴェン図

22 Infographics Animationのデザイン & レイアウト画像09

エンジンメーター図

22 Infographics Animationのデザイン & レイアウト画像10

正投影地図

22 Infographics Animationのデザイン & レイアウト画像11

PDCAサイクル図

22 Infographics Animationのデザイン & レイアウト画像12

ミキサーグラフ

22 Infographics Animationのデザイン & レイアウト画像13

パラメーターグラフ

22 Infographics Animationのデザイン & レイアウト画像14

YouTubeのUI

22 Infographics Animationのデザイン & レイアウト画像15

円グラフ

22 Infographics Animationのデザイン & レイアウト画像16

プロフィール図

22 Infographics Animationのデザイン & レイアウト画像17

変則型・円グラフ

22 Infographics Animationのデザイン & レイアウト画像18

路線図

22 Infographics Animationのデザイン & レイアウト画像19

マトリックス図

22 Infographics Animationのデザイン & レイアウト画像20

ネットワーク図

22 Infographics Animationのデザイン & レイアウト画像21

棒グラフ

22 Infographics Animationのデザイン & レイアウト画像22

レイヤー図

22 Infographics Animationのデザイン & レイアウト画像23

タイトル

アニメーションの制作

デザインした22種類のインフォグラフィックスを、After Effectsというソフトでアニメーション化しました。それぞれのインフォグラフィックの特徴や表現がより強調され、よりカッコ良く見えるように、アニメーションを作っていきました。
 
インフォグラフィックスをそのままアニメーション化すると、平面的な世界観になってしまうので、映像にダイナミックさもプラスしました。インフォグラフィックスを奥行きのある3次元空間に配置して、遠近感を表現するためのカメラを配置したのです。こうすることで、3次元的なアニメーションを加えることができ、ダイナミックな映像になりました。
 
完成した1分間のアニメーションでは、2000個を超えるレイヤーをコントロールしていて、最初に考えていたよりも驚くほどタフで難しい仕事になりました。同時に、モーショングラフィックスの表現力や技術を、余すところなく見せられる動画が完成しました。

22 Infographics Animationのアニメーション画像01

22 Infographics Animationのアニメーション01

22 Infographics Animationのアニメーション画像02

22 Infographics Animationのアニメーション02

22 Infographics Animationのアニメーション画像03

22 Infographics Animationのアニメーション03

22 Infographics Animationのアニメーション画像04

22 Infographics Animationのアニメーション04

22 Infographics Animationのアニメーション画像05

22 Infographics Animationのアニメーション05

22 Infographics Animationのアニメーション画像06

22 Infographics Animationのアニメーション06

アニメーションのスケジュール

今回の制作では、他の仕事が空いた時間などを利用して、作業を進めてきたので、飛び飛びのスケジュールになっています。なので、通常のアニメーション制作とは、違うスケジュールになっています。
 

スケジュールの日程

  • 2015年10月 = 企画、課題克服、コンセプト創り
  • 2015年11月 = 22種類のインフォグラフィックスのデザイン
  • 2016年04〜05月 = アニメーション化して、動画が完成
  • 2016年07月 = Webサイトなどで公開開始

アニメーションの成果

これまでは、モーショングラフィックスという方法や表現を、なかなか直感的に理解してもらえなかったのが、このアニメーションを見せられるようになって、モーショングラフィックスを理解してもらいやすくなりました。また、すごくカッコ良い動画ですねと言われる機会も増えて、少しずつモーショングラフィックスのことが理解されはじめていると感じています。

HOME | 制作実績 | 22 Infographics Animation

Copyright  2018 - UGO MOTION.  All Rights Reserved.