もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

デザインの現場で静止画を扱うことには慣れていても、「アニメーション」と聞くと少しハードルが高く感じる方も多いのではないでしょうか。タイムライン、キーフレーム、書き出し設定…、専門的な用語が並ぶだけで身構えてしまうかもしれません。しかし実際は、基本的な概念さえ押さえれば、アニメーションは決して特別なスキルではありません。

ここでは、Adobe Animateを使って、apng形式のアニメーション年賀状を制作する手順を解説します。普段IllustratorやPhotoshopでビジュアルを制作しているデザイナーの方が、「動き」をデザインに取り入れるための第一歩として、できるだけシンプルな工程に絞って紹介します。静止画の延長線上にあるアニメーション制作の楽しさを、ぜひ体験してみましょう。

Adobe Animateについては、Adobeが販売終了を撤回し、今後はアプリケーションのサポートやセキュリティ、バグ修正は継続されるものの、新機能の追加などは行われない、メンテナンスモードへ移行するとアナウンスされています。

デザインを用意する

Adobe Animateはベクターデータが扱えるアプリケーションですので、デザインはIllustratorで作ることにします。
今回用意した画像は、おせち料理が詰まった重箱と背景の唐草模様の.aiファイルです。

パーツに分解する

Illustrator同様に、Adobe Animateもレイヤー構造を持ちます。そのレイヤーがタイムラインとなって、それぞれに動きを付けていきます。
Adobe Animateに読み込んだ時に、レイヤー分けできるようにそれぞれのパーツをIllustrator上でグループ化します。

Adobe Animateに読み込む

Adobe Animateを起動して、W360×H640、フレームレート30fのドキュメントを新規作成します。

このドキュメントに先ほどパーツ分けした、おせち料理と背景の唐草模様を読み込みます。
読み込むと一つのレイヤーにパーツがまとめて読み込まれますので、それをパーツごとにレイヤーに配置します。
Illustratorと同じく、レイヤーの上が手前、下が後ろになるので、元のデザインを見ながらレイヤー分けしましょう。

アニメーションさせる

レイヤー（タイムライン）でそれぞれのパーツに動きを付けていきます。
今回は3秒、90フレームのアニメーションで、おせちが上から重箱に落ちてくるようなアニメーションします。
でも、単に上から下に落ちるのでは面白くありませんよね。そこでトゥイーン（開始状態と終了状態を自動で補間）でアニメーションに変化を付けます。
ものが重力によって落下した時、バウンドしますが、そのような効果を付けて行きましょう。

タイムライン上で、キーフレームを打っていきます。このキーフレームの間でパーツがどのような動きをするか、決まります。
始まりのキーフレームで「クラシックトゥイーンを作成」すると動きに効果をつけることができます。
今回は、トゥイーンの効果（エフェクト）をBounce Ease-Outに指定します。これでキーフレーム間をエフェクトによって自動的に補間されます。

書き出す

Adobe Animateはアニメーションgifに書き出すメニューがありますが、今回はpngの拡張版であるapng（アニメーションpng）形式のアニメーションにします。
apng形式は、ほぼすべてのモダンブラウザが対応しています。
ファイルメニューから「書き出し」「ムービーの書き出し」を選択、書き出しは「pngシーケンス」ファイルにします。
フレームを1枚のpngファイルに連番で書き出します。

apngに変換する

Adobe Animate単体ではapngへの書き出し変換ができないので、ICS MEDIA社が提供している「アニメ画像に変換する君」を使ってapngに変換します。
アニメ画像に変換する君はapngの他にwebpやLINEのスタンプにも変換できるアプリケーションです。

アニメ画像に変換する君を起動して、先ほど書き出したpngシーケンスファイル全部をアプリケーションにドロップ。フレームレートは12fで「アニメ画像を変換」ボタンクリックで変換が始まります。他の圧縮オプションなどは、サイズをみながら適宜調整しましょう。
一般的にapngのほうが、webpより容量が小さくなるようです。こちらもサイズを考えながら調整してください。

まとめ

今回紹介した手順をなぞるだけでも、きっと「動きをデザインする」という感覚をつかめたのではないでしょうか。アニメーションは特別な表現技術ではなく、レイアウトや配色と同じく、意図を伝えるための手段のひとつです。

Adobe Animateとを使ったアニメーション制作は、タイムラインとトゥイーンの基本さえ理解すれば、決して難しいものではありません。まずは小さな動きから試し、少しずつ表現の幅を広げていきましょう。
静止画に「時間」という軸が加わるだけで、年賀状の印象は大きく変わります。ぜひ、あなたのデザインにさりげない「動き」を添えてみてください。