こんなにあった!UIデザイナー向けアニメーションライブラリー最新ベスト9

2017/06/22

Tanay Pant

147

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

Webサイトをおしゃれに、かっこよく演出するアニメーション系JavaScriptライブラリー。デザイナーにも使いやすいライブラリーをまとめました。デモを見るだけでもアイデアがひらめくかも?

Webデザインはこの10年間で大きく変わりました。2007年頃は雑誌のように静的なレイアウトが主流でしたが、2017年には数千のパーツが連動して伸縮しながら移動するデザインも可能になりました。

これから、優れたUIデザイナーになるにはWebアニメーション技術に関する知識も必要です。

この記事ではUIデザイン向けの良質なアニメーションライブラリーを9つ紹介します。現時点での最新の情報と、各ライブラリーの強みや弱み、向き不向きをまとめたので、タスクに適したライブラリーを選んでください。

「コーディングプロ級」の開発者ではなくコーディングもこなせるUIデザイナーの視点で各ライブラリーを評価しました。CSSだけのライブラリーやJavaScriptを使ったライブラリーなどありますが、ライブラリーをリンクしたりCSSクラスを追加したりするなどの基本的なHTMLとCSSの知識があれば使いこなせます。

2017年版アニメーションライブラリー9選

  1. Animate.css
  2. Bounce.js
  3. AnimeJS
  4. Magic Animations
  5. DynCSS
  6. CSShake
  7. Hover.CSS
  8. Velocity.js
  9. AniJS

Animate.css

軽量で簡単に使えるCSSアニメーションライブラリーならAnimate.cssに勝るものはありません。CSSをリンクしてHTMLエレメントに必要なCSSクラスを追加するだけで利用できます。jQueryを使えば特定のイベントをトリガーにしてアニメーションを開始できます。

Animate.css

  • 作成者:Daniel Eden
  • リリース:2013年
  • 最新版:
  • 人気:
  • 特徴:CSSアニメーションのクロスブラウザーライブラリー。簡単に使える
  • サイズ:43 kB
  • GitHub:https://github.com/daneden/animate.css
  • ライセンス:

Animate.cssは2017年半ば時点でもっとも人気があり広く使われているCSSアニメーションライブラリーの1つです。Minified版は16.6kbなのでモバイルWebサイトでも使えます。Githubの星が41,000あり、多くの大規模プロジェクトにコンポーネントとして含まれています。

リリースから4年を経過した現在でも活発な開発が進められています。Animate.cssはもっともシンプルで信頼性の高いアニメーションライブラリーです。どんなプロジェクトにもおすすめです。

Bounce.js

Bounce.jsはJavaScriptのアニメーションライブラリーで、楽しくバウンドする「ワーナー・ブラザース風」のユニークなアニメーションをWebサイトに追加できます。

Bounce.js

  • 作成者:Tictail
  • リリース:2014年
  • 最新版:
  • 人気:
  • 特徴:CSS3による美しいアニメーションをすぐに作れる
  • サイズ:16 kB
  • GitHub:https://github.com/tictail/bounce.js
  • ライセンス:

Bounce.jsには小さいサイズのライブラリーをはじめ10個のアニメーションライブラリーが標準セットです。Animate.css同様、アニメーションはスムーズで引っかかりません。飛び跳ねるボールのようなアニメーションを小さいファイルサイズで実現したければ、このライブラリーを検討してください。

AnimeJS

AnimeJSは誕生から1年でたくさんの利用者をほかのライブラリーから奪い、今年はじめてランクインしました。多機能かつ高性能で、HTMLゲームのアニメーションには欠かせません。ただしシンプルなWebアプリ向きではないものの、「速い動作」「小さなサイズ」「学びやすさ」を考慮すると、デメリットを見つけるのが難しいライブラリーです。

軽量のJavaScriptアニメーションライブラリーで「すべてのCSSプロパティ」「それぞれのCSS transform」「SVG」「すべてのDOM属性」「JavaScriptオブジェクト」に使えます。すばらしいライブラリーで、アニメーションのスムーズさはGifで伝えることはできません。

AnimeJS

このプロジェクトはGitHubで入手できます。

特筆すべきはAnime.JSのドキュメントです。HTMLやJavaScriptコード、実行可能なサンプルをアプリで閲覧できます。

一言でまとめると、JavaScriptに抵抗がないならAnime.JSを使わない理由はありません。

Magic Animations

Magic Animationsは印象に残るアニメーションライブラリーです。このライブラリーでしか手に入らないアニメーションも少なくないほどたくさんのアニメーションが含まれます。Animate.cssと同じく、CSSファイルをインポートするだけで利用でき、jQueryのアニメーションも使えます。また、見栄えの良いデモアプリケーションが用意されています。

Magic Animations

Magic animationsのファイルサイズはAnimate.cssと同等ですが、マジック効果、フーリッシュ効果、ボム効果など特有のアニメーションがあります。

一味違ったアニメーションを探しているなら、このライブラリーがおすすめです。期待に応えてくれます。

DynCSS

DynCSSは、パララックス効果とセットで使いたいアニメーションライブラリーです。イメージをつかむために、このデモを見てください。

DynCSS

