タイル模様が自由に作れる無料アプリ：9VAeきゅうべえ

動画素材作成フリーソフト9VAeきゅうべえのタイルエディタを使って、 和紙、水滴、草原、イナズマ、とかげ、お花畑といった模様を作る方法を説明した。パソコン、スマホで１０分程度で作成できる。

9VAeきゅうべえ、Ver.0.6.13 に、タイル模様を自作できるタイルエディタが搭載された。この機能は１０年ほど前から搭載をすすめていた機能だ。上がタイルつき、下がタイルなしだ。上のほうがよいだろう。ただ模様は無限にあるので物体に適した模様を簡単に自作できることが重要だ。

実は2017年に標準タイルが公開されたときからエディタがあったが、操作がわかりにくく公開していなかった。そのあと、Android版、iPhone版ができ、そこに移植するのに時間がかかった。

9VAeタイルエディタの使い方

使い方は一応 Qiita に解説記事を書いた。ただ素材画像についてあまり書いていないので、使い道がピンとこないかもしれない。

• タイルエディタの機能をまとめると、
  • 素材画像からタイルにする領域を選ぶ
  • タイルのつなぎ目を目立たなくする
  • 透明にするかなど、塗りつぶし方法を選ぶ
  • 明るさの調整、サイズの調整

これでどんなタイルが作れるか試してみた。以下の結果をみれば、ネットから入手できるフリーの素材画像から無限にタイル模様が作れそうだ。

9VAeタイルエディタで作れるか試してみた課題

• 思いつくままテーマをあげてみた。
  • 和紙
  • 水滴がついた窓ガラス（透明タイル）
  • 草原
  • イナズマ
  • とかげ
  • お花畑（色つきタイル）

iPhoneを使った手順を説明した。もちろんパソコンでもできる。Androidの場合、キャプチャした画像を「9VAe」フォルダにいれる必要がある

１．和紙

画像を検索してキャプチャー

1. まず、ブラウザで「フリー　テクスチャ　和紙」をキーワード検索する
2. 検索結果の中から、自由に使用してよいフリー素材画像を選んで画面キャプチャする

各OSの画面キャプチャー方法、画像のトリミングの方法は以下のとおり

OS	画面キャプチャー	切り取り
iPhone	電源ボタンとホームボタンを同時押し、iPhoneXではサイドボタンと音量あげるボタンの同時押し	写真アプリで編集
Android	スクリーンショットをとる方法	フォトアプリで編集
Mac	Shift＋コマンド＋４	キャプチャ時に切り取り
Windows	PrintScreen キー	ペイントブラシで選択、右ボタンメニュー＞トリミング

iPhone で画像検索＞キャプチャーし、写真アプリで開いた結果が下図。

以下、iPhone での操作を説明

1. 「写真」アプリでキャプチャ画像を開く（上図）
2. 編集（上図A）をタッチ
3. 画像トリミングボタン（下図B）、範囲指定ボタン（下図C）をタッチ
4. 右下隅（下図D）左上隅（下図E）をドラッグしてタイル素材だけ選ぶ
5. 完了ボタン（下図F）をタッチ

9VAeでタイルを作成

1. 9VAeきゅうべえを起動
2. 塗り色ボタン（下図G）をタッチ。下向き三角（下図H）で空のタイルを表示
3. 空のタイル（下図I）をタッチ。
4. キャプチャした画像を選ぶとタイルエディタが開きます。
5. タイルの左上の◇（下図J）をドラッグし、和紙の模様にしたい場所の上に移動します。
6. 虫眼鏡の左の「＋」ボタン（下図K）をタッチすると拡大します。タイルの内側（下図L）がタイル塗りつぶしされますので、この表示をみながら、重なり調整ハンドル（下図M）をドラッグします。△が右上隅の場合、周囲のタイルとの重なりがまったくないので、つなぎ目が目立つ場合があります。△を内側に移動させると重なり部分ができ、その間をなめらかに接続するためつなぎ目が目立たなくなります。
7. 左上の◇ハンドル（上図J）で模様の場所がかわります。ちなみに右下の◇のドラッグで大きさがかわります。△は重なり具合の調整です。この３つのハンドルを移動し、和紙のタイル模様を探します。
8. タイル模様が決まったら、選択ボタン（下図N）をタッチすれば、タイルエディタの模様編集が終了します。

図形にタイル模様をつける

1. 塗りのある四角ボタン（上図O）をタッチし、画面をドラッグ（上図P）して四角形を追加。画面全体を表示するには虫眼鏡ボタン（上図S）をタッチします。
2. 四角形を描いたら選択ボタン（上図N）をタッチ。iPhoneは画面変更ボタン「＞＞＞」（上図Q）でカラーパレットを表示
3. 塗り色ボタン（上図Q）でカラーパレットを開き、作成したタイルをタッチ。これで描画した四角形にタイル模様がつきますが、明るさ調整前なので模様がはっきりとは見えません。

タイルの明るさを調整

1. 選択ボタン（上図T）をタッチ。
2. タイルをタッチして選択し、選択枠の中心ボタン「＋」をタッチ。メニューの「明るさ」の上下△ボタンをタッチし、明るさを調整します。この例では、「明るさ７」にすれば上図のようになりました。

結果

1. 四角形を選択し、選択枠中心の「＋」（上図V）をタッチし、メニューから「複製」をタッチ。２つ四角形を複製します。

2. カラーパレットを表示し、白と薄茶色に変更した結果が上図です。和紙の雰囲気がでているでしょうか。

3. このあと、タイルを選択し、選択枠中心の「＋」をタッチ。メニューから「タイル模様の修正」を実行すれば、タイルエディタが起動し、模様の画像の場所を変更できます。この方法で四角形の模様をあとから自由に変更することができます。

２．水滴がついた窓ガラス

画像を検索してキャプチャー

1. ブラウザで「フリー　テクスチャ　水滴」をキーワード検索
2. 上と同じ方法でタイルを作成
3. タイルの描画モードを「白を透明に」に設定。これで水の部分が透明になります。

結果

３．草原

画像を検索してキャプチャー

1. ブラウザで「フリー　テクスチャ　草原」をキーワード検索
2. 上と同じ方法でタイルを作成

結果

４．イナズマ

画像を検索してキャプチャー

1. ブラウザで「フリー　テクスチャ　イナズマ」をキーワード検索
2. 上と同じ方法でタイルを作成
3. 「より白く」オプションで模様を作成

結果

５．とかげ

画像を検索してキャプチャー

1. ブラウザで「フリー　テクスチャ　爬虫類」をキーワード検索
2. 上と同じ方法でタイルを作成
3. FreeSVGからとかげ(Lizard)のイラストを検索、読み込んで回転させて、タイル塗りつぶしを設定
4. とかげの色を緑色に設定、タイル模様サイズを縮小

結果

６．花畑

画像を検索してキャプチャー

1. ブラウザで「フリー　テクスチャ　花畑」をキーワード検索
2. 上と同じ方法でタイルを作成
3. タイル塗りつぶし方法を「白を透明に＞黒を透明に＞カラー」に設定
4. 四角形を灰色に設定、タイルの色がそのまま表示されます。

