どんな動きにするか悩んだときに！UIアニメーションのインスピレーションを得られるサイトまとめ
皆さんはUIの動きを考えるときに、どんなものを参考にしていますか？いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタイトルでUIのアニメーションやトランジションのインスピレーションを得られるサイトを紹介していたので、本人の許可を得て翻訳しました！
（以下”Interface Animations and Transitions: where to get inspiration”の翻訳。）
photo credit: Jorge Quinteros via photopin cc
UI/UXデザインにおいて、細部の重要性がますます高まっています。インターフェースの要素にトランジションやアニメーションといった動きを付けることは、ネイティブアプリとWebサイトのUXの一部分となりました。“Transitional Interfaces”という素晴らしい記事は、小さなアニメーションがユーザーの体験にいかに大きな影響を与えることができるかを教えてくれます。こういったインタラクションを考えるのは私たちWebデザイナーの仕事ですが、いつも簡単に思いつくわけではないし、ちょっとしたインスピレーションを得られることは嬉しいですよね。
さらにクライアントやフロントエンドデベロッパーに、どんなインタラクションをイメージしているのか伝えるのも難しいと思います。いくつか素晴らしいデザインのインスピレーションが得られるギャラリーサイトはありますが、静的なデザインのスクリーンショットの場合がほとんどではないでしょうか。そこで今回、インタラクションの例を紹介しているサイトと私が使っているCSSのフレームワークのリストを紹介することにしました。ここで挙げているものを全て使っているわけではありませんが、これらはクライアントやデベロッパーにどんなUIをイメージしているのかを説明するのに良いスタート地点になると思います。
目次
インターフェースとアニメーションのインスピレーション
SIX UX
http://sixux.com/
TumblrにVineで撮った6秒間のトランジションやアニメーションの映像を上げています。アニメーションがタグで分類されてるのは良いのですが、作者がスマートフォンで撮っているので映像のクオリティがあまり高くありません。
HOVER STATES
http://hoverstat.es/
新しくて面白いインタラクションを集めたギャラリー。カテゴリーごとのフィルターオプションがあるのは嬉しいですね。ただサイズが大きいのでGIFアニメをローディングするのに時間が掛かるのが残念です。
UI Animations
http://ui-animations.tumblr.com/
こちらもインターフェースアニメーションのギャラリー。Webサイトだけでなく、iOSや OS Xのアニメーションも見ることができますが、タグやカテゴリー分けは今のところありません。
CAPPTIVATE.co
http://capptivate.co/
このギャラリーはモバイルアプリのUIトランジションにフォーカスしていて、マウスオンすればアニメーションを見ることができます。アニメーションは種類ごとにカテゴリー分けされています。
Use your Interface
http://useyourinterface.com/
こちらもアニメーションやトランジションのスクリーンショットを集めたTumblr。良い点はGIFだけでなく短い動画も用意されていること。カテゴリー分けされていないのがマイナスポイントですね。
CSSアニメーションのフレームワーク
Animate.css
http://daneden.me/animate/#cta
アニメーションはカテゴリー分けされており、”I fight for the user”とラベリングされた要素で試してみることが出来ます。必要なものだけをダウンロードできるのが嬉しいです。
Magic css3 animations
http://www.minimamente.com/magic-css3-animations/
このフレームワークはanimate.cssにインスパイアされていて、異なったカテゴリーのアニメーションを数多く提供しています。
elementTransition.js
http://dan-silver.github.io/ElementTransitions.js/
このライブラリーはCodropsの”Page Transitions”が基本になっています。コードを丸ごと使うことはないかもしれませんが、インタラクションのアイディアは得ることが出来るのではないでしょうか。
Effeckt.CSS
http://h5bp.github.io/Effeckt.css/dist/#0
モーダルやボタン、リストなどのためのアニメーションやトランジションを探すことができます。全部グレーであまり見栄えが良くないのでコピーペーストして使えるものではありませんが、これを元にインタラクションを作るのは良さそうです。
CSS3 Animations Cheat Sheet
http://www.justinaguilar.com/animations/
最後に紹介するのは、フレンドリーな顔のイラストでインタラクションを試せるギャラリーサイト。アニメーションはCSS3で作られていてJavaScriptなしでも動きますが、このデモのようにjQueryを使って、ユーザーがページをスクロールしたときにアニメーションが始まるようにしてもいいかもしれません。
（翻訳ここまで）
いかがでしたでしょうか？どんな動きにしようか迷ったときや伝えたいイメージがあるときなどに、こういったサイトをいくつか知っておくと便利だと思います。ちなみに弊社デザイナーの貫井は映画からヒントを得ることが多く、映画を観るとついつい本編よりUIが気になってしまうとか。アイアンマンやオブリビオン、マイノリティーリポートなどの映画が特に参考になるそうです。他にもアプリケーションのプロモーション動画や家庭用ゲームなど、アプリに限らずに世の中にある様々なものからインスピレーションを得ていると言っていました。皆さんはどんなものからインスピレーションを得ていますか？他にも何か良いサイトがあればぜひMEMOPATCHまでお知らせください！
翻訳記事：“Interface Animations and Transitions: where to get inspiration”
原文著者：Walter Stéphanie