SVGアニメーションを使ったサイト

     
     
SVGアニメーションを使ったサイト

SVGアニメーションを使ったサイト


SVG(Scalable Vector Graphics スケーラ・ベクター・グラフィックス)というのはご存知でしょうか。

簡単に説明すると拡大、縮小しても画質が悪くならない画像データのことを言います。

このSVGを使って現在は「SVGアニメーション」というのを見かけるようになりました。

今回は「美しい」SVGアニメーションを使ったサイトをご紹介したいと思います。


             

1位:The 25th Hour

名前の通りアニメーションで25時間が表現されています。

朝から昼には朝焼けが描かれてたり昼から夕方や、夕方から夜、夜からまた朝とそれぞれのパートで様々な楽しみがあります。

ただ眺めているだけのサイトなのですが、癒されたい時などにはとても良いです。

また中央に存在する鹿の動きにも注目です。


             

2位:Super Duper Studio

このサイトを閲覧するとまず目に入るのが背景。

スライムのような形がスクロールすると変形したり、色が変わったりします。

またカテゴリーをクリックしようとするとエフェクトが現れたり面白い仕組みになっています。


             

3位:404 Creative Page

有料でエラーページ用に作られたSVGアニメーションが販売されています。

かなり手の込んだサイトになっており細かいところまで動いています。

これならページ参照エラーになったときにストレスたまらないこと間違いなし!


             

4位:insymbiosis

医薬品開発に関わる会社のサイトになっています。

背景にふわふわ浮いている細胞や金魚が存在します。

さらにグラデーションや色合いにはとても癒されます。


             

5位:wrk

エレガントで機能的なウェブサイトを閲覧できるギャラリーサイトになっています。

淡い色が使われており、かつダイナミックなエフェクトが使用されています。


wrk

             

6位:WE CRAFT APPS

WEBアプリケーションおよびモバイルアプリケーション開発の専門機関のサイトになっています。

青色がベースとなっておりシンプルなデザインになっていて見やすいです。


             

7位:Type Terms

タイポグラフィの説明をしているサイトになります。

それぞれのページにSVGアニメーションが使われており、かつシンプルで見やすいサイトになっております。


             

8位:CUBERTO

クリエイティブチームのWEBサイトです。

カーソルを動かしたり文字にカーソルをあてるだけでエフェクトが出現したりと、細かい部分までこだわられています。


             

9位:Timepot

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

スクロールするごとにエフェクトが出現し、思わずそちらに目が行ってしまうような作りになっています。


             

10位:Grosse Lanterne

サマーフェスティバルのイベントサイトになります。

背景のイラストはほとんどSVGで作られており色合いも夏らしい色になっていてとても見ごたえあります。


いかがだったでしょうか。

ここに掲載されているサイトはすべて海外のサイトばかりですが、どれも見ごたえのあるサイトばかりでしたね。

思わず眺めてしまったり何度もクリックしてしまったりしてしまう方もいらっしゃったかと思います。

見る人を飽きさせないサイトは面白いですね。

最後までご覧頂きありがとうございました。


https://top10.co.jp/other/4977

関連記事

  1. 「大フク猫まんが」の作者に聞いた幸せエピソードトップテン

  2. 【ランキング】タイプ別インフルエンサーおすすめトップテン!1.4万人をフォローして見えることとは?(第1弾)

  3. 【ランキング】水辺で生活する動物のマスコットキャラトップテン

  4. 人気の猫ランキングTOP10!それぞれの特徴・性格をご紹介/みんなのペットライフ

  5. 【ランキング】#休館中のサンシャイン水族館の生き物たちトップテン【マリンガーデン編】

  6. 世界の最も高価なペット・動物(価格順14種)|ailovei