DynCSSは、比較的新しいプロジェクトなのでGitHubの星はまだ多くありませんが、これから人気になりそうなシンプルなライブラリーです。スクロールに合わせてエレメントを回転させる機能があります。DynCSSのWebサイト(パララックスを使った例)にも使われています。

CSShake

CSShakeは、WebサイトのエレメントをシェイクするためのCSSライブラリーです。Webコンポーネントをシェイクする方法がたくさん用意されています。

CSShake

ユーザーが誤ったレスポンスを入力したときに、UIエレメント(ダイアログモーダルかテキストボックス)が頭を左右に振るかのように激しくシェイクする手法をAppleが広めました。CSShakeにはたくさんの種類の「シェイク」アニメーションがあり、バリエーションが不足することはありません。

現時点ではDynCSSより人気がありますが、機能に対してファイルサイズが大きすぎるように思います。さらに、シェイク以外を使いたければ他のアニメーションライブラリーの追加が必要です。

私が考え付かないだけで、このライブラリーだけで完結できる方法があるのかもしれませんが。

Hover.css

Hover.cssはボタンなどのUIエレメントを装飾するCSSアニメーションライブラリーです。2Dアニメーション遷移を筆頭に、優れたアニメーションがたくさん含まれます。

Hover.css

  • 最新版:
  • 人気:
  • 特徴:エレメントへの適用も修正も簡単で、可能性は無限に広がる。
  • サイズ:104.2 kB
  • GitHub:https://github.com/IanLunn/Hover
  • ライセンス:

Hover.cssは、ページ全体を対象にした複雑なアニメーションではなく、ボタンやロゴ、SVGコンポーネント、目立たせたい画像などページ内のエレメントのアニメーションに向いています。サイズは大きいですが、標準的に使うアニメーションが網羅されています(ただし最適化すればもっと小さくなるはずだと思います)。特徴的なアニメーションはスピーチバブルとカールでしょう。

Velocity.js

Velocity.jsもまた高機能で洗練されたJavaScriptアニメーションライブラリーです。フェイド&スライド、スクロール、ストップ、フィニッシュ、リバースなど多くの機能を備えています。

このライブラリーはTumblr、WhatsApp、MailChimp、Scribd、Gap、HTCなどの有名ブランドに採用され、特殊な例も含めて多くのユーザーにより徹底的にテストされました。

Velocity JS

VelocityはJavaScriptのアニメーションエンジンなので、使用をためらう人もいるでしょう。jQueryの$.animate()と同じAPIで、jQueryの有無に関わらず動作します。驚くほど高速で、カラーアニメーション、トランスフォーム、ループ、イージングなどの機能があります。jQueryとCSS遷移のいいとこ取りをしたライブラリーです。

AniJS

最後に紹介するのは一風変わったライブラリーAniJSです。これは「文章のような構造」で簡単にアニメーションをエレメントに付加できるアニメーションライブラリーで、以下のフォーマットを使います。

If click, On Square, Do wobble animated To .container-box

<div data-anijs="if: click, do: wobble, to: .container-box"></div>

JavaScriptが得意でなくても、このライブラリーがJSでエレメントの動きを覚える手始めになるでしょう。

AniJS

  • 作成者:anijs
  • リリース:2014年
  • 最新版:
  • 人気:
  • 特徴:コーディング不要でWebデザインをブラッシュアップ
  • サイズ:10.5 kB
  • GitHub:https://github.com/anijs/anijs
  • ライセンス:

AniJSは機能のわりにはサイズが小さいライブラリーです。ユニークな書式で、ほかのアニメーションライブラリーとは一味違います。常識破りとも言えるでしょう。

とはいえ試してみる価値のあるライブラリーです。全般的に機能が不足していたり洗練さに欠けていたとしても、これから成長していくポテンシャルがあります。

どのライブラリーを選ぶか?

アニメーションライブラリーの選択肢はたくさんあります。この記事では洗練さと安定性の両方を兼ね備えたものを紹介しました。

簡単に使えて安定したCSSのライブラリーなら、多機能なAnimate.CSSがいいでしょう。

より強力で機能がそろったJavaScriptのライブラリーなら、VelocityJSかAnime.JSでしょう。Velocityは利用実績と使用者数が勝っていますが、Anime.JSには次のプロジェクトに使いたくなる洗練されたアニメーションがあります。現時点では、ドキュメントの美しさでAnime.JSに軍配を上げたいと思います。

アニメーションライブラリー使うことでインターラクティブなWebアプリケーションになりますが、やり過ぎるとユーザーを混乱させます。よく考えて使いましょう。

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者です。またSitepointのデザインとUX編集も担当していいます。

(原文:The Top 9 Animation Libraries for UI Designers in 2017

[翻訳:内藤 夏樹/編集:Livit

Copyright © 2017, Tanay Pant All Rights Reserved.

Tanay Pant

Tanay Pant

テクノロジーが大好きなインド出身のライター、ハッカー、開発者です。「Learning Firefox OS Application Development」(Packt刊)の著者。Mozillaの公式代表で、Firefox Webブラウザーの貢献者ページに名前が掲載されています。個人のWebサイトはtanaypant.com

Loading...