「9VAeきゅうべえ」で１枚のイラストから作ったGIFアニメ

# アニメーション作成フリーソフト「9VAeきゅうべえ」

[9VAe（きゅうべえ）](https://qiita.com/danjiro/items/253e5a33a38599098274)は、[自分で描いた絵や読み込んだイラストを自由に動かせる](https://dnjiro.hatenablog.com/entry/3mitu-ushi)**アニメーション作成フリーソフト**です。[中間のコマを作成する**キーフレーム補間**機能](https://dnjiro.hatenablog.com/entry/island-crab)があり、絵を描かなくてもアニメが作れます。広島国際アニメーションフェスティバルのワークショップで採用されました。MP4動画、GIFアニメ、SVGアニメ・イラストが作れます。


- Win/Mac/Linux版はリンク先右上の ![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/67734/dbea08ea-33e3-c9f2-aa04-73528cfa0f7f.png) をクリックして**ダウンロード**

|[iOS<br>iPad<br>![qvadanb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e6527c3c-7ec3-e357-37c2-2765538e47e0.png)](https://apps.apple.com/jp/app/9vae-iphone/id1482450143)|[Android<br>Chromebook<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://play.google.com/store/apps/details?id=com.qvae)|[Win<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://drive.google.com/file/d/1tIuOkL0TNhPaP3UfYl2pI7Cfk49QNfn3/view?usp=drive_link)|[Mac<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)<br>M1対応](https://drive.google.com/file/d/13yLPjYXv_fSH1MeSMfhyf_x7c3D02hJS/view?usp=drive_link)|[Raspberry Pi<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://drive.google.com/file/d/1HxKGRhI-v4F4Io3PShy8KVtLqSnNEcCy/view?usp=drive_link)|[Ubuntu<br>32bit<br>![qva32b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/580af743-7e1c-7a04-2966-470f4a33537c.png)](https://drive.google.com/file/d/1VebfBt-0LsnfN7J4q6Nbv_wMOd5PpBIM/view?usp=sharing)|
|:--:|:--:|:--:|:--:|:--:|:--:|
|[9VAePro<br>![qvapro64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/46826bc3-250a-5133-f827-3a4d086e2f4d.png)<br>* 599<br>Page](https://apps.apple.com/jp/app/9vaepro/id1493183090)|[Amazon<br>Fire<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://www.amazon.co.jp/dp/B082MYHTT7/ref=sr_1_1)|上が<br>見えない<br>場合は<br>Vector<br>↓|[古いMac版<br>10.7-10.11](https://drive.google.com/file/d/1QTwckowY7DTdbxPFtVW-OA4IR0umaYjw/view?usp=sharing)||[Ubuntu<br>64bit<br>![qva64b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e3edbeac-ece0-c506-e02f-cf5e0f5dd04e.png)](https://drive.google.com/file/d/1H6UkwUNdjTAX6_IvbFmkvXAHot6ASC5y/view?usp=sharing)|
||[Android<br>Chromebook<br>![qvadanb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e6527c3c-7ec3-e357-37c2-2765538e47e0.png)](https://play.google.com/store/apps/details?id=com.qvaDangla)|[Win<br>(Vector)](https://www.vector.co.jp/soft/dl/winnt/art/se515201.html)<br>|[Mac<br>(Vector)](https://www.vector.co.jp/soft/dl/mac/art/se515202.html)|[RaspberryPi<br>(Vector)](https://www.vector.co.jp/soft/other/other/se515318.html)|[安全性<br>は？](https://www.vector.co.jp/info/vtest.html)|


| [インストール方法＞](https://qiita.com/danjiro/items/1debda10c37fd8a55927)|[windows](https://qiita.com/danjiro/items/1debda10c37fd8a55927#windows%E7%89%889va-win)|[Mac](https://qiita.com/danjiro/items/1debda10c37fd8a55927#mac%E7%89%889va-mac)|[Pi](https://qiita.com/danjiro/items/1debda10c37fd8a55927#raspberry-pi%E7%89%889va-pi)|[Linux](https://qiita.com/danjiro/items/1debda10c37fd8a55927#ubuntu--linux-mint--xtra-pc-%E7%89%889va-pi)|
|:--:|:--:|:--:|:--:|:--:|
|[●アニメの作り方](https://dnjiro.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)|[ボタン説明](https://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)|[メニュー<br>キー](https://9vae.blogspot.com/p/scl0mnu.html)|[9VAe質問](https://chiebukuro.yahoo.co.jp/search?p=9vae)|[だんグラ](https://dangla.jp/)|
|動画出力|[ffmpeg](https://youtu.be/Lc5-ac01n6w)|〇|→|[ffmpeg](https://youtu.be/Lc5-ac01n6w)|
|しゃべる|[SofTalk](https://youtu.be/0k9bAN4Jge4)|〇|→|[OpenJTalk](https://youtu.be/Khx31_0IWcE)|



# Openclipartから絵を描かずに作ったアニメーション 例

[Openclipart](https://openclipart.org/)は、商用利用も可能な１５万点以上の**SVGイラスト**が掲載されています。これを 9VAe（きゅうべえ）で読み込めば、絵を描かずに、**GIFアニメ、SVGアニメ、APNG(動くLINEスタンプ)、連番の透過PNG**などいろんな形式のアニメが作れます。


- [Twitter, Facebook にアニメGIFを投稿する](http://qiita.com/danjiro/items/205efee350bfbbef488e#3-4-facebook--twitter-%E3%81%AB%E3%82%A2%E3%83%8B%E3%83%A1%E3%82%92%E8%BC%89%E3%81%9B%E3%82%8B%E3%81%AB%E3%81%AF)
- [PowerPoint, Keynote などのプレゼンテーションに動きをつける](http://9vae.blogspot.jp/p/powerpoint.html)
- [Youtube動画にタイトルやキャラクタを入れる](http://qiita.com/danjiro/items/13a247748f3097c2c055)

などの用途で使えます。

## Animation of Banshee elven archer
![9va-juanmontoya-Banshee-elven-archer.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/87d06f5a-5e8f-5c86-2de6-8053c7a6ecfd.gif)
[SVG版を見る](https://openclipart.org/detail/230381/animation-of-banshee-elven-archer)
キーフレーム数：５枚（目２、身体２、弓と手１）

9VAe(きゅうべえ)は、キーフレーム補間機能があり、**全部の絵を描く必要がありません**。使用しているキーフレームの枚数を下に記載しました。上のアニメは５枚の絵で作られています。読み込んだイラストを変形するだけで絵を描いていません。


## Rocket blue and red
![9va-rocket-blue-and-red.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/dea61d7c-1f40-27b4-9652-93c633b5d36b.gif)
[SVG版を見る](https://openclipart.org/detail/227383/animation-of-rocket-blue-and-red)
キーフレーム数：４枚（ロケット２、炎２）

## Skeleton 3
![9va2-Skeleton3.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/012e2fa2-7f5e-ef47-54ef-ace4eeb22f57.gif)
[SVG版を見る](https://openclipart.org/detail/227923/animation-of-skeleton-3)、[＞作り方](https://dnjiro.hatenablog.com/entry/skeleton)
キーフレーム数：１１枚（頭２、右足２、左足、右手、左手、各１、青い頭２、身体２）

## HEROINE
![HeroineAnime.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/5e05b232-8e40-e0c8-65ce-02f6307112da.gif)
[SVG版を見る](https://openclipart.org/detail/217660/heroine-animation)
キーフレーム数：たったの２枚

## 試食サンプルをどうぞ


<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/d/dnjiro/20190111/20190111144615.gif" width="400" />

[＞このアニメの作り方](http://dnjiro.hatenablog.com/entry/2019/01/10/183622) 
[SVG版を見る](https://openclipart.org/detail/313470/please-try-grocery-sample-animation)

## 〇〇〇の刃パロディアニメーション

[このアニメの作り方](https://dnjiro.hatenablog.com/entry/3mitu-ushi) 
![sanmitu.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/02c59462-4b14-1073-bf29-06f59fdc408d.gif)






## ３次元ＣＧアニメのような作品例
[アニメキャスト](http://qiita.com/danjiro/items/ec174df989af8db42da4)を使えば、[長いアニメも9VAeで作成](http://qiita.com/danjiro/items/020cd885edb5eb3d9fb0)できます。（1.2は[Webアニメコンテスト神戸](http://webcon.umds.ac.jp/)大賞作品）

1.  [「道場」(2007 棒線)](https://webcon-kobe.jp/2021/anm/b/kin07/bb.htm) <br>キャラクタを単純にして動きを追求した高校生の作品。3次元CGソフトで作ったようなカメラワークを見事に実現しています。
<br>このように図形を何枚か重ねてばらばらに動かせば、３次元的な動きを作れます。
2. [「神速卓球」(2005 Masashi)](https://webcon-kobe.jp/2021/anm/b/kin05/b.htm)<br>NHKデジタル・スタジアムで、これは３次元ソフトで作るべきではないかと言われた中学生の作品。
3. [「孤島で大カニに襲われるアニメ」(Komori)](https://dnjiro.hatenablog.com/entry/island-crab)<br>9VAeきゅうべえのサンプルフォルダにはいっている作品（05crab.eva）で、たった６ページから作られています。これを３次元ソフトで作るにはモデリングだけで相当大変でしょう。


# 小学生の作品例（１コマアニメーション）

クリックすると、Youtubeが開きます。
[![青少年のための科学の祭典で作った連作アニメーション](http://img.youtube.com/vi/2aiRstFBFFA/0.jpg)](https://youtu.be/2aiRstFBFFA)
[青少年のための科学の祭典で行った１００名の連作アニメ＞実施方法](https://qiita.com/danjiro/items/b9cde6e9d6e2a9fd6306)
これは１コマアニメーションといい、１枚の絵を描くだけで作れるコンピュータアニメーションです。9VAeきゅうべえや「[PEAS motch!](http://peasmotch.jpn.org/)」で作ることができます。

9VAeきゅうべえは、画期的なフリーソフトです。信じられないほど簡単にアニメーションを作ることができます。


# 9VAeきゅうべえとは
## 誰でもアニメーションを作れるツール
アニメーションを作る人は、文章を書く人、絵を書く人に比べると、ほとんどいません。これは「紙の時代」が長く続いたせいでしょう。

アニメは印刷できません。作る手間も大変です。表示できない、作るのも難しいとなればアニメを自分で作る人はいないでしょう。


ところが状況が変わってきました。資料は紙に印刷して配るより、ディスプレイで表示するほうが簡単になり、情報伝達の主力がネットワークにつながったディスプレイにかわってきました。

「ディスプレイの時代」はアニメの時代です。アニメが簡単に作れるなら、もっと自分でアニメを作るべきではないでしょうか。


![今までのアニメ制作.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/bb4919a5-a20d-a257-ce90-7622fd1e2aaa.gif)

絵や音楽は子供のころから描いたり歌ったりしています。ところがアニメを作る人はほとんどいませんでした。フリーソフト 9VAeきゅうべえを使えば、子供から大人まで自分でアニメが作れます。



## アニメーションの分類について
多くの解説書では、アニメーションを次の３つに分類しています。

1. **手書きアニメーション** 
2. **ストップモーションアニメーション** 
3. **ＣＧアニメーション**

１．は手描きのパラパラアニメ、２．は人形などをカメラで撮影したもの、３．はいわゆるＣＧ（Computer Graphics）です。

たしかにこの３つは大きなジャンルです。では、9VAeきゅうべえは３．に分類されるのでしょうか。どう考えても３次元のCGアニメとは違います。今アニメーションは次の4つに分類すべきと思っています。

1. **手書きアニメーション** 
2. **ストップモーションアニメーション** 
3. **３次元ＣＧアニメーション**
4. **２次元キーフレームアニメーション** , **[１コマアニメーション](http://9vae.blogspot.jp/p/9vae.html)**

## ２次元キーフレームアニメーション、１コマアニメーションを分ける理由
手書きアニメーションもストップモーションアニメーション も**多くのコマを用意**する必要があります。３次元ＣＧアニメーションは**精密な３次元モデル**を必要とします。この３つを作るのはみな**手間がかかります**。もし、アニメーションが上の３つしかないなら、アニメはすべて作るのが大変になってしまいます。実際そう認識している人は多いでしょう。

ところが、「**２次元キーフレームアニメーション**」は、３次元モデルは不要で、数枚のキーフレームがあればよく、**制作するのは簡単**なのです。さらに、2018年キッズプラザ大阪コンピュータ工房で開発された「[１コマアニメーション](http://9vae.blogspot.jp/p/9vae.html)」にいたっては、静止画を１枚描くだけでアニメーションが作れます。

上に掲載したＧＩＦアニメの制作において、絵は描いていません。**イラストをコピーして変形しているだけ**です。簡単になる理由は、絵がベクトルでできていて、修正ができること。２つの絵の間の中間の絵を書かなくてよいこと。３次元モデルが必要ないことです。

## Flash アニメーション
「２次元キーフレームアニメーション」がひとつの分野になっていないのは、[一時代を築いた「Flash」というグラフィックソフト](http://www.ae-suck.com/amazing/)のせいかもしれません。 Flashは**２次元のキーフレームアニメーション**を作るソフトとして登場しました。その後、インターネットの拡大、発展とともに、アニメーションソフトからWebサイトを開発する **プログラム環境**に進化していきます。その機能はすばらしく、[２次元キーフレームアニメーションは Flash の独り勝ちとなり「Flash黄金時代」と呼ばれます。](http://nlab.itmedia.co.jp/nl/articles/1704/24/news141.html) しかし[Flash の影響力をきらったスマートフォンから締め出される](http://gigazine.net/news/20111110_flash_history/)ことになり、世の中から[名前が消える](http://uxmilk.jp/5784)ことになります。「２次元キーフレームアニメーション」の概念が定着していないのは、「２次元キーフレームアニメーション＝Flash」が消えたせいかもしれません。

9VAeきゅうべえは　初期の Flash のような **２次元キーフレームアニメーションソフト**です。


興味のある方は[こちらもご覧ください（9VAeきゅうべえを無料にする理由）](https://qiita.com/danjiro/items/c68dfd4942df97dbaaf4)

## 9VAeの利用シーン
個人がアニメを作るために、9VAeきゅうべえは最適ですが、ビジネス用途にも使えます。

- 個人<br>趣味、プレゼンテーション、[プログラム学習](http://qiita.com/danjiro/items/d856d393b3e138af123a)

- ビジネス<br>イベント、ワークショップ、Web制作、教材制作、アニメ制作、[デジタルサイネージ(電子看板)](http://qiita.com/danjiro/items/e3b7ac1ef24826f9ff3d)


## 他のアプリとの連携

|アプリ|9VAeを使ってできること|
|:--:|:--:|
|PowerPoint, Keynote, LibreOffice|[アニメGIFを作成し、プレゼンテーションに動きをつける](http://9vae.blogspot.jp/p/powerpoint.html)|
|イラストレータ、Inkscape|[SVGを読み込んで動きをつける](http://qiita.com/danjiro/items/f1ad02d25196ed90fe6f)|
|Aviutil|[動画にアニメを合成する](http://qiita.com/danjiro/items/13a247748f3097c2c055)|
|Scratch|[コスチュームに動きをつける](http://9vae.blogspot.jp/p/blog-page_14.html)|


### PowerPoint / Keynote / LibreOffice にアニメGIFを入れる方法
1. 9VAeでイラストを読み込む（WindowsならPowerPoint上でイラストをコピーし、9VAe上でペースト。MacならOpenclipartのSVGを開く）
2. 9VAeで動きをつける、ファイル＞アニメGIF出力
3. PowerPoint ＞挿入メニュー＞図＞ファイルから入力（※ビデオ入力ではなく、写真のような静止画と同じ入力を使う点に注意！）
4. スライドショーを実行するとアニメGIFが動きます。LibreOfficeだと編集画面でも動きます。

### 動画にアニメを合成する方法（Windows AviUtilとの連携）
1. 9VAeでイラストを読み込む
2. 9VAeで動きをつける、ファイル＞連番/APNG出力
3. [AviUtilの動画オブジェクトで読み込んで動画と合成](http://qiita.com/danjiro/items/13a247748f3097c2c055)）


## 9VAeきゅうべえのカスタマイズと再配布

9VAeきゅうべえは、[カスタマイズ自由](http://qiita.com/danjiro/items/c5dc07671ffdbbb8a9a9)、再配布可能なフリーソフトです。例えば次のようものを作るのは自由です。

 1. [9VAeのデザインを変更](https://qiita.com/danjiro/items/c5dc07671ffdbbb8a9a9)し、新しい名前をつけて販売する
 2. 自サイトから、9VAeきゅうべえをダウンロードできるようにする（例えば会員のみダウンロードできるなど）
 3. 9VAeの教材を作成し、有償で販売する
 4. 9VAeのサポートを有償で行う

9VAeはフリーソフトです。バグ報告や要望があればできるかぎり対応しますが、保証や責任は負えません。しかし、今の状態で十分使えると判断された場合、9VAeきゅうべえの利用方法に関して、一切制限を設けません。



ぜひ、いろんな場面で、ご活用ください。

<br>

---
# 関連記事

## 9VAeきゅうべえ のご紹介

1. [無料ソフトでアニメを作ってみよう（9VAe きゅうべえ）](http://qiita.com/danjiro/items/253e5a33a38599098274)
2. [インストール方法](http://qiita.com/danjiro/items/1debda10c37fd8a55927)
3. [スクラッチ、ビスケットの次は 9VAe＝第３のプログラミング学習環境](http://qiita.com/danjiro/items/d856d393b3e138af123a)
4. [よくある質問](http://qiita.com/danjiro/items/205efee350bfbbef488e)

## 9VAeきゅうべえ 初級編
1. [9VAe チュートリアル（１）ーページでタイムラインなし](http://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)
2. [9VAe チュートリアル（２）ー図形入力、選択、移動、サイズ変更](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)
3. [9VAe チュートリアル（３）ーアニメキャストを作る、時間調整](http://qiita.com/danjiro/items/ec174df989af8db42da4)
4. [9VAe チュートリアル（４）ーアニメキャストの修正、往復](http://qiita.com/danjiro/items/70cfb20980fee4fdd245)
5. [9VAe チュートリアル（５）ー動きグラフ、ページコピー、GIF作成](http://qiita.com/danjiro/items/ffa863d303eb7d640d10)
6. [書き順アニメーションの作り方](http://qiita.com/danjiro/items/8dd0d7c7263f62189437)
7. [9VAeきゅうべえ：長いアニメを作る方法](http://qiita.com/danjiro/items/020cd885edb5eb3d9fb0)

## 9VAeきゅうべえ 中級編
1. [アニメの作り方](http://dnjiro.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)


## 9VAeきゅうべえ 上級編
1. [動くLINEスタンプのAPNG作成：無料ソフト9VAeきゅうべえ](http://qiita.com/danjiro/items/e4d9eb2b22f90ebd1e91)
2. [萌えキャラ デジたんを目ぱちさせるまで：APNGアニメの作り方](http://qiita.com/danjiro/items/67af46418b4831cda10b)
2. [openclipartの無料イラストをアニメ化する６つの手順](http://qiita.com/danjiro/items/161fc6bb0dc7aaa4f76d)
2. [イラストから動くLINEスタンプのようなアニメを簡単に作る方法](http://qiita.com/danjiro/items/f7ffcf5027babf3b03e9)
4. [Openclipart の 無料SVG をアニメにするテクニック](http://qiita.com/danjiro/items/1fcdd55a346d30b40b5e) 
5. [無料アニメソフト9VAeきゅうべえの裏技集](http://qiita.com/danjiro/items/6ce85f33bcda11c04f71)



## 9VAeきゅうべえ サンプル作品
1. [9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ](http://qiita.com/danjiro/items/7fa584a4336cda9c0a05)


## 9VAeきゅうべえ 技術資料
1.  [アニメソフト 9VAe をカスタマイズする方法](http://qiita.com/danjiro/items/c5dc07671ffdbbb8a9a9)
2.  [イラストレータのデータを 9VAe(きゅうべえ)に変換する方法](http://qiita.com/danjiro/items/f1ad02d25196ed90fe6f)
3. [9VAe / 9svg データフォーマット解説](http://qiita.com/danjiro/items/0d4ac334a7a97ddb4fe2)
- [OpenCV と Python を使ったアニメーション動画用紙のスキャン画像位置合わせ](http://qiita.com/danjiro/items/985afccd07722d4c21e9)