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

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

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

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

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

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

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

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

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

まとめ

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