Smartphone スマホ

 
スマホデザイン・UI

【おさらい】WEBサイトでアニメーションをつけるには?

image
最近のWEBサイトではアニメーションなどで、なにかしらの動きをつけるのが当たり前になってきました。普段、私も制作をして「ここにちょっと動きをつけたいんだけど…」「面白い動かし方ないですかね?」と相談を受けることが増えました。
ひと昔前までは「動き」というと、Flashで作るのが定番でしたが、スマートフォンの普及や新しいブラウザの広がりにより、今はFlash以外で対応するのが一般的になりつつあります。
そこで今回は、自分自身の備忘録も兼ねて、アニメーションをつける方法をまとめてご紹介したいと思います。ひとくちに「動き」といっても、実装方法もさまざまありますし、見せ方も豊富。今後のWEB制作のちょっとしたヒントになれば幸いです。

CSSで動かす

CSS3では要素にアニメーションを設定し、色々な動きをつけることができます。よく見かけるフェードイン、フェードアウトといったおなじみの動きだけでなく、バウンド、シェイク、回転…といったテンポの良いアニメーションも実装可能。下記にいくつかサンプルサイトをご紹介しますが、デモ画面で動きをボーッと見ているだけでも、なんだか楽しくなったりするものです。

css3アニメーションのレパートリーがきっと増える!動きの参考になる21サイト | WEB企画 スタッフブログ

http://webkikaku.co.jp/staff/htmlcss/css3animation/

ここまで動かせる!楽しいcss アニメーションのサンプル集 | コムテブログ

http://commte.net/blog/archives/5082

また、要素を動かすだけでなく、マウスオンアクションをふわっと動かしたり、発光させたりすることもCSSで表現できます。ちょっとしたアクセントの1つとして、検討してみるのも面白いかもしれません。

動くCSSのためのメモ。 | Lopan.jp

http://lopan.jp/css-animation/

html5で動かす

html5の新しい要素に、画像を描画することができるcanvas要素が加わりました。イメージに動的なアニメーションを付与することができます。
少し前の案件でグラフを動かす際に実装したことがありますが、なかなか気持ちのいいアニメーションで、視覚に訴えることができるのが面白いと思いました。
JavaScriptと組み合わせることで表現方法は無限に広がり、サイト上にもっと大胆に動きをつけることもできます。Flashを使わずにリッチな見せ方を考えるときに検討したいですね。

HTML5事例/Flashを使わなくてもここまで表現できる | Webマーケティングを極める

http://html5-lab.jp/example/domestic_example/182.html

まるで自分の意思があるかのよう!canvasサイトまとめ12選 | LIG INC.

http://liginc.co.jp/web/html-css/html/63355

jQueryで動かす

ダイナミックな動きをつけたいときは、jQueryのプラグインが便利です。例えば、フルスクリーンのサイトで背景画面をスライドさせたり、パララックスでかっこよく見せる…といった場合です。最近では、こういったリッチなエフェクトさえも、いとも簡単に実装できるjQueryプラグインが公開されているので、参考にしてみるといいかもしれません。

【まとめ】簡単にパララックスサイトが作れるjQueryプラグイン17選 | シャッフルブログ

http://blog.shuffleee.com/1578/

今風になった!Web制作で使える最近のjQueryプラグインまとめ | コムテブログ

http://commte.net/blog/archives/4794

参考にしたい!アニメーションの動きが気持ちいいスクリプト | Swwwim

http://swwwim.net/animation-css-jquery-script/

GIFアニメーションで動かす

モバイルラボでも「スマホサイトでも有効に使えるGIFアニメーションが見直されつつある」というテーマで取り上げました。確かに、単に動かすだけということであれば、GIFアニメーションを使うのも選択肢の一つだと思います。

最近では、GIFアニメーションを生成するサービスやツールも登場していて、動画から簡単にGIFアニメーションが作れるようになりました。

いま話題のGIFアニメ系Webサービス・iOSアプリ10個まとめ | 二十歳街道まっしぐら

http://20kaido.com/archives/7925261.html

余談ですが、私は野球が好きでよく野球のまとめサイトを見ているのですが、「ホームランのシーン」「ファインプレーのシーン」など、ほんのちょっとした1シーンはGIFアニメーションで公開されていることが多いです。外出先でも簡単にサクッと見れるという点で、これはひじょうにありがたい配慮です。

まとめ

ざっと、思いつく方法を羅列してみました。マルチスクリーンの時代が来た今、ますます動きを実装するサイトは増えてくると思います。クライアントとの打ち合わせや提案の際に、「動き」に対する引きだしを豊富に持っておくのも、ディレクターの重要なスキルになるかもしれません。

タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事