シンプルなアニメーション

ループアニメーションでプロフェッショナルなWebアセットを作成しましょう！

4,022

MarshallWolff

概要

多くの人々は、ブランディングにダイナミックでアニメーション化された要素を使用して、トラフィックの魅力を高め、ウェブサイトに独自性を加えています。多くの場合、これはCSSや他の開発言語を使用して行われますが、アニメーション画像を使用する方法はたくさんあります。このチュートリアルでは、Webデザインでアニメーションを使用する方法を学び、クリップスタジオで24フレームのループアニメーションを作成する方法を学び、市場性のあるスキルを身に付けます！

1.概念化

2. Webアニメーションのヒント

3.アニメーションとキーフレームのスケッチ

4. Clip Studioの準備

5.ファイナライズ

6. Webサイトでの使用

7.お楽しみください！

1.概念化

スケッチを開始する前に、資産の使用方法、ブランド（誰のために、または何のためにこれを作成しているのかの全体的なスタイル）、およびあなたまたはクライアントが必要とするその他の要件を考慮する必要があります。

アニメーションの使用方法は、設計およびアニメーション化の方法に影響します。

ロード画面、ライブロゴ、背景、ページ上の小さな要素にこれを使用しますか？これらの質問は、アニメーションを微妙にする必要があるかどうかを判断するのに役立ちます（ウェブサイトでアニメーション化された叫び声が欲しくない場合たとえば、視聴者に代わりに何かを読んでもらいたい）、エキサイティングな（ロゴやボタンに注意を引くことは非常に有益です）、あるいは退屈なページにもう少し活気を与えるために何かを読みたいです。デザインの使用法に基づいて何をすべきかを判断する方法については、「ヒント」セクションをご覧ください。また、「ウェブサイトアニメーション」を調べて、さまざまな種類のアニメーション化されたアセットを使用してより多くのアイデアを生み出す多数のクリエイティブなウェブサイトを見つける必要があります。

ウェブサイトのブランディングも考慮すべき重要な要素です。

クライアントのためにこのプロジェクトを行っている場合、どのようなデザインを既に使用していますか？ Webサイトの他の要素と見栄えを良くするには、アニメーションをどのようなスタイルにする必要がありますか？これはどの視聴者を対象としていますか（アニメファン、専門家、ビジネス関係者など）、彼らは何を楽しんだり気分を害したりしますか？クライアントには特定のリクエストがありますか？これらはクライアントとの重要な議論です。

個人プロジェクトでこれを行う場合は、同じことを検討する必要があります。あなたの聴衆は誰ですか？どうやって一貫性を保つのですか？あなたのプロジェクトについて何を言いたいですか？

この種のことについてもっと知りたい場合は、マーケティングまたは視覚的なコミュニケーションについて読んでください。

このチュートリアルでは、作品を展示するポートフォリオWebサイトを作成しています。最初のページに表示されるタイトル要素を作成します。視聴者の興味を引くには、多くの注目を集める必要があります。また、自分の名前をページの下に向けて、ページを下にスクロールする人を示すのに役立ちます。したがって、私は、下向きの動きがあり、私の名前のある中心に目を引く大きな劇的なアニメーションにしたいと考えています。

これは、視聴者が私のウェブサイトを見るときに最初に目にするものであり、サイトの残りの部分が同様のスタイルや雰囲気を持っていることを期待します。私の聴衆は、他のアーティスト（スケッチのような外観が有益かもしれません）、可能な雇用者（プロの何かを生み出す能力を示すために十分にきれいで洗練されている必要があります）、そしてできれば仲間のオタクの束（何か楽しいと科学的です）この視聴者に楽しまれそうです）。この情報に基づいて、私は大ざっぱなスタイル、たくさんのきれいな線と形、そしておそらく軌道上のいくつかの惑星や月で何かをしたいと思っています。また、このWebサイトには、ポートフォリオの作品をポップにするための暗い配色があることも知っているため、このアニメーションには、コントラストのある注意を引くための明るく飽和した配色が必要です。

たくさんの可能性があります!!!しかし、私が従わなければならない制約を作成することにより、最終的に私の創造性と最終製品を改善します。

2. Webアニメーションのヒント

実用的かつマーケティングの観点から、アニメーションがどのように、そして何をすべきかを知ったので、これらのヒントを使用して、アニメーションに最適なアイデアを生成します。

1.アニメーションは注目の的である：アニメーションは多くの場合、ウェブページ上で動く唯一のものであり、多くの注目を集めます。これを活用してください。ただし、より重要な情報から注意をそらすことができることに注意してください。

2.予測可能にしないでください：人間はパターンの認識に非常に優れており、単純な方法で繰り返すアニメーションは非常に退屈になります。アニメーション内で異なる動きをする複数のオブジェクトをアニメーションに追加したり、異なる持続時間を設定したり、異なる時間に開始してさらにダイナミックで魅力的なループを作成したりできます。

