もはや芸術！SVGアニメーションの巧みな活用方法20選

イベント要素をプラスした「BoonconPIXELS」

BoonconPIXELS

グラフィック・デザイナー集団の booncon PIXELS。ページトップのアニメーションがキュートですが、さすがと思わされるところに、SVG アニメーションの中にイベント要素を盛り込んでいます。左上の文字と左方の PC 画面らしき画像をクリック or タップすると文字やカラーが変わります。なかなか遊び心があって、参考になるアニメーションと思います。

プロモサイトでSVGアニメ「SquareCash」

SquareCash

ペイメント・サービスのアプリを提供する Square Cash。プロモーション・サイトに SVG アニメーションがうまく活用されている事例です。アプリの特徴を紹介するページでアニメーションが使われていますが、デバイスレスにタイムリ―に動きのあるデザインを楽しむことができます。

SketchベースのSVGアニメ「Threader」

Threader

ビジネス応援ソフトを展開する MEP Ally のプロダクトページになります。ページ上部のアイコン 3 つに SVG アニメーションが使われています。尚、アニメーションは Sketch で制作されたモノになるようです。Sketch を使った SVG アニメーションの制作イメージは、こちらの動画が参考になると思います。Sketch ユーザーの方、ご参考下さい。

CSSとの融合が参考になる「IDEOフードシステム・プロジェクト」

IDEOフードシステム・プロジェクト

世界にまたがりコンサル＆デザインで人々を幸せにする IDEO。2014 年に手がけた学校向けランチシステムを紹介する web ページになります。SVG 画像を CSS でアニメーション制御し、スクールランチを彷彿させるようなデザインにまとまっています。尚、CSS は Normalize.css が採用されています。

テキストアニメが参考になる「GiorgioArmani」

GiorgioArmani

アルマーニのメガネにフォーカスした web サイトになります。デザイナーを紹介するページで SVG アニメーションが活用されていて、ぼんやり文字が映し出される Transform 3d 要素と SVG アニメーションをセットにしている点も参考になります。ブラウザを問わずにキレイにアニメーションが映し出されている好例と思います。

アイコンが参考になる「Bjango」

BjangoCSS

Mac 用ソフトを提供する Bjango。こちらのサイトのトップ＆フッター部分のアイコンがステキです。base 64 で CSS コーディングされていて、SVG アニメーションを使ったアイコン事例として参考になります。Base 64 のメリットは、CSS を見てみると一目瞭然と思いますよ。各アイコン毎にキレイにコーディングされていて、分かりやすいですよね。

アイコン・アニメが参考になる「ZOOOK」

ZOOOK

フランス発の音響機器メーカー ZOOOK。トップページの製品カテゴリーを表すアイコンと製品ページのトップに SVG アニメ―ションが使われています。アイコンのアニメーション制御と製品ページのライン・アニメーションは、違う手法でデザインされています。

参考になるSVGアニメーションパーツ編

フリーランスのwebデザイナー＆デベロッパーであるマナエラ・リックさんとペドロさんがお届けしているcodropsを参考に、SVG アニメーションの情報をお届けしたいと思います。文中に SVG アニメーションのダウンロードを紹介していますが、個人・商用で活用できるライセンスとなっていますので、気になるアニメーションがあれば参考にしてみてください（codropsのライセンス情報）。

ホバーエフェクト

CodropsHover

マウスオンした時のリアクションに SVG アニメーションが活用されている事例です。Snap.js のライブラリーが活用されていて、ほとんどのブラウザ（最新版）でアニメーションを実行することができます。【ダウンロード・サイト】

ドローイング

CodropsDrawing

Illustrator などで作った SVG 画像を元に、加工されている SVG アニメーションの事例です。【ダウンロード・サイト】

インフォグラフィック

CodropsInteractive

タイムライン風のインフォグラフィックで、COFFEE や DESIGN などにマウスオンすると SVG アニメーションでポップアップ表示されます。JavaScript でも似たような表現をできると思いますが、やはり SVG アニメーションは動きが滑らかです。【ダウンロード・サイト】

ギフトボックス

CodropsGiftBox

JavaScript で SVG アニメーションを制御している、インパクトのある事例です。箱をクリックするとプレゼントがいっぱい飛び出してくるのですが、これほどたくさんの画像を一気に処理しても、また PC でもスマホでも映像がブレない点は、SVG アニメ―ションの特徴と思います。【ダウンロード・サイト】

メニューバー＆ボタンなど

CodropsMenu

お馴染みのドロワ―メニューやポップアップ表示から刺激を受けない方にお勧めしたいサンプル集サイトになります。SVG アニメーションならではの美しい動き、自由な表現が参考になります。Snap.js や bonzo などの JavaScript ライブリーを活用しています。お勧めのアニメーションはSIDEBARMenuとCIRCULARMENUです。【ダウンロード・サイト】

