滑らかで美しい表現ができる！SVGアニメーションを使ってみよう

滑らかで美しい表現ができる！SVGアニメーションを使ってみよう

SVGアニメーションとは？

参考: CSS-TRICKS

SVG アニメーションは、SVG画像をベースに CSS や JavaScript で動きや装飾を加える表現手法の一つになります。

メリットとしては、軽量でスケーラブルな SVG 画像に好みのアニメーションを加えられるという点。普段 Web を見ている限りではどれがSVGアニメーションで、どれがSVGアニメでないのか区別はつきにくいですが、SEOや美しさ、滑らかさを求めるとSVGアニメーションにたどり着くでしょう。

例えば一般的にはバナー広告というと動きのない静止画が多いですが、上図のようなバナー広告はどうでしょうか？ちょっと他のバナー広告と違って、クリックしてみたくなりませんか？

一般的に上図のような画像アニメはGIF画像を使うケースが多いですが、SVGアニメーションで表現するとファイルサイズは極々小さく（上図24KB）、画像を拡大してもキレイです。これはWebビジネスを展開する方にとっては興味深いテクニックであると思いますし、一般の方にはこういうテクニックあまり知られていません。つまりフリーで活動される方にとっては単価アップを狙えるということ。

SVGアニメーションの作り方

SVGアニメーションの雰囲気を掴むためのサンプル。SVG設定部分の周りを、マウスホバー時に線画動く。CSS で処理。（code / Glitch、 hello-svg.html にアクセス）

SVGアニメーションに興味をもったら早速作ってみたい！と思う方も多いでしょう。SVGアニメーションを作成する流れは一般的に以下のような流れになります。

• SVG画像の用意（イラストレーター必須）
• CSS もしくは JavaScript でアニメーションをコーディング
• Webページへのセット

「へっ、イラストレーター必須！？」と思われた方もいらっしゃるかもしれませんが、SVG画像を作成・編集できるフリーソフト Inkscape では効率が非常に悪く、また参考となる情報もネットにありません。まだイラストレーターをインストールしていない方はこれを機会に検討されてみてはいかがでしょうか。

そしてイラストレーターで作成した画像を元に CSS か JavaScript で動きを付けていきます。CSS の場合は、 CSS アニメーションの translate がよく使われ、 JavaScript の場合は vivus.js という JavaScriptライブラリが使われますし、情報量も多いです。 そして最後にWebページへ SVG + CSSコード もしくは SVG + JavaScriptコード でセットアップ。

この流れ、Webデザインの学習を始めたばかりの方、プログラミングを始めたばかりの方にとっては上記の作成工程、中々難しい作業と言えるでしょう。そこでまずはモチベーションをブーストアップすることが必要ではないでしょうか？自分、クライアント含めSVGアニメーションに❤️ココロときめくかチェックしたいですね。

SVGアニメーションが使われている事例

WebデザイナーやWebディレクターの方であれば「なんでわざわざ慣れていないSVGアニメーションを使わないといけないんだ」と思うことも。実際の事例を確認しながらSVGアニメーションのイメージをふくらましてみましょう。

https://begonia-design.com.tw/about/team

こちらは中国のデジタル企業のホームページで、ちょっとプログラミングを始めている方でも「へっ、どうやってこんな処理しているの？」と思うところが多々あります。またWebの可能性を感じさせてくれる１サイト。SVGアニメーションについては、上図のようなスタッフ紹介や文字のアニメーションに使用。スタッフ紹介の部分では、人物コンテンツをSVGの枠内に納めて、JavaScriptと連携してモヤモヤっとするSVGアニメーションを実装。Vue.js（JavaScriptフレームワーク）をベースに、Webテクノロジーをうまく活用している事例でしょう。

https://www.yagi-kozai.co.jp/

こちらはページのトップ部分にSVGアニメーションを活かした事例。トップの動画部分に企業メッセージを重ねて、ページが開いた時に文字が滑らかに描かれるように設定、中々スタイリッシュでかっこいいですよね。

