うごキャラメーカー 教科書

0今日のゴール

1前提：PNG・GIF・APNG のちがい

まず、ここだけ押さえれば大丈夫です。画像には「動かないもの」と「動くもの」があります。

2作り方は2通り（全体地図）

動くキャラの作り方は、大きく2通りです。今日は両方を順番に体験します。

A：コマ割り画像でつくる（最初にやる・安定）

キャラが少しずつ動く絵を「1枚の格子画像」＝スプライトシート（コマが格子状に並んだ1枚絵）で作り、アプリで分割して、パラパラ漫画のように動かします。
1回の生成で1枚だから、絵柄がブレないのが利点。初めてでも安定します。

B：動画からつくる（次にやる・なめらか）

キャラが動く短い動画を生成し、アプリでコマを抜き出して動く画像にします。
なめらかですが、生成のたびに絵柄が少し変わりやすいので、Aのあとに試します。

3準備するもの

コマ画像や動画を「動く画像（GIF・APNG）」にするには、専用の道具が要ります。

市場の無料ツール（参考）

ezgif.com など、無料でできるサイトもあります（英語）。

今日はこれを使います：MMS共通アプリ「うごキャラメーカー」

みんなで同じ手順で進められるように、MMS専用のアプリを用意しました。インストール不要、ブラウザで開くだけ。下のボタンから開けます（このページと行き来できます）。

AハンズオンA：コマ割り画像でつくる

まずは自分のキャラを作って、コマ割り画像から動かしてみましょう。

1. キャラのコマ割り画像を生成する。
   ChatGPTの画像生成（GPT Image）に、下のプロンプトを貼ります。すでにキャラがある人は、その画像を添付してから貼ってください。
   かわいいマスコットキャラクターの「スプライトシート」を作ってください。 ・1枚の画像に、4×4＝16コマを格子状にきれいに並べる ・同じキャラクターが、左上から右へ順番に「手を振る」動きを少しずつ変えていく ・すべてのコマで、絵柄・色・大きさ・向きをそろえる ・背景は透明（透過PNG） ・線はくっきり、シンプルなイラストコピー
   動きは「手を振る」を入れ替えてアレンジOK：ジャンプして着地／おじぎ／しっぽを振る／まばたきして笑う／横向きに歩く。
   うまく16コマに割れない時は 2×2（4コマ）や3×3（9コマ） に減らすと安定します。透過がうまく出ない時は白背景で作って、アプリの「白を透明にする」を使います。
2. アプリを開いて「② スプライトシートを分割」を選ぶ。
   生成した1枚の格子画像を選び、横のコマ数・縦のコマ数（例：4×4なら横4・縦4）を入れて「分割する」を押します。
3. 動きを整える。「なめらかさ（fps）」を 8〜12 くらいで調整し、プレビューで動きを確認します。
4. 書き出す。GIF（どこでも動く）か APNG（Googleスライドできれい）のボタンを押すと、ファイルがダウンロードされます。
5. スライドに貼る（§7を参照）。動いたら成功です🎉

BハンズオンB：動画からつくる

次に、動画を生成して、そこからコマを抜き出して動かしてみましょう。よりなめらかになります。

1. キャラが動く短い動画を生成する。
   無料で使える動画生成（Googleの Gemini / Google Flow、Grok など）に、下のプロンプトを貼ります。
   かわいいマスコットキャラクターが、その場で楽しそうに手を振っている 3秒ほどの短い動画。背景はシンプルな無地。キャラは中央。ループしてもOK。コピー
   短い動画（2〜4秒）がいちばんきれいに作れます。
2. アプリで「③ 動画からコマを抽出」を選ぶ。
   作った動画を選び、「1秒あたり何コマ抜くか」（おすすめ8）を決めて「コマを抽出する」を押します。
3. 動きを整えて書き出す。プレビューで確認し、GIF か APNG で書き出します。
4. スライドに貼る（§7）。AとBで、なめらかさや絵柄のちがいを見比べてみましょう。

7スライドに貼る

8応用とまとめ

今日できたこと：自作キャラを「動かして」スライドに入れた。これだけで資料の印象がぐっと変わります。

広げ方

・拍手や「いいね」のリアクションを動くキャラで
・章の区切りに動くマスコットを
・APNGの透過をいかしてLINEスタンプ風に
・このアプリはMMSで使い続けられます。次の資料でも自分のキャラを動かしましょう。