3.ループのSt音の回避：ループアニメーションの設計を始める良い方法は、最初と最後のフレームを同じにすることです。ただし、この方法で保持すると、同じフレームが2回再生されるため、アニメーションが再起動すると一時停止するように見えます。連続ループの場合、最後のフレームは遷移フレーム（パート3で説明）でなければなりません。最終製品（24ではなく25）よりも1フレーム多くなるようにアニメーションを計画したいので、最後のフレームを削除してこの問題を回避できます。

4.アニメーション化された要素は命を吹き込むことができます：微妙なアプローチを取ることを恐れないでください。小さくシンプルなループはWebページに素晴らしい追加を加えることができ、退屈な情報を活気づけます。目は焦点が合っている以上のものを見ることができるので、段落の横の小さな動きはそこから注意を引くことができます。ただし、微妙、小さい、または十分に遅い場合、ページ上の単語に焦点を合わせながら動きを感知できるため、視聴者はウェブページが実際に生きているように感じることができます！

5.実際の動きで目を向ける：芸術の原理の1つは動きのアイデアです。線、リズム、複数の焦点を使用することで、目を向けることで視聴者が画像を見る方法を本質的に制御できます詳細については、ゲシュタルト設計理論を参照してください！）。ただし、デジタル的には、実際の動きでも同じことができます。人は動いている物体を自動的に追跡する傾向があるため、目を好きな場所に移動させるのは、何かをその方向に動かすのと同じくらい簡単です。

6.しかし、それらをトラップしないでください!!!：ループアニメーションでは、視聴者がトラップされるリスクがあるので、別の焦点に目を向ける動きで逃げさせてから、すぐに離れるようにしてください。本質的にドロップオフされます。

7.コントラスト：動く要素と動かない要素のコントラストは信じられないほどのツールになります（映画での使用方法をご覧ください！）。モーションを使用して、静的オブジェクトを強調表示したり、感情を伝えたり、前述のように、さまざまなオブジェクトをさまざまな速度で動かしたりして、関心を高めます。

PHEW !!!おそらく、アニメーションを使用する他の創造的な方法がたくさんあります。考えがあれば、コメントに入れてください!!!

3.アニメーションとキーフレームのスケッチ

もちろん、スケッチは静的であるため、実際にアニメーションを実行する前に、アニメーションがどのように見えるかを判断するのは困難です。以下では、紙の上（またはClip Studioのフラットレイヤー）でアニメーションを計画する方法について説明します。

アニメーションは通常、「キーフレーム」で計画されます。これらは、オブジェクトの動きの最も重要なフェーズを示すフレームです。たとえば、ジャンプの場合、ジャンプの途中で立ち、再び立ちます。 2つのキーフレームの間にあるすべてのフレームは「トランジションフレーム」と呼ばれます。これらは、あるキーフレームから別のキーフレームにオブジェクトが移動し、アニメーションを生き生きとさせる様子を示します。以下のスケッチは、実際にイラストをアニメーション化する前にさまざまな種類のモーションをどのように計画するかを示しており、次のヒントはあなたが理解するのに役立ちますそれらを読んでいない）。

これらは、上記のようなスケッチを作成するために使用するものの一部です。

1.計画する前にいくつかのスケッチを考え出し、このステージを使用して、静止画のイラストのように構成と全体的な設計に焦点を当てます（パート1のスケッチを参照）。

2.個々のオブジェクトを分離し、それらを個別に計画して、複雑なアニメーションを管理しやすくします。

3.次の提案を使用して、オブジェクトの各キーフレームを描画します。

I.外観のみが変更されるオブジェクトの場合、最大の変更を示すために各キーフレームを描画します。

II。位置と外観を変更するオブジェクトの場合、各キーフレームを他のキーフレームに対して相対的な位置に描画すると役立ちます。これにより、両方のタイプの変更を追跡できます。

III。位置のみを変更するオブジェクトの場合、単一のキーフレームを描画して、オブジェクトがデザイン内の静的オブジェクト（たとえば、円の中心線）に対してどこにあるかを示すと役立ちます。

4.トランジションフレームがアニメーションをどのように形成するかを常に書き留めますが、それぞれを描画しないでください（これは後で行います！）。

5.各トランジションフレームは同じ時間間隔で区切られているため、キーフレーム間の間隔が大きいほど、アクションは遅くなります（逆も同様です）。私は個人的に線を使用して、必要なフレーム数とフレームをいつどこに配置するかを追跡しています。

6.すべてのオブジェクトが同じフレーム数でループを終了するようにします（この場合は25なので、繰り返されるキーフレームを切り取ります）。これを追跡するためにキーフレームに番号を付けます（キーフレーム1はフレーム1、キーフレーム2、3などはフレーム2と24の間にあり、次にキーフレームは同じである必要があります） 1は25になります）。これにより、1つのオブジェクトが誤って他のオブジェクトよりも長くなることを防ぎ、アニメーションの再作成を強制します。

7.オブジェクトにモーションを複数回循環させたいが、フレームの総数を簡単に分割できない場合（たとえば、25を2または3で分割することはできません）、オブジェクトが2つの同様のサイクル。たとえば、私は惑星が12フレームの長さである1つのサイクルを経て、次に13フレームの長さであるほぼ同一の別のサイクルを経ることを計画しました。

