MILK2016/12/16更新インタラクションの参考にしたいUIアニメーション5選UpLabsMatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。この記事はuplabsからの翻訳転載です。配信元または著者の許可を得て配信しています。良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。右下から左上にかけて徐々にカラーパレットが移行していくグラデーションが美しいデザインです。カレンダーで想定されるような機能が全部入っているわけではないので実用性には欠けますが、トランジションやカラーリングが全体的に透明感があり、参考になります。画面遷移マテリアルデザインを適用した、複数画面間のトランジションデモです。作成者曰く、特定の問題解決というよりもとりあえず筆を走らせて公開したデザインのようです。更新アプリなどでよく使われる下にドラッグして離すタイプの更新アニメーションです。ゴムや液体のようなスムーズで伸びやかなアニメーションの参考になります。アクションボタン切り取り、コピー、削除、シェアのアクションボタンをアニメーションさせた例です。小さく地味ではありますが、このような細かいところまでアニメーションを実装することは少ないので、意外性を演出したい場合に良いかもしれません。スイッチスイッチと連動したアニメーション例です。上部のグラフィックも心地よいですが、スイッチの動作と連動した文言部分だけでも、十分スイッチ動作の気持ちよさを演出できそうです。文言はスイッチとは逆方向に遊びのある動きをして出現しており、スイッチ自体に仕掛けや重みを感じる演出になっています。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。