アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。
そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。
※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう！
Animated sliding tab bar
フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすいと思います。
Delivery Card
コンテンツをタップするとパタパタと詳細内容が表れます。次々とコンテンツを開きたくなるようなアニメーションですので、動きのあるアプリを作りたい時などにどうぞ！
GIF for Restaurant Menu
スワイプするたびにメニューのアイコンが動く、とてもポップなアニメーションです。アイコンのデザインに少し手間がかかりますが、ユーザーは操作感を楽しめるでしょう。
Liquid Pull Down
メニューを表示させるまでの間のアニメーションに使用できます。まるで泡がはじけるような動きで、読み込み待ちのユーザーを不快にさせません。
floating hamburger
ハンバーガーメニューがポップに動くアニメーションメニューです。スクロールするたびに大きな水玉の様な動きでハンバーガーメニューも追従します。メニューを開いた際の表示画面もとても分かりやすくなっています。
Circle Menu, Swift [Open-Source]
コンテンツが少なめの場合に使用できるメニューアニメーションです。メニューをタップすることで、そのメニューがくるりと円を描きます。
CSS Menu Animations
こちらではハンバーガーメニューの動作をパララックス、スノーボウル、スプリットの３種類で紹介しています。いずれも派手過ぎず分かりやすい動きですので、オーソドックスなデザインのメニューに活用出来ます。
Large Screen Navigation
画面の下部に使うアニメーションメニューですのであまり派手な動きではありませんが、操作方法を感覚的に捉えられるUIなので非常にスマートなデザインと呼べるでしょう。メニューの数が多くても問題なく配置できるのもポイントです。
Force Touch Slide Menu
まるでカーテンを引っ張るかのような感覚でサイドメニューを表示させます。そのままなぞるように操作することでメニューを選択することが可能です。
Open & Close
ハンバーガーメニューのオープン＆クローズを表現する際に使用するアニメーションです。非常にシンプルながら、どんなデザインでも使用できるので人気が高いです。
