じわじわと流行ってきているアイソメトリックアニメーションはご存じでしょうか？もうご存知の方はお耳が早いですね！まだの方でもこの記事でわかりやすく解説していきますのでご安心を。
この記事はアイソメトリックアニメーションってなに？Webサイトを他社と差別化するために目立たせるためにはどうしよう？と考えている方におすすめです。
アイソメトリックアニメーションを考えるためのヒントになればうれしいです！
目次
アイソメトリックアニメーションとは？
簡単にいうとアイソメトリック（俯瞰図に見られるような表現手法）イラストにアニメーション（動き）を付けた動画が“アイソメトリックアニメーション”というものです。
アイソメトリックという2.5Dを表現できる魅力的なイラスト手法に、自由な動きを付けることによってより、リアルなユニークさをプラスすることができます。
アイソメトリックなイラストについて書いた記事はこちらになります。合わせてお読みください。
アイソメトリックアニメーションの制作事例
アイソメトリックアニメーションを使用している可愛くて魅力的なWebサイトのメインビジュアルを紹介します。 掲載しているのは静止画ですが、実際にはアニメーションが付いているので、ぜひリンクからとんで見てみてください。
制作事例1 ボラギノールタウン
天藤製薬の製品「ボラギノール」のオブジェが特徴的な街並みです。すっきりとした街並みにアイソメ特有の実際のスケールと異なるオブジェクト表現が効いていて目立ちます。色のトーンが合っていて綺麗です。工場からトラックで製品が出荷されていくようなアニメーションが可愛いですね。
制作事例2 エビスビアタウン
ビアタウンということもあり、コンテンツが新しく増えると連動して建物が増えていくというのも面白いです。ビールのジョッキがあったり、外にバーカウンターがあるのもユニークです。また、昼から夜に変わっていく様子や人々の動きなど賑やかな様子が伝わってきて、ビールを飲む楽しみも感じられます。
制作事例3 京都の街並み
弊社制作実績の京都の街並みを表したアイソメトリックアニメーションです。街並みや観光スポットの要素をぎゅっとまとめて京都らしい雰囲気を醸し出しています。広域のマップでも要所をまとめればオリジナルの良さが感じられます。こういったフィクションの世界観でもリアルにつくれるのはアイソメトリックアニメーションの得意なところです。
アイソメトリックアニメーションの制作について
アイソメトリックアニメーションの制作メリット
アイソメトリックアニメーションのメリットは、リアルとイラストの中間を表現することが出来てユニークな世界観をつくり上げられることです。アニメーションを付けることによって、訪れた人がついつい見入ってしまうようにすることでサイトの滞在率を高めることができます。
アイソメトリックアニメーションの制作デメリット
アイソメトリックアニメーションのデメリットは、一般的なメインビジュアルの静止画と比べるとですが、アニメーションを付ける分の工数が増えるので製作費もそれに伴い増えてしまうことです。
アイソメトリックアニメーションの制作ソフト・作り方について
ちょっとした制作側の話になりますが、イラストとアニメーションを制作するソフトは基本的には別で、ベクターデータを書き出せるドローイングソフトとベクターデータにアニメーションをつけるソフトが必要になります。
Adobeソフトを使用する場合、Adobe Illustratorを使ってイラストを書き起こして Adobe Aftereffectsを使って動きをつけるというかたちになります。
gifとして書き出す場合の注意点 （Aftereffects使用の場合）
現状（2022）のAftereffectsではgifを直接書き出すことはできないので、動画（mov）として書き出してからPhotoshopでgifに変換して書き出します。
アイソメトリックアニメーションの制作アイデア
アイソメトリックアニメーションを制作していくにあたっての基本的な考え方やアイデアです。
制作アイデア1 テーマの設定ついて
商品やサービスの世界観を魅力的に見せたい場合は、アイソメイラストの特徴である俯瞰ということを生かして「街」にすることが多いです。一口に街といっても、色合いやスケールなどの工夫をすることで個性的で魅力あふれるオリジナルな街ができあがります。
より多くのものを動かそうと思うと画角を広くする必要がありますが、範囲を狭めて家の中や生産の流れがわかるような工場内などに絞れば、細かい動きにフォーカスできるのでおすすめです。
制作アイデア2 オブジェクトの選定方法ついて
上記のようなテーマが街なものだと動かすオブジェクトは、人や車などの乗り物を動かすことが多いです。 飛行機や気球など空を飛ぶ乗り物を動かせば空間を幅広く使うことができます。
細かい箇所でいうと、信号機の色などの小さい箇所を動かせばリアルな空間に近づきます。より魅力的にするためにと複雑な動きを足さなくともシンプルに考えられるものだけでも十分見応えがあるものに仕上がります。
制作アイデア3 オブジェクトの動かし方について
オブジェクトの動かし方は、大きく分けて2つあります。
・ある場所にふわっと現れてふわっと消える
・死角から現れて死角に消えていく
という動かし方です。場面やオブジェクトの前後関係などを考慮しながら動かし方を決める必要があります。オブジェクトの被りなどない場合はその場所を行ったり来たりするパターンもできます。
アイソメトリックアニメーションの制作会社ならリビッツ
アイソメトリックアニメーションについて関心が深まりましたか？もしも、
・世界観のアイデアはあるけどアイソメトリックアニメーションにするにはどうしたらいいかわからない
・製品をPRしたいのでアイデア出しから協力してほしい
など、ご希望がございましたら、まずはお問い合わせください。こんなアイソメトリックアニメーションを使ったメインビジュアルが自社コンテンツにほしいなぁ！と思ったら、ぜひ一度お問合せください。
CONTACT
お仕事のご依頼・ご相談はこちらからお気軽にお問い合わせください。