結果

何例か作成してみたが、意外と簡単にタイル模様がつくれる。タイルエディタがないとタイル模様のつなぎ目が非常に目立つ。9VAeのタイルエディタは、完全とはいえないが、かなり使えそうだ。

---

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

Python パイソンで エクセル表（CSV）からファイルを作る方法

Python パイソンで エクセル表（CSVデータ）からファイルを作る方法を解説しました。PDFのテキスト化。アニメを作るはこちら。Pythonの使い方はこちら

ほかの解説動画はこちら。

目次

Python (パイソン) の入手

Windows の場合

• Windows10 以降では、コマンドプロンプトから python と入力すれば、アプリストアから Python3.1 がインストールできます。Python.jpのフルインストーラ版から、ダウンロードする方法もあります。ここ（pythonlinks.python.jp） から 64bit（古いPCは32bit）などを選んでダウンロードできます。それ以外の方法でインストールした場合、インストーラ画面で、最初に下の「Add Python to PATH」にチェックをいれれば、コマンドプロンプトから、python が使えるようになります。

ラズベリーパイの場合

• python(Ver2), python3(Ver3) が最初からはいっています
• ラズベリーパイの設定についてはこちら

Mac の場合

• M1版 Macの場合、Python.jpのフルインストーラ版から、ダウンロードするのが簡単。ここ（pythonlinks.python.jp） からダウンロードできます。
• Intel 版 Mac では、python (Ver2), python3(Ver3) が最初からはいっており、ターミナルから使えました。
• ターミナルは「アプリケーション＞ユーティリティ」の中にはいっています。ドックの上にターミナルアイコンをドラッグして登録しておくとよいでしょう。

python2 と python3 の違い

• python2 と python3 で書き方が違うところがあるので注意（ネット上には、python2のプログラムもあり、そのまま python3で動かすとエラーになります）
• プログラムに日本語を入れたいとき（表示したい文字が日本語など）は、python3 を使います。

Python (IDLE) の起動

Pythonを使ってみましょう。基本的な IDLE を使ってみます。

Windows の場合

1. Windowsボタンをクリックし「python」と入力して、アプリ　IDLE(Python) を実行。
2. ターミナルから「idle」を実行してもかまいません。Python という名前で IDLE が起動します。

ラズベリーパイの場合

1. 画面左上の Raspi ボタン＞Programming(プログラミング) > Python の Shell ウィンドウ（実行画面）が開きます。

IDLE（Python）の操作

1. Fileメニューから、New File を実行。エディタがひらきます
2. ここに下のようなプログラムを入れます 
3. Run メニューから、Run Module を実行
4. Pythonウィンドウで実行されます。エラーがあれば、ここに表示されます

Python のプログラム 例１

下のような Python プログラムをいれてみましょう。

1. エクセルから出力した CSVファイルを開く
2. CSVファイルの各行を読み込んで、１行ずつ出力
3. 終了を表示して入力待ちする

プログラム例を示します。

import os         # ファイル操作
srcCSV = "c:/test/test.csv"    # CSVファイル
fr = open(srcCSV,'r')
for ln in fr:
    print(ln)
fr.close()
a = input("***end*** ")

• import os は、ファイル処理するときに必要です
• srcCSV は、CSVファイルのフルパス。パスの区切りは「/」です
• open がファイルを開く関数。'r' は読み出しの意味。
• for ln in fr: は、ファイルを１行ずつ読み出して、ln にいれるの意味
• print() でなかの変数を表示
• Input() 文字入力関数で、"***end*** " を表示して入力待ちになります

UnicodeDecodeError: 'cp932' codec can't decode エラー

上のプログラムを実行すると、上のエラーが出ました。

cp932 は、Shift-JISのことです。open に 「encoding="utf-8"」をいれるとエラーが出なくなりました

fr = open(srcCSV,'r',encoding="utf-8")

• Python のプログラムは、文字コード utf-8 で書かないといけないのですが、ファイル open の文字コードが、何も書かないと、Shift-JIS になるようです。初期のころ、Windows も Mac も日本語の標準が Shift-JISだったなごりでしょう

Python のプログラム 例２

プログラムを改造していきましょう。

1. エクセル行の最初の値が「Folder」の場合、その後ろにある文字列をとりだして、その名前のフォルダを作成する
2. ルートフォルダの場所は、先頭で指定

下のようなCSVファイルを想定しています。

Folder,aaa,bbb,ccc
Data1,100,101,102
Data2,200,201,202

プログラム例を示します。

import os         # ファイル操作
import csv        # CSV処理
srcCSV = "c:/test/test.csv"    # CSVファイル（各自の環境に合わせて修正）
outDIR = "c:/test/"            # 出力先フォルダ（各自の環境に合わせて修正）
fr = open(srcCSV,'r')
cr = csv.reader(fr)
for ln in cr:
    if ln[0] == "Folder":
        for nm in ln[1:]:
            dir = outDIR+"/"+nm
            if not os.path.exists(dir):
                os.mkdir(dir)
                print(ln)
fr.close()
a = input("***end*** ")

• import csv で、csv.reader が使えるようになります
• for ln in cr: の ln は、リスト（文字列の配列）になります
• ln[0] は最初の文字列（先頭は０）
• for nm in ln[1:] の ln[1:] はリストの２番目から最後まで。nmは名前になります
• os.path.exists(dir) がファイル・フォルダの存在チェック
• os.mkdir(dir) でフォルダ作成

Runメニュー＞Run Module で実行します。エラーがなければ aaa,bbb,cccフォルダが作成されるはずです。

Python のプログラム 例3

さらに、プログラムを次のように改造しましょう。

1. 作成した各フォルダの中に、テキストファイルを作成し、値をいれる
2. テキストファイル名は、先頭列の名前にする

下のようなCSVファイルを想定しています。

Folder,aaa,bbb,ccc
Data1,100,101,102
Data2,200,201,202

プログラム例を示します。

import os         # ファイル操作
import csv        # CSV処理
srcCSV = "c:/test/test.csv"    # CSVファイル（各自の環境に合わせて修正）
outDIR = "c:/test/"    # 出力先フォルダ（各自の環境に合わせて修正）
dirs = ""
fr = open(srcCSV,'r')
cr = csv.reader(fr)       # csv読み出し
for ln in cr:             # １行リスト
  if ln[0] == "Folder":
    dirs = ln             # フォルダ名を記憶
    for nm in ln[1:]:
      dir = outDIR+"/"+nm
      if not os.path.exists(dir):
        os.mkdir(dir)
        print(nm)
    continue  # Folder行終了
  for id,nm in enumerate(ln): #番号id と中身nm を取り出す
    if id > 0:
      txt = outDIR+"/"+dirs[id]+"/"+ln[0]+".txt"
      if os.path.exists(txt):
        os.remove(txt)    # 存在していたファイルを削除
      fw = open(txt,'x')  # 'x'新規 'w'既存ファイルに書き込み 'a'追記
      fw.write(nm)        # 項目をテキストに書き込みます
      fw.close()          # 書き込み終了