8.次のようなタイムラインを作成します。アニメーション全体に線を引き、その横に、相対的な長さ、開始点、およびアニメーション内の個別のオブジェクトごとの各キーフレームの位置を示す線を引きます。これは、オブジェクトの速度を比較するのに役立ち（キーフレームが近いほど通常はより速いアクションを意味します）、すべてのサイクルが加算されることを確認し、関心を追加するための調整を行います。

9.記号を使用して、説明や描画が難しいものを追跡します（たとえば、アニメーションを逆方向に繰り返したい場合は、両方向を指す矢印を使用して記憶します）。

10.オブジェクトを3Dに見せようとするときは、基本的なフォームでスケッチをブロックします（キューブが特に役立ちます!!!）。

4. Clip Studio Animation！

Clip Studioでワークスペースを最適化する方法に関するチュートリアルは多数あるため、必要な基本事項と開始方法について簡単に説明します。私はClip Studio EXを使用しているため、Proにはいくつかの違いがある可能性があることに注意してください。ただし、24フレームのみを使用することに固執します。

何だと思う？あなたはすでに紙の上で多くの仕事をしました!!!新しいイラストを作成します。私はこれをウェブサイト用に作成しているので、今のところ、72ppiで1920 * 1400ピクセルが良い出発点です。まだアニメーションにしないでください！

デザイン全体のスケッチを作成するか、紙にスケッチの写真をインポートします。

次に、通常どおりイラストを作成しますが、レイヤーを使用してオブジェクトを分離します。

アニメーションに応じて、ベクターレイヤーを使用して、下のビデオのようにアニメーションプロセスを合理化できます。この方法や、デザインを図解したり重ねたりするときに使用する他の方法について考えてください。これは非常に役立ちます。

終了したら、すべてのレイヤー（スケッチを除く）をフォルダーに配置します。静止したままで他のすべてのレイヤーの下にあるレイヤーがある場合、それらをフォルダーから除外できます（静止しているレイヤーおよび他のすべてのレイヤーと同じ）。

最後に、アニメートする時間です！タイムラインウィンドウを開き、新しいタイムラインを追加するボタンを探して、24フレームに設定します。独自のフレームレートを選択できますが、アニメーションのフレーム数が少ない場合、15fpsが適切な出発点です。上部のアニメーションメニューに移動し、アニメーションフォルダーの追加を選択します。レイヤーフォルダーを新しいアニメーションフォルダーに配置します。次に、レイヤーフォルダーの複製を23個作成します（このアクションのショートカットとしてctrl + alt + dを設定します）。処理を簡単にするために、それらを調べて番号に名前を変更できます。

アニメーションメニューに戻り、[トラックの編集]、[セルのバッチ指定]を選択します。アニメーションフォルダーの最初のレイヤーフォルダーが選択されていることを確認し、バッチ指定ダイアログで「既存のアニメーションセルの名前を指定」を選択します。最初と最後のフォルダーの名前がリストされます。これにより、各フォルダーがアニメーションのフレームとして設定されます。

この方法を使用すると、毎回再描画せずに小さな変更を加えることができ、オブジェクトを分離して複雑なアニメーションをより管理しやすくし、イラストを何度も重ねる混乱を回避できます。この方法は、ベクターレイヤーを使用する場合にも役立ちます。各フレームを通過してコントロールポイントを調整することにより、ラインをすばやく簡単に変更できるためです。これで、各オブジェクトのキーフレームを作成して、目的の場所に正確に配置し、タイムラインで計画したとおりにトランジションフレームの作成を開始できます。

または、各オブジェクト（各レイヤー）を異なるアニメーションフォルダーに分離し、各レイヤーの複製を作成することができます。これは、複数の方法で有益です。

前進!!!

5.ファイナライズ

最後に、すべてをテストできます！タイムラインを再生して、あなたの仕事に命を吹き込みましょう！

見落としているものがある場合は、なぜそれがおかしくなっているのかを理解してから、問題の原因となっている移行フレームを修正してください。

問題の修正が完了したら、面倒な部分や不完全な部分を調べて磨きます。

個人的には、2つの惑星が偶然に星の側面の光線の前にあることに気づきました。私の名前のためにアニメーションをやり直す必要があり、そこにいくつかの厄介な線があります！

注：フレームを追加し、フレームレートを上げるだけでは、アニメーションを滑らかにすることはできません。トランジションフレームを追加するよりも、スカッシュとストレッチ、アーク、遅延などのアニメーションの原理を使用して、適切に設計されたトランジションフレームを作成することがはるかに重要です。

6.ウェブサイトで使用する

アニメーションをgifとしてエクスポートします。これは最も使用されている形式であり、Adobe Portfolio、SquarespaceなどのほとんどのWebサイトクリエーターは既にループアニメーションをサポートしているので、ユーザー（またはクライアント）は簡単にポップできます。そうでなければ、私は（まだ）助けられないのではないかと心配していますが、このテーマや他のテーマに関するウェブ開発チュートリアルがたくさんあるはずです。