![](https://cxg-design.jp/wp-content/uploads/2023/09/f3d26ee189eb3f0eceefaaf97f7542f8.png)
After Effectで作るオリジナルローディングアニメーション
Webサイトで別ページに移動するとき、アニメーションが入ると、ページを読み込んでいることがわかりますよね?ローディングアニメーションは、サイト離脱を防ぐ、一つの手段になります。
CXG DESIGNのWebサイトでもアニメーションが流れます。以前のブログでも紹介しましたが、オリジナルのアニメーションを作成しました。
これは、主にAdobe After Effectで制作しました。今回はこのローディングアニメーションの作り方について、After Effectの簡単な使い方とともに説明していきたいと思います。
1.ロゴデータを用意する。
まず、イラストレーターのロゴデータをAfter Effectで読み込み、動画編集出来るデータにします。
画面サイズをアニメーションの出力サイズにし、アルファベットのCXGをそれぞれ別レイヤーに移動し尚且つ、色をブラックとグレーに分けます。このままAIファイルで保存します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/073a6f8eb12d6b28f249e0a8662c4f4b-2000x1249.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/7ecddd53bd8a838b913f7e494bd8bb69-2000x1248.png)
2.After Effectで新規プロジェクトを作成し、データを読み込む。
After Effectを開き、ファイル>新規>新規プロジェクトをクリックし、プロジェクト名を入力し、任意の場所に保存する。画面中央の新規コンポジションをクリックし、サイズ(AIと同じ。幅:500px 高さ:500px)、フレームレート(1秒間のフレーム数。今回は、24に設定)、秒数(2秒。デュレーションに200)を入力。
![](https://cxg-design.jp/wp-content/uploads/2023/09/6e13b64605a81617e080790a4ac67948-1-2000x1250.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/6c5dfdb425ca9ae868b3a26754739136-2000x1251.png)
ファイル>読み込み>ファイルをクリックし、1.で作成したAIデータをフッテージで読み込みを選択。次にコンポジションで読み込み、レイヤーサイズを選択し読み込みます。フォルダに、レイヤーごと分かれてAIデータが読み込まれました。
![](https://cxg-design.jp/wp-content/uploads/2023/09/84f66981c5c36da38506e8534c185100-1-2000x1247.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/e86995f7a718121d69cef0546dceee2b-1-2000x1244.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/9ca1f49bab29db5a5941478a2bd243de-2000x1255.png)
3.タイムラインにデータを読み込む。
下にあるタイムラインに、フォルダごとをドラッグしてデータを配置します。上にブラックのCXG、下にグレーのCXGデータが配置されるようにします。すべて中央に寄って配置されているので、CとGを左右に移動します。この時、ブラックとグレーのC、Gがずれないように、レイヤーを同時に選択して移動します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/9ab77aa4904f7c69b03fb9816c461c6e-2000x1255.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/be98facddf98f783c36c18dbe992ed9c-2000x1247.png)
次にブラックのCXGレイヤーを編集>複製で複製し、グレーの下に移動します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/379b547c88d54015a21b27386309718c-1-2000x1244.png)
4.放射状ワイプをかける。
まず上の6レイヤーを選択し、エフェクト>トランジッション>放射状をクリックします。これで放射状ワイプが使えるようになります。
![](https://cxg-design.jp/wp-content/uploads/2023/09/4aea2d0dc29939f90c7aeb9da08c970b-1-2000x1247.png)
ブラックのCXGのCレイヤーの>をクリックし、エフェクト>放射状ワイプの>をクリックします。タイムラインが0:00:00:00であることを確認し、変換終了の左にあるストップウォッチマークをクリック。次に、タイムラインに100を入力し、0:00:01:00(1秒)になっていることを確認し、ストップウォッチをクリック。変換終了のパーセンテージを100%にします。0°になっているワイプ開始位置を30°にズラしたいので、開始角度を0x+30.0°にします。これで、ブラックCのワイプが完成です。同じように0から1秒でブラックのX、Gをそれぞれ開始角度220°、120°でワイプをかけます。
![](https://cxg-design.jp/wp-content/uploads/2023/09/3d049c12981e3c6a0b6473bec3b9a92a-1-2000x1248.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/6d4b2da28bb2297f39c076398f3e23d8-1-2000x1250.png)
次にグレーのワイプを1から2秒でかけます。開始角度はC、X、Gそれぞれブラックと同じように30°、220°、120°にします。
![](https://cxg-design.jp/wp-content/uploads/2023/09/5df88dff7f67ab9bae9ad39e46350d58-1-2000x1247.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/4ea7a4d1aa21e3e76aede3d3a9e48875-1-2000x1244.png)
これでアニメーションの完成です。ループアニメーションになっているか、スペースキーを押して再生し確認します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/6d4b2da28bb2297f39c076398f3e23d8-1-2000x1250.png)
5.Adobe Media EncoderでGIFアニメーションに書き出し。
ファイル>書き出し>Adobe Media Encoder キューに追加をクリック。Media Encoderが起動ます。右側にAEで作成したファイルが表示されるので、書き出し形式をアニメーションGIF、透明度のあるアニメーションGIFで書き出ます。
![](https://cxg-design.jp/wp-content/uploads/2023/09/bd1b0f6c1ad92212d85fd7d3023c1c27-1-2000x1239.png)
これでGIFアニメーションの完成です。
6.WordPressのプラグインLoading Pageでローディング設定。
ざっくりですが、プラグインの設定方法を説明します。WordPressのプラグインからLoading Page with Loading Scrfeenをダウンロード、有効化します。
ダッシュボードの設定から、Loading Pageを選択します。設定画面の中程にある、Select the logo image (or any other image)からBrowseボタンを押します。メディアライブラリが開くので、そこに制作したGIFアニメーションをドラッグして、選択します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/a46a3a54c695be2fcc41062e192ad20e-2-2000x1187.png)
![](https://cxg-design.jp/wp-content/uploads/2023/09/550d606d466d19268744fe4e42823010-2-2000x1181.png)
Select background colorで、背景色を設定。Display loading percentのチェックボックスを外し、パーセンテージのカウンターの表示を消します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/e9e08c19d8e34e1e11d226f9edd6db5c-1-2000x1184.png)
CXG DESIGNでは、オリジナルのローディングアニメーション作成に対応しております。Webサイト制作に関するお問い合わせは、コンタクトフォームよりお問い合わせください。