こんにちは、コーテッグの小山です。
Angularのページングアニメーションを作っていたら、
そもそも、CSSのアニメーションもあまり詳しくないなと思ってどちらも始めてみました。
また、アニメーションのプロトタイプ作りも始めてみました。
まだ始めてちょっとですが、作るのが楽しいので趣味にして、
そのうち仕事にも活かせるといいかなと思っています。
仕様調整と実装が上手くできたら、
サービスのユーザビリティとクオリティをあげれるのでかなり良さそうですね。
案件の中でアニメーションを使う機会を増やすために、
2つのことをやってみようと考えてみました。
実装前にプロトタイプを作る。
デザイナーが不在の場合は、デザインやプロトタイプがなく、ラフなワイヤーを作って実装開始となる場合があります。
コーテッグでもそういう案件がよくあり、私も作ります。hoverとかclickぐらいなら見れる感じには作れます。
ただ、案件でいきなり少し複雑なアニメーションを扱うというのを想像してみると、
お客さんの想像と、出てきたものが違う！という事態が起こりそうですよね。
気合い入れて提案すればするほど、工数を食いつぶすリスクが出てきそう…
そのリスクをお客さんか、会社か、私がかぶるのはちょっと嫌です。
頭の中でアニメーションを想像して、CSSでいけてる実装がすぐできればいいのですが、
複雑なアニメーションでそれができる人は多分すごい人です。
そこで、コードではなく、プロトタイプのアニメーションを作って、
実現するというのがいいのかなと思っています。
アニメーション◯点の仕様調整に◯日、実装が◯日でできるだけ近づけるという感じであればブレなさそうですね。
プロトタイプ作りの過程がCSSプロパティと紐付けて考えられるので、全体工数もあまり増えなさそうです。
また、趣味で作るにしても、プロトタイプだけとcssだけに分けることで取り組み安くなりそうです。
サンプル集(カタログ)を作る。
アニメーションのサンプル集があれば、仕様を決めていく上でハードルが下がりそうです。
サンプルを見せて、このアニメーションをベースに少しこう変えましょうとか話せそうですね。
サンプル集の作り方は、アニメーションライブラリを活用したり、
既存のサービスの動きを参考に作れば一気に増やすことができます。
あとは好きに作るのもそれはそれで楽しいのでいいかもしれません。
サンプル集が充実して、使い回しができるようにしておけば、少し厄介なのが数点あったとしても、
時間の使い方を工夫してクオリティを保ちつつ順調に開発を進めることもできそうですね。
もともとIllustratorとかPhotoshopを使っていたので、
プロトタイプ作りに使っているAdobe Xdもすぐに覚えられそうです。
年始ぐらいには使えるようになりたいです。
