Unityで作るUIアニメーションの方法と知識

1 はじめに
- 1.1 この記事について
2 Unityでアニメーションする方法
- 2.1 Animatorコンポーネントでのアニメーション方法
- 2.2 Animationコンポーネントでのアニメーション方法
3 UIに動きを付けるうえで知っておきたい知識
- 3.1 Imageとsprite rendererの違いって？
- 3.2 画面の比率対応したアニメーションの作り方
4 まとめ
5 参考文献

はじめに

こんにちは！情熱推進部アートデザイン課の腰越です。

2026年はもう半分をすぎて折り返しですね。
天候が荒れたり、季節の変わり目でもあるので皆さんお体にはお気を付けくださいね！

さて今回はUnityのアニメーションについてお話ししたいと思います。

※Unity 6000.0.58f2 を使用しています。

この記事について

主にUnityを触り始めた2Dデザイナー向けの記事になります。

UnityでUIをアニメーションさせたいけど具体的に何をすれば動くの？
アニメーション作る時って何に気を付ければいいの？

そんな悩みを解決するためのお話をできればと思います！

Unityでアニメーションする方法

まずは先ほどあった「UnityでUIをアニメーションさせたいけど具体的に何をすれば動くの？」の部分について実際にUnityに触りながら解説していきます。

解説する内容は以下になります！
▶動きの設定をつけるもの
【AnimationClip】

▶再生する仕組み
【Animatorコンポーネント】
【Animationコンポーネント】

動きを付けるAnimationClipは各仕組みによって少し設定の仕方が異なるので、それぞれ実際にUnityに触れながら説明します！

【準備】
やることは以下の二点です！
・2D画像の設定
・Animationタブの用意

【2D画像の設定】
1.アニメーションを行う画像をUnityに読み込ませ、Texture Typeを Sprite（2D and UI） に変更してください。

2.HierarchyにCanvasとImageコンポーネントを作成します。
ImageコンポーネントのInspector内にあるSource Imageにアニメーションさせる画像を設定しましょう。
※CanvasとはUIを表示する領域になります。

画像の準備はこれで完了です！
次にAnimationタブを用意しましょう！

1.上のツールバーから、【Window/Animation/Animation】を選択して作成します。

2.以下のようなウィンドウが表示されたら準備OKです！

Animatorコンポーネントでのアニメーション方法

紹介するアニメーション方法の一つ目はAnimatorコンポーネントを使用するものです！
Animatorコンポーネントの仕組みはこんな感じです！

つまり、AnimatorコンポーネントはAnimationClip（動き）とAnimationController（条件）というものを管理するものになります。

1.AnimatorコンポーネントとAnimationClip、AnimationControllerを追加します。
Animationタブを表示させた状態で、準備しておいた画像を選択するとAnimationタブにCreateが表示されますので、押しましょう。

2.追加されたことを確認します。
保存先を指定すると、画像のinspectorにAnimatorというものが追加され、Animationタブも変化します。

3.アニメーションさせる内容を選んでみましょう。
Animationタブ内のAdd Propertyを押すとアニメーションさせる項目が出ます。
今回はScaleを選んでみましょう。

4.キーを打っていきます。
アニメーションをさせるには「キー」というものを打ちます。
「キー」は画像上の◆になります。
この「キー」に設定した数値を元にアニメーションをさせることが出来ます。

「キー」を打つためには白いバーを運んで打ちたい場所に持っていきます。
左の数値を変更するとキーが自動的に打たれます。
（Scaleは1を基準にして数値を上下することによりサイズが変化します。）

5.Animationタブにある▶を押して再生するとこんな感じです！

アニメーションさせる項目を増やして設定していくと、色々な動きを加えることが出来ます。
いっぱい触ってどんな動きが出来るか見てみると、とっても面白いですよ！

AnimationControllerについて
この記事では多く触れませんが、AnimationControllerで条件を設定する場合はAnimatorタブ内で行います。
矢印に沿ってアニメーションの切り替わりや設定ができるので、視覚的に複数のアニメーションを管理しやすい形です。

もっとAnimatorコンポーネントやAnimationControllerについて知りたい！
という方がいましたら是非こちらの関連ブログを見て頂くのをお勧めします！

Animationコンポーネントでのアニメーション方法

それではAnimationコンポーネントの解説に移ります！
なお、AnimatorコンポーネントはUnityの古い機能になります！
Unity公式では推奨されていないものになりますので、ご了承くださいませ。

Animatorコンポーネントとの違い
・AnimationControllerがいらない
・代わりにスクリプトで条件を指定する
※なおAnimationコンポーネントはUnityの古い機能になります。

【具体的な使い方】

1.AnimationコンポーネントをAdd Componentから作成します。

2.Animationコンポーネントを付けた画像を選択した上でAnimationタブからCreateをします。
AnimationClipが作成されるので、Animationにいれて動きを設定しましょう。

3.アニメーションのループ設定について設定しましょう。
AnimationClipを選択してinspectorに【Wrap Mode】というものがループ設定できるものになります。

