アニメーション記事アイキャッチ

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

パクちゃん基本形

 

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

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

アニメーション作成

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

アニメーション記事アイキャッチ

 

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

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

ロゴデータの読込み

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

logoデータ読込

シンボル化

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

シンボル化

1フレーム目を作成

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

1フレーム目作成

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

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

 

リピート再生して確認

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

タイムライン確認

PNGシーケンス書き出し

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

タイムライン確認

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

PNGシーケンス

APNGファイルへの書き出し

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

PNGファイル読込

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

アニメ画像に変換する君PNG読込前

完成

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

アニメ画像に変換する君APNG出力

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

Creator's field ローディングアニメ

 

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