初心者向けにUnityでアニメーションを作る方法について解説。3DのSphereを実際にアニメーションで動かしながら方法を説明しているので、Unityを使ったことがない人でも理解できるでしょう。ゲーム開発をしたい人はぜひご覧ください。2017/2/26テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。調査手法:インターネット調査ゲームで演出をリッチにするためには、アニメーションを作成する技術が不可欠です。アニメーションと聞くと何か敷居が高いものと感じる方もいらっしゃるかもしれませんが、Unityでは初心者の方でも簡単にアニメーションを作ることができます。今回は、Unityでアニメーションを作る方法を解説していきます。今回は3DのSphereをアニメーションで動かしていきたいと思います。目次Unityのアニメーションシステムアニメーションとアニメーターの違い簡単なアニメーションを作成してみるアニメーションの再生まとめUnityを学習中の方へそもそもUnityについてよく分からないという方は、Unityとは何なのかについて解説した記事を読むとさらに理解が深まります。大石ゆかり田島メンター!!画面内のオブジェクトを動かす方法についてもっといろいろ知りたいです!田島悠介では今回は、オブジェクトにアニメーションを追加する手順を解説しよう。大石ゆかりアニメーションということは、オブジェクトに特定の動作をさせたりできるんですか?田島悠介そうだね。移動させたり色を変えたりいろいろできるよ。簡単な座標の移動からやってみようか。UnityのアニメーションシステムUnityでは簡単にアニメーションを作成できます。オブジェクトの位置、角度、大きさ、色など基礎的な値はものの1分ほどで設定できてしまいます。アニメーションと聞くと、プレイステーション4のようなきれいな3Dモデルが自由自在に動いているものや、テレビで見るアニメのようなクオリティの高いものを想像するかもしれません。した物を作るためには、Unity以外の力(Mayaや3DsMaxなどの3Dモデル、アニメーション編集ツール)が必要になってしまいます。そこで今回は、Unityだけでできるアニメーションの例として、簡単な座標の変更を作ってみましょう。動かしたいオブジェクトにAnimationコンポーネントをアタッチします。Animationコンポーネントは、Miscellaneous(その他)グループに含まれています。次に、[Window]->[Animation]からアニメーションウィンドウを開きます。違いについて解説します。Animatorというと、大きく2つあります。コンポーネントを利用する必要があります。コンポーネントを残している理由としては、後方互換性を確保する意味があります。コンポーネントを知らなくても良いということではありません。フローチャートに似たシステムを利用して、アニメーションクリップ全体の取り扱いが可能です。ウィンドウでは、アニメーターコントローラーアセットを作成・表示・修正できます。田島悠介アニメーションの作成を開始してみよう。Hierarchyで動かしたいオブジェクトを選択して、AnimationウィンドウのCreateボタンを押すんだ。大石ゆかりファイルの保存ダイアログが表示されました。田島悠介アニメーションの名前をつける部分だね。普段は「Jump」や「Walk」などの名前を付けるけれど、今回はサンプルだから「Sample.anim」という名前で作成してみよう。簡単なアニメーションを作成してみるアニメーションを作成する準備ができました。実際にアニメーションを作っていきましょう。(画像はクリックで拡大表示されます。)田島悠介それではアニメーションを作っていこう。Unityでは、キーフレームアニメーションとよばれる方法を採用していて、特定の時間におけるプロパティの値を設定することで、値の補間によってアニメーションを行うよ。田島悠介はじめはそうだね。実際に触ってみれば感覚がつかめるよ。アニメーションの作成には、Animationウィンドウ左上の録画ボタンが便利です。この録画ボタンを押してみましょう。録画ボタンがONになっている状態でインスペクタからオブジェクトのパラメータを変更すると、入力フィールドが赤く変化します。この際Animationウィンドウにはキーフレームが追加されています。上記の操作で、0フレーム目にキーフレームが打たれました。フレームの移動は、画像の部分をドラッグすることで行います。今回は、30フレーム目に移動してみます。30フレーム目でもオブジェクトの座標を変更してみます。フレームを移動させることで、補間されていることを確認できます。再生ボタンを押すことで、実際の速度でプレビューが行われます。アニメーションの編集を終える際は、忘れずに次の2つの操作を行ってください。・フレームを0フレーム目に戻す録画モードの停止やフレームを0フレーム目に戻す操作を行わないと、普通にオブジェクトの座標を変更したい場合でも、アニメーションのフレームとして保存されてしまいます。録画モードのON/OFFは、Animationウィンドウ左上のアイコンで確認できます。「スクールは高いから独学で成功する」という気持ちの方は多いと思います。その方が金額は低く抑えられるでしょう。独学には向き不向きがあり、実はスクールが向いている人も大勢います。スクールが向いているかもしれません。お気軽にご参加ください。実行時にアニメーションを再生するには、作成したアニメーションをAnimationコンポーネントのAnimationプロパティに設定します。アニメーションをループさせる場合は、Projectタブでアニメーションを選択し、InspectorタブでWrapModeを変更します。今回はループさせるために「Loop」に設定してみます。実行時にアニメーションが再生されます。まとめ今回はUnityで簡単なアニメーションを作成していきました。今回は移動を行いましたが、他にも回転、拡大など様々な効果をつけることができます。アニメーションをマスターすれば、今後のゲームの表現の幅が広がること間違いなしです。理解を深めていくようにしましょう。今回はY軸を指定したので上下に動いたけれど、例えばz軸の値で動かすとオブジェクトが手前と奥に移動するよ。大石ゆかりインスペクタで編集できる値は、どれもアニメーションさせることができるんですね。座標の移動以外にも、オブジェクトの大きさを変更したりマテリアルを途中で変化したりと、様々な効果を加えることができるんだ。基本的な手順は今回と一緒なので、ぜひ練習してみよう。大石ゆかりいろいろ追加して試してみます。ありがとうございました!Unityを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいUnityを学習していて、このように思ったことはありませんか?テックアカデミーでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、はじめてでもUnityでオリジナルゲームの制作ができるようになります。一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。30分間、オンラインでどんなことでも質問し放題です。あなたの相談に真摯に向き合います。「漠然としているがプロの話を聞いてみたい」こんな気持ちでも大丈夫です。お気軽にご参加ください。※体験用のカリキュラムも無料で配布いたします。関連する記事Unityで光源(ライト)を設定する方法【初心者向け】現役エンジニアが解説ゲームエンジンのUnityで光源(ライト)を設定する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。...Unity3Dゲームで欠かせない!Unityで3Dモデルを使用する方法【初心者向け】3Dモデル使用すると聞くと専門的な知識が必要そうで敷居が高いという印象を受けるかもしれません。Unityでは簡単に扱う事ができます。Un...UnityUnityでシェーダーの記載方法を現役エンジニアが解説【初心者向け】Unityではオブジェクトを画面に表示するためにシェーダー(Shader)というプログラムが使用されています。無料でもインストールできるので、これから使ってみ...UnityUnityでJoystick(ジョイスティック)を追加する方法【初心者向け】ゲームエンジンのUnityでJoystick(ジョイスティック)を追加する方法を初心者向けに解説した記事です。実際のコードを使用して初心者向けに解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。CSSでアニメーションを設定する項目は以下のようになります。その他にも、ease-in-out、linearなどのキーワードで指定可能です。表示を確認してみましょう。これらのアニメーションプロパティはanimationプロパティで一括で指定することも可能です。runningCSSCSSで複数のanimationを操作する方法を現役エンジニアが解説【初心者向け】CSSで複数のanimationを操作する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。CSSで複数のanimationを操作するには、まず@keyframesでアニメーションの構成を指定します。fromの代わりに0%、toの代わりに100%を指定できます。途中の状態を50%などで指定も可能です。@keyframesについて、詳しくは以下の記事も参考にしてください。@keyframesで定義したアニメーションを要素に適用するにはanimationプロパティを使用します。animationプロパティは以下の8つのプロパティをまとめて指定できる記法です。animation-name:アニメーション名。keyframesで指定するか既定のアニメーション名を指定。animation-duration:1回のアニメーションが完了するまでの時間。animation-timing-function:アニメーションの進行。animation-delay:アニメーションを開始するまでの時間。animation-iteration-count:アニメーションを繰り返す数。animation-direction:アニメーションの方向。animation-fill-mode:アニメーションの実行の前後のスタイルを指定。アニメーションが実行中か停止中かを指定。animationプロパティについて、詳しくは以下の記事も参考にしてください。ここで、animation-durationとanimation-delayを利用することで、複数の要素のアニメーションを調整できます。シーケンシャルに動作させるには、前の要素のアニメーションが完了するまでの時間をanimation-delayに指定すると良いでしょう。同期して動かすには、animation-durationとanimation-delayを同じ値にすることになります。このようにアニメーションの構成を@keyframesで指定して、アニメーションのタイミングをanimationプロパティで個別にすると効率的でしょう。animationは要素の状態を変化させるため、周りの要素にも影響がでる可能性があります。要素の現在位置をmarginを使って指定した場合、隣接する要素の位置も変更されることになります。animationを使用する際は要素を絶対値(position:absolute)で指定する、display:flexを使うなどして、animationの影響範囲をコントロールできるようにしておきましょう。「スクールは高いから独学で成功する」という気持ちの方は多いと思います。その方が金額は低く抑えられるでしょう。今回はCSSのアニメーションをまとめたサイトや記事を紹介します。サイトを作っていく上でアニメーションの実装は必須と言えるでしょう。目立たせたり、クールな印象を持ってもらうためにアニメーションの書き方を覚えておくとサイトの表現に幅が出るはずです。そもそもCSSが何かよく分からない場合は、先にCSSの書き方をご覧ください。本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。このサイトはデモページもセットであるために1ページでいくつかのデモを見ることができます。上記のゲームボーイカラーの生成HTML、CSSなど真似したくなるアニメーションが多くあります・。他にも動的なコンテンツが多くあるので必見のサイトでしょう。アニメーションの実装でまず参考にしたいサイトの代表例ですね。マウスオーバー時に関するアニメーションについては、このサイトを見れば十分表現ができるでしょう。書き方もすべてまとまっているので、初心者の方でも気軽に使用できるはずです。このサイトでは実装結果が分かった状態で、使いたいものを選ぶことができます。アニメーションを再現できる便利ツールをまとめているので、表現したいアニメーションが見つかるはずです。ここには動くサンプルが多く乗っています。文字が奥にスクロールするものは実行してみたくなりますね。「スクールは高いから独学で成功する」という気持ちの方は多いと思います。その方が金額は低く抑えられるでしょう。独学には向き不向きがあり、実はスクールが向いている人も大勢います。CSSHTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法を現役デザイナーが解説【初心者向け】HTMLとCSSだけでフェードイン、フェードアウトのアニメーションを実装する方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。HTMLの書き方について解説した記事を読むとさらに理解が深まります。何かが出てくることをフェードインのアニメーションといいます。反対に、ふわっと何かがなくなることをフェードアウトのアニメーションといいます。以前はjQueryというJavaScriptのライブラリを利用して実装することが主流でした。最近ではHTMLとCSSの進化により、HTMLとCSSだけで実装できるようになりました。CSSに「animation」プロパティのclassを定義します。「animation」プロパティの値でアニメーションのタイミングなどを設定可能です。左の値から順に詳しく説明していきます。CSSにkeyframesでアニメーションの流れを定義します。HTMLではフェードインをしたいタグに「animation」プロパティを定義したclassを付けます。「スクールは高いから独学で成功する」という気持ちの方は多いと思います。その方が金額は低く抑えられるでしょう。UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Babich氏によって投稿されました。機能的で楽しいアニメーションは、現代のWebデザインの重要な要素の1つです。インタラクションデザインの細部は、現代のWebサイトに根本的な違いをもたらします。アニメーションは、アプリケーションのステータス(現在の状態)をユーザーに伝えたり、ユーザーの注意を引いたり、ユーザーがアクションの結果を確認するのを助けたり、振る舞いに影響を及ぼすことさえできます。ユーザー体験を向上させるにはWebサイトのどこどのようなにアニメーションを追加したらいいか、次にいくつかの例を紹介します。Webアニメーションの最も一般的な使い方の1つは、読み込み時間中にユーザーの気を紛らわせることです。アニメーションを使用すると、ユーザーの時間感覚に影響を与えて、実際よりも短く感じさせることができます。あなたがソースコードを短縮できないなら、待ち時間がなるべく楽しくなるよう努めましょう。アニメーションの読み込みはシンプルなものがベストです。音などの追加的エフェクトは必須ではありません。優れたアニメーションはユーザーを魅了します。待ち時間に面白い体験があれば、ユーザーは読み込み時間も気にならないでしょう。読み込み時間が短い場合でも、楽しいアニメーションの読み込みがあると、待ち時間にちょっとしたエンターテイメントを提供できるでしょう。線形のアニメーションは、進捗を表示できます。ローディングバーは、このタイプのアニメーションの最も一般的な例です。進捗を表すアニメーションは、段階的な線形プロセスにも使用できます。スケルトンスクリーンとは、空白のページに徐々に情報が読み込まれる手法です。スケルトンスクリーンのアクションにより、情報は画面上に徐々に表示されるため、リアルタイムで処理が進捗しているという感覚を作り出します。ほとんどのWebサイトでは、スケルトンスクリーンとアニメーションを組み合わせて使用することで、読み込み時にユーザーの関心が離れないようにすることができます。優れたインタラクションデザインは、ユーザーがインタラクションの結果を視覚的に理解できるように、それを伝えるフィードバックを提供します。Webサイト訪問者にとって、サイトのどの要素がインタラクティブであるか、またどのようなインタラクションが起こるかを予想できないことは混乱の原因となります。した問題を解決するには、インタラクションをクリアで理解しやすいものに設計しましょう。要素がインタラクティブであることを示す方法としてビジュアルフィードバックを使う場合、ホバー効果は最も一般的な例の1つです。ユーザーは要素の機能性が気になるとき、その要素の上にマウスを移動する傾向があります。ホバーアニメーションはユーザーが直感的に分かりやすい設計にしましょう。モバイルデバイスにはマウスカーソルがないため、ホバー効果を使用できません。ボタンや他のインタラクティブな要素をユーザーにタップしてもらうためには、それより先に「インタラクティブな要素であること」を視覚的に表示し、インタラクションの直後にフィードバックを返す必要があるのです。このようなフィードバックは、ユーザーに彼らのアクションがレスポンスのトリガーとなったことを知らせることができます。例として、以下のボタン要素はアクティブな状態になると、下に押されたように見えます。陰影効果は、要素が「タップ可能であること」を示します。人間の目が動きに引き付けられることはよく知られています。このことを応用すればアニメーションは、ユーザーの注意を引き、ユーザーが実行するアクションを促進するのに最適なツールとなるでしょう。入力フォームはアニメーションで効果を高めることができます。正しいデータが入力されたときには、完了時に「うなずく」アニメーションを導入し、誤ったデータ入力を拒否するときには、「首を横に振る」アニメーションを導入できます。ユーザーは、このようなアニメーションの意味を即座に理解できるでしょう。入力フォームは「首を横に振る」アニメーションを表示します。最近のトレンドは、ハンバーガーメニュー(三本線のアイコン)などのボタン要素がクリックされたときに、隠されたナビゲーションメニューが現れるデザインです。アニメーションは、2つのステータスの間の連続性を示し、不自然な遷移を避ける上で不可欠です。遷移が優れた設計であれば、ユーザーはどこに注意を向けるべきかを明確に理解することができます。アニメーションを使用すれば遷移をよりはっきりと表現できるため、ユーザーの利用開始時と利用終了時の間に何が起こったのかも明らかになります。DesignのWebサイトの例です。ユーザーが円で囲まれた矢印ボタンをクリックすると、大きなメニューボックスが右から現れます。このような「ポップアウト」効果のアニメーションは、メニューが画面の外からスライドしているかのように見せて、インタラクション全体をスムーズに実行します。アニメーションはステータス(状態)間の点と点をつなぎます。遷移は、状態の変化を示すために非常に重要です。Zumbrunnen氏は「UXデザインにおけるスマートトランジション」という記事で、ページ内の別のセクションにつながるリンクがクリックされたときに、アニメーションがコンテキストを維持するのにどれほど役立つかについて、素晴らしい例を紹介しています。比較対象として、ハードカット(一つ画面から別の画面へ遷移なしに一気に移動すること)に感じられるこの静的で急な変化を見てください。変化ほど不自然に感じられるものはありません。このようなインターフェースの変更は、ユーザーも処理が難しいと思うでしょう。アニメーションを加えることは、「生命感を与える」ことです。後者のナビゲーションの例は、微かなアニメーションを使用しているため、ユーザーはWeb上の記事のどのセクションを読んでいるかを相対的に把握することができます。クリエイティブなアニメーションは、ユーザー体験を真に楽しく思い出深いものにします。エンターテインメントをインターフェイスにもたらすことができます。デザイナーは、トップの画面領域を重要な情報でいっぱいにすることに集中していました。幸いなことに、現在このルールは絶対的に正しいものではないとされています。実際に、「Webページ上でユーザーの注目の約66%は、トップの画面領域の下に向けられている」と言われています。ユーザーの注目がページの上から下へ移動するとき、スクロールはインタラクションデザインの重要な要素としての役割を持ちます。アニメーションによるストーリーテリングは、退屈になりがちなインターフェースにユーザーとの感情的な結び付きを加えることができます。一般的によく使用されるパララックス(視差効果)アニメーションの代わりに、より繊細な設計を試してください。Webサイトをスクロール可能な部分に分割します。各部分内でアニメーションを使用してコンテンツを紹介できます。以下の例のアニメーションは、シンプルなアートのイラストレーションをアニメーション化することで、コンテンツに「生き生き」とした雰囲気を与えます。デザインは、単なるビジュアルプレゼンテーション以上の意味を持ちます。デザインとはインタラクションです。アニメーションはコミュニケーションにとって重要です。私たちは、Webにはインタラクティブな本質があることを受け入れ、それをデザインの自然な一部分と考える必要があります。他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。独学に限界を感じている場合はご検討ください。本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。Babich氏によって投稿されました。10年前、アニメーションやモーションを使用したユーザーインターフェースは効率の悪いものとされていました。派手なサイトに飛び跳ねるポップアップ、点滅するボタンなどを連想させるものでした。ここ数年でそれらの考え方は大きく変化しました。iPhoneやモバイルアプリが導入され、デザイナーの多くは動的なアニメーションの将来性について経験を積んてきました。アニメーションは時が経つとともにインターフェイスの重要な要素になり、デザイナーに全く新しい次元を与えています。最新のインターフェイスはもはやただの静止画の連続ではありません。アニメーションを使用すると、時間という次元を製品に加えることでソフトウェアと人の間のギャップを埋めることができます。最高に直感的で楽しい体験はいつもモーションデザインに細かい描写を入れます。この記事ではユーザー体験をより生き生きと楽しくするために、どこに美しさを追加できるかといういくつかの例を提示します。刺激的なオープニングアニメーションがあると、アプリを開くたびにユーザーの気持ちを盛り上げることができます。それ以上の役割を果たす場合もあります。下の例のアニメーションは単に楽しいというだけのものではなく、ユーザーの目に影響を与えて集中するべき場所をコントロールしています。ユーザーがUberアプリを起動すると、マップ上のピンに変化するドロップに目が行きます。ユーザーは初めてアプリに触れたときに、何をしたのかを知り理解しなければなりません。スムーズな画面遷移と優れたアニメーションは、新規のユーザーをどのようにアプリに引き込むかということにすさまじく影響があります。以下の例でのオンボーディングは創造性と個性が満載です。ビジュアルデザインとマイクロコピーが際立っており、新しいユーザーがアプリを体感することができます。アニメーションは、アプリ内の各機能についての対話式ショートストーリーを作ることができます。これによってユーザーは次にどうするべきか明確に理解できるようになります。デザインにアニメーションを追加する最適の場所は、変化の瞬間です。状態変化が起こるとき、ユーザーは新しい場面が前のものとどう関係しているかを理解する必要があります。静的なデザインでは状態と状態の間の前後関係を把握することができません。接続とコンテンツの関係が成立するのは、アニメーションが機能的にも様式的にも役立ったときです。アニメーション化されたトランジションは異なるUI間の中継となり、ユーザーを導くのに役立ちます。アニメーションはインターフェイス内でユーザーが現在の位置を確認するのに役立ちます。ユーザーは要素の動きに従って、2つの状態がお互いにどのように関係しているのかということを理解することができます。よいデザインのトランジションは、アプリに触れたときにユーザーの目を必要な場所に正確に誘導します。アニメーションは目的の対象に応じて適切な要素を強調します。再生ボタンを一時停止ボタンに変換することで2つのアクションがリンクされています。ひとつを押すともう片方のアクションが表示されるようになっています。アニメーションはユーザーが空間インターフェイスのメンタルマップを作成するのに役立ちます。自分がどこから来て、どこに行くのかということをはっきりすることができます。アニメーションはインターフェイス内で自分の位置を確認し、適切な場所にたどり着くのに役立ちます。「スクールは高いから独学で成功する」という気持ちの方は多いと思います。その方が金額は低く抑えられるでしょう。独学には向き不向きがあり、実はスクールが向いている人も大勢います。