fr.close()
a = input("***end*** ")

Runメニュー＞Run Module で実行します。エラーがなければ 下のようなフォルダとファイルが作成されるはずです。

test
　　├──aaa
　　│　　　　├──Data1.txt　　　　
　　│　　　　└──Data2.txt　　　　
　　├──bbb
　　│　　　　├──Data1.txt　　　　
　　│　　　　└──Data2.txt　　　　
　　├──ccc
　　│　　　　├──Data1.txt　　　　
　　│　　　　└──Data2.txt

改行コードを指定する方法

上のプログラムを Windowsで実行すると、改行コードが、CR,LF になります。

1. open の引数に "b"をつける。これで書き出しがバイナリーモードになります
2. 文字列の出力のうしろに、.encoding() をつけます。
3. LFは、文字列「"\n"」、CRは、文字列「"\r"」を出力します

上のプログラムの修正箇所

      lf="\n" #改行(LF)
      fw = open(txt,'xb')  # 'b'バイナリー
      fw.write(nm.encode())
      fw.write(lf.encode())

さらに勉強をすすめたいなら

• PDFからテキストを読み出す方法
• 画像処理 OpenCV と Python を使ったアニメーション動画用紙のスキャン画像位置合わせ  Webサーバー、処理の自動化（実際に運用中）
• Python + Flask でアニメGIF ダウンロードサーバーを作る 
•  Python パイソンで アニメを動かしてみた

9VAeきゅうべえに関する問い合わせ

• 9VAeについて、Yahoo知恵袋で質問すれば答えが得られます。
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

写真に動く説明が入れられる無料アプリ：9VAeきゅうべえ

9VAeきゅうべえアンドロイド版でもPC版、iPad版、iPhone版でもつくれます。動画編集用素材にもなります。

このアニメーションは、写真の上に楕円と文字をいれたひとこまアニメーションで１０分ぐらいで作れます。他のアニメの作り方はこちらをご覧ください。写真を動かす動画の作り方はこちら。

 

内容：

• 「１．」ひとコマアニメ作成準備（１）
• 背景ページ作成（２）
• 写真を入れる（３、４）
• 図形を入れる。ぼかし（５）
• 文字を入れる。縁取り（６）
• ひとコマアニメ作成（７）
• アニメGIF、動画出力（８）

■ 9VAeきゅうべえのダウンロード

• パソコン： 無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita

• Android：9VAeきゅうべえAndroid版（Google Play）

• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Amazon Fire：9VAeきゅうべえFire版（Amazon）
• 9VAeのボタン説明

使い方.youtube

１. 新規作成して、最初に「１．鉛筆」を押す

9VAeきゅうべえには「ひとこまアニメーション」という機能があり、文字が１文字ずつでてきたり、絵が描けていくアニメーションが簡単につくれます。絵を描く前にページの右側の（下図A）を押すと「ひとコマアニメーションモード」になります。また、ページの時間（１秒）をクリックし、メニューから「ひとコマ」を選ぶと、そのページが「ひとコマアニメーションモード」になります。では作り方を説明します。

1. 「ファイルメニュー＞新規作成」をクリック
2. ページの右側の（下図A）をクリック＞「線を書いたあと、もう一度このボタンを押してください」が出たら「OK」

これで１コマアニメーションの作成準備ができました。

２. 背景ページを作る

1. 先頭ページの左側の「＜」（上図B）をクリック＞メニューから「背景ページを入れる」。これで先頭に背景ページができます。

背景ページに写真をいれておけば、編集が楽になります。背景ページに描いた絵は後ろのページの背景に表示されます。

３. 写真のダウンロード

1. キッズプラザ大阪の写真はこちらにあります。
2. アンドロイド/iPhone/iPad版の場合、写真を長押しし、写真のリンクアドレスをコピーします。そのあと、9VAeきゅうべえの「ツールメニュー＞ネットからダウンロード」にリンクアドレスをペーストし「OK」を押せば写真が背景ページにはいります。（Ver.191119 以上）入力できない場合は新しいバージョンにしてください。
3. Windows/Mac/Linux版の場合、写真をダウンロードしてから、9VAeきゅうべえの「ツールメニュー＞絵・写真を入れる」で写真を選びます。

４. 写真のサイズ、位置調整

1. 写真の選択枠の角の「■」ハンドル（上図C）をドラッグすれば写真が拡大できます。
2. 写真の中心の「＋」や枠線（上図D）をドラッグすれば写真の位置が変更できます。
3. 9VAeきゅうべえは写真を回転させることはできません。

５. ２ページに移動。楕円をいれる。ぼかしをつける。

1. ２ページ（上図E）をクリックして２ページに移動
2. 楕円ボタン（下図F）をクリックし、中心（下図G）から楕円を描きます。
3. 選択ボタン(下図H)を押せば、入力した線の色や属性を変更できます。
4. 線の色は、カラーパレットの下の左側（下図I）です。白にしてみましょう。
5. 線の属性は下の右から２番目（下図J）で、「ぶれ、ぼかし、影、光、縁取り」があります。ぼかしにしてみましょう。
6. 間違えた場合、戻すボタン（下図K）を押せば何回でもやりなおせます。

   

６. 文字をいれる。縁取り文字にする。

1.  文字入力ボタン（下図L）をクリックし、文字をいれます。
2. 選択枠の角の「■」ハンドル（下図M）で文字の大きさを調整できます。
3. 文字の色は、文字タブ（下図N）をクリックし、カラーパレットから変更します。白にしてみましょう。
4. 文字にも線と同じ属性をつけることができます。図形タブ（下図O）をクリックし、線の種類ボタン（下図P）をクリックし、「縁取り」にしてみましょう。
5. 縁取りの色は、色２（下図Q）で設定します。濃い青にしてみましょう。
6. 縁取りの太さは線の種類ボタン（下図P）のメニューの下にある「広く・せまく」で調整できます。

   

７. ひとこまアニメーション完成

1. ページの右側の（上図R）をクリック＞これでアニメーションが完成です。プレイボタンでもかまいません。

• ひとコマアニメーションは毎回再生するごとに作り直されます。
• ページの上の「〇〇秒」（上図S）をクリックし、時間を修正すれば、アニメーションの速さを調整できます。時間を調整すると「ひとコマモード」が解除されます。もう一度「ひとコマ」モードにしたい場合はページの時間（上図S）をクリックし、メニューから「ひとコマ」を選びます。
• 文字が１文字ずつでてこない場合、9VAeきゅうべえのバージョンが古い可能性があります。Ver.0.8 以上にしてください。

８．アニメGIF / 動画(MP4) / APNG 出力（動画素材の作り方）

1. 出力する前に「ファイルメニュー＞名前を付けて保存」で名前をつけて保存しておきましょう。
2. 「ファイルメニュー＞アニメGIF出力」または「動画出力」「APNG出力」で、好きなサイズのアニメGIF 、MP4動画、APNG が作成できます。
   Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です。Youtube解説
3. スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
4. アニメGIF / APNG は、背景を透明にできます（APNGは半透明も可能）。ただし、音がいれられません。
5. MP4動画には音が入れられます。Youtubeに投稿できます。動画素材を作る場合、画面サイズは、幅を空白、高さを７２０または１０８０、コマ／秒を３０にするとよいでしょう。「OK」ボタンでアニメGIFや動画が出力されます。
   
6. パソコン版APNG出力：ファイルメニュー「連番/APNG出力」を実行、「連番出力を１つのファイルにまとめますか？」に「はい」でAPNGができます。（いいえの場合、複数の連番PNGファイルが出力されます。スマホ版は連番出力できません）

 

9VAeを使えばショートクリップ動画がすぐ作れる 

• 9VAeきゅうべえを使えば、スマホだけで短い動画が簡単につくれます。ぜひご利用ください。
• 9VAeでクリップ動画を作成し、他のアプリに入れられます。

• アプリ	クリップ形式	作り方
  PowerPoint LibreOffice Keynote	アニメGIF	背景を透明にして出力（PowerPointの例）
  iMovie PowerDirector	グリーンバック動画	先頭にグリーンバック背景を入れる。（iMovieの例、PowerDirectorの例）
  AviUtl	連番PNG	背景を透明にして出力（AviUtlの例）

• もっと長いアニメや動画を作ることもできます。以下をご覧ください。

9VAeきゅうべえ：長いアニメを作る方法 - Qiita

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

 

 

TikTok 用手描きアニメが作れる無料アプリ：9VAeきゅうべえ

[blog:g:11696248318754815873:banner]

iPhone/iPad版9VAeきゅうべえを使って、TikTok用手描きアニメを作る方法を説明します。作業時間は５〜１０分くらいです。パソコン版9VAe、Android版 9VAeでもできます。動画編集用素材にもなります。音声合成はこちら

他のアニメの作り方はこちら。9VAeの質問はこちら。

内容：５〜１０分

• 「１．」を押して、書き順アニメ作成開始（１）
• 絵を書く（２）
• 色の変更（３）
• 背後を塗りつぶす（４）
• 点の追加（５）
• 前のページにコピー（６）
• 動きグラフ（７）
• 書き順アニメの追加（８）
• 動画にする（１０） 
• Tiktokに投稿する（１１） 

■ 9VAeきゅうべえのダウンロード

• Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Win / Mac / Linux：無料ソフトでアニメを作ってみよう - Qiita
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明、メニュー/キー

 以下の説明では、図のABCDの順番に操作してください。

１.9VAeの「１．」を押して、書き順アニメ作成開始

1. 9VAeのバックが黒い場合、「表示メニュー」から「ダークモード」でバックを白にできます。ここでは、バックが白で説明します。
2. ページの右側の「＋」の右側の「１．」（下図B）をタッチ。iPhone版9VAeの場合、パレットの下（下図A）をタッチすればパレットが消え「１．」がタッチできます。
3. 何も入力されていない状態で「１．」をタッチすれば「書き順アニメの作り方、線を書いたあともう一度「１．」を押してください」と表示されます。「OK」を押してください。「書き順アニメ」作成モードになります。
4. もし「書き順アニメの作り方」が表示されなければ、「ファイルメニュー」の「新規作成」をタッチしてからもう一度「１．」をタッチしてください。

   

２. 文字や絵を書く

1. 画面に好きな文字や絵を書いてください。書き終わったらもう一度「１．」をタッチします。（iPhone版の場合右下（上図C）を２回タッチすれば「１．」が見えます。）
2. 「１．」をタッチすれば書き順アニメが作成され一度再生されるはずです。

 これで動画ができたのですが、さらに色や動きをつけてみましょう。

３．線の色を変更、表示倍率変更

1.  画面を左上から右下にドラッグして書いた線を全部選び（下図D）、線の色パレット（下図E）をタッチ。パレットから色を選びましょう。線の色の右側のパレットは順番に「線の太さ」「線の種類（ぶれのON/OFFなど）」「矢印・太さが変わる線」です。タッチして変更してみてください。
2. 画面左下の虫眼鏡の左右の「＋」「ー」（下図F）で表示の拡大縮小ができます。虫眼鏡で元に戻ります。

   

４．続きのページを作成、図形を選んで背後を塗りつぶす

1. ページの右側の「＋」（上図G）をタッチ。メニューから「続きのページを作る」を実行。１ページが２ページにコピーされます。
2. 画面をドラッグして、下のハートを選び（上図H）、選択枠の中心の「＋」（上図H）をタッチ。メニューから「背後を塗りつぶす」を実行。（Ver. 0.7.4で追加されました。この項目がなければ最新版の9VAeを入手するか、点選択ボタンをタッチし、点を選んでから「＋」メニュー「点の後ろに図形を入れる」）これで背後に縁のない図形がはいり、点の追加モードになります。

   
   
   

５．点の追加、曲線の形の変更

1. 背後の図形の色がはみ出した部分（上図I）をタッチし、点を追加して形を整えます。
2. 左下の拡大ボタン（上図J）で画面拡大して点を追加するとよいでしょう。
3. 塗り色を変更するには、塗り色パレット（上図K）をタッチし色を選びます。その右側はグラデーションパレットで、塗り色にグラデーションをつけることができます。その右側が色２です。
4. 追加した点（上図L）を尖った点に変えるには、パレット右上の点の形をかえるボタン（上図M）をタッチします。

６．塗りつぶした色を前のページにコピーし、サイズ変更

1. 塗りつぶした色に動きをつけてみましょう。前のページにコピーするボタン（下図N）をタッチします。２ページの図形が１ページにコピーされます。

   

2. 選択枠の角のハンドル（上図O）をドラッグすれば、サイズを縮小できます。中心の「＋」（上図Q）をドラッグすれば移動できます。画面の下に小さくして移動させましょう。そこから湧き出してくるような動きになります。
3. ハートの動きのタイミングを調整するために、ページの時間（上図Q）をタッチ。メニューから「ひとコマ」をタッチ。これでひとコマモードを解除します。
4. 登録ボタン（上図R）をタッチして図形を登録します。
5. 登録されたボタン（上図S）をタッチし、メニューから「ゆっくり動き出すグラフ」を実行

７. 動きグラフでタイミングを修正

1. 上図のように左下に動きグラフが現れます。動きグラフの意味ですが、横軸が時間、縦軸が次のページまでの変化具合です。青い線が下にあれば現在のページの状態で、一番上にいけば次のページの状態になります。
2. グラフの中央の点（上図S）を下に下げ、グラフの右側（上図T）をタッチして点を追加し、グラフの外まで移動（上図T）させてみましょう。プレイボタンで動かしてみましょう。
3. 点の形はパレットの右上のボタン（上図V）で曲線に変更できます。グラフを曲線にすれば、なめらかに動きが変化します。

８. ２ページに新しい書き順アニメを追加

1. ２ページ（下図W）をタッチして２ページに移動し、ここに書込みを追加してみましょう。

   

2. まず、画面をドラッグして全体を選んび、選択枠の角のハンドル（上図X）を内側にドラッグして、周囲に余白をつくります。

