コピペで使える！マテリアルデザインなUIアニメーション

近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。

実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。

中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。

今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。

そして多くのGIFだけのサイトと違い、今回はすべてCodePenで実装済みの作品なので、裏側のコードも見ることができます。ぜひどんな風に実装されているかも覗きつつ見てみてください。

Material UpのオススメUIコンセプト５選

1. 音楽プレイヤー

Web上の音楽プレイヤーのUIコンセプトです。プレイボタンが回転するレコードに変化します。

See the Pen Material player by Dirk-Jan (@Hylix) on CodePen.

2. SNS切り替えプロフィールUI

プロフィールを表示するウィンドウですが、SNSのアイコンによってウィンドウ全体の色が変化していきます。

See the Pen Material VCard by Rian Ariona (@ariona) on CodePen.

3. コンパクトなログインモーダル

ログイン画面ですが、横の大きな＋を押すと会員登録のモーダルに切り替わります。登録は全体が赤くなるので、ログインとは明確に差別化できています。

See the Pen Material Compact Login Animation by Yusuf Bakır (@yusufbkr) on CodePen.

4. 更新アニメーション

リストを下に引っ張ると左上の紙飛行機が飛んで情報をとってくるアニメーションです。

See the Pen Pull Down to Refresh (Paper Plane) by Nikolay Talanov (@suez) on CodePen.

5. リストのソートメニュー

タスク管理アプリのリスト画面ですが、右上の赤い丸ボタンを押すとアイコンが回りに出現し、アイコンに応じた分類でリストのソートができます。

See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.

おまけ

MaterialUpで使用しているUpvote（投票）ボタンです。

See the Pen material-design vote up animation by Gregor Adams (@pixelass) on CodePen.