SVGというのはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、拡大縮小しても画質を損なわないベクターデータです。Adobeのイラストレーター使っている人はよくわかると思います。
そんなSVGをブラウザ上でCSS3やJavascriptを使って動かすSVGアニメーションを良く見かけるようになったので、今回はおすすめのものを10個ご紹介したいと思います。どれもきれいなものばかりなので、見てみると自分でもSVGアニメーションを作ってみたくなりそうです。
それではどうぞ。
この記事の目次 [目次を見る]
The 25th Hour
Louis Coyleさんの作品。自然の中で夜が明けていく様子がとても綺麗です、蛍のふわふわとしたアニメーションも幻想的。
Super Duper Studio
ブラジルのデザインスタジオのサイト。
背景の図形がスクロールするとグラデーションの色と形がぐにゃぐにゃと変わって面白いです。
Timepot
ポーランドにある時間計測システムを提供しているサイト。
スクロールするごとに出てくるグラフが動いて思わず目がそちらに行ってしまいます。動きがあるページだとユーザーも飽きなくていいですね。
404 Creative Page
有料で販売されているエラーページ用に作られたSVGアニメーション。100%SVGみたいなので手が込んでますね、すごい・・・。よーく見ると細かい部分も動いたりしてます。下のリンクからプレビューが見れるのでぜひどうぞ。
Error 404 – Computer System Fail
insymbiosis
医薬品開発に関わる会社のサイト。背景にある細胞のようなグラフィックがふわふわと動きます。メニューを開いた時のグラデーションやボタンの色合いも綺麗ですね。
wrk
フランスのWeb制作スタジオのサイト。淡い配色で色合いもきれいです。船のイラストとか全部pathタグで作られているのでSVGですね。さりげなく寿司が置いてある・・・！
クリックした時のさざなみのような動きなど、ダイナミックさもあります。
WE CRAFT APPS
フランスのWeb制作会社のサイト。
線だけで作られたイラストが、画面全体となじんでいてシンプルですね。SVGで作ったグラフィックはくっきり綺麗なので見やすいです。
Grosse Lanterne
サマーフェスティバルのイベントサイト。
背景のイラストは全部SVGで作られてます。思わずスクロールしたくなるように全体にSVGが多く使われています。
http://www.grosselanterne.com/en/
Type Terms
タイポグラフィの説明をしているサイト。ひとつひとつのパーツがSVGで作られています。ちょっとした動きで難しくなりがちな説明もわかりやすくなりますね。
https://www.supremo.tv/typeterms/
CUBERTO
イギリスのクリエイティブチームのWebサイト。フォントに装飾や動きをつけて、デザインの一部にしていているところがかっこいい表現だなと思いました。このサイトは動画も使っているので、より躍動感があるように見えます。
まとめ
というわけでたくさん探してみて中でも動きがあっておすすめのサイトを１０個紹介しました。
静的サイトに比べて動きがある分、気になってついつい見入ってしまいますね。しかもSVGなので画像と違いボケたり画質を気にしなくて良いので、くっきり見やすいです。
SVG自体はIE含む最新バージョンで対応してますが、アニメーションとなるとブラウザによって動作しないものもあるので（特にIE…）まだまだ発展途上ですが新しい表現方法として面白いと思います。ちょうどFlashが流行っていた頃を思い出しました。技術が進んでこれからどんどん動きのあるサイトが増えるんだろうなと思わせてくれます。
SVGやSVGアニメーションに興味がある方の参考になれば嬉しいです：） それでは！
