日記

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

投稿日:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

-日記
-

執筆者:


comment

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

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

関連記事

no image

The Help Along The Journey・冒険の手伝い

Introduction There is a saying, “B …

no image

美容師からエンジニアに転職して早半年…

初めまして!福丸です! 何を書こうか迷ったのですが、まずは転職するきっかけでも書 …

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

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

オフィスでDIY!~自転車ラック編~

こんにちは。たなかです。 ロードバイクで通勤をしている私ですが、オフィスにはロー …

Salmon, Trout, and Avocado Egg Benedict

水断食をするエンジニア・Water Dieting Engineer

English written below ↓ おはようございます! 初投稿する …