nice to have
一覧に戻る ログイン キットを出品する
← キット一覧

ドット絵モーションキット

絵を1枚渡すと、動く16コマに

使い方
ドット絵モーションキットの見本

ドット絵モーションキットは、Claude Code・Codex で使える、バイブコーディング用のキットです。絵を1枚渡すと、動く16コマに。無料。

こんなときに

ドット絵を動かしたいのに、AIに頼んでも使える形で返ってこない

できること

キャラクターの絵から、ドット絵の動き(スプライトシート)を作ります。生成AIが返すのは市松模様の1枚絵で、頼んでも透過も大きさもそろっていません。それを本当の透過にして、16コマに切り分けて、足元をそろえます。ブラウザで動きを見ながら速さと使うコマを決めて、GIF・連番PNG・透過シートを書き出します。

このキットに入っている「直し」

このキットは、まだ実務に当てていません。現場で直した箇所が入ってから、ここに並びます。

入っているもの

  • 工程の進め方(絵 → シート → 直す → 確認 → 書き出し)
  • 市松模様を本当の透過にする道具
  • コマの位置ずれをそろえる道具
  • 動きを見て速さを決める画面
  • GIF・連番PNG・透過シートの書き出し
  • 生成AIが指示を守らないところと、その直し方
ファイル一覧(10)
  • tools/sheet.py(★本体。透過・切り分け・位置合わせ・書き出しを通しで)
  • tools/sheet.py --apply(画面で決めた速さ・コマで書き出しだけやり直す)
  • tools/app.py + app.html(★画面はこれ1つ。動きを見て決める)
  • tools/gensheet.mjs(シートを鍵で作る・無くても進められる)
  • tools/build-site.mjs / tools/deploy.sh(スマホで見る)
  • rules/FLOW.md(5つの工程の順番)
  • rules/TONE.md(ドット絵と動きの決めごと)
  • rules/PROMPTS.md(そのまま貼れる注文文)
  • rules/CHECK.md(渡す前の確認)
  • middleware.js / CLAUDE.md / KIT.md

最初に決める3つ

  1. キャラクター(手持ちの絵でも可)
  2. 動き(既定は戦闘)
  3. コマ数(まず4×4の16コマ)

必要なもの

  • 別途費用絵を用意する手段キャラクターの絵が要ります。お使いの画像生成AIでも、手持ちのイラストでも構いません
  • 別途費用Gemini の鍵(使うなら)絵を渡すだけで裏で動く形にしたいときだけ。★画像生成は有料プランが必要です。鍵を使わず、出た文を貼るやり方でも同じものが作れます
  • 追加費用なしPython(Pillow)無くても pip install Pillow の1行で入ります

使い方

お使いのAIに、これを貼るだけです。

nice to have のキット「ドット絵モーションキット」を使いたい。https://nicetohave.app/g/Y3FEQLMA-•••••••••• のとおりに取り込んで。

Claude Code でも Codex でも同じです。
貼る前に、AIに何をさせるのか読む

自分でファイルとして受け取りたいとき

上の文を貼れば、AIが取りに行きます。AIが取りに行けないときや、自分で落としたいときは、ここから。

キットを zip で落とす

  1. 落とした zip を展開する
  2. できたフォルダを、Claude Code か Codex で開く(VS Code なら「フォルダーを開く」)
  3. 「このキットで作り始めて」と打つ。手順は中に入っています(Claude Code は CLAUDE.md、Codex は AGENTS.md を読みます)

よくある質問

戦闘以外の動きにもできますか?
できます。シートを頼む文の「戦闘」と動きの並びを差し替えます(歩く・待機・喜ぶなど)。歩く・待機のように繰り返す動きは、「最後のコマから1コマ目に自然につながるように」と書き足してください。
白っぽいキャラクターでも大丈夫ですか?
白やうすい灰色を大きく使わないでください。背景の市松模様と見分けがつかず、背景を抜くときに一緒に消えます。実際に、肌色の顔が丸ごと消えたことがあります。
コマの端で絵が切れてしまったら直せますか?
直せません。切れた部分は戻らないので、シートから作り直しになります。
ゲームにそのまま組み込めますか?
出すのは素材(GIF・連番 PNG・透過シート)までで、ゲームで動く保証はしません。当たり判定や速さは、組み込む側の作りによります。
動きの速さはどのくらいにすればいいですか?
1コマあたり、戦闘は0.08〜0.1秒、歩くは0.1〜0.12秒、待機は0.15〜0.2秒が目安です。迷ったら速いほうに寄せてください。遅いと、止まった絵が切り替わっているように見えます。

レビュー

使ってみたら、星をどうぞ
ひとことは書かなくても大丈夫。書くなら「ありがとう」でも、作ったものの自慢でも。作り手に届きます。
GitHub でログインして書く

応援した人

応援の受け付けを始めたら、このキットを応援した人がここに並びます。

パブリッシャー
ohirutabeyo
公開日
2026/09/11
値段
無料
分類
動画・スタンプをつくる
個人情報
扱いません
安全レビュー
不要(個人情報を扱わない)
入っているもの
工程の進め方(絵 → シート → 直す → 確認 → 書き出し)市松模様を本当の透過にする道具コマの位置ずれをそろえる道具動きを見て速さを決める画面GIF・連番PNG・透過シートの書き出し生成AIが指示を守らないところと、その直し方

ほかのキット