以下が各設定の詳細です。
Default：タイムラインのみの動きを行う
Once：アニメーション１回だけ再生
Loop：再生後最初に戻って繰り返す
PingPong：再生と逆再生を繰り返す
ClampForever：タイムラインの最後のkeyで停止

これで完成です！
画面上部のPlayボタンから動作を確認しましょう！

【再生されない場合】
Playボタンを押してもアニメーションがされない、となった場合以下が原因と考えられます。
・他の方法で作成したAnimationClipを使用しようとしている

他の方法で作成したAnimationClipは設定が異なるので、使用したい場合は設定を変更しましょう。
1.使用するAnimationClipを選択して右上の三点リーダーからDebugを押します。

2.【Legacy】の項目にチェックを入れてください。
これで再生ができるはずです！

Warning

Debugから設定を変更することは推奨されていません、どうしても…というときに行ってください！！

二つのコンポーネントについて仕組みは大丈夫でしょうか？
どういう時に使ったらいいのか…というのを表にまとめてみました！

	おすすめ
Animator	・Controllerでアニメーションの管理が分かりやすくできる・最新のコンポーネント　►特に理由がなければこっちでOK！
Animation	・AnimationClipだけで再生できる　►アニメーションの差分が多くなければシンプルに組み立てれる

管理方法に大きな違いが出るので、プログラマーの人とよく相談して決めてくださいね！

UIに動きを付けるうえで知っておきたい知識

次に「アニメーション作る時って何に気を付ければいいの？」の部分にあたります。
本記事で紹介するのは以下の二点になります。
・Imageとsprite rendererの違いって？
・画面の比率対応したアニメーションの作り方

Imageとsprite rendererの違いって？

Imageコンポーネントはアニメーションの準備をしている時にも出てきましたね。
そしてSprite Renderコンポーネントは同じ「ゲーム上にオブジェクトを表示する」役割をもつコンポーネントです！

二つの違いはズバリ、「UIで表示するか否か」です！
以下の表を基準に解説していきます！

Imageコンポーネント	SpriteRenderコンポーネント
・CanvasとImageコンポーネントを合わせて表示する・RectTranceformでパラメーターを調整	・Sprite Renderコンポーネント単体で表示する・Tranceformでパラメーターを調整

◆「CanvasとImageを合わせて表示する」と「Sprite Renderコンポーネント単体で表示する」 の違い
ここの肝はCanvasです！
Canvasは画面上の一番上に表示するものになりますので、UIに向いています。
逆にCanvasを合わせないSpriteRenderは3D空間上に置けるという利点があります。

◆RectTranceform と Tranceform の違い
ImageのRectTranceformはAnchorsやPivot等UI特化のパラメーターを含んでいます。
Anchors＝画面の解像度を変更させた時の基準点
Pivot＝画像の基準点
SpriteRenderのTranceformは3Dでも使われているコンポーネントのため3Dのオブジェクトと合わせて調整がしやすものになっています。

それぞれ解説しましたが、迷ったときは「UIで表示するか否か」で考えてみましょう！
基本的にUIとして使いたいとなったらImage、それ以外はSpriteRenderを候補に入れてみる…という感じです！

画面の比率対応したアニメーションの作り方

画面の比率が変わると、アニメーションさせた画像が見切れてしまう！という事はないですか？
これの原因はアニメーションの設定が原因かもしれません。

【原因】
移動させるアニメーションをAnchored Positionで行っている

【解決策】
Anchor MaxとMinを使用する

AnchorMaxとMinはざっくり言うと画像を延ばす項目になります。
Max、Minのように方向が定められていて、AnimationタブでXYを調整すると縦辺、横辺どちらも伸び縮みの調整ができます！

これをMinXを伸ばしてMaxXを縮ませるように設定し、再生して見ると…

このように解像度が変化しても画面外に行くことがなくなりました！

Warning

AnimationClipでAnchorを変更した後にImage自体のAnchorsを変更すると画面外に飛んでしまうので、あらかじめImageのAnchorsを設定してからアニメーションさせましょう！

まとめ

いかがだったでしょうか。
Unityで2Dアニメーションをする際の基本を紹介しました！

もしかするとPhotoshopのビデオアニメーションと似ている！と感じる方もいるかもしれません。
私自身Photoshopでアニメーションを作成した経験があったのでUnityのアニメーションはすぐに飲み込むことが出来ました。
ゲームエンジンのアニメーションだからと言ってハードルが高いわけではないので、ぜひ思い切ってやってみてください！

でも、実装の時はプログラマーとよく相談して進めてくださいね！

参考文献

参考にさせていただいたサイト

【Unity】AnimationでuGUIをスライドインする際のマルチ解像度問題
UnityでUIを作成する上でImageとSpriteの違い
アニメーションクリップ（Unity公式ドキュメント）
Legacy Animation component（Unity公式ドキュメント）

【免責事項】

本サイトでの情報を利用することによる損害等に対し、
株式会社ロジカルビートは一切の責任を負いません。