SVGアニメーションを驚くほど簡単に作成

ノンプログラマーにもオススメ!滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape

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

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

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

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

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

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

参考:
マイクロインタラクションとは?UXに取り入れる際の5つのポイント
2. プログラミングは一切不要の簡単操作

最初にお伝えしたように、通常SVGアニメーションは冗長なコーディングを必要としていました。
それが、keyshapeを使うことで、一行もコードを書かずにSVGアニメーションを作成できるのです。
3. さまざまなフォーマットにエクスポート可能

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

 

こちらの「通知」ボタンも試してください。プッシュ通知の時だけしか受け取れないお得な情報を配信しています。

 

右下のボットアイコンから直接、私達とコミュニケーションとってみませんか?
あなたのWEB活動を応援します。

「WEB活動のノウハウなど、あなたのこれやりたいに応えています。」参加の仕方は簡単です。右下のボットアイコン
を押してください。