Awesome Motion UI Design

Motion UI Designを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

• 着想を得るための資料
  • サイト
  • Pinterestボード
  • Processingなど
• 記事
• ソフトウェア
  • 動画、GIF、プレゼンテーション
  • ビジュアルプログラミング
  • HTML, CSS and JavaScript
• 補助ツール
• ライブラリ
  • CSS
  • JavaScript
  • SVG
• ウェブアニメーションの性能
• 講演、プレゼンテーション、動画
• ニュースレター、ポッドキャスト、スクリーンキャスト
• ガイドライン
• 書籍

着想を得るための資料

サイト

• Tympanus codrops – インタラクティブなデモと実験
• Codyhouse – インタラクティブなデモと実験
• Dribbble – Dribbbleにおけるアニメーションショットカテゴリ
• Codepen – HTML／CSS／JSのサンドボックス
• Give ’n’ Go – DribbbleのショットをインタラクティブなCodePenにリワークしたキュレーションギャラリー
• Awwwards – アニメーションを備えたウェブサイトの例
• cssanimation.rocks – CSSアニメーションデモ
• ui-animations.tumblr.com – ソフトウェアユーザーインターフェースにおけるアニメーション
• hoverstat.es – Animadeスタジオがキュレーションした興味深いウェブサイトのコレクション
• appealing. – モバイルのトランジションとアニメーションのコレクション

Pinterestボード

• Gestures, transitions, animations Yuri Vetrov による
• Web UI animation JRMY LFBV による
• UX/UI interaction & Motion design Matthieu Lerat による
• Animated UX/UI Julien Tilly による
• Motion UI CodeDesign による

Processingなどの風変わりで楽しい作品

• Bees & bombs – デイブ・ワイートによる処理実験
• PATAKK – パオロ・ザグレブによる処理実験
• dvdp – デイビッドオペによるビジュアル・シンタウン
• bigblueboo – チャーリー・デックによる3Dおよび処理実験
• Misha Kvakin – Cinema4DおよびUI実験

記事

• How fast should your UI animations be? @valhead による。
• Getting started with UI motion design @Molly Laffertyによる実験
• A Designer’s Guide to Perceived Performance @Luke Jonesによる実験
• How to Use Animation to Improve UX @Nick Babichによる実験
• How To Use Animations and Motion in Web Design @PageCloudによる実験
• UI Animation: Eye-Pleasing, Problem-Solving @Tubik Studio. による
• UI Motion Design — The Compendium @Thalionによる実験
• Creating Usability with Motion: The UX in Motion Manifesto @Issara Willenskomerによる実験
• Jedi Principles of UI Animation @Adaptive Pathによる実験
• Micro Interaction; great experience for user engagement @Sneha Munotによる実験
• UI Animation. Microinteraction for Macroresult @Tubik Studio. による
• The Principles of UX Choreography @Rebecca Ussai Henderson. による

ソフトウェア

UIアニメーション制作用ソフトウェアを技術と出力形式（動画、プロトタイプ、コードなど）別に整理し、必見のチュートリアルやプラグインも掲載しています。

動画、GIF、プレゼンテーション

• Adobe After Effects – 業界標準のアニメーションおよびクリエイティブコンポジティングアプリで、映画、テレビ、動画、ウェブ向けのプロフェッショナルなモーショングラフィックスおよび視覚効果の設計と配信が可能：
  • Using After Effects for UI Animation Prototypes (:movie_camera: ビデオ)。
  • UI Animation tutorials。
  • How to Use After Effects for Web Animation Prototypes (:movie_camera: ビデオ)。
  • MtMograph summits (:movie_camera: ビデオ)。
  • After Effects CC Essential Training on Lynda (:movie_camera: ビデオ)。
  • BodyMovin – AEからSVG/canvasへの変換ツール
  • Squall – AEからiOSへの変換ツール
• Apple Motion – MacOS用のモーショングラフィックス、動画および映画制作用のタイトル作成、視覚効果用の2D/3Dコンポジティングアプリ
• Adobe Photoshop – GIF形式のUIアニメーションも作成できるラスターグラフィックス編集ツール
• Adobe Flash – ベクターグラフィックス、アニメーション、ゲームなどを作成するソフトウェア
• Apple Keynote – プレゼンテーション用のMacOSアプリだが、高精度アニメーションやプロトタイプにも非常に適している：
  • How To Prototype UI Animations In Keynote。

ビジュアルプログラミング

• Quartz Composer – ノードベースのビジュアルプログラミング言語でmacOS／iOSアプリを試作するmacOSアプリ（Appleによる提供終了）：
  • The 4 Minute Guide to Quartz Composer (:movie_camera: ビデオ)。
  • Introducing Origami for QC。
  • Origami Studio – フェイスブックが提供する現代的なUIを作成するツール
• Principle For Mac – マックOS用のアニメーション・インタラクティブなユーザーインターフェースを作成するアプリ
• Floid – ウェブ、iOS、Androidなど、あらゆるプラットフォーム・デバイス向けのマックOS用インタラクションデザインツール

HTML、CSS、JavaScript

• Framer – アニメーションおよびインタラクティブUIのプロトタイピングに使うツール
  • Your first prototype with framer。
• Tumult Hype – HTML/CSSサイト、バナー、プレゼンテーションなどを作成するマックOSアプリ
• Adobe Animate – HTML/CSSサイト、バナー、プレゼンテーションなどを作成するアプリ：
  • Prototyping UI Animation。
