UIデザイナーがAfter Effectsで「ロゴアニメーション」作ってみた！

こんにちは、UIデザイナーの小幡です。

突然ですが、皆さんはアニメーションを作ったことはありますか？私は「Adobe After Effects（AE）」でのモーションの作成が好きで、前職ではWebサイトのモックや、サイト内での細かい動きをよく作っていました。

クライアントワークでアニメーション制作に触れることは珍しいのですが、今回うれしいことにコープデリ生活協同組合連合会の「コープデリeフレンズ」の新サービス、「献立コンシェルジュ」のロゴアニメーション制作の依頼をいただきました。

まだまだAE修行中の身ではありますが、今回のロゴアニメーション制作のプロセスやこだわったポイント、そしてロゴアニメーションについて考えたことをお話ししたいと思います。

ロゴの特徴から「基本の動き」を考える

「献立コンシェルジュ」とは、1週間の献立をワンタップで作成できるサービスです。ロゴはお鍋をモチーフにしたもので、目や髭があり、可愛らしいキャラクターのような印象でした。

可愛らしい見た目で、色使いもポップだったので、静止画のロゴに「性格をプラスしていく」ようなイメージで動きのコンセプトを決めました。

それは「ポップで、親しみやしさやお茶目さを感じる」というもの。少し大袈裟に大胆に動く、ぽよんと弾むように動くといった特徴で表現することに。また、「鍋がコトコト煮えて、中身が飛び出す」という全体の動きの流れを決め、ロゴはその一連の流れの1コマを切り取ったような印象に見せるようにしました。

このコンセプトを基に、最初に作ったアニメーションがこちらです。

いかがでしょう？ポップさは表現できているものの、いろいろな箇所が動きすぎてごちゃごちゃしていますね。ここから動きを「引いて」いきます。

動きを「引き算」していく

デザインの場合、基本的なレイアウトを作成してから、装飾が必要かどうかを検討して「足していく」プロセスを踏む場合が多いですが、アニメーションの場合、後で足していく作業は時間がかかりますし、都度考え直す部分が増えていく問題にぶつかります。

人によって得意なパターンは違うと思いますが、私の場合は、最初に動きを最大限盛って、そこから引いていくアプローチがしっくりきます。

鍋の中身の細かいパーツや、蝶ネクタイも全て動かしてみた結果、蝶ネクタイの動きは視線が散ってしまうので一旦やめる、パーツの中の豆が回転するのも、冗長なのでやめるという判断をしました。

動きを引き算する際は、何をやめるかで迷うこともあると思います。そのときは一番見せたい動きを中心に、そこに目が行くかどうかで判断するといいでしょう。今回の場合、「ふたが開いて鍋の中身が飛び出す」という部分を一番見せたかったので、蝶ネクタイの動きなど、飛び出す動きと関係ない部分は引いていきました。

物理法則を考える

「車が急に止まるときは後ろのタイヤが浮く」「ボールが跳ねるときは、バウンドがだんだん小さくなっていく」など、現実世界の動きを想像しながら、少し大袈裟に大きく動かすことで、動きの特徴や性格を出しています。

今回も鍋のふたが開くときに、鍋自体がやや持ち上がる動き、そして中身が飛び出した後に勢いがついて元に戻る（下がる）動きを追加しています。少し大袈裟に動きを追加することで、ポップさを演出できたのではないでしょうか。

最後に、ロゴが完成した状態でいる時間を5秒程度設け、ループアニメーションになるよう、鍋の中身が吸い込まれる動きを入れて完成です。いかがでしょうか？Webサイトでも、実物をご覧いただければ幸いです。

UIデザイナーがアニメーション作りを学ぶ理由

ここまでアニメーション作りのプロセスを紹介してきましたが、そもそも、アニメーションを作るUIデザイナーはそんなに多くないでしょう。

