みなさんこんにちは!おさかなです!
今回は「Animatize」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・簡単なアニメーションを作りたい方
・マウスで動かしたとおりに、アニメーションを作りたい方
・オリジナルキャラクターを動かしてみたい方
「Animatize」って何?
「Animatize」とは、マウスで動かした通りに「アニメーション」が作れるツールのことです。
デフォルトの「海とヨット」を始め、ご自身で用意した「背景」や「キャラクター」画像を用いることもでき、誰でもかんたんにアニメーションが作れる優れものとなっております!(すごい!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/661bd782c607d65f5fadccef2596e816.png)
![](https://osakanav.com/wp-content/uploads/2022/01/squoosh-top-160x90.png)
実際に使ってみよう!
アニメーションを作ろう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/01/animatize.png)
こんな感じで、マウスで動かすだけで、アニメーションが作れるみたいです!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/01/animetize.gif)
「Try it out!」という項目まで、ページをスクロールしましょう!(よいしょ!)
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-try.png)
赤枠のキャンバス内に「ヨット」を持っていくと…?
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-canvas.png)
こんな感じで、かんたんにアニメーションが作れました!(おもしろい!)
![](https://osakanav.com/wp-content/uploads/2022/01/animation.gif)
「generate code」ボタンを押すと、HTMLコードが生成され、ブログやWebサイトなどに埋め込むこともできます。(いいね!)
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-gene.png)
「copy code」ボタンで、コードをコピーします。
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-copy.png)
WordPress内に埋め込む場合は、プラスマーク「+」を押して…。
![](https://osakanav.com/wp-content/uploads/2021/03/Inkedwp-block-new_LI.jpg)
「カスタムHTML」を選択!
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedwp-c-html_LI.jpg)
表示されたブロックの中に、コードを貼り付ければOKです!(お〜!)
![](https://osakanav.com/wp-content/uploads/2022/01/animtize-pasete.png)
(あともう少し…🚩)
![](https://osakanav.com/wp-content/uploads/2021/11/dbg-top-160x90.png)
「オリジナル画像」を使ってみよう!
ページの下の方にある「Make your own animation」という項目では、1番に「背景」2番に「キャラクター」画像をアップロードすることで、オリジナルのアニメーションが作れます。
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-original.png)
実際にアップロードすると、こんな感じ!(わーお!)
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-own.png)
同じようにマウスを動かしていくと、あっという間にアニメーションが完成しました!(やったね🌼)
![](https://osakanav.com/wp-content/uploads/2022/01/animetize-osakana.gif)
もちろんコードの生成も可能です!
![](https://osakanav.com/wp-content/uploads/2022/01/osakana-animetize-code.png)
↓実際に作成したものはこちら
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おりゃああああ!
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
動かしすぎです!笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/11/3dbook-top-160x90.gif)