3. 手描きボタン（上図Y）をタッチし、選択を解除してから、線の色（上図Z）をタッチして、書き加える新しい色を選びます。（選択を解除せずに色を選ぶと選ばれた図形の色が変わります。ここではオレンジ色にしました。）
4. そのあと、線を書くボタン（上図a）をタッチし、周囲に線を追加しました（下図）
5. 書き終わったら、もう一度線を書くボタン（上図ｂ）をタッチします。これで同じ色で続けて書いた最後の線が全部選ばれます。（この機能は Ver.0.7.4で追加されました。この機能がない場合は 左下のShiftボタンを押してひとつずつ追加選択します。）
6. 「調整メニュー」（上図c）から「書き順」をタッチします。これで追加した線が順番に表示されるアニメーションができます。プレイボタンで再生してみてください。

９．9VAeの仕組み

ここまでの9VAeの機能をまとめます。

1. 9VAeは、書いた図形に「書き順」属性をつければ、順番に書くアニメーションができます。「１．」ボタンはそれを簡単に実行するボタンです。
2. 9VAeは、各ページ間でコピーされた図形の属性（色、形、線の太さ、透明度・・）をなめらかに補間します。
3. コピーはページの右側の「＋」から「続きのページをつくる」もしくは、図形を選んで左側のボタンで前後のページにコピーできます。
4. 図形を右側のボタンで登録パレットに登録し、動きグラフをつければ、タイミングをグラフで調整できます。
5. 補間機能、登録、動きグラフは、線、イラスト、写真、文字に対し、同じように動作します。この仕組みが理解できると、いろんな動きが簡単に作れるでしょう。

１０. アニメGIF / 動画(MP4)出力

1. ここまでできたら「ファイルメニュー＞名前を付けて保存」で名前をつけて保存しておきましょう。
2. 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
   Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です
3. アニメGIFは、背景を透明にできます。音がいれられません。
4. MP4動画には音が入れられます。Youtubeに投稿できます。動画素材を作る場合、画面サイズは、幅を空白、高さを７２０または１０８０、コマ／秒を３０にするとよいでしょう。「OK」ボタンでMP4またはアニメGIFが出力されます。
5. スマホ版では、「9VAeフォルダ」または「カメラロール」に保存されます。パソコン版では最初に保存場所を選びます。

   

 ezgif.comでアニメGIFをMP4動画にする方法

1. GIF to MP4 または、APNG to MP4 を開く

2. アニメGIFまたはAPNGファイルを指定（背景は透明にしない）

3. 「Upload!」をクリック ＞ 「Convert GIF to MP4!」をクリック ＞ 「Save」(フロッピーディスクアイコン)をクリック、もしくは画面上にできたMP4を長押しすれば、MP4をダウンロードできます。

4. MP4はダウンロードフォルダにダウンロードされます。（ブラウザの設定により異なります）

１１. TikTokに動画を投稿する手順

 TikTokはスマホ向けサービスなので、スマホアプリから投稿します。

1. TikTokアプリを起動
   

   TikTok ティックトック

   • TikTok Pte. Ltd.
   • エンターテインメント
   • 無料
   • 

   apps.apple.com

   play.google.com

2. 画面下の「＋」ボタンをタッチ。

   

3. 下の「アップロード」ボタンをタッチ。

   

4. 作成した動画を選択（ひとこまアニメーションは最初が白紙から始まるので画面が白いものをタッチすると再生されます）

   

5. 右上の「選択」をタッチし「選択済み」にする。画面をもう一度タッチすると選択画面に戻る。

   

6. 選択したら「次へ」を何回かクリック。途中「楽曲」ボタンで音楽が入れられる。

   

7. #からはじまるハッシュタグ（検索キーワード）や、動画の説明をつけて「投稿」ボタンで投稿完了

   

9VAeをつかえばショートアニメがすぐ作れる 

• 9VAeきゅうべえを使えば、ショートアニメが簡単に作れます。
•  Openclipart や  FreeSVG など多くのSVGイラストをつかってキャラクタアニメーションも作れます。

• TikTok以外に、TwitterやYoutubeにも投稿できます。

サービス	MP4	アニメGIF
Tiktok	OK	X
Twitter	OK	OK（注意：Twitterアプリの「写真」ボタンで送ると動く。カメラロールから送ると動かない）
Youtube	OK	X

• 9VAeは下のような特長をもった商用利用可能な無料アプリです。

  	9VAeきゅうべえ	他のアプリ
  方式	図形のすべての点の対応関係をもったベクトル方式	タイムラインに画像を並べるビットマップ方式
  修正	形を後から自由に修正できる	画像を描き直す
  補間	変形した形はなめらかに変化する	形の補間はできない
  データ量	中間がないので小さい	何枚も画像が必要で重い
  階層化	9VAeの中に３０階層まで9VAeがはいる。全て編集できる	できても１階層中身は同時に編集できない

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

「ひとコマ」でどんなアニメをつくるとよいか、アイデア集

キッズプラザ大阪では、2020年から、「１コマアニメーター？」をつかったひとコマアニメ制作を行っている。（最初はPEAS motch!を使用）小学校低学年、幼稚園児でも簡単にアニメが作れる。

アニメを作る方法は、絵を描いた順番がアニメになるという、きわめて簡単な方式だ。１コマアニメーター？は絵を描く機能だけにしぼっているため、PEAS motch! よりさらに簡単になった。

では、この方式を使ってどんなアニメーションを作るとよいのだろうか、キッズプラザでのワークショップ、実際に子供たちが作ったアニメをみた観客の反応から、作るとおもしろいアイデアや重要な点を書き留めておく。

重要な点、「アニメをつくっているという意識を持つこと」

• １コマアニメーター？や PEAS motch! のインタフェースは、お絵かきソフトにプレイボタンを追加しただけだ。そのため簡単なのだが、逆に絵を描いているだけと思われてしまう欠点がある。
• １コマアニメーター？や PEAS motch! はアニメーションを作るソフトである。描いている絵は実は、アニメーションビジュアルプログラムなのである。それがわかるのが「再生ボタン」だ。早い段階で。これをタッチし、アニメーションを見てみることが非常に重要である。
• このアニメーションを見てから、どのように絵を描けば、どのようなアニメになるかを把握し、この絵が、単なる絵ではなく、アニメーションを作る初歩的なビジュアルプログラミングであることを意識してほしい。
• 「再生ボタン」を何回も押してみて、アニメーションを作っていることを意識して作業してほしい。

 アイデア集

