サイト読み込み時に数秒表示されるアニメーションを『ローディングアニメーション』といいます。
クリエイターズフィールドでは、このローディングアニメーションを通常とは一味違うものにしていますが、ご覧いただけましたでしょうか？

現在（2021年7月時点）はこちらのキャラクター（通称『パクちゃん』）がWEB制作の知識を貪るイメージでローディングアニメ－ションを作成しています。
※このキャラクターの元になったロゴ作成経緯はこちらの記事を是非ご覧ください。

初心者でも簡単！ロゴ作成のコツ・アイデアの出し方からデザインまでをご紹介

アニメーション作成

『アニメーション』とは［物体や絵に動きを与える技法］です。
本記事のアイキャッチ画像も元データにアニメーションを施していて、各キャラクターが違う動きをするようになっています。

IT業界で幅広く使用されているAdobe社製品にはPhotoshopやXD、premierepro、After Effects、Animateなどアニメーションの動きを作成することができるソフトが豊富です。
回転や移動などの単純な動きであればどのソフトでも比較的簡単に動作がつけられます。

今回はパクちゃんの形が不規則に変化していくアニメーションということで、Adobe Animateを使ってアニメーションを作成しましたのでその過程を見ていただこうと思います。

ロゴデータの読込み

Adobe AnimateではillustratorやPhotoshopで作成したデータをレイヤー構造を残したまま読込むことができます。
今回はロゴコンペで作成されたロゴデータからパクちゃん部分のみ選択して読込みました。

シンボル化

中央に配置して大きさを決めます。
今回はパクちゃん自体にアニメーションを持たせたいのでシンボル化してからパクちゃんをダブルクリックして編集画面に入ります。

1フレーム目を作成

レイヤーを追加して楕円ツールで目玉を描きます。
これでパクちゃんの基本形（1フレーム目）が完成しました。

キーフレーム追加して仕上げる

キーフレームを追加（F6キー）して、少しずつパクちゃんの形を変えていきます。
必要に応じてレイヤーを適宜追加して仕上げます。
アニメーションが出来上がったらタイムラインに戻ります。

リピート再生して確認

タイムラインにも編集画面と同様のフレーム数を挿入してリピート再生で仕上がりを確認します。

PNGシーケンス書き出し

APNGファイルで仕上げたいので、ムービー書き出しでPNGシーケンスファイルで保存します。

1フレームずつPNGファイル(連番)ができあがりました。

APNGファイルへの書き出し

『アニメ画像に変換する君』を使ってAPNGファイルへの書き出しをします。

PNGファイル読込

Webページ用アニメーションを選んでPNGファイルをすべて選択します。

完成

画質設定で出力ファイルにチェックを入れて『アニメ画像を保存する』をクリックすれば完成です！

出来上がったローディングアニメーションがこちらです。

いかがでしたでしょうか？
ローディングアニメーションをオリジナルにすることでWebサイトの個性を出すことができますので是非お試しください。