アニメーションを作成するためのCSSやJavaScriptのライブラリ・フレームワークはたくさんリリースされています。
これらのライブラリやフレームワークは、オブジェクトそのものの見せ方をアニメーション処理を加えて見せるもので、ユニークな動きをするアニメーションを簡単に実装することができるので、今なお人気があります。

一方、昨今注目を浴びているのが、SVGアニメーションと呼ばれる新しいアニメーションの表示手法です。

SVGとはWebブラウザにも互換性があるベクターデータです。
通常の.gifや.pngファイルようなビットマープデータだと拡大すると粗くなってしまいますが、SVGだとどれだけ拡大しても滑らかに表示することができるので、SVGを取り入れるホームページも多くなってきました。

SVGアニメーションは、そうしたベクターデータを使ってアニメーションを表示させるデータのことです。
ただ、SVGアニメーションを作成するには、これまでいくつもの壁がありました。

SVGアニメーションの作成には、通常HTMLやCSS、JavaScriptでのコーディングが必要です。
しかも、GIFやPNGアニメーションのような1行のコードではなく、数十行のコードを書く必要があり、ノンプログラマーでは正直SVGアニメーションを作成するのは難しいとされています。

しかし、今回ご紹介する*「Keyshape」*を使えば、通常のベクターソフトと同じように扱うだけで簡単にSVGアニメーションを作成できます。

滑らかなSVGアニメーションを作成できる「Keyshape」とは？

screenshot.png

Keyshapeは、Mac用のSVGアニメーション作成ソフトで、2Dのベクターグラフィックとキーフレーム(タイムライン)を使って簡単にアニメーションを作成することができるソフトウェアです。
2017年4月1日現在まだベータバージョンですが、ベータ提供中は無料でダウンロードすることができます(ベータリリースが切れたら、MacStoreで有料販売になる可能性があります)。
macOSは10.11 El Capitan以降である必要があります。

Keyshapeの特徴

Keyshapeは、基本的なベクターソフトと同じように、パスを使ってオブジェクトを編集したり、レイヤーを使ってオブジェクトを重ねることができます。
ここでは、Keyshapeに関する特徴を詳しく見てみることにしましょう。

1. 描画ツール

典型的なベクターツールと同様、ペンやペンシル、四角形や円、ズームなどのツールを使うことができます。
また、描画するまえに図形をプレビューして見ることができます。

2. パス操作

個々の図形のアンカーポイントを調整することができます。また、テキストや四角形などの図形をパスに変換することもでき、図形のアウトライン化も可能です。
パスの結合や解除、切り取りや統合なども数クリックで完了します。

3. テキスト機能

カーブしたライン上にテキストを流し込むことができます。縦書きや右から左に書くような方法を採用することも可能です。また、編集可能なテキストはSVGアニメーションにエクスポートする際に自動的にパスに変換されます。

4. ストローク(線)とフィル(塗り)

ストロークやフィルにはグラデーションをかけることができます。
また、破線や点線のサポートもしています。
乗算やオーバーレイといったブレンドモードにも対応しています。

5. レイヤーとグループ

レイヤーやグループによってオブジェクトを整理することができます。
ドラッグ＆ドロップでオブジェクトツリー上の順番を簡単に入れ替えることも可能です。

6. ビットマップ画像操作

SVGアニメーションを作成するソフトウェアですが、PNGやJPEGを埋め込むこともできます。「埋め込み画像」と「リンク済み画像」の両方をサポートしていますが、SVGにエクスポートする際には自動的に全ての画像が埋め込まれます。

7. アニメーションのプレビュー

編集カンバス上でアニメーションのプレビューを確認することができます。
プレイバックできる範囲は、60fpsまで可能です。
ボタンを1クリックするだけで、インストールされている複数のブラウザ上でもプレビューを確認できます。

8. アニメーションのエクスポート

すべてのモダンブラウザに対応しているJavaScript形式のSVGアニメーションに変換できるほか、さらに軽量なCSS形式のSVGアニメーションも変換できます。
さらに便利なのは、ツイートもできるGIF形式やロスレスなPNG画像、YouTubeにアップロードできるMPEG-4への変換も可能です。
作成したアニメーションは、Twitter、Facebookなどの人気SNSサービスに直接アップロードすることもできます。

Keyshapeでアニメーションを作成しよう

基本的な特徴が理解できたら、今度は実際にKeyshapeを使ってSVGアニメーションを作成してみましょう。
準備として、Keyshapeのトップページ )で*「Download Beta Version for Mac」*をクリックしてファイルをダウンロード後、プログラムをLaunchpadにドラッグ＆ドロップしてKeyshapeをインストールしておいてください。

画面上の操作画面

artboard.png

画面右上が編集画面であるアートボードです。
アートボードの左にあるツールバーで図形やテキストなどを描画したり、パスを編集したり写真を挿入したりすることができます。

option.png

アートボードの右側にはオブジェクトの編集オプションが表示されます。
四角形や円はストロークやフィル、線の太さ(Width)や透明度(Opacity)などを設定できます。
さらにテキストはフォントサイズや行間の設定も可能です。

keyframe.png

画面下方には、アニメーションのキーフレーム(タイムライン)があります。
このキーフレームを使いながら、アニメーションを設定していきます。

アニメーションの元となる基本図形を作ろう

操作は至って簡単です。

01.png

まず、アニメーションの元となる基本図形をアートボードに描画していきます。

次に、アニメーションを加えたいオブジェクトを選択したまま、キーフレームの「＋」マークをクリックして、どのオプションにアニメーションを加えるかを選択します。

02.png

ここでは、「Stroke Opacity」を使って、線の透明度を変化させてみましょう。

03.gif

2箇所に「Stroke Opacity」を設定し、0から100まで透明度を上げる設定にすると、このような見え方になります。

また、同様に内側のチェックマークも「Stroke Opacity」と「Rotate」でアニメーションをつけると、最終的にこのようなアニメーションを作成することができます。

04.gif

エクスポートしたい時は、メニューからExportを選ぶだけです。

KeyshapeでSVGアニメーションを作るメリット

1. インタラクティブ性の高いUIを作成することができる

近年、プチアニメーションともいうべき「マイクロインタラクション」と呼ばれるUX手法が注目を集めています。

これは、ボタンやプログレスバーなどのUIにわずかなアニメーションを加えて、ユーザーとコミュニケーションをとる方法です。
SVGアニメーションを使えば、軽量かつスピーディーにマイクロインタラクションを実装・表示することができますが、Keyshapeを使えばあっという間に作成完了です。

参考：
マイクロインタラクションとは？UXに取り入れる際の5つのポイント

2. プログラミングは一切不要の簡単操作

最初にお伝えしたように、通常SVGアニメーションは冗長なコーディングを必要としていました。
それが、keyshapeを使うことで、一行もコードを書かずにSVGアニメーションを作成できるのです。

3. さまざまなフォーマットにエクスポート可能

Keyshapeのすごいところは、SVGアニメーションだけでなくGIFアニメーションやMPEG-4などのフォーマットにも対応しているということです。
SVGアニメーションが必ず使える環境にない場合は、こうしたフォーマットでエクスポートしておきましょう。

まとめ

SVGアニメーションというと、非常に難しいイメージがありますが、上記のチュートリアルからもお分かりいただけるように、非常に簡単にアニメーションを作成することができます。
アイコンフォントなどでピクトグラムを利用しているひとは、アイコンをSVGアニメーションに変えるだけで眼球を掴むようなユニークなアニメーションを簡単に作ることも可能です。
ぜひ、SVGアニメーションの作成に挑戦してみてください。