• 絵を描くとき、肝心な部分を一番最後に描いて、実は、こういうことだったのだ、と最後にわかるような作品は、おおっそうだったのか、と感心する声がもれた。
• 実はこうでしたという種明かしが、おもしろい。「棒が一本」「葉っぱかな」「あひるだよ」「６月６日に雨がふってきて」・・・実は「コックさん」といった絵描き歌もひとつの例だろう。
• 人から書き始めて、どこにいったのか順番にわかったいくとか・・・さいしょはこうだったけど、実は、こんなことがあって・・・とか、事件を順番にかいていくのがおもしろい。時間の流れが感じられるストーリーがある作品がおもしろい。
• 白い太い線で描くと絵を消すことができる。いったん描いた絵を消して、顔の表情をかえたりした作品は受けていた。
• 線に影をつけて、アート的な絵を描いた作品。まるや四角だけで描くとか、抽象的な作品もきれいだ。
• 適度に塗りがはいっていると、塗っていく過程がアニメになるのでおもしろい。きれいに塗らなくても、一部ちょっと塗るというぐらいでもよい。

アニメーションを作ったことがある子供はほとんどいないので、自分で、動きをコントロールする、ということが、新しい思考のヒントになるだろう。描く順番と動きが結びついているということが、論理的な思考の訓練になる。どう動くか予想しながら絵が描けるようになるとよい。

• できあがったアニメをみて、これを追加しては、というアイデアでてくるとよい。入力した線を選んで削除することができるので、あとから一部変更したりするデバッグ的な高度な使い方もできる。
• 先頭のページの前に「背景ページ」を入れて、そこに図や写真をいれることができる。そこに説明を書き入れると、実用的なアニメが作れる。「アニメGIF」に出力できる。

  

  PEAS motch!の使い方を説明したアニメ

プレゼン用動くイラストが作れる無料アプリ：9VAeきゅうべえ

プレゼンで使う動くイラストを無料ソフトで自作してみましょう。9VAeきゅうべえアンドロイド・Chromebook版でもPC版、 iPad/iPhone版でもつくれます。 「解説動画の作り方」はこちら 。イラストを動かす方法はこちら。

作成時間は５分程度です。

他のアニメの作り方はこちら。9VAeの質問はこちら。

LibreOffice以外（PowerPoint, Keynote, Kingsoft Office, WPS office）でもできます。３．から実行してください。

プレゼン用動くイラストを9VAeきゅうべえで作る

内容：

• 図形イラストを9VAeにいれる（１，２、３）
• 続きのページをつくる（４）
• 点を移動（５）
• 「往復」を入れる（６）
• 文字を入れる（８）
• アニメGIF出力（９）
• プレゼンソフトに画像としていれる（１０）

 

■ 9VAeきゅうべえのダウンロード

• Win/Mac/Linux：9VAeきゅうべえダウンロード
• アンドロイド / Chromebook：9VAeきゅうべえAndroid版（Google Play）
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon)
• 9VAeのボタン説明

9VAeきゅうべえの使い方

図のアルファベット文字の順番に操作していきます。

■ LibreOffice のダウンロード

今回は、オープンソースのオフィスのプレゼンテーションソフト「LibreOffice Impress Windows版」と、9VAeを使います。

• LibreOffice ダウンロード

１. LibreOffice Impress で図形を描いてカットする

Windows版 の Impress と 9VAeきゅうべえは相性がよく、Impressで描いた図形をコピー（Ctrl+C または Ctrl+X）し、9VAeで貼り付け（Ctrl+V）すれば、図形を9VAeに取り込むことができます。下は Impressの編集画面です。

 

1. Impress 挿入メニュー（上図A）＞シェイプ＞矢印＞スプリット矢印をクリック
2. 画面をドラッグ（下図B）して矢印をかく
3. Impress 編集メニュー（下図C）＞「切り取り」をクリック（または、Ctrl＋X）。これで上向き矢印が切り取りされます。

 

２. 9VAeきゅうべえで、貼り付け

1. 9VAeきゅうべえで「編集メニュー（上図D）＞貼り付け」をクリック（または Ctrl+V）。これで上向き矢印が9VAeきゅうべえの中にはいります。

メモ：Windows版9VAeきゅうべえはクリップボードの図形をペーストできる。

３．LibreOfficeでない場合、SVGイラストをダウンロード

 

1. 以下のイラストを開く 。
2. 「Openclipart - Divergent」
3. スマホの場合「SVG (Vector)」ボタン（ここでもよい）を長押し。メニューから「リンクアドレスをコピー」(iPhoneなら「コピー」) をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。これで、上向き矢印のイラストが読み込まれます。その後、選択枠中心の「＋」をタッチし「アニメを修正」をタッチしてください。
4. パソコンの場合は「SVG（Vector）」ボタン（ここでもよい）を右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル＞開く」をクリック。ダウンロードしたファイルを選ぶ

これで、上向き矢印のイラストが読み込まれます。

 メモ：スマホ版は「ネットからダウンロード」。パソコン版はダウンロードしてから開く。

 

４. 続きのページを作成

1. ページの右側の「＋」（上図E）をクリック。メニューから「続きのページを作る」

１ページの内容がコピーされ、２ページができます（下図）。どちらかのページを修正すればなめらかに動くアニメーションができます。

メモ：動きをつけるには、まず「続きのページを作る」

５. 矢印内部の点を表示し、矢印の頭の点を選んで右上に伸ばす

1. 矢印をクリック（上図F）して選択。
2. 点選択ボタン（上図G）をクリック。矢印の頂点△が上図のように表示されます。（△はとがった点です。曲線上の点があれば、□で表示されます。）
3. 右上の矢印の頭だけを外からドラッグして選択（上図H）
4. 選択枠をドラッグして矢印の頭を右上に移動します（下図I）（選択枠中心の「＋」をドラッグしてもよいです）

5. 

メモ：点選択ボタンを押せば、自由に形が変えられる

 

６. １ページの矢印を左上に伸ばす、往復ボタンを入れ、０．５秒にする

1. １ページ（上図J）をクリックして１ページに移動
2. 左側の矢印の先の点（下図K）を選び、右上にドラッグして伸ばしましょう
3. １ページの左肩の小さなボタン（下図L）をクリック。メニューから「往復」をクリック。（１ページに移動していないと「往復」は表示されません）
4. １ページの時間「１秒」（下図M）をクリック。メニューから「0.1病短くする」を何回かクリックしてページの時間を0.5秒にしましょう。
5. プレイボタン（下図N）で動きをみてください。簡単にできたでしょう。停止は右側のストップボタンです。

メモ：ページの時間で動く速さを調整

７. アニメーション全体のサイズ、位置調整

1. １ページのページ番号「１」（上図O）をクリック。メニューから「ページの指定ここから」をクリック
2. ２ページのページ番号「２」（上図P）をクリック。メニューから「ページの指定ここまで」をクリック。これで２ページ全体が選ばれたことになり、まとめてサイズ、位置調整ができます。複数ページが選択されたとき選択枠は下図のように２重線になります。
3. 選択枠の角のハンドル（下図Q）をドラッグしてサイズを縮小

4. 選択枠の枠線（下図R）をドラッグして下に移動

   

メモ：複数ページを選択すれば全体の大きさを変更できる

８. １ページに文字を入れる

