WEBサイトやブログ、動画やスライドなどで説明を行う際に、視覚的にわかりやすくすることは非常に重要です。
マウスや矢印などで注目ポイントを強調するだけでなく、テキストや図形を囲んだり、丸や星形をアニメーションさせることで、さらに効果的にメッセージを伝えることができます。ここでは、Asepriteを使ってこうした強調アニメーションを作成する方法を紹介します。
コードやWEB知識不要で簡単にアニメーション作成ができる
Asepriteの大きなメリットは、WEBの知識や複雑なコードを一切使わずに、簡単にアニメーションが作成できる点です。通常、WEB上でアニメーションを実現するには、CSSやJavaScriptのコーディングが必要になることがありますが、Asepriteでは直感的な操作のみでアニメーションが完成します。
- ビジュアル操作だけで完結
Asepriteでは、フレームの追加やアニメーションの動きを設定する際、マウス操作やメニュー選択だけで簡単に編集できます。コードを書くことに慣れていない方でも、視覚的なインターフェースを通じて誰でもすぐにアニメーションを作成できます。 - プレビュー機能で即確認
アニメーションを作成しながら、その場でプレビューを確認できるため、どんな動きが適切かを視覚的に判断できます。これにより、試行錯誤を簡単に繰り返しながら、最適なアニメーションを作成することができます。 - WEBに適したフォーマットで出力可能
Asepriteで作成したアニメーションは、GIFやWEBP形式など、WEBサイトで使いやすい形式にエクスポートできます。そのため、専門的な知識がなくても、すぐにブログやサイトに貼り付けて利用することができます。
このように、Asepriteは初心者にも優しいアニメーション作成ツールで、技術的な知識がなくても素早く魅力的なアニメーションを制作できる点が大きなメリットです。
Asepriteとは
Asepriteは、主にドット絵を描いたり、アニメーションを作成するためのソフトウェアです。
このソフトを使って作成したアニメーションは、GIFやWEBP形式でエクスポートできるため、Excel、Word、PowerPoint、動画作成ソフトやWordPressに簡単に貼り付けて使用することができます。
枠線の色を変化させるアニメーションの例
アイコンなどの図形の色を変化させるアニメーションの例
（フレーム毎の時間もそれぞれ設定することもできます）
画像を強調する手順
強調したい画像を用意する
まずは、強調したい画像をAsepriteで開きます。背景画像やドット絵でも、アイコンや写真でも自由に使えます。
今回の例では、コーヒーの種類を記載した画像を用意し「ドリップコーヒー」を説明しているテキストを四角い枠で囲んで強調表示させてみたいと思います。
※強調表示は「暗めの赤」→「赤」→「明るい赤」の３色を使います。
新しいレイヤーにレイヤーを追加
まず、元画像と強調（装飾）のレイヤーを分けるために「レイヤー１」と表示されている部分で右クリックし（Windowsの場合）「新規」→「新規レイヤー」を選択します。（画像↓）
新しいレイヤー（レイヤー２）に枠線を書きます
テキストを囲む装飾として、ツールボックスから「長方形」を選択します。
強調したいテキストの上（レイヤー２）に長方形（枠線）を描きます。
長方形の色は「暗めの赤」で、線の太さは少し太めにしておきます（後で図形を加工しやすくなります）
枠を描き終わったら、次にアニメーションパターンを作成するために、フレームの数字部分の上で右クリックし「新規フレーム」を選択します。
フレームはいくつでも増やすことができます。同じ手順でフレームを追加するとレイヤー１とレイヤー２に作成したフレームと同じ画像が新しく作ったフレームに自動的にコピーされます。
枠線を３色で繰り返すように、フレームを６つ作成しました。（下の図）
６つのフレームは、先ほど作成した枠線を「暗めの赤」→「赤」→「明るい赤」→「明るい赤」→「赤」→「暗めの赤」の順にアニメーションさせるために使います。
※アニメーションをより滑らかにしたい場合は、フレームの数を増やします。
先ほどの枠線を簡単に選択する方法として、ツールボックスから「マジックワンド」を選択します。
マジックワンド（自動選択）を使って、テキストを囲った枠線（レイヤー２のフレーム１）を選択します。
（単色の図形やつながった形状であれば、どんな図形を使ってもOKです）
枠線が選択された状態で、ツールボックスから「バケツ」を選択します。
レイヤー２のフレーム（２～６まで）に、「暗めの赤」→「赤」→「明るい赤」→「明るい赤」→「赤」→「暗めの赤」の順で枠線に塗りつぶしを行います。
強調するはグラデーションやレインボーなど、図形の形状もお好みで構いません。
なるべくフレーム１と最後のフレームが同じにしておくと、アニメーションをループ再生した時にカクつきや違和感を減らすことができます。
アニメーションを確認する
すべてのフレームを作成したら、Asepriteの再生機能を使ってアニメーションをプレビューします。必要に応じて調整し、強調が効果的に見えるように仕上げます。
これまで作成したアニメーションをGIF形式でエクスポートし、ループ再生すると下の図のようになります。
またアレンジとして、背景を暗めにして「ネオン風」に光らせたり、星マークのアイコンを並べても面白いかもしれません。
アニメーションを保存する
作成したアニメーションは、GIFやWEBP形式でエクスポートすることができます。エクスポート後、各種ソフトウェアやWEBプラットフォームに貼り付けて利用することが可能です。Asepriteで作成したアニメーションは軽量で、視覚的に非常にわかりやすいため、さまざまな場面で活用できます。
色を変えるだけのアニメーションであればすぐにできます
今回の記事では、四角い枠線の色を変化させるだけの簡単な例でしたが、この記事の冒頭にある例のように、アイコンや図形の協調も簡単に編集することができます。
また、Asepriteは上の図のように、フレーム毎に図の位置や形状を変化させて様々なアニメーションを作ることもできますので、面白そうだと思ったらぜひお試しください。
コメント