アプリやサイトなどのボタンや小さいディテールで、気持ちのいいアニメーションがあると目を引きます。
過剰なアニメーションはユーザーの目的の妨げになるので気をつけたいところですが、うまく活用すればユーザーはあなたのプロダクトをもっと触れたいと思う要素にも成り得ます。
とはいえ、いざこういったものを作るとなると、どう動かせばいいのかわからないものです。そこで今回はそんなアニメーションのインスピレーションとなるような、ボタンやローディングなどのデザイン案を集めてみました。
レスポンスのよいアニメーション10選
Open & Close & Smash by Chuan²
Fun Buttons by Eddie Lobanovskiy (Unfold)
Submit Button by Colin Garven
Upload by Colin Garven
Pause + Play by Carl Ranier Brunson
Open / Close Icon Animation by Dann Petty
Hamburger button by Kirill (Tubik Studio)
Day/Night Toggle Button - GIF by Tsuriel
まとめ
ボタンなどはユーザーの行動目的が伴うものなので、大前提としてそこを邪魔するものであってはなりません。小さい領域でのアニメーションでは視認性なども考慮し、動かすことによってユーザーのアクションがより気持ちよくなるように意識したいところです。
最近GoogleのMaterial DesignのガイドラインにMotionの項目が追加され、Googleが考えるアニメーションの方向性が明確に示されたのでこちらもチェックすると良いでしょう。