1. １ページ（上図S）をクリックして１ページに移動
2. 文字入力ボタン「A」（上図T）をクリック。右側の矢印の上に「使わない」左側の矢印の上に「9VAeきゅうべえを使う」と入力してみましょう
3. 入力したあと、選択枠の角（下図U）をドラッグして文字のサイズが調整できます。
4. 選択枠の枠線（下図V）をドラッグ（または中心の「＋」をドラッグ）すれば位置を調整できます。
5. 文字にイフェクトをつけてみましょう。イフェクトをつけるボタン（下図W）をクリックしメニューから「縁をつける」、もう一度クリックし「ぶれをつける」効果をつけました。
6. 縁の色はカラーパレットの色２（下図X）で設定できます。
7. プレイボタン（下図Y）でどう動くか見てください。停止は右側のストップボタンです。

   

 なお、１ページに「往復」命令がはいっているため、２ページに文字をいれても表示されない（２ページに進まない）点に注意してください。

メモ：文字の縁取りは線の種類ボタン。縁取りの色は色２。

９．アニメGIF出力

• ファイルメニュー＞「アニメGIF出力」でアニメGIFが作成できます。
• パソコン版の場合、最初に保存場所、ファイル名を指定します。デスクトップなど、わかりやすい場所に作成してください。
• 今回のアニメは「往復」命令があるため、再生時間が無制限となり、時間を自分で設定する必要があります。往復１秒なので、出力秒数は１秒にするとよいでしょう。
• LibreOffice Impress などプレゼンソフトに入れる場合「背景を透明にする」にチェックを入れておきます。
• Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。

メモ：プレゼンソフトにいれるときは、背景を透明にしてアニメGIF出力。

１０．プレゼンソフトに、画像として入れる

作成したアニメGIFプレゼンソフトに画像（写真と同じ）として挿入します。再生すればアニメーションになります。

1. LibreOffice Impress の「挿入メニュー（下図Z）＞画像」をクリック。上で保存したアニメGIFファイルを選ぶ。

メモ：プレゼンソフトには「動画」ではなく「画像」としていれる。

 

9VAeをつかえば短い動画クリップがすぐ作れる 

• 9VAeきゅうべえを使えば、短い動画クリップがすぐ作れます。今回は、LibreOfficeのシェイプ図形を使いましたが、FreeSVG や Openclipart など多くのSVGイラストサイトの素材を入力し、続きのページを作成して一部変形し、１ペジに「往復」命令をいれれば、動画になります。いろんな動画をつくってみてください。
• 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。

アプリ	クリップ形式	作り方
PowerPoint LibreOffice Keynote WPS office	アニメGIF	背景を透明にして出力（PowerPointの例）
iMovie PowerDirector	グリーンバック動画	先頭にグリーンバック背景を入れる。（iMovieの例、PowerDirectorの例）
AviUtl	連番PNG	背景を透明にして出力（AviUtlの例）

• もっと長いアニメや動画を作ることもできます。以下をご覧ください。

9VAeきゅうべえ：長いアニメを作る方法 - Qiita

 

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。

 

Chromebookで口パク動画が作れる無料アプリ：9VAeきゅうべえ

Chromebookで口パク動画を作る方法を説明します。作業時間は１０分ぐらいです。口パク動画素材にもなります。

他のアニメの作り方はこちら。9VAeの質問はこちら。

内容：１０分程度

• 「１.」でひとコマアニメ（１）
• 文字をいれる（２）
• 吹き出しをいれる（３）
• 9VAeにSVGキャラクタを読み込む（４、５）
• 口パクをつける（６）
• アニメGIF出力（７）

■ 9VAeきゅうべえのダウンロード

• Chromebook / Android：9VAeきゅうべえAndroid版（Google Play）
• iPad / iPhone：9VAeDanga (Apple) 、9VAePro (Apple)
• Win/Mac/Linux/Raspi：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
• Amazon Fire : 9VAeきゅうべえFire版 (Amazon) 
• 9VAeのボタン説明

www.youtube.com

■ 無料口パク素材

•  下のSVGボタン長押し「リンクアドレスコピー」し、9VAe>ツール「ネットからダウンロード」貼付け
• または、SVGをダウンロードして、9VAe>ツール「9VA/SVG/WMFを入れる」
• ミク うさぎ、 ミク うさぎ VR めがね
• 黒板で説明する少女、 指差す少女、 すいか割り、 コロナたたき、 ほうきと歌う、 ハロウィーン、 困った！、 クリスマス、iPad少女
• その他（9vae@wiki）、★自作する方法

■ Chromebook に パソコンからデータを送る方法

1. パソコンのブラウザで、ChromebookのGoogleアカウントにログイン
2. はじめての方はGoogleアカウント（無料）を作成し、ログインしてください。
3. 右上の９点アイコン（下図A）をクリック

   

4. ドライブアイコン（上図B）をクリック
5. 転送したいファイルをマイドライブ（上図C）の中にドラッグして入れます。
6. Chromebookでファイルアプリを開きます。
7. 左側の「Googleドライブ」「マイドライブ」（上図D）をクリック。転送したいファイルが見えるはずです。 

• Chromebook版 9VAeは「ダウンロード」フォルダのデータが読み込めます。 
• 上図のファイルを左側の「マイファイル」「ダウンロード」にドラッグすれば、9VAeきゅうべえの「ファイル＞開く」や「画像」「音」で読み出せます。

それでは口パク動画をつくってみましょう。 

以下の説明では、図のABCDの順番に操作してください。

１.9VAeの「１．」を押して、ひとコマアニメ作成開始

• スマホ版で画面がせまい場合、パレットの右下（下図A）をタッチすればパレットがON/OFFできます。画面が黒い場合（iPhone版）、「表示メニュー」から「ダークモード」でバックを白にできます。

1. 「１．」（下図B）をタッチしてください。「書き順アニメの作り方、線を書いたあともう一度「１．」を押してください」と表示されます。「OK」をタッチすると、ページの時間が「ひとコマ」に変わります。

メモ：１コマで書き順アニメをつくるとき、最初に「１．」を押します。画面が小さい場合、右下すみのタッチでパレットをON/OFFできます。

２. 文字を入れる

1. 文字入力ボタン「A」（上図C）をタッチし、ツィートしたい文章を入力します。 
2. 文字を入れたあと「１．」（上図D）をタッチすれば書き順アニメが作成され一度再生されるはずです。もし「１．」が見えなかったら、画面右下すみを２回タッチして「１．」をタッチしてください。

 これで文字がでてくる動画ができたわけですが（なんと簡単な！）、さらに吹き出しや口パクするキャラクタをつけてみましょう。なお、文字の先頭に「#」があると、特別な意味になり、動きません。「#」の前に半角スペースをいれてください。

メモ：最初に「１．」を押して、最後にもう一度押すと書き順アニメができます。

３．吹き出しを入れる

1. 文字（下図E）をタッチして文字を選択。もしパレットが見えていなかったら右下すみをタッチしてパレットを表示

   

2. 右側のパレットのタブ３（上図F）をタッチすると、基本図形が入力できます。文字を選んだ状態で、吹き出し（上図G）をタッチすれば、文字の背後に文字の大きさにあわせた吹き出しが入ります。
3. 吹き出しを入れたあと、点の選択ボタン（上図H）をタッチ。吹き出しの点（上図I）を外からドラッグして選びます。ドラッグして位置を調整します（上図J）。
4. 線の色は、図形タブ１（上図K）をタッチ。線の色ボタン（上図L）で設定できます。線の太さは太さボタン（上図M）で変更できます。

