dribbbleのぬるぬる動くメニューUIのアイデア10選

UX MILK編集部

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

アプリデザインにおけるUIのアニメーションは、いざ作るとなると「どう動かすか」などと考えてしまい、無難なものに落ち着きがちです。発想が小さくなっているなと感じたら、他の人の自由な発想を見てみるのもいいかもしれません。

そこで今回は、dribbbleにて公開されているメニューUIのアニメーションから10点ご紹介いたします。ぬるぬる動きまくるポートフォリオからインスピレーションを見いだせれば幸いです。

※過剰で独りよがりなアニメーションはユーザー体験として不適切になりがちですので、きちんとTPOをわきまえたアニメーションを心がけましょう!

Animated sliding tab bar

2-menu
フッター部分を完全に非表示にさせつつも、折りたたまれていたかのように表示させるアニメーションです。ユーザーが混乱しないように予め操作方法を説明しておくといった配慮が必要になりますが、デザインとしては使いやすいと思います。

Delivery Card 

3-menu

コンテンツをタップするとパタパタと詳細内容が表れます。次々とコンテンツを開きたくなるようなアニメーションですので、動きのあるアプリを作りたい時などにどうぞ!

GIF for Restaurant Menu


4_menu

スワイプするたびにメニューのアイコンが動く、とてもポップなアニメーションです。アイコンのデザインに少し手間がかかりますが、ユーザーは操作感を楽しめるでしょう。

Liquid Pull Down

pull-down-refresh-liquid-ramotion

メニューを表示させるまでの間のアニメーションに使用できます。まるで泡がはじけるような動きで、読み込み待ちのユーザーを不快にさせません。

floating hamburger

5_menu

ハンバーガーメニューがポップに動くアニメーションメニューです。スクロールするたびに大きな水玉の様な動きでハンバーガーメニューも追従します。メニューを開いた際の表示画面もとても分かりやすくなっています。

Circle Menu, Swift [Open-Source]

7_menu

コンテンツが少なめの場合に使用できるメニューアニメーションです。メニューをタップすることで、そのメニューがくるりと円を描きます。

CSS Menu Animations

8_menu

こちらではハンバーガーメニューの動作をパララックス、スノーボウル、スプリットの3種類で紹介しています。いずれも派手過ぎず分かりやすい動きですので、オーソドックスなデザインのメニューに活用出来ます。

Large Screen Navigation

9_menu

画面の下部に使うアニメーションメニューですのであまり派手な動きではありませんが、操作方法を感覚的に捉えられるUIなので非常にスマートなデザインと呼べるでしょう。メニューの数が多くても問題なく配置できるのもポイントです。

Force Touch Slide Menu

one-touch-slide-menu

まるでカーテンを引っ張るかのような感覚でサイドメニューを表示させます。そのままなぞるように操作することでメニューを選択することが可能です。

Open & Close

1-menu
ハンバーガーメニューのオープン&クローズを表現する際に使用するアニメーションです。非常にシンプルながら、どんなデザインでも使用できるので人気が高いです。


イベント

2017/10/06(金)
UX School(全10回)