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/itcompany_service_person/4977

関連記事

  1. 情報を集めるならここ!おすすめのメディアサイトTOP10

  2. 【ランキング】世界の利用者順でみる人気SNSトップテン

  3. 【2019年版】未経験、初心者必見!プログラミングスクールのおすすめTOP10

  4. 【ランキング】数億円を監視する探偵会社って何をしているの?実際に聞いてきた最終版

  5. 統計ソフトウェア比較ランキング!無料で試せるおすすめTOP3

  6. 【ランキング】初めてカードを作るならこれ!おすすめクレジットカードトップテン