別にAfter Effectsが使えなくても、素敵なデザインをしている方はたくさんいらっしゃいます。それでも、デザイナーがアニメーションを学ぶメリット、アニメーションができると広がる仕事があるものです。

1. 動きでしかできない、デザインのサポートができる

「このデザインをもっと目立たせたい」「もっと楽しそうにしたい」「グラフや図版を分かりやすくしたい」と思ったり、クライアントからそのような要望を受けたりすることはあるはず。

デザインそのものを変更する、より良くして改善する方法もありますが、既存のものに動きを加えて成果を出すこともできます。モノによりますが、背景の画像や見出しを動かすだけでリッチなイメージにできますし、難しいグラフは経過を順に見せたり、数値のカウントアップを使うだけで分かりやすくなります。

静止画にできないことができるのが動画です。工夫次第で、デザインをサポートする役割を担ってくれるでしょう。

2. 唯一無二の個性を出すことができる

静止画でベストを尽くすことは前提として、そこにプラスアルファの要素としてアニメーションを入れることで、そのWebサイト・アプリだけの個性を足すことができると思います。

例えば、そのサービスのキャラクターを走らせてみたり、ロゴを動かしてみたりするだけで世界観を醸成することもできますし、ボタンタップや、ローディングを工夫すればデザインに特徴が出ます。いろいろなサービスが溢れる世の中で、差別化を狙う有効な手段になるはずです。

3. エンジニアと連携がしやすくなる

「すみません、もう少しフワッと……フワーーッッみたいな感じにしたいんですけど……」みたいな抽象的なリクエストをエンジニアに言ったこと、ありませんか？恥ずかしながら、私はあります。

動きの表現は口頭で説明するのが難しく、抽象的な表現は個人の感覚による差が大きく出やすいです。XDやfigmaでプロトタイプを作成している方もいらっしゃるかと思いますが、複雑な動きはまだ難しく、イージング（動きの加減速。これによって全く違った見え方をします）もイメージと違ったものになりやすいです。

サンプルをAfter Effectsでデザイナーが作成することで、エンジニアとのやりとりや手戻りを少なくし、デザイナーのイメージを正確な状態で再現することが可能になるのです。

4. エンジニアの工数を削減できる

やりとりや手戻りの削減ももちろんですが、場合によっては、エンジニアが作るはずのアニメーション制作をデザイナーが肩代わりするという、直接的な工数削減も見込めます。

アニメーションの種類と場合によりますが、イラストや複雑な図版を動かす、特に今回のように「ロゴを動かしたい」場合、エンジニアに依頼するとかなりの工数がかかってしまいます。アニメーションに注力した結果、実装しているサイト・アプリが完成しないのは本末転倒でしょう。

そんなとき、デザイナー側でgifやjsonなどのデータを作成し、それをエンジニアに渡して実装してもらうと、実装上で作るよりもかなりの工数削減ができます。「アニメーションをつけてリッチなものを作りたい！でも工数が厳しい……」という場合、サイト・アプリの性質、エンジニア側の方針にもよりますが、裏技的にデザイナーが作成するのも一つの方法です。

「アニメーション」とは、100％の静止画に魅力を追加する手段である

私は、アニメーションとは80%の完成度のものを100%にするものではなく、100%の完成度のものを110%、120%にするものだと思っています。良いデザインがあるからアニメーションが光る。どうしても静的な表現ではできない部分に動きを入れ、よりわかりやすく、楽しく見せる手段というわけです。

今回のロゴアニメーションも、動かすことによって静的なロゴに「キャラクター性」と「ストーリー」を与えることができました。

全ての要素を動かすと、ごちゃごちゃとして何を伝えたいのか分からなくなってしまいますが、まずはローディングの部分や、グラフやキービジュアルの要素など、ちょっとした部分から動きを加えてみると、グッと世界観が出来上がって見えます。皆さんもまずは小さいところから、アニメーションを始めてみませんか？

執筆者