こんにちは！albedo Japanデザイナーチームです。
今回はエンジニアとコミュニケーションを取りながらアニメーションの素材を作成したケースを紹介します。
イメージの共有と相談
とあるコーポレートサイトのデザインを作成した際、
ターゲット層の進路が広がるイメージや道筋を表現するために、キービジュアルにストロークのあしらいを取り入れました。
デザインカンプを作成しているときから「描く様をアニメーションできたら未来への勢いが表現できて映えるのでは…！？」と思っていたのですが、具体的な実装方法やどのような状態で素材を用意すればいいのか、自分だけではわからないことも多くありました。
デザイナー側で理想に近しい参考サイトを探し、表現したいことをエンジニアに相談したところ、「どうすればできるか」を一緒に考えてくれました！
アニメーションの仕組み
今回叶えたいアニメーションでは、
「円のオブジェクトが連なって一つのパスに見えている状態」の素材を用意する必要があるとわかりました。
実装された際、円の一つひとつが高速で順番に表示されていくことで、ストロークが描かれていく動きになる、という仕組みです！
そこで、Illustratorで素材を作るにあたり「ブレンド」というツールを使用しました。
Illustrator ブレンドの使い方
ブレンドは、始点から終点にかけてオブジェクトを等間隔に並べたり、形状を変化させていったり…ということができる便利な機能です。
今回はパスに沿って円のオブジェクトを配置させたいので、下記手順で進めました。
1. 描きたいストロークをペンツールで作成
2. 始点と終点に円を配置
- 円の大きさがパスの太さに直結するので適宜調整します
- 太さの緩急をコントロールするために今回は3箇所に円を配置しました
3. まずは円のみ選択した状態でブレンド作成
- この時点では、円と円の間が補完されているだけの状態になります
4. ①のパスと③のブレンドを選択した状態で「ブレンド軸を置き換え」を選択
- パスに沿って円が連続する状態になりました
5. ブレンドオプション「間隔」で「ステップ数」を調整
- ステップ数（円の数）が多いと、より滑らかにつながった見た目になります
6. ブレンドを拡張し、一つひとつの円のオブジェクトとして分解する
- アウトラインモードで見てみると、円が連続していることがわかります
ブレンドのおかげで中間のオブジェクトは自動で補完してくれるので、短時間で素材が出来上がりました！
素材の共有・実装
素材が用意できたところで、
- お渡しするデータはaiでいいのか？書き出しておくか？
- SPの時はどうするか？
- もし理想通りの動きができなかったら、代替案はどうするか？
等々をエンジニアと相談しながら作業を進めていきました。
最終的にこの素材で思い描いていたようなアニメーションにしてくださり、感動したのを覚えています！
（当時テストアップを確認した時、心の中でスタオベしてました！
）
おわりに
今回、チームの方々と各工程で仕様の擦り合わせを行いながら作業を進めることができました！
各々のポジションから見えるもの・分かることが異なるからこそ、それらを掛け合わせて理想を叶えようと尽力できるのはチームで制作をする醍醐味だなと感じた案件でした。
今後もコミュニケーションをとることを大事にしながら、精進しようと思います！