After Effectで作るオリジナルローディングアニメーション

Webサイトで別ページに移動するとき、アニメーションが入ると、ページを読み込んでいることがわかりますよね？ローディングアニメーションは、サイト離脱を防ぐ、一つの手段になります。

CXG DESIGNのWebサイトでもアニメーションが流れます。以前のブログでも紹介しましたが、オリジナルのアニメーションを作成しました。

これは、主にAdobe After Effectで制作しました。今回はこのローディングアニメーションの作り方について、After Effectの簡単な使い方とともに説明していきたいと思います。

1.ロゴデータを用意する。

まず、イラストレーターのロゴデータをAfter Effectで読み込み、動画編集出来るデータにします。

画面サイズをアニメーションの出力サイズにし、アルファベットのCXGをそれぞれ別レイヤーに移動し尚且つ、色をブラックとグレーに分けます。このままAIファイルで保存します。

2.After Effectで新規プロジェクトを作成し、データを読み込む。

After Effectを開き、ファイル＞新規＞新規プロジェクトをクリックし、プロジェクト名を入力し、任意の場所に保存する。画面中央の新規コンポジションをクリックし、サイズ(AIと同じ。幅:500px 高さ:500px)、フレームレート(1秒間のフレーム数。今回は、24に設定)、秒数(2秒。デュレーションに200)を入力。

ファイル>読み込み＞ファイルをクリックし、1.で作成したAIデータをフッテージで読み込みを選択。次にコンポジションで読み込み、レイヤーサイズを選択し読み込みます。フォルダに、レイヤーごと分かれてAIデータが読み込まれました。

3.タイムラインにデータを読み込む。

下にあるタイムラインに、フォルダごとをドラッグしてデータを配置します。上にブラックのCXG、下にグレーのCXGデータが配置されるようにします。すべて中央に寄って配置されているので、CとGを左右に移動します。この時、ブラックとグレーのC、Gがずれないように、レイヤーを同時に選択して移動します。

次にブラックのCXGレイヤーを編集＞複製で複製し、グレーの下に移動します。

4.放射状ワイプをかける。

まず上の6レイヤーを選択し、エフェクト＞トランジッション＞放射状をクリックします。これで放射状ワイプが使えるようになります。

ブラックのCXGのCレイヤーの＞をクリックし、エフェクト＞放射状ワイプの＞をクリックします。タイムラインが０:00:00:00であることを確認し、変換終了の左にあるストップウォッチマークをクリック。次に、タイムラインに100を入力し、０:00:01:00(1秒)になっていることを確認し、ストップウォッチをクリック。変換終了のパーセンテージを100%にします。0°になっているワイプ開始位置を30°にズラしたいので、開始角度を0x+30.0°にします。これで、ブラックCのワイプが完成です。同じように0から1秒でブラックのX、Gをそれぞれ開始角度220°、120°でワイプをかけます。

次にグレーのワイプを1から2秒でかけます。開始角度はC、X、Gそれぞれブラックと同じように30°、220°、120°にします。

これでアニメーションの完成です。ループアニメーションになっているか、スペースキーを押して再生し確認します。

5.Adobe Media EncoderでGIFアニメーションに書き出し。

ファイル＞書き出し＞Adobe Media Encoder キューに追加をクリック。Media Encoderが起動ます。右側にAEで作成したファイルが表示されるので、書き出し形式をアニメーションGIF、透明度のあるアニメーションGIFで書き出ます。

これでGIFアニメーションの完成です。

6.WordPressのプラグインLoading Pageでローディング設定。

ざっくりですが、プラグインの設定方法を説明します。WordPressのプラグインからLoading Page with Loading Scrfeenをダウンロード、有効化します。

ダッシュボードの設定から、Loading Pageを選択します。設定画面の中程にある、Select the logo image (or any other image)からBrowseボタンを押します。メディアライブラリが開くので、そこに制作したGIFアニメーションをドラッグして、選択します。

Select background colorで、背景色を設定。Display loading percentのチェックボックスを外し、パーセンテージのカウンターの表示を消します。

CXG DESIGNでは、オリジナルのローディングアニメーション作成に対応しております。Webサイト制作に関するお問い合わせは、コンタクトフォームよりお問い合わせください。