こんにちは、デザイナーの横山です。
ウェブやアプリで使われるアニメーション。適切に使えば、要素の意味がわかりやすくなったり、心地よい印象を与えたりできますよね。
そんな便利なアニメーションですが、実装の際エンジニアの方に、「ここからスゥーッと来てここでビュンとなるんですけど」とイメージだけ伝えても実現が難しいです。とはいえ、今からよく知らないツールを覚えて、実際のアニメーションを作って見せてというのは面倒…。そんな経験ゼロの方でもとりあえずアニメーションデザインができる、超最低限の方法をご紹介します!
使うツールは?
いくつかツールがありますが、デザイナーなら一番手に入れやすい（?）After Effects を使います。
慣れれば動画なども作れますし、応用範囲が広いです。また、Adobe 製品ですから、Illustrator や Photoshop の操作感となんとなく似ているところもメリットがあります。
Creative Cloud のデスクトップアプリから今すぐインストールしちゃってください。
作るもの
アニメーションをデザインする上で、どういったものが気持ちいいか、どういう意味があるのかを知る必要があります。そのためには、既存のウェブサイトやアプリのアニメーションを模写してみるのも有効な学習手段です。
今回は、単純な動きの組み合わせで複雑に見える面白いものとして、 Apple のウェブサイトにあるモバイルメニューのようなアニメーションを作ってみましょう。
準備
アニメーションを作る前の前準備をしましょう。
画面パーツを作る
動かしたい素材を作りましょう。
Illustrator や Photoshop で作るのがオススメです。After Effects に ai / psd ファイルを読み込ませれば、後からの素材の修正も即反映できますし。After Effects 上でも長方形ツールやペンツール等で素材を作れますが、使い勝手はあまりよくないです。
After Effects では、ai / psd ファイルを書類単位かレイヤー単位でしか取り込めませんので、作る時にはパーツをレイヤー別に分けると取り込みがラクです。
プロジェクトを作る
とにかく新規プロジェクトを作らなければ何も始まりません。After Effects を起動し、何も考えずに目の前の「新規プロジェクト…」ボタンを押します。
素材を入れる
画面左端の「プロジェクトパネル」に、ai ファイルなどをドラッグ&ドロップします。
すると、読み込みの種類を聞かれます。
読み込みの種類にコンポジションとフッテージというのがありますよね?
コンポジションという単語自体は、Illustrator や Photoshop のアートボードと似たようなものを指します。作業場みたいなものですね。このコンポジションの中に動かしたい素材をレイアウトして、アニメーションを設定したりします。
またフッテージとは、コンポジションの中に入れる単一素材を指します。フッテージ設定で読み込むと、ai / psdファイルを単一の素材（フッテージ）として取り込むことになります。
コンポジション設定なら、新規コンポジションを作った上で、 その中に ai / psd ファイルの各レイヤーすべてを単一素材として入れてくれます。一気にファイルの準備が整うので、こちらの方が一石二鳥ですね。
コンポジション設定で取り込むと、コンポジションと素材が入ったフォルダーが表示されます。
読み込まれた中身を確認しましょう。コンポジションをダブルクリックすると、画面下部の「タイムラインパネル」に素材の一覧が表示されます。また、画面真ん中ではコンポジションのプレビューが表示されます。
準備もできたことですし、さっそくアニメーションを作りましょう!
と、その前に…ここまでの間に、 コンポジションプレビューの表示上でうかつにマウスホイールを動かしてしまい、急に拡大縮小してびっくりしませんでしたか?shift + /で全体表示に戻せます。
アニメーションを作る
今回作るアニメーションは、2つの動きで成り立っています。
- メニューリストがふわっと現れるアニメーション
→ 不透明度を変化させたアニメーション + スケールを変化させたアニメーション + 位置を変化させたアニメーション - メニューが上から降りてくるアニメーション
→ 位置を変化させたアニメーション
この2つをそれぞれ作っていきましょう。
アニメーション設定の前に
具体的なアニメーションの設定はタイムラインパネルで行います。
素材名の横にある右向きの三角印をクリックすると、「トランスフォーム」という項目が現れます。
ここで、素材の位置移動や不透明度などのプロパティを設定していきます。
メニューリストがふわっと現れるアニメーション
不透明度の変化
まず、時間の変化に応じて不透明度の値を 0% → 100% に変化させます。
アニメーションの開始時刻と終了時刻に、値変化のポイント「キーフレーム」を打つことで変化させることができます。
今回は 12f（フレーム）くらいの時間をかけて不透明度を変化させます（ちなみに、現在のコンポジションの設定では約 30 フレームで1秒になっているはずです）。今の状態だと、タイムライン上でフレーム単位まで見えないので「alt + マウスホイール」でズームインします。
試しにメニューリスト項目の素材の1つを変化させてみましょう。
キーフレームを打つには、アニメーションを開始させたい時刻に、青のライン（インジケーター）を動かして合わせます（今は0フレームから始めたいので、そのままで大丈夫です）。
素材の「トランスフォーム」項目にある「不透明度」の右に、ストップウォッチのアイコンがあります。それをクリックすると、不透明度にキーフレームを打てる状態になります。
と、同時に青のライン上にキーフレーム（ひし形のマーク）が打たれます。
このポイントの値を 0% にします。値部分をクリックして「0」と入力します。
次に、アニメーション終了時刻にもキーフレームを打ちます。
青のラインを終了時刻（12 フレーム）に合わせたのち、ストップウォッチの左端にあるひし形アイコンをクリックすると打てます。そして、値を 100% にします。
これで不透明度が変化するようになりましたので、プレビューしてみましょう。青のラインを 0 フレーム に戻し、 スペースキーを押せば再生されます。
ちゃんと動いていますね。しかし、これはただ等速で変化しているだけなので、加速・減速など変化をつけましょう。
調整には、「グラフエディター」を使います。
「不透明度」プロパティを選択後、このアイコンをクリックすれば表示されます。さらにグラフエディター上で右クリックし、「速度グラフを編集」を選択します。
グラフを見てみると、不透明度が等速で変化していることがわかります。
とりあえずこれをイーズインにしましょう。
グラフの線をクリックで選択後、画面下部にあるこのアイコンをクリックします。
グラフにカーブがつきました。プレビューすると、アニメーションにも変化があります。
簡単なイーズイン / アウトなら、プロトタイピングツールでもボタン1つでできますが、After Effects はここから自由にイーズをいじれます。グラフの操作も、ペンツールと同じで分かりやすいですね。
不透明度のグラフは上記のようなカーブにしました。
さて、このアニメーションを他のリスト項目の素材にも適応したいですよね。
コピペで簡単に適応できます。まずは、コピーしたいアニメーションのプロパティを選択した状態で Cmd + C を押します。
次に、ペースト先の素材をすべて選択して Cmd + V で完了です。
ここまでできれば、これ以降のアニメーションは同じ要領でできます。
スケールの変化
スケールを 110% → 100% に変化させます。不透明度と同じく 12 フレームの間で行います。
さらに速度グラフを調整するのですが、不透明度と変化の調子を同じにするため、２つのカーブの変化を合わせます。
まずは、不透明度のカーブとスケールのカーブを同時に表示させます。表示させたい項目の横にあるグラフアイコンをクリックし速度グラフを見ると、クリックされた項目がすべて表示されます。
不透明度のカーブは、後半で角度がつくように変化しているので、スケールのカーブも大体同じようにします。ただし、スケールの値は 110% → 100% とマイナスの変化をしているので、カーブの形も反転しておりちょっとややこしいですね。
できあがったアニメーションは、不透明度と同じく他の素材にもコピペしましょう。
位置の変化
現在の位置より 24px 上から元の位置まで移動させて、ふわっと降ってくる動きを追加しましょう。
アニメーション開始時刻と終了時刻にキーフレームを打った後、開始時刻の位置プロパティの値から 24px 引きます。
左から順に、X軸, Y軸の値です。Illustrator や Photoshop のように、値の四則演算が可能なので、Y軸の値の後ろに「-24」と入力しましょう。
あとは、これまでと同じように、速度グラフのカーブを調節します。
ここまででこのような感じになります!完成が近いですね。
最後に、５つのリスト項目のアニメーション開始を2フレームずつズラします。紫のバーをドラッグしてずらせます。
メニューが上から降りてくるアニメーション
メニューの背景になる素材を、画面の一番上から下に移動させるだけです。
アニメーション開始時刻にキーフレームを打ち、プレビュー画面上の素材をドラッグして上に移動させます。
次に、アニメーション終了時刻にキーフレームを打ち、プレビュー画面上の素材をドラッグして元の位置に移動させます。
後は速度グラフをお好みで調節します。
これで完成です!
いかがでしたでしょうか。今回は、最低限の知識で作る方法をご紹介しましたが、もっと効率的に行うこともできます。ぜひ、これを機会に After Effects を学んでみてください!
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!
関連記事