このようにSVGアニメーションの事例を見ていきますと「滑らか」「美しさ」を求めるようなWebページに向いているデザイン要素と言えます。またこの滑らかな表現は、HTML+CSS、 HTML+JavaScript では難しく、 SVG+CSS、 SVG+JavaScript の一択となるでしょう。お客様の方で「滑らか」「美しさ」をキーにWebデザインを考えている案件ありましたら、SVGアニメーションの提案が効いてくるかもしれませんね。

SVGアニメーションの注意点

SVGアニメーションのプログラムの様子。 SVG のコードが長く、最初はそれだけでもストレスに。

ブラウザ

2020年11月30日にサポートが終了する Internet Explorer 11 (IE 11) は、 SVGアニメーションに対応していません。もしWebデザインの要件に IE 11 が入っている場合は、SVGアニメーションを使えませんので予め注意が必要です（参考ページ:Can I use）。

ワードプレス

WordPress でも SVG アニメーションは使用できますが、そのアニメーション画像は ”画像コンテンツ” ではなく、一つのHTMLコードとして管理されます。そのため SVGアニメーションで広告を作ったとしても、画像の挿入ではなくHTMLコードの挿入で対応するようになります。

レイアウト

少し HTML や CSS を知っている方は、画像の位置やサイズを自分で変更できると思います。SVGアニメーションの画像については、SVGのコードをHTMLが読み込んで表示しているために .jpg や .png に比べると制御しにくいです。 またアニメーション部分も関係してくるとレイアウトの調整は難易度が上昇。

このほかにもイラストレーターで SVG 画像を作成する時にもポイントがあったり、出力設定にもポイントがあったりと一回は経験しておかないと難しいレベル。しかし、難しい反面できる人は少ないので、それがあなたの武器になるかもしれませんね。

SVGアニメーション制作で参考になるサイト

YouTube:Design & Animate SVG Illustrations for Web Design

イラストレーターで画像を作る部分から始まり、アニメーションの設定方法、HTMLページへの実装方法まで詳しく紹介してくれている動画です。トップページのデザインにSVGアニメーションを活用しています。

SONICMOOV LAB

こちらはサンプルを CodePen にあげてくれているので結果から確認でき、実際にコードを編集して自分でSVGアニメーションを即体験することができます。日本語でわかりやすく解説してくれているので参考になるでしょう。

note:SVGでCSSアニメーション

こちらもサンプルをCodePenにあげてくれているSVGアニメーションのチュートリアル。モーツァルトのロゴにCSSでライン・アニメーションを実装し、見るひとの目を引き止めます。こういうロゴが入ったWebページなら直感的に「んっ、なんだ」と思い、即離脱を防ぐ効果に期待できますね。

まとめ

今回SVGアニメーションを紹介させて頂きましたが、CSSやJavaScriptも必ず絡んできていること、お気づきになられましたでしょうか？

仮に「私はコーディングはしない、Webデザインに特化した仕事をする」としてもアウトプットの部分で HTML や CSS、 JavaScript は必ず関係してきますので、そこの部分を知っているか知らないかでは仕事の幅も大きく違ってきますよね。

また今回のSVGアニメーションを体験しようと思うと、イラストレーターに画像制作、HTMLにCSS、JavaScriptと、とても初心者にとってクリアできるレベルではないでしょう。「あ〜 Webデザイナーになりたいな」「Webデザインで食っていきたいな」と思われている方、学習のブーストアップを検討されてみませんか？ テキストより動画、動画よりマンツーマンで学習する方が、学習の効率良さそうではありませんか？

ちょっとプログラミングスクールでの学習を躊躇されている方、まずは無料体験でオンライン学習の雰囲気を体験してみてください。無料体験の空きスケジュール等は CodeCamp の 公式ページ より確認してみてくださいね。