• Google web designer – HTMLベースのデザインとモーショングラフィックス
• Animatron – ウェブアプリでアニメーション、バナー、情報図を作成
• SpiritJS – ウェブ向けアニメーションツール（開発中）
• Any HTML/CSS editor, libraries ;)

そしてもちろん、秘密兵器である紙とペンもあります。

補助ツール

• easings.net – イージング関数の一覧
• cubic-bezier.com – cubic-bezier調整ツール
• csstriggers.com – リペイン、リフロー、またはコンポジティングをトリガーするCSSプロパティの一覧

ライブラリ

• Web Animation Infographics – 使われている技術に基づくライブラリによる素晴らしい（しかし古い）情報図
• Bouncy Ball – 各アニメーション技術でボールのバウンスを示して比較

CSS

• Animate.css – CSSアニメーションのコレクション
• Effeckt.css – UIアニメーションのコレクション
• Bounce.js – JavaScriptのエイジング関数からCSSキーフレームアニメーションを生成するツール
• Animations.css - コレクション
• Magic animations – コレクション
• UI buttons – ボタンのコレクション
• Hover.css – ホバーエフェクト
• Morf – カスタムエイジング関数を使ったトランジション
• Awesome CSS3 animations – アニメーションのライブラリ
• All Animation – プロジェクトをより魅力的にする楽しいアニメーションのセット
• Mantra – キーフレームアニメーションを作成するツール

JavaScript

• GreenSock – 超高性能でプロ向けの現代ウェブ向けアニメーション
• Velocity.js – JavaScriptによる高速アニメーション
• Impulse – モバイルウェブ向けの高パフォーマンスインタラクション
• AniJS – データ属性で宣言されたアニメーション
• Snabbt.js – 最小構成のJavaScriptアニメーションライブラリ
• Processing.js – Processingの視覚プログラミング言語向けJavaScriptライブラリ
• Dynamics.js – 物理学ベースのアニメーションを作成するJavaScriptライブラリ
• Mo.js – ウェブ向けのモーショングラフィックスツールセット
• AnimateTransition – ブロックとポップアップのトランジション用ライブラリ
• Animate Plus – 現代ブラウザ向けCSSおよびSVGアニメーションライブラリ。パフォーマンスと軽量（3KB圧縮済）であり、特にモバイル環境に最適化されています。
• Gravitas.js – JavaScriptによる超高速物理シミュレーション
• Popmotion – ユーザーインタラクションの作成を簡単かつ魅力的にするJavaScriptモーションエンジン
• anime.js - 軽量なJavaScriptアニメーションライブラリ
• useAnimations - マイクロアニメーションアイコンライブラリ

SVG

• SnapSVG — SVGアセットの操作をjQueryがDOM操作を可能にするように簡単にするJavaScriptライブラリ
  • How to Manipulate and Animate SVG With Snap.svg
• BonsaiJS – 軽量のグラフィックスライブラリで、直感的なグラフィックスAPIとSVGレンダラーを提供。
• Vivus.js – SVGをアニメーション化することで、描かれるように見えるようにする。
• Walkway.js – 線、パス、ポリライン要素から構成されたSVG画像を簡単にアニメーション化できる。
• Transformicons – SVGとCSSを使ってアニメーションされたアイコン、シンボル、ボタン。

ウェブアニメーションの性能

• Jankfree.org – ブラウザパフォーマンスに関する記事やプレゼンテーションのコレクション。
• High performance animations。
• How to Create Smoother Animations and Transitions in the Browser。

講演、プレゼンテーション、動画

• Interface Animations (Mark Geyer) – BlendConf 2014でのワークショップ。
• The future of UX – Animation on the Brain (Rachel Nabors)。
• Designing Complex SVG Animations (Sarah Drasner, Trulia)。
• Designing with animation (Pasquale D’Silva) (:movie_camera: ビデオ)。
• Animating Web Experiences (John Allsopp) (:movie_camera: ビデオ)。
• Putting Your UI in Motion (Val Head) (:movie_camera: ビデオ)。
• Motion design with CSS (Val Head) (:movie_camera: ビデオ)。
• Lets move! (Benjamin De Cock, Stripe) (:movie_camera: ビデオ)。
• Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) (:movie_camera: ビデオ)。
• Animating the User Experience (Rachel Nabors) (:movie_camera: ビデオ)。
• Designing meaningful animation (Val Head) (:movie_camera: ビデオ)。
• Functional Animation (Sarah Drasner) (:movie_camera: ビデオ)。
• Animations anew - laziness, arrogance and intolerance (Andrey Sitnik) (:ru: ロシア語)。

ニュースレター、ポッドキャスト、スクリーンキャスト

• The UI Animation Newsletter – @valhead によるウェブアニメーションの活用方法に関するリソースとアドバイスを含むニュースレター。
• Motion and meaning – @valhead と Cennydd Bowles によるデジタルデザイナー向けの動きに関するポッドキャスト。
• All The Right Moves – @valhead によるアニメーションレビュー。

ガイドライン

• Android
  • Material design guidelines: Motion
• MacOS
  • Human Interface Guidelines: Motion
• Windows
  • Motion in Windows apps

書籍

• Animation in HTML, CSS, and JavaScript。
• Futureproof Web Design Techniques. Interaction Design & Complex Animations @UXPin による。
• Designing Interface Animations @valhead による。

共有方法 :star::star::star::star::star:

• Share on Twitter
• Share on Facebook

ライセンス

Artur Kornakovと素晴らしいコントリビューターの皆さんが:heart:を込めて収集しました