CTAの改善に！知ってて便利！SVGアニメーションの基礎

はじめに

D’s Baseは、“アプリケーション開発” に携わるディレクターのノウハウ共有や、エンジニアの方々へのインタビューを通して、ディレクターとエンジニアが少しでも仕事が進めやすくなるような情報を発信しています。

今回もノウハウ共有として、CTA(Call To Action)などの工夫や改善をするための、SVGアニメーションや実際のSVGアニメーション制作の実践も交えて解説していきます。

CTA改善に向けたアニメーションの活用

CTAを改善したいけど、なかなか結果が出なくてお困りではないでしょうか？

解決方法のひとつにアニメーションを活用するという方法があります。

アニメーションはユーザーの興味を引き付け、行動喚起から決断までスムーズに行動を促すことができます。

Webサイトやアプリとユーザーとの間に生まれる小さな相互作用をマイクロインタラクションと呼びます。

ユーザーのアクションにフィードバックを返したり、タスクの完了を伝えたりと、小さなコミニュケーションにはCTAに繋がる大きな役割を持っています。

SVGとJavaScriptを組み合わせることで、レスポンシブかつ解像度に依存しないプラットフォームを実現し、Web上でインタラクティブなアニメーションを作成することができます。

それでは、現在、Web上のアニメーションにはどのような選択肢があるのでしょうか？

①動画
長所
アニメーションソフトが許す限り、多様な動画が作れます。
短所
ユーザーがモバイルでビデオ再生を開始する必要があること、限られたインタラクション。一貫したサイズで再生される。

②CSS
長所
パフォーマンスが良く、3D形状をサポートし。
短所
ベジェ曲線のイージングが限られていること。

③Canvas
長所
速い、インタラクティブ。
短所
一貫したサイズで再生される（ラスターベース）。

④WebGL
長所
3D、ハードウェアアクセラレーション。
短所
レスポンシブ化が難しい。

⑤SVG
長所
インタラクティブ、レスポンシブ、解像度に依存しない（ベクターベース）、すべてのブラウザに対応、CSSでスタイルを設定できる。
短所
CSSを使ってSVGをアニメーションさせる場合、単純なアニメーションしか実現できないため、複雑なアニメーションを実現するにはJavaScriptのライブラリが必要になる。

思いついたものを挙げてみましたが、今回はSVGに焦点を当てていきます。

アニメーションにSVGを使う方法

SVGのアニメーションで検索すると、様々なJavaScriptライブラリへのリンクがたくさん出てきます。これらは便利なのですが、品質をより高めるには多くのプログラミングが必要となります。

ありがたいことに、これらのライブラリの上に構築された素晴らしいプラグインがあり、デザイナーやアニメーターが慣れ親しんだツールを使って、その結果をSVG/JSスニペットにエクスポートし、コピーしてWebサイトに貼り付けることができるようになっています。

SVGアニメーションの作成に最適なデザインツール

最も便利だと感じたのは、2つの選択肢でした。

①Adobe AfterEffects + Bodymovin
②Adobe Animate + Snap.svg Animator

Adobe Animateは、以前はAdobe Flash Professionalとして知られていたデザインツールで、見覚えがある方も多いと思います。
今回は②のAdobe Animate + Snap.svg Animatorで説明します。
Adobe AnimateとSnap.svg Animatorの組み合わせを選んだのは、Illustratorとの連携が容易であることと、以前のFlashアニメーションのセットアップに慣れているデザイナーが多いことです。

Adobe After Effectsを使った簡単なベクターアニメーションの制作（4ステップ）

ステップ1：Illustratorでデザイン素材の下準備をする

▼続きはこちらをご覧ください