2015.10.15【おさらい】WEBサイトでアニメーションをつけるには?最近のWEBサイトではアニメーションなどで、なにかしらの動きをつけるのが当たり前になってきました。普段、私も制作をして「ここにちょっと動きをつけたいんだけど...」「面白い動かし方ないですかね?」と相談を受けることが増えました。ひと昔前までは「動き」というと、Flashで作るのが定番でしたが、スマートフォンの普及や新しいブラウザの広がりにより、今はFlash以外で対応するのが一般的になりつつあります。そこで今回は、自分自身の備忘録も兼ねて、アニメーションをつける方法をまとめてご紹介したいと思います。ひとくちに「動き」といっても、実装方法もさまざまありますし、見せ方も豊富。今後のWEB制作のちょっとしたヒントになれば幸いです。CSSで動かすCSS3では要素にアニメーションを設定し、色々な動きをつけることができます。見かけるフェードイン、フェードアウトといったおなじみの動きだけでなく、バウンド、シェイク、回転...といったテンポの良いアニメーションも実装可能。下記にいくつかサンプルサイトをご紹介しますが、デモ画面で動きをボーッと見ているだけでも、なんだか楽しくなったりするものです。コムテブログhttp://commte.net/blog/archives/5082また、要素を動かすだけでなく、マウスオンアクションをふわっと動かしたり、発光させたりすることもCSSで表現できます。したアクセントの1つとして、検討してみるのも面白いかもしれません。動くCSSのためのメモ。Lopan.jphttp://lopan.jp/css-animation/html5で動かすhtml5の新しい要素に、画像を描画することができるcanvas要素が加わりました。イメージに動的なアニメーションを付与することができます。前の案件でグラフを動かす際に実装したことがありますが、なかなか気持ちのいいアニメーションで、視覚に訴えることができるのが面白いと思いました。JavaScriptと組み合わせることで表現方法は無限に広がり、サイト上にもっと大胆に動きをつけることもできます。Flashを使わずにリッチな見せ方を考えるときに検討したいですね。INC.http://liginc.co.jp/web/html-css/html/63355jQueryで動かすダイナミックな動きをつけたいときは、jQueryのプラグインが便利です。フルスクリーンのサイトで背景画面をスライドさせたり、パララックスでかっこよく見せる...といった場合です。最近では、こういったリッチなエフェクトさえも、いとも簡単に実装できるjQueryプラグインが公開されているので、参考にしてみるといいかもしれません。Swwwimhttp://swwwim.net/animation-css-jquery-script/GIFアニメーションで動かすモバイルラボでも「スマホサイトでも有効に使えるGIFアニメーションが見直されつつある」というテーマで取り上げました。確かに、単に動かすだけということであれば、GIFアニメーションを使うのも選択肢の一つだと思います。最近では、GIFアニメーションを生成するサービスやツールも登場していて、動画から簡単にGIFアニメーションが作れるようになりました。二十歳街道まっしぐらhttp://20kaido.com/archives/7925261.html余談ですが、私は野球が好きでよく野球のまとめサイトを見ているのですが、「ホームランのシーン」「ファインプレーのシーン」など、ほんのちょっとした1シーンはGIFアニメーションで公開されていることが多いです。外出先でも簡単にサクッと見れるという点で、これはひじょうにありがたい配慮です。まとめざっと、思いつく方法を羅列してみました。マルチスクリーンの時代が来た今、ますます動きを実装するサイトは増えてくると思います。クライアントとの打ち合わせや提案の際に、「動き」に対する引きだしを豊富に持っておくのも、ディレクターの重要なスキルになるかもしれません。タグまとめスマホデザイン事例TweetMobify(モビファイ)とはGoogleが認定しているマルチスクリーン対応のための最適化サービス。デバイスに応じ、専用にデザインされたサイトを表示することができます。ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。新しい発見やTIPS、セミナー&イベント企画を募集しています。あなたの力を待っています。