日記

[日記]アニメーション覚えはじめました。

投稿日:

こんにちは、コーテッグの小山です。

Angularのページングアニメーションを作っていたら、
そもそも、CSSのアニメーションもあまり詳しくないなと思ってどちらも始めてみました。
また、アニメーションのプロトタイプ作りも始めてみました。

まだ始めてちょっとですが、作るのが楽しいので趣味にして、
そのうち仕事にも活かせるといいかなと思っています。

仕様調整と実装が上手くできたら、
サービスのユーザビリティとクオリティをあげれるのでかなり良さそうですね。

案件の中でアニメーションを使う機会を増やすために、
2つのことをやってみようと考えてみました。

実装前にプロトタイプを作る。

デザイナーが不在の場合は、デザインやプロトタイプがなく、ラフなワイヤーを作って実装開始となる場合があります。
コーテッグでもそういう案件がよくあり、私も作ります。hoverとかclickぐらいなら見れる感じには作れます。

ただ、案件でいきなり少し複雑なアニメーションを扱うというのを想像してみると、
お客さんの想像と、出てきたものが違う!という事態が起こりそうですよね。

気合い入れて提案すればするほど、工数を食いつぶすリスクが出てきそう…
そのリスクをお客さんか、会社か、私がかぶるのはちょっと嫌です。

頭の中でアニメーションを想像して、CSSでいけてる実装がすぐできればいいのですが、
複雑なアニメーションでそれができる人は多分すごい人です。

そこで、コードではなく、プロトタイプのアニメーションを作って、
実現するというのがいいのかなと思っています。
アニメーション◯点の仕様調整に◯日、実装が◯日でできるだけ近づけるという感じであればブレなさそうですね。
プロトタイプ作りの過程がCSSプロパティと紐付けて考えられるので、全体工数もあまり増えなさそうです。

また、趣味で作るにしても、プロトタイプだけとcssだけに分けることで取り組み安くなりそうです。

サンプル集(カタログ)を作る。

アニメーションのサンプル集があれば、仕様を決めていく上でハードルが下がりそうです。
サンプルを見せて、このアニメーションをベースに少しこう変えましょうとか話せそうですね。

サンプル集の作り方は、アニメーションライブラリを活用したり、
既存のサービスの動きを参考に作れば一気に増やすことができます。
あとは好きに作るのもそれはそれで楽しいのでいいかもしれません。

サンプル集が充実して、使い回しができるようにしておけば、少し厄介なのが数点あったとしても、
時間の使い方を工夫してクオリティを保ちつつ順調に開発を進めることもできそうですね。


もともとIllustratorとかPhotoshopを使っていたので、
プロトタイプ作りに使っているAdobe Xdもすぐに覚えられそうです。
年始ぐらいには使えるようになりたいです。

-日記
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[職場環境改善] 風邪etc対策で空気清浄機を買いました!

こんばんはコーテッグのこやまです。 年末年始はガジェットが安くなる機会が多くてい …

COTegg初の社員旅行

こんにちは。さとうです。 4月12,13日でCOTegg初の社員旅行に行ってきま …

【COMP】信玄COMPグミを作ってみました(桔梗信玄餅+COMPグミ)

COMPに新しい商品が加わったようで、また一袋もらいました。 COMPグミです。 …

Let’s プランクチャレンジ!

こんにちは!佐藤です。 COTeggのみなさんは筋トレにはまっているようで 懸垂 …

もくもく会を開催しました。

こんばんは。高石です。 先日10/29(土)にCOTeggでもくもく会を開催しま …