SVGator徹底レビュー：ブラウザだけで作れるプロ級ベクターアニメーション

オンラインコンテンツのアニメーションをめぐる環境は、ここ数年で大きく変化しました。かつてFlash(Macromind Directorなどの類似技術とともに)は現代Webの礎を支えていましたが、Flashのサポート終了とともにSWFファイル形式は姿を消しました。そして今、SVGatorが登場しています。最新のベクター形式として標準となったSVGに対応したSVGatorは、この形式をアニメーション化するための最良かつ最も手軽なソリューションのひとつです。本記事では、その実力を詳しくレビューします。

※本記事はスポンサード記事であり、SVGatorの協力により制作されました。内容および意見はすべて筆者自身のものであり、スポンサード記事であっても編集の独立性は保たれています。

オンラインで完結するアニメーション制作

SVGatorは、VueJSで開発されたオンラインのSVGアニメーションエディタです。スケーラブルベクターグラフィックス(SVG)のアニメーション制作を、これまでになくシンプルにすることを目指して設計されています。サンフランシスコに拠点を置く同社の掲げる目標は、「技術者でないユーザーでもSVGアニメーションを作れるようにし、Web全体でのSVGアニメーションの活用を促進する」ことです。

通常、SVGファイルをアニメーションさせるには、JavaScriptやJavaなどでコーディングを行い、SVG内の線を定義する数値を操作したり、Webページ上で要素を動かしたりする必要がありました。SVGatorはこれらをすべて簡略化し、タイムラインとキーフレーム対応トラックを備えたWebアプリケーションを実現しました。シーン内のベクターグラフィック要素の位置を調整し、埋め込み可能な再生用アセットへと書き出せます。

こうして生成されたファイルは、Webページやモバイルアプリでそのまま利用できます。特に新たに追加されたモバイル書き出し機能は強力で、軽量かつスケーラブルなアニメーションをモバイルアプリ向けに簡単に作成できます。

懐かしさと革新が同居するベクターエンジン

冒頭でFlashに触れたのには理由があります。筆者の目には、SVGatorはあの往年のベクターアニメーションの雄によく似て見えるのです。ピクセルではなく滑らかな線をアニメーションさせる、キーフレーム式のベクターアニメーションツールだからです。つまり完成したアニメーションはスケーラブルで、どのようなサイズでも品質を損なうことなく再生できます。

ソフトを起動すると、まずワークフローをつかみやすいようデモシーンがいくつか表示されます。インターフェースは、作成中のアニメーションを表示するプレイフィールドと、画面上のオブジェクトの時間経過を示すタイムライン(下部)で構成されています。左側には、図形を操作するツール群と、作成済みアセットのライブラリが並びます。

IllustratorやInkscapeなどのベクター描画ソフトで作成した自分のSVGファイルを読み込むこともできますし、ゼロから図形を描くことも可能です。

SVGatorでの描画は、他のベクターエディタと同じ感覚です。ハンドル付きベジェ曲線を調整すれば、完璧に滑らかな曲線を作れます。線の太さや色をお好みに変更できるほか、破線や点線といった線種も選択可能です。ベクターソフトを使った経験があれば、すぐに馴染めるでしょう。

このツールはオンラインのWebアプリなので、インストールは一切不要。すべての作業はブラウザ上で完結します。生産性の面でもこれは大きなメリットで、世界のどこにいても、どんなコンピューターのブラウザからでも、自宅のデスクにいるかのように作業を続けられます。ノートPCやデスクトップはもちろん、試してはいませんが、タブレットでも十分使えるのではないでしょうか。

SVGatorでのアニメーション制作はとてもシンプルです。画面に図形を描き、キーフレームを設定し、次のキーフレームへ移動。図形を新しい形に調整して、さらにキーフレームを打ちます。再生すると、図形がある位置から次の位置へと滑らかに動きます。

何より重要なのは、これがプリセットの詰め合わせライブラリではなく、本格的なプロ仕様のアニメーションソフトだという点です。とはいえ、アニメーションスキルをさらに高めるための便利な機能も多数搭載されています。

支払いプランの階層が上がるほど、図形に対して実行できるアクションが増えていきます。同社はこれらのアクションを「アニメーター」と呼んでいます。無料プランでは、図形の移動・拡大縮小・アンカー・回転、不透明度の変更が可能で、これが基本のアニメーションです。ひとつ上のLiteプランでは、さらにモーフィング、スキュー、塗り、ストロークが加わり、これらすべてがアニメーション可能な設定となります。表現の幅が大きく広がります。そして最上位のProプランでは、ここまでのすべてに加えてインタラクティブ機能をアニメーションに組み込めます。マウス操作に反応するアニメーションを作れば、UIや動的なデータビジュアライゼーションなども構築可能です。

Proプランではさらに、グラフィックアセットを収めたアセットライブラリへのアクセス権が得られ、スタイルとスピードを兼ね備えたオリジナルアニメーション制作を強力に後押しします。

唯一気になる点を挙げるとすれば、無料および下位プランでは実行できる操作の種類が制限されることです。ただし、これは大きな問題にはなりません。第一に、基本操作と少しの創意工夫だけでも驚くほど多くの表現が可能だからです。第二に、得られる価値を考えれば、各プランの価格は決して高くないからです。

料金プランとアクセスレベル

SVGatorは素晴らしいソフトウェアです。とっつきやすさが最大の魅力で、簡単な操作ならすぐに習熟できます。一方で奥深さも兼ね備えており、少しトレーニングと練習を重ねれば、短期間でスキルセットを大きく伸ばせるでしょう。モバイル書き出しに対応している点も、すべてに上乗せされたボーナスです。筆者が長年使い慣れた「タイムライン」というパラダイムを採用している点、そして見た目も操作性もFlashに非常によく似ている点は、純粋に嬉しい限りです。

SVGatorはパワフルであるだけでなく、比較的リーズナブルなのも魅力です。有料利用を検討する際には、複数のプランから選べます。まず無料プランでは、いくつかの制限付きで永続的に利用できます。使い方を学ぶ段階では、静的グラフィックの書き出しは無制限、アニメーションの書き出しは暦月あたり最大3回、アニメーションのタイムラインは最長10秒まで。基本のアニメーションヘルパー一式が含まれます。

次にLiteプラン(月額11ドル/年払い132ドル)では、高度なアニメーターを使った作品の書き出し、無制限の静的書き出し、月10回のアニメーション書き出し、最長1分のアニメーション制作が可能になります。BasicとAdvancedの両アニメーションヘルパーも利用できます。そして最上位のProプラン(月額19ドル/年払い228ドル)では、FreeとLiteの全機能に加えて、最長5分のアニメーションを無制限に書き出せるほか、アセットライブラリへのアクセス、すべてのインタラクティブオプション、アニメーション速度コントロール、ハイパーリンク機能まで使えるフルスペックとなります。

SVGatorの詳細情報の確認や無料アカウントへの登録は、公式サイトSVGatorからどうぞ。