久しぶりのSketchに関する記事になります。今回はSketchでプラグインを使ってプロトタイプ時に使えるGIF形式のアニメーションを作成してみたいと思います。アニメーションを作成するプラグインはいくつかありますが、ここでは無料で使えて且つ簡単な指定で自由なアニメーションを作成できる「Animatemate」というプラグインを使っていきます。  

プロトタイプ作成時におけるアニメーション制作

アプリケーション開発だけでなく、近年のウェブサイトでもアニメーション効果を積極的に取り入れるシーンは多々あるかと思います。実際のアニメーションはGIFアニメや動画以外にもCSSやJavaScriptを使ったプログラムベースで作成することが一般的で、完成したアニメーションはブラウザで確認するという流れになります。   ただし、その場合には実際にデザイン制作が進んだ状況でコーディングといった作業が必要になり、確認するまでにある程度の工数がかかってしまいます。クライアント提案時に実際の動きを見てもらうには少しハードルが上がるかもしれませんよね。   そんな時に実際の動きや操作感を動画などで表現する「プロトタイプ」という制作手法を取られるケースが増えてきています。アニメーションなどの動きをプロジェクトの早い段階でクライアントと共有することで、完成時のイメージを合わせることができるというメリットがあります。  

アニメーションGIFを作成できるSketch用プラグイン「Animatemate」

Sketchにはデフォルトでプロトタイプ作成機能が備わっていますが、アニメーション作成にはプラグインを使う必要があります。いろんなプラグインがリリースされていますが、今回は無料で使えて、且つ簡単な設定で手軽にアニメーションGIFとしてエクスポートできる「Animatemate」というものを使っていきたいと思います。 【Animatemate】 http://animatemate.com/   まずはプラグインをインストールする必要があるので、上記の公式サイトにアクセスしてプラグインデータをダウンロードしていきます。   サイト内ページの最下部にあるダウンロードボタンからプラグインデータをダウンロードして、Sketchへインストールしていきます。   インストールが完了すると、メニューからPluginsの項目にAnimatemateが追加されていることが確認できます。これでアニメーション作成を進めていく準備が整いました。  

Animatemateプラグインでキーフレームごとに指定するアニメーションを作成

Animatemateプラグインでは、各要素に対してキーフレームごとにそのキーフレーム時点での表示状態を設定し、キーフレーム間での差分をアニメーションとして表現していきます。作成したアニメーションはアートボード単位でアニメーションGIFを生成される形になります。   ということで、まずはアニメーション用のアートボードを作成します。Sketchデータが重いとアニメーションGIFの書き出し時に時間がかかってしまうので、できればアニメーション用にSketchデータは分けておいたほうがいいかもしれませんね。   続いて、アニメーションさせる要素をアートボード内に配置します。この時点ではまだアニメーションは設定されていない状態となります。   そしてここから具体的にアニメーションを設定していく流れになります。まずはキーフレームが0、つまりアニメーション開始時の表示状態に要素を配置します。ここでは透明度を0にして、各要素がアートボード外の位置になるよう移動させています。フェードインで表示されるようなアニメーションになる想定ですね。   要素を初期状態の配置にできたら、その要素を選択した状態で、Plugins→AnimatemMate→Create Animationを選択して、キーフレーム0時点のアニメーションとして登録していきます。   その際にはダイアログが表示され「keyframe Number」には0を設定し、好みのイージングも設定することができます。OKボタンをクリックするとアニメーション開始時の状態が登録されます。   アニメーションが登録されると、要素名のところにアニメーション設定に関する値が追記されているのが確認できますね。   この要領で次のキーフレームの状態をアニメーション登録していきます。要素をアニメーションの進捗に合わせて配置していきます。   そして同じようにアニメーションを登録しますが、ここでは次のキーフレームとして「keyframe Number」を設定します。この時キーフレームの値が小さいと早いアニメーションになり、値が大きいとゆっくりとしたアニメーションになります。ただし書き出し後のGIFアニメのデータサイズが大きくなるので注意します。   以降も同じ流れで、そのあとのキーフレームに合わせたアニメーションを登録していきます。   登録済みのアニメーション設定を確認する、あるいは後から編集したい場合には、対象となるアニメーションが登録された要素を選択した状態で、Plugins→Edit Animationを選択します。   そうすると設定済みのアニメーションの値がダイアログで表示されます。ここに記載されている値は編集可能となっており、変更が必要な場合にはここから編集して上書きすることができます。   また、登録済みのアニメーション設定を削除してリセットしたい場合には、先ほどと同じように対象となるアニメーションが登録された要素を選択した状態で、Plugins→Delete Animationを選択すると、登録されている全てのキーフレームごとのアニメーションを一括で削除することができます。   最後までアニメーションが登録できれば、アートボードごとアニメーションGIFとして書き出していきます。アートボードを選択した状態でPlugins→Export Animationを選択します。ちなみにこの時にアートボードの背景色が見えている場合には書き出した時に背景が透過されますので、必要に応じて書き出し対象の背景色も設定しておきましょう。   そうするとアニメーションの書き出し設定のダイアログが表示されるので、必要に合わせて設定していきます。基本的にはデフォルトでOKですが、Loop Countの値でループさせたい場合には0を、指定回数で止めたい場合やループさせない場合には1ないしは指定回数の値を入力します。またこの時に対象となるアニメーション要素が全て含まれているかを確認しておきます。「All layers selected」と表記があれば大丈夫ですが、アニメーション登録した要素の抜け漏れがないか注意しておきましょう。   アニメーションの書き出し時間はアートボードごとのデータ量やキーフレームの数によって変わりますが、数秒程度のシンプルなアニメーションの場合には数秒で書き出しが完了します。実際作成したアニメーションはこのようになりました。  

---

  今回はSketchのプラグインである「Animatemate」を使って、キーフレーム単位で設定できるアニメーションGIF作成についてまとめてみました。キーフレームごとに設定できるので時間経過ごとのアニメーションは作成しやすいのではないでしょうか。ちょうどCSSでキーフレームのアニメーションを設定するのに似ていますね。   プラグイン自体も無料で、アニメーションGIF書き出しもできるとのことでかなり重宝するのではないでしょうか。ただし、複雑なアニメーションの場合や細かい設定が必要になるなどの際にはちょっと厳しくなるかもしれませんね。シンプルなアニメーションがプロトタイプ制作時に必要となった場合には是非試してみてはいかがでしょうか。