UIアニメーション制作①ホーム画面

こんにちは、UIアニメーションデザイナーのたかゆです。
前回のUIデザインの制作をmennmiさんに作ってもらい、今回はUIアニメーションをつけたので、UIアニメーションについての記事を書いていきます。
UIアニメーションを作るときに考えていることややり方などを簡単に紹介します。

UIアニメーションの制作UIデザインをAfter Effectsで動かす際は、先に「動かすイメージ」を固めてからPSDのレイヤー構造を整理すると、作業効率が上がります。

すべてを細分化して書き出すより、動きに不要なパーツを統合しておくほうが、後工程の無駄が減ります。

意図メモ（画面要素別）

・メモ帳
┣メモ帳の動きに紙らしさを入れる
┣デザインの傾きを感る軽い傾きアニメーションを入れる
┣立体的な動きが必要か検討
┣「デイリーミッション」は付箋が貼られる演出
┗ユーザー名はPC入力のようなアニメーションを検討

・フッター
┣選択中の動きは可愛いエフェクト(ややカクカクするステップ感)
┣下から上に向かって動かす
┗「New」は視認性を上げるポップ演出

・ヘッダー、メニュー
┣斜めの動きを入れたいが、くどいか？
┗アイコンと枠を分離して、ズレ・追従で可愛さを出す

・授業ボタン
┣メインなので動きに少し特別感を出したい
┣星のエフェクトはフッター選択と同系統の動き
┣鉛筆は書く動きを付ける
┗ボタン内の色面に軽いエフェクト／パーティクルを検討

PSDの準備
フォルダやレイヤースタイルは一度外した「フラットな構造」でPSDを保存し、After Effectsで読み込みます。AEでの整理を前提とした、最小限のレイヤー分割に揃えておくのがポイントです。

AEデータの整理

PSD読み込み直後はレイヤー数が多くなるため、Grupicoスクリプトでタイムラインをグループ化します。これによりコンポジション内で必要グループのみを表示し、集中して制作できます。グループ化後はタイムラインが大幅に圧縮され、各グループの開閉で要素単位の編集が容易になります。

グループ化するとここまでタイムラインが圧縮されます。

グループを開くとこんな感じ。

まずは位置・スケール・回転などのトランスフォームで、全体の「動きの方向性」を掴むラフを作成します。

ラフが固まったら、エフェクトや細かな動きを加えてブラッシュアップしていきます。

トランジションと全体の動きを整え、Vコン（確認用映像）を仕上げます。

今回の調整では以下を追加しました。

調整内容

作成中に「やや動かしすぎ」と感じたため、シンプル版のアニメーションも用意しました。
UIアニメーションでは、キャラクターを主役に見せたい画面ではシンプル版がより適しているため、この画面単体で判断する場合はシンプルな動きを採用します。

次のステップ
この方針のまま他画面のアニメーションも作成し、画面遷移を含めた一連の流れで評価します。
流れの中で冗長に感じる箇所を削り、要所だけを強調することで、より良い体験に仕上げます。

よかったらシェアしてね！

ソーシャルゲーム会社でUIアニメーションや演出、エフェクトを担当しています。
UI演出についての知見を深めるためにブログを始めました。
最近インプットアウトプットをしていなかったので、ブログをきっかけにインプットアウトプット力を高めていけたらと思っています。