ライン表現

CodropsLine

文字やボタンなど様々な場面で活用できる SVG アニメーションのライン表現。こちらのサイトでは CSS で巧みにアニメーションを制御しています。ちょっと気になるライン表現があれば、デベロッパーツールを活用してCSS を覗いてみましょう。CSS 初心者の方でも分かり易くコーディングしてくれています（CSSのページへ）。【ダウンロード・サイト】

チェックボックス

CodropsCheckbox

ワンパターンになりがちなチェックボックスのデザインも、SVG アニメーションを取り入れることによって様変わりします。チェックを鉛筆でグリグリッとしたようなアニメーションから文章に取り消し線を引くようなアニメーションまでいろいろです。JavaScript でSVG アニメーションを制御しているいい事例と思います。【ダウンロード・サイト】

参考になるSVGアニメーションコード編

CODEPENやCSSDeskで公開されている SVG アニメーションをピックアップしてみました。SVG アニメーション初心者の方は、気になる SVG アニメーションがあれば、とりあえず<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg”> ~ </svg>までのコードをテキストにコピーして、HTML 形式で保存、ブラウザ出力してみると、どんな動きを表現しているか参考にすることができます。

SVGVSCSS

CSSDeskmariosanchezmaselliさん

同じアニメーションを SVG と CSS で表現した比較コードになります。一見すると同じような動きに見えますが、CSS の方がビールを胸から上にあげる時のスピード変化が若干ぎくしゃくしています。尚、SVG と CSS によるアニメーションのパフォーマンス比較はCSSTRICKSで検証されています。SMIL 形式の SVG アニメーションが良さそうなことは分かりますが、ブラウザ対応の障害があることが分かります。

アイコン・アニメーション

CODEPENHamishWilliamsさん

なんだかクリックすることが楽しくなりそうなアイコン・アニメーションです。こうした複雑で CSS ではカバーしきれないような SVG アニメーションは、一般的に SVG シェイプを活用して作成されます。

■SVGシェイプ・イメージ■

photo:CSSTRICKS

SVGアニメーション+PNG画像

CODEPENSARAHDRASNERさん

世界的な問題 14 項目を SVG アニメーションで表現しているサイトになります。ページを開くと円盤が回転しはじめ、各問題解決にかかる費用が表示されます。分かり易く見ごたえのあるアニメーションに仕上げられています。画面の大部分を占める円盤部分は PNG画像で、動きのあるお金マークやアニメーションに SVG テクニックが活用されています。SVG 要素の一つであるlinearGradientの好例と思います。

走る走るSVGアニメーション

CODEPENcihadturhan

滑らかな走りを永遠と続けるアニメーション事例になります。動きの複雑な “足” 部分は SVG アニメーションで、走り跡の半円やキュービックの動きは CSS で制御されています。Web デザインのトップやフッターに活用できそうなネタですね。

メニューアイコン×SVGアニメーション

CODEPENLucasBebberさん

ドロワ―メニューを CSS で制御し、表示されるアイコンに SVG のフィルターを催したコードになります。4 種類のサンプルが用意されていて、CSS、SVG 初心者にとっては見ごたえのある事例と言えるでしょう。Web デザイン会社の Garden Estúdio に勤めるルーカスさん作の作品になります。

ビールが飲みたくなるSVGアニメーション

CODEPENPintsize

ビールの気泡を SVG アニメーションで上手に演出している作品例になります。世界中の人がアレンジしやすいように、ソースコードは GitHub で公開されていて、こちらからダウンロードすることも可能となっています。尚、ライセンスは MIT License が付与されています。

おまけ：SVGアニメーションVSFlash

ThomasByrne

伝統的なアニメーション技法の Flash と SVG アニメーションを比較したサイトになります。SVG の方が軽量で、スマホでもスムーズに動くことが分かります。ただし、SMIL 形式の SVG アニメーションに対応していない Internet Explorer で、SVG アニメーションが起動しないこともよくわかります。

まとめ

いかがでしたでしょうか？webデザインで使えそうなネタはありましたでしょうか？2001年*に W3C が SVG アニメーションの規格を発表して以来、多くのブラウザが SVG アニメーションに対応した仕様へとアップグレードしています。レスポンシブデザインにも柔軟に対応し、スマホでもアニメーションが楽しめる SVG アニメーションは、今後もますます広がっていくと思いますので、乗り遅れない様にがんばっていきたいですね。尚、W3C の SVG アニメーション仕様についてはこちらに日本語訳が公開されています。