ちょっとした動きを加えるとUIは魅力的になる！新感覚のアニメーションが気持ちいいUIデザインのまとめ

Post on:2016年2月15日

sponsors

次のプロジェクトのヒントに、クリエイティブな刺激になる新感覚の動きが面白いCSSアニメーションを使ったUIデザインを紹介します。
ちょっとした動きが加わることで、UIは魅力的になりますね。

指定した範囲のみ、カーソルにひっつくアニメーション。
水平のみ・垂直のみもでき、後ろ髪を引かれるようなエフェクトにも利用できます。

PlayStationのデザイナー: Joey Rabbitt氏による、PlayStation.comのモバイル版のメニューのFB。こうして公開することで、さまざまなユーザーの意見を参考にできるのは良い試みですね。

Material Designを採用したラジオボタン。
ぽにょんと移動するの、かわいい！

こちらもMaterial Designで、カードのアニメーション。
アローの左右で、アニメーションの方向も変わります。

これはアニメーションGIFにするのが難しかったので、静止画で。
スクロールすると、ボタンの3Dが変化します。

リフレッシュのかわいいアニメーション。
エラスティックは、今年多くのUIで見かけると思います。

最後は、かわいいアニメーション。
アクションした後に、こういう演出があると嬉しいですね。