メモ：何か選んで吹き出しをいれると、吹き出しがサイズ調整されます。

文字と吹き出しをグループ化

1. 選択ボタン（上図N）をタッチし、画面の外からドラッグしながら 文字と吹き出しを同時に選びます。下図

   

2. 選択枠の中央の「＋」（上図O）をタッチ。メニューから「グループ化」をタッチ。 これで、文字と吹き出しがグループ化されます。
3. 文字と吹き出しをグループ化しておけば、文字の内容を変更したときに、 文字の外接矩形の大きさの変化に応じて、吹き出しのサイズが変化するため とても便利です。
4. 文字の内容を変更したい場合は、文字の上を２回タッチ。パソコン版なら選択してから「Return」キーを押しても 変更できます。上図左下が変更した例です。
5. 一度文字の内容を変更して、吹き出しの大きさがかわるか試してみてください。

メモ：文字と図形をグループ化しておくと、文字変更で図形のサイズもかわります。

４．9VAeきゅうべえにSVGキャラクタを読み込む

1.  OpenclipartにあるフリーのSVG（miku usagi hat Animation）を読み込みましょう。
2. スマホの場合、上のリンクをひらき、DOWNLOADの下にある、「SVG（Vector）」ボタン（ここでもよい）を長押し(下図P)し、メニューから「コピー」（「リンクアドレスをコピー」）をタッチします。次に、9VAeきゅうべえを開き、「ファイルメニュー＞新規作成」のあと「ツールメニュー＞ネットからダウンロード」(下図Q)を実行し、http 入力欄を長押しして「ペースト（「貼り付け」）をタッチ(下図R)。
   OKをタッチすれば、キャラクタが入力されます（下図）。
3. パソコン版の場合、DOWNLOADの下にある、「SVG（Vector）」ボタン（ここでもよい）を右ボタンでクリック(下図P)し、メニューから「リンク先を保存（または対象を保存）」をクリックして保存します。次に、9VAeきゅうべえを開き、「ツールメニュー＞9VA/SVG/WMFを入れる」(下図Q)でダウンロードしたSVGファイルを読み込んでください。

   
    

５．キャラクタの位置、サイズ調整 

1. 左下の「ー」（上図S）を何回かタッチすれば全体が見えます。（iPhone版横画面で虫眼鏡ボタンが見えない場合は縦画面にしてタッチしてください。画面右下をタッチすればパレットのON/OFFができます。Android版は回転後、画面タッチで回転します）
2. キャラクタを囲んでいる選択枠の角のハンドル（上図T）のドラッグでサイズ変更。中心や枠線（上図U）で移動ができます。キャラクタを文字の右に移動させましょう。 
3. 左下の虫眼鏡ボタン（上図V）タッチで全体が表示されます。
4. 線の太さが太すぎる場合、線の太さボタンをタッチし、メニューの一番下の「太くする・細くする」で調整できます。（イラストの作り方によっては線の太さが変化しないものもあります。）

   

口パク素材

• ローマ字で口パクできるイラスト素材は、SVGイラストから自分で作ることができます（作り方はこちら）。
• 9VAe＠wikiに口パク素材のリストがあります。 自作した口パクイラストをこちらに登録してもよいでしょう。

メモ：口パク素材はOpenclipartにあります。9VAeで自作、修正できます。

６. キャラクタに口パクをつける

キャラクタは何も設定しなければ「んあいうえお」としゃべっています。これをせりふにあわせて口パクさせましょう。

1. キャラクタ(下図W)をタッチして選択。選択枠の中心メニュー「＋」（下図W）から「ローマ字で動かす」を実行。

   

2. 「5.8:kurombukku de kutipaku douga ga tukureru yoo 」とせりふをローマ字で入力してください。これの意味は

• 最初の「5.8:」は5.8秒でしゃべるという意味です。秒数は「ひとコマ」機能で設定されたページの時間です。短い数字にすれば早口になります。
• それにつづくローマ字にしたがって口パクします。「.」は口を閉じた状態を表します。
• 読み込んだ miku usagi がローマ字で口パクするのは、SVGの中に「.aiueo」の順番に口の形が登録されているからです。アニメキャストの中身については、あとで説明します。口パクするキャラクタの作り方はこちらをご覧ください。

• このまま出力すれば、背景透明のアニメGIFを出力できますが、クロマキー合成したい場合は、ページの左側（上図Y） をタッチし「グリーンの背景」をいれるとよいでしょう。

• プレイボタン（上図Z）でアニメーションが再生できます。

  

メモ：アニメキャストの中のページが「んあいうえお」の順番にならんでいると、ローマ字にあわせて口パクします。記法は「秒:ローマ字」。ローマ字の時間がページの時間より短ければ最初の一部しか再生しません。

7. アニメGIF/動画(MP4)/APNG 出力

1. 出力する前に「ファイルメニュー＞名前を付けて保存」で名前をつけて保存しておきましょう。
2. 「ファイルメニュー＞アニメGIF出力」または「動画出力」「APNG出力」で、好きなサイズのアニメGIF 、MP4動画、APNG が作成できます。
   Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要です。Youtube解説
3. スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
4. アニメGIF / APNG は、背景を透明にできます（APNGは半透明も可能）。ただし、音がいれられません。
5. MP4動画には音が入れられます。Youtubeに投稿できます。動画素材を作る場合、画面サイズは、幅を空白、高さを７２０または１０８０、コマ／秒を３０にするとよいでしょう。「OK」ボタンでアニメGIFや動画が出力されます。
   
6. パソコン版APNG出力：ファイルメニュー「連番/APNG出力」を実行、「連番出力を１つのファイルにまとめますか？」に「はい」でAPNGができます。（いいえの場合、複数の連番PNGファイルが出力されます。スマホ版は連番出力できません）

メモ：Mac / iOS / Android 版は、MP4動画が出力できます。Windows / Linux版は FFmpeg を使えばMP4動画が作れます。音声合成はこちら

9VAeを使えば口パク動画がすぐ作れる 

• 9VAeきゅうべえを使えば、口パク動画が簡単に作れます。作成した9VAeデータはそのままテンプレートになり、文字を入れ替えて、簡単に別の動画が作れます。
•  Openclipart や  FreeSVG など多くのSVGイラストをつかって動くキャラクタ素材が作れます。動画作成にご利用ください。
• TikTok や Youtube に投稿するには、MP4動画にします。

サービス	MP4	アニメGIF
Tiktok / Youtube	OK	X
Twitter / Facebook	OK	OK（注意：TwitterやFacebookの「写真」ボタンから入れると動く。カメラロールから送ると動かない）
Instagram	OK	投稿できるが静止画になる

• もっと長いアニメを作ることもできます。以下をご覧ください。

9VAeきゅうべえ：長いアニメを作る方法 - Qiita

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。