HOW TO2018.8.24 (Fri)

30分でできる! はじめての「SVGアニメーション」に挑戦【デザイナー向け】


0954satou_y.png

  • 佐藤良美 | Yoshimi Sato
  • 株式会社シグナル デザイナー

こんにちは。デザイナーの佐藤です。
今回のテーマは「SVGアニメーションに挑戦」です。Webデザインのお仕事をしている方の中にも、まだSVGやSVGを使ったアニメーションに触れたことがないという方はいらっしゃるのではないでしょうか。

実は、SVGアニメーションはAdobe Animate CCのアドオンを使用して簡単に作成できます。シグナル社内のデザイナー勉強会で好評だった初心者向けの作成手順を、みなさんにも公開します!

そもそもSVGとは?

SVG(Scalable Vector Graphics)とは、ベクター形式で画像を表示するフォーマットです。JPEGやPNGなどのビットマップデータとは違い、座標などの数値をもとに計算式によって画像を描画するため、次のような特性を持ちます。

・ファイルサイズが小さい
・拡大縮小しても画質が劣化しない
・アニメーションに利用すると、GIFアニメよりもなめらかな動きが表現できる

svg_2p-01-100

簡単なSVGアニメーションに挑戦!

SVGの概要を理解したところで、さっそくSVGアニメーションを作ってみましょう。と言っても、コードを自分で書けるようになる必要はありません。Animate CCの拡張機能「Snap.svg Animator」を利用すれば、画像を扱うようにアニメーションを作ることができます。

SVGアニメーション作成の流れ

svg_4p-01-100

STEP1-1

まずは、Adobe ExchangeからAnimate CCのアドオン「Snap.svg Animator」をダウンロードします。

Snap.svg Animator
https://www.adobeexchange.com/creativecloud.details.12329.html

STEP1-2

ダウンロードしたファイルを「このアプリケーションで開く」→「その他」→「Adobe Animate CC」で開きます。

svg_5p-01-100

svg_5p-02-100

STEP1-3

Animate CCを起動すると、スタートアップ画面に「SnapSVGAnimator(カスタム)」が追加されているはずです。このフォーマットを使用してアニメーションを作成しましょう!

svg_6p-02-100

STEP2-1

それでは、STEP1で準備したフォーマットで新規アニメーションを作っていきます。今回は、下記のパーツとアートボードのみ使用します。

svg_7p-01-100

①挿入
タイムラインの秒数設定や、モーションの設定を行います。
②タイムライン
秒数ごとの動きを細かく調整できます。
③ツールバー
Illustratorと同様、描画などはこのツールバーを使用します。

STEP2-2

3秒のアニメーションを作るための設定を行います。デフォルトではタイムラインが0秒になっているので、「3s」をクリック後、「挿入」→「タイムライン」→「フレーム」を選択します。

svg_8p-01-100

svg_8p-02-100

STEP2-3

楕円形ツールを使用して円形のオブジェクトを作り、選択ツールで選択した状態で、「挿入」→「モーショントゥイーン」をクリックします。

svg_9p-01-100

svg_9p-02-100

STEP2-4

いよいよ動きをつけます。タイムラインの赤いバーを移動させ、オブジェクトを移動させたい位置まで動かしながら1コマずつ作っていきます。

svg_10p-01-100

svg_10p-02-100

STEP2-5

作成していくと、このように複数の点(キーフレーム)ができてくるはずです。赤いバーをドラッグしたり、再生ボタンでプレビューしたりしながら、細かい動作を確認しましょう。

svg_11p-01-100

svg_11p-02-100

STEP3-1

「ファイル」→「パブリッシュ設定」を選択し、書き出し先を指定します。ファイル名を「index.html」と入力して「保存」ボタンを押した後、「publish」ボタンを押してください。

svg_12p-01-100

STEP3-2

このようにファイルが出来上がっているはずです。このファイルをサーバーにアップロードして、ブラウザから確認してみましょう。

svg_13p-01-100

問題なく動作すれば、このようなアニメーションが表示されます。

SVGアニメでWebサイトにオリジナリティをプラス

SVGアニメーションを活用すれば、ローディング画面にオリジナリティを出したり、キービジュアルの一部を動かして楽しい印象を与えたり、見出しや装飾用のテキストに動きをつけて目立たせたりといったことができます。

もし自分でアニメーションを作る機会がないデザイナーでも、モーションの構造(秒数・速度・移動経路・キーフレームなど)への理解を深めておけば、コーダーに指示する際に役立ちます。まずは、簡単なアニメーションから試してみてはいかがでしょうか。

構成:福田さや香