こんにちは！albedo Japanデザイナーチームです。
今回はエンジニアとコミュニケーションを取りながらアニメーションの素材を作成したケースを紹介します。

イメージの共有と相談

とあるコーポレートサイトのデザインを作成した際、
ターゲット層の進路が広がるイメージや道筋を表現するために、キービジュアルにストロークのあしらいを取り入れました。

デザインカンプを作成しているときから「描く様をアニメーションできたら未来への勢いが表現できて映えるのでは…！？」と思っていたのですが、具体的な実装方法やどのような状態で素材を用意すればいいのか、自分だけではわからないことも多くありました。

デザイナー側で理想に近しい参考サイトを探し、表現したいことをエンジニアに相談したところ、「どうすればできるか」を一緒に考えてくれました！

アニメーションの仕組み

今回叶えたいアニメーションでは、
「円のオブジェクトが連なって一つのパスに見えている状態」の素材を用意する必要があるとわかりました。

実装された際、円の一つひとつが高速で順番に表示されていくことで、ストロークが描かれていく動きになる、という仕組みです！

そこで、Illustratorで素材を作るにあたり「ブレンド」というツールを使用しました。

ブレンドは、始点から終点にかけてオブジェクトを等間隔に並べたり、形状を変化させていったり…ということができる便利な機能です。

今回はパスに沿って円のオブジェクトを配置させたいので、下記手順で進めました。

ブレンドのおかげで中間のオブジェクトは自動で補完してくれるので、短時間で素材が出来上がりました！

素材が用意できたところで、

等々をエンジニアと相談しながら作業を進めていきました。
最終的にこの素材で思い描いていたようなアニメーションにしてくださり、感動したのを覚えています！
（当時テストアップを確認した時、心の中でスタオベしてました！）

今回、チームの方々と各工程で仕様の擦り合わせを行いながら作業を進めることができました！
各々のポジションから見えるもの・分かることが異なるからこそ、それらを掛け合わせて理想を叶えようと尽力できるのはチームで制作をする醍醐味だなと感じた案件でした。

今後もコミュニケーションをとることを大事にしながら、精進しようと思います！