レスポンスが気持ちいいボタンのUIアニメーション10選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

アプリやサイトなどのボタンや小さいディテールで、気持ちのいいアニメーションがあると目を引きます。

過剰なアニメーションはユーザーの目的の妨げになるので気をつけたいところですが、うまく活用すればユーザーはあなたのプロダクトをもっと触れたいと思う要素にも成り得ます。

とはいえ、いざこういったものを作るとなると、どう動かせばいいのかわからないものです。そこで今回はそんなアニメーションのインスピレーションとなるような、ボタンやローディングなどのデザイン案を集めてみました。

レスポンスのよいアニメーション10選

160513_button01Open & Close by Creativedash

160513_button02Add & Remove by Ricky Boyce

160513_button03Open & Close & Smash by Chuan²

160513_button04Fun Buttons by Eddie Lobanovskiy (Unfold)

160513_button05Submit Button by Colin Garven

160513_button06Upload by Colin Garven

160513_button07Pause + Play by Carl Ranier Brunson

160513_button08Open / Close Icon Animation by Dann Petty

160513_button09Hamburger button by Kirill (Tubik Studio)

160513_button10Day/Night Toggle Button - GIF by Tsuriel

まとめ

ボタンなどはユーザーの行動目的が伴うものなので、大前提としてそこを邪魔するものであってはなりません。小さい領域でのアニメーションでは視認性なども考慮し、動かすことによってユーザーのアクションがより気持ちよくなるように意識したいところです。

最近GoogleのMaterial DesignのガイドラインにMotionの項目が追加され、Googleが考えるアニメーションの方向性が明確に示されたのでこちらもチェックすると良いでしょう。