美しいSVGアニメーションを使ったWebサイト10選【デザインの参考に】

美しいSVGアニメーションを使ったWebサイト10選【デザインの参考に】
  • このエントリーをはてなブックマークに追加
  • 903

    follow us in feedly

SVGというのはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)の略で、拡大縮小しても画質を損なわないベクターデータです。Adobeのイラストレーター使っている人はよくわかると思います。

そんなSVGをブラウザ上でCSS3やJavascriptを使って動かすSVGアニメーションを良く見かけるようになったので、今回はおすすめのものを10個ご紹介したいと思います。どれもきれいなものばかりなので、見てみると自分でもSVGアニメーションを作ってみたくなりそうです。

それではどうぞ。

スポンサーリンク

The 25th Hour

the 25th hour

Louis Coyleさんの作品。自然の中で夜が明けていく様子がとても綺麗です、蛍のふわふわとしたアニメーションも幻想的。

http://louie.co.nz/25th_hour/

Super Duper Studio

super duper studio

ブラジルのデザインスタジオのサイト。

背景の図形がスクロールするとグラデーションの色と形がぐにゃぐにゃと変わって面白いです。

https://www.superduper.wtf/

Timepot

timepot

ポーランドにある時間計測システムを提供しているサイト。

スクロールするごとに出てくるグラフが動いて思わず目がそちらに行ってしまいます。動きがあるページだとユーザーも飽きなくていいですね。

https://www.timepot.io/

404 Creative Page

404 creative page

有料で販売されているエラーページ用に作られたSVGアニメーション。100%SVGみたいなので手が込んでますね、すごい・・・。よーく見ると細かい部分も動いたりしてます。下のリンクからプレビューが見れるのでぜひどうぞ。

Error 404 – Computer System Fail

insymbiosis

insymbiosis

医薬品開発に関わる会社のサイト。背景にある細胞のようなグラフィックがふわふわと動きます。メニューを開いた時のグラデーションやボタンの色合いも綺麗ですね。

http://www.insymbiosis.com/

wrk

wrk

フランスのWeb制作スタジオのサイト。淡い配色で色合いもきれいです。船のイラストとか全部pathタグで作られているのでSVGですね。さりげなく寿司が置いてある・・・!

クリックした時のさざなみのような動きなど、ダイナミックさもあります。

https://waaark.com/

WE CRAFT APPS

WE CRAFT APPS

フランスのWeb制作会社のサイト。

線だけで作られたイラストが、画面全体となじんでいてシンプルですね。SVGで作ったグラフィックはくっきり綺麗なので見やすいです。

https://www.wecraftapps.com/

Grosse Lanterne

Grosse Lanterne

サマーフェスティバルのイベントサイト。

背景のイラストは全部SVGで作られてます。思わずスクロールしたくなるように全体にSVGが多く使われています。

http://www.grosselanterne.com/en/

Type Terms

type terms

タイポグラフィの説明をしているサイト。ひとつひとつのパーツがSVGで作られています。ちょっとした動きで難しくなりがちな説明もわかりやすくなりますね。

https://www.supremo.tv/typeterms/

CUBERTO

cuberto

イギリスのクリエイティブチームのWebサイト。フォントに装飾や動きをつけて、デザインの一部にしていているところがかっこいい表現だなと思いました。このサイトは動画も使っているので、より躍動感があるように見えます。

http://cuberto.com/

まとめ

というわけでたくさん探してみて中でも動きがあっておすすめのサイトを10個紹介しました。

静的サイトに比べて動きがある分、気になってついつい見入ってしまいますね。しかもSVGなので画像と違いボケたり画質を気にしなくて良いので、くっきり見やすいです。

SVG自体はIE含む最新バージョンで対応してますが、アニメーションとなるとブラウザによって動作しないものもあるので(特にIE…)まだまだ発展途上ですが新しい表現方法として面白いと思います。ちょうどFlashが流行っていた頃を思い出しました。技術が進んでこれからどんどん動きのあるサイトが増えるんだろうなと思わせてくれます。

SVGやSVGアニメーションに興味がある方の参考になれば嬉しいです:) それでは!

スポンサーリンク