動きがユニークで参考になるメニュー系のUIアニメーションまとめ10選


動きがユニークで参考になるメニュー系のUIアニメーションまとめ10選

どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌

最近、編集長の朽木さんが一部の方々から「くーにゃん」と呼ばれているのですが、私から「くーにゃん」と呼ぶのは馴れ馴れしすぎるので「くーにゃんさん」と呼んでしまう次第であります。

はい(◞‸◟)

さて、今回は動きが面白いUIを集めてみました!
1つ1つアニメーションを確認しながらご覧いただけるとうれしいです( ˘ω˘)☝

 

UIアニメーションまとめ10選

今回は紹介するアニメーションは全部で10個です( ˘ω˘)☝

1. GIF Sticker App – Dribbble

img_ui01

サイドメニューが斜めに表示するパターン、要素もくるくる動いております( ˘ω˘)☝
 

2. Home Guard 02 – Dribbble

img_ui02

アイコンがよこからシュババとでるアニメーション( ☞三☞ ˘ω˘)☞三☞シュッシュッシュッシュ

3. Side Menu Animation – Dribbble

img_ui03

メニューがパタパタと出てくるアニメーション。フラットなデザインにピッタリですね( ˘ω˘)☝

4. GIF Blog App – Dribbble

img_ui04

メニューがぷるんと出てくるアニメーション。何気に閉じる時もメニューが凹む動きがついております( ˘ω˘)☝<抜かりない

5. Fold, Folder, Foldest – Dribbble

img_ui05

ハンバーガーアイコン押すとファイルに要素が収まってメニューが表示するアニメーション。ファイルに吸収されるところがなんだかすっきりしますね( ˘ω˘)☝

6. nice one|UX Motion/Animation – Pinterest

img_ui06

メニューが折りたたまれているアニメーション。こちらもフラットなデザインにピッタリですね( ˘ω˘)☝

7. GIF Exercise – Dribbble

img_ui07

要素ひとつひとつが、ぷるんぷるんしているアニメーション。アイコンが描画されるアニメーションもユニークです( ˘ω˘)☝

8. Menu Concept #UImotion | Mobile app design – Pinterest

img_ui09

メニューの要素が重なり合っているアニメーション。動きがシンプルなので実装ができそうです( ˘ω˘)☝

9. Menu interaction – fashion platform GIF – Dribbble

img_ui08

こちらもシンプルなアニメーション。アニメーションされる順番の勉強になりますね( ˘ω˘)☝

10. Jetbank – Online mobile banking – Dribbble

img_ui10

サイドバーのアニメーションは普通ですが、ボックス型の動きは蛇腹式に出てきて参考にしやすいなと思いました( ˘ω˘)☝

まとめ

いかがでしたでしょうか?

今回はメニュー系のアニメーションを取り揃えてみました( ˘ω˘)☝
メニューの動きに限らず要素1つ1つの動きがとてもなめらかで見ていて楽しいです。
いつもJSばっか書いていますが、こうやってアニメーションをたくさん見て、演出の勉強するのも大事だなと思いました( ˘ω˘)<大事やで

この記事を書いた人

はやち
はやち フロントエンドエンジニア 2010年入社
フロントエンドエンジニアのはやちです( ˘ω˘)☝
以前までは顔隠しておりましたが思い切ることにしました…。
相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌
今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