ChatGPTで、画像を生成してからGIF動画を作る方法【プロンプト付き】

どうも！のばぺんです

今回は、ChatGPTのチャット上で画像を生成して、その画像をもとにGIF動画を作るためのプロンプトを書いてみました

最近だと、AIエージェントといえばCodexやClaude Codeあたりが主流、みたいな空気がありますね

確かに作業をかなり任せられるし、コードまわりも普通に便利です

ただ、GPTsや普通のチャットだけでも、まだまだできることはあります

なので、今回はChatGPTのチャット上で作業が終わる「GIF動画作り方」を解説しようと思いました

そもそもローカルLLM・画像生成AI・動画生成AIのように大がかりな環境を用意しなくても、画像を作ってGIF動画用の素材や指示まで組み立てるのは簡単です

（GIF動画は音声なしで短くループ再生されるアニメーション画像のことです）

だから、できるだけ短い作業でGIF動画を作りたいと思います

画像生成からGIF動画を作るステップ

まずは、4列×2行のイラストを生成して、それをGIF動画にする流れを書いていきます

やること自体はかなりシンプルで二段階に渡ってプロンプトを入力するだけです

最初はちょっと面倒に見えるかもしれませんが、慣れると2分くらいでGIF動画まで持っていけます

まあ、こういうのは一回やってみるのが早いです

1-1と1-2の違いですが、1-1は画像生成から始めるパターンで、1-2はあらかじめオリジナルキャラクターの画像を用意している場合のパターンなので、お好みで選んでください

なので、必ずしも1-1から見る必要はありません

1-1：4列×2行画像を生成するプロンプト

例えば「猫がいびきをかいているイラスト」みたいな指示を「ここに指示を入れてください」へ入力して、その下に以下のプロンプトを追加してください↓↓↓

{ここに指示を入れてください}
"

短いGIF動画素材を作るための「8フレーム連番画像」のスプライトシートを1枚生成してください。

## 目的
1つの動きを8段階に分解し、後でGIF化しやすいように、1枚の画像の中に8コマを配置したスプライトシートを作成してください。

## 最重要ルール
- 8枚の別案ではなく、1つの連続した動作として表現してください
- すべてのコマで、同じキャラクター、同じ顔、同じ髪型、同じ服装、同じ色、同じ画風、同じ背景、同じカメラ角度を維持してください
- 変化させるのは、その動きに必要な部分だけにしてください
- 各コマは、前後のコマと自然につながる中間動作にしてください
- 単なる「少しずつ違う静止画」ではなく、連続アニメーションのフレームとして描いてください

## レイアウト
- 1枚の画像内に8フレームを配置する
- 4列×2行のグリッド構成にする
- 左上から右下へ、1コマ目→8コマ目の順に進む
- 各コマは同じサイズにする
- 各コマの間は均等な余白で区切る
- 外側の余白は最小限にする
- 後で正確に4×2で分割しやすい、きれいで規則的なグリッドにする
- 装飾的な枠、太い枠線、不規則なコマ割り、傾いたパネル、重なったパネルは禁止

## コマ内の見せ方
- 主役は各コマの中央付近に安定して収まるようにする
- 動きの途中でも体の一部が切れないよう、少し安全余白を残す
- 被写体の位置、サイズ、画角は全コマでできるだけ安定させる
- 背景はシンプルにする
- GIF化しやすいように、不要な背景変化やカメラ変化は入れない

## 動きの作り方
- 動きには自然な流れを持たせてください
- 動き始めと折り返し地点では変化を少し小さくし、途中ではやや大きく動かしてください
- 隣り合うコマの差が飛びすぎないようにしてください
- 手足や顔の向きがフレームごとに急に変わらないようにしてください
- 関節の曲がり方や体のつながりが不自然にならないようにしてください

## 動きの種類
### 完結動作の場合
「ジャンプして着地する」「座る」「立ち上がる」「振り向く」「剣を振る」「手を振って止まる」など、始まりと終わりがある動作は完結動作として扱ってください。
- 1コマ目：開始ポーズ
- 2〜7コマ目：動作の途中
- 8コマ目：完了ポーズ

### ループ動作の場合
「まばたき」「ふわふわ浮く」「歩く」「しっぽを振る」「回転する」「呼吸する」「発光する」など、繰り返し向きの動きはループ動作として扱ってください。
- 1コマ目：開始ポーズ
- 2〜7コマ目：周期的な動きの途中
- 8コマ目：1コマ目へ自然につながる状態

## 動きが未指定の場合
動きが指定されていない場合は、主役に自然でGIF化しやすい動きを補ってください。
- 動物：軽いジャンプ、まばたき、しっぽ振り、バウンド
- マスコット：バウンド、手を振る、ふわふわ浮く
- 人物やキャラクター：まばたき、手を振る、呼吸のような待機モーション
- ロボット：点滅、手を振る、小さなバウンド
- 物体：浮遊、発光、回転、バウンド

## 手を振る動作の場合の補足
「手を振る」と指定された場合は、自然なウェーブ動作にしてください。
- 肩や体は大きく動かしすぎない
- 肘を軽く支点にして前腕と手がなめらかに動くようにする
- 手の移動は直線ではなく、ゆるい弧を描くようにする
- 折り返し地点では少しゆっくり、中間では少し大きめに動かす
- 手や指の形、腕の長さ、左右関係がフレームごとに崩れないようにする

## 画像内に入れてはいけないもの
- F1〜F8
- Frame 1、Frame 2 などの文字
- 数字
- ラベル
- 矢印
- 説明文
- キャプション
- 吹き出し
- 透かし
- UI文字
- タイトル文字
- その他あらゆる文字や記号

フレーム順は、文字ではなく4列×2行の配置だけで判断できるようにしてください。

## 添付画像がある場合
- 添付画像を基準画像として使ってください
- 添付画像の主役を別物に作り替えないでください
- 顔、髪型、服装、色、体型、比率、雰囲気、画風をできるだけ維持してください
- 添付画像をFrame 1、または全フレームの基準デザインとして扱ってください
- 見切れている部分は、動きに必要な範囲で自然に補完してよいです
- 背景が複雑な場合は、雰囲気を保ちながら簡略化してよいです

## 出力
- まずは8フレームのスプライトシート画像だけを作成してください
- GIF化はまだ行わないでください
"

例えば、小走りしているシーンを作って欲しい時に、上手く腕が動かないときは「腕の動きが反映されていないので、右手を挙げて、次は左手を挙げてる動きを追加射てください。腕の動きは、足の動きに連動させてください」みたいに追加の指示してください

かならず、指示通りに生成されているかを確認してください

1-2：参照画像から4列×2行の画像を生成するプロンプト

もしオリジナルキャラクターなどを参照したい場合は、それをチャットに添付した上で「自電車を漕いでいるシーン」と入力し、さらに以下のプロンプトを入力します↓↓↓

{ここに指示を入れてください}
"


添付した画像を参照画像として使い、その画像をもとに、短いGIF動画素材用の「8フレーム連番画像」のスプライトシートを1枚生成してください。

## 目的

添付画像の主役となるキャラクター、人物、動物、物体のデザインを維持したまま、指定された1つの動きを8段階に分解してください。

8枚の別案ではなく、同じ主役による1つの連続動作として表現してください。

## 最重要ルール

- 添付画像の主役を別物に作り替えない
- 顔、髪型、服装、色、模様、体型、比率、雰囲気、画風をできるだけ維持する
- 8コマすべてで同じキャラクター、同じデザイン、同じ配色、同じ画風を維持する
- 変化させるのは、指定された動きに必要な部分だけにする
- 8コマを「少しずつ違う静止画」ではなく、同じ被写体を固定カメラで撮影した連続アニメーションフレームとして描く
- 各コマは前後のコマから自然につながる中間姿勢にする

## レイアウト

- 1枚の画像内に8フレームを配置する
- 4列×2行の固定グリッドにする
- 左上から右下へ、1コマ目 → 8コマ目の順に進む
- 各コマは完全に同じサイズにする
- 各コマの間は均等な余白で区切る
- 外側の余白は最小限にする
- 後で正確に4×2で分割できる、規則的できれいなグリッド構造にする
- 装飾的な枠、太い枠線、不規則なコマ割り、傾いたパネル、重なったパネルは禁止

## 参照画像の扱い

- 添付画像を全フレームの基準デザインとして使用する
- 必要に応じて添付画像を1コマ目の基準姿勢として扱う
- 主役の顔や特徴的なパーツをフレームごとに変えない
- 主役の服装、アクセサリー、模様、色を勝手に追加・削除・変更しない
- 添付画像の主役が中央にいない場合は、8コマでは見やすい中央配置に整えてよい
- 見切れている部分や不足している部分は、動きに必要な範囲で自然に補完してよい
- 添付画像の背景が複雑な場合は、雰囲気や配色を保ちながら少し簡略化してよい
- 主役のデザインよりも背景の再現を優先しない

## コマ内の見せ方

- 主役は各コマの中央付近に安定して収める
- 動きの途中でも体や重要なパーツが切れないように少し安全余白を残す
- 主役の位置、サイズ、カメラ角度、画角を全コマでできるだけ固定する
- 背景、光の向き、影の方向もできるだけ固定する
- 動作に必要がない限り、ズーム、カメラ移動、構図変更を入れない

## 動きの作り方

ユーザーが指定した動きを使用してください。

指定がない場合は、参照画像の主役に合う自然でGIF化しやすい動きを1つ補ってください。

例：

- 人物・キャラクター：まばたき、手を振る、軽いバウンド、呼吸のような待機モーション
- 動物：軽いジャンプ、まばたき、しっぽ振り、バウンド
- マスコット：バウンド、手を振る、ふわふわ浮く
- ロボット：点滅、手を振る、小さなバウンド
- 物体：浮遊、発光、回転、バウンド

## モーション品質

- 1つの動きを8段階に自然に分解する
- 隣り合うフレーム間で、体や手足が突然別の位置へ飛ばないようにする
- 動き始めと折り返し地点では変化を少し小さくする
- 動作の途中では必要に応じて少し大きく動かし、自然な加速・減速を感じる動きにする
- 関節の位置、腕や脚の長さ、体の比率をフレームごとに変えない
- 動作に関係しない部分はできるだけ固定する

## 完結動作の場合

「ジャンプして着地する」「座る」「立ち上がる」「振り向く」「剣を振る」「手を振って止まる」など、始まりと終わりがある動作は完結動作として扱ってください。

* 1コマ目：開始ポーズ
* 2〜7コマ目：動作の途中
* 8コマ目：完了ポーズ

ジャンプの場合の目安：

* 1コマ目：通常姿勢
* 2コマ目：しゃがんで準備
* 3コマ目：踏み切り
* 4コマ目：上昇
* 5コマ目：最高点
* 6コマ目：下降
* 7コマ目：着地直前
* 8コマ目：着地

## ループ動作の場合

「まばたき」「ふわふわ浮く」「歩く」「しっぽを振る」「回転する」「呼吸する」「発光する」など、繰り返しに向いている動きはループ動作として扱ってください。

- 1コマ目：開始姿勢
- 2〜7コマ目：周期的な動きの途中
- 8コマ目：1コマ目へ自然につながる姿勢

## 手を振る場合

「手を振る」と指定された場合は、自然なウェーブ動作にしてください。

- 肩や胴体は大きく動かしすぎない
- 肘を軽く支点として前腕と手を滑らかに動かす
- 手は直線ではなく、ゆるい弧を描くように動かす
- 折り返し地点では少し動きを小さくする
- 手や指の形、腕の長さ、左右関係をフレームごとに変えない
- 手だけが突然別の位置へ移動したような動きにしない

## 画像内に入れてはいけないもの

以下は画像内に一切入れないでください。

- F1〜F8
- Frame 1、Frame 2などの文字
- 数字
- ラベル
- 矢印
- 説明文
- キャプション
- 吹き出し
- 透かし
- UI文字
- タイトル文字
- その他あらゆる文字や記号

フレーム順は文字ではなく、4列×2行の配置だけで判断できるようにしてください。

## 出力

- 8フレームのスプライトシート画像を1枚だけ生成する
- GIF化はまだ行わない
- 8枚の個別画像として出力しない
- 8種類の別案として出力しない

"

2-1：GIF動画にするプロンプト

生成した画像を、再度、チャットに貼り付けて以下の指示を追加して下さい↓↓↓

"
添付した8フレームのスプライトシート画像をGIF動画にしてください。

前提：
- スプライトシートは4列×2行です
- 合計8フレームです
- フレーム順は左上から右下です
- 画像内にF1〜F8などのラベルはありません
- 見た目の文字ではなく、配置順だけでフレーム順を判断してください

フレーム順：
1. 左上
2. 上段2列目
3. 上段3列目
4. 上段4列目
5. 下段1列目
6. 下段2列目
7. 下段3列目
8. 下段4列目

重要：
単純に画像全体を4列×2行で機械的に切るだけではなく、まず画像を確認してください。
外側の余白、コマ間の余白、枠線、境界線がある場合は、それらを考慮して正しく切り出してください。

GIF化の手順：
1. 添付画像を読み込む
2. 画像の幅と高さを確認する
3. 4列×2行のスプライトシートとして扱う
4. 外側の余白があるか確認する
5. コマ間の余白や枠線があるか確認する
6. 余白や枠線が規則的な場合は、必要に応じて除外またはトリミングする
7. 実際に使う領域を4列×2行に分割する
8. 左上から右下の順番で8フレームを抽出する
9. 各フレームを同じサイズにそろえる
10. 隣のコマや枠線が混ざっていないか確認する
11. キャラクターや主役が各フレーム内に正しく入っているか確認する
12. GIFとして保存する
13. 完成したGIFファイルを、ユーザーがダウンロードできる形で返す

切り出し時の注意：
- 各フレームは同じサイズにする
- キャラクターや主役を切らない
- 隣のコマが混ざらないようにする
- 太い枠線や余白がある場合は、フレーム内に残しすぎない
- 外側の余白だけでなく、コマ間の余白も考慮する
- 必要なら、外側余白を削ってから4×2に分割する
- 必要なら、コマ間の隙間を除外して各フレームを切り出す
- ラベルや文字を前提に処理しない

GIF設定：
- 形式：animated GIF
- ループ：無限ループ
- 基本速度：1フレームあたり120ms
- アスペクト比を維持する
- 画質とファイルサイズのバランスを取る
- 各フレームの表示時間は基本的に均等にする

完結動作の場合：
- 通常再生でGIF化する
- 再生順は 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8
- 必要なら最後の8フレーム目に少し停止時間を入れる
- ジャンプして着地、座る、立つ、振り向く、投げる、剣を振るなどは完結動作として扱う

ループ動作の場合：
- 通常ループでGIF化する
- 再生順は 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → 1
- もし8コマ目から1コマ目への戻りが不自然な場合は、往復ループにしてもよい
- 往復ループの場合は 1 → 2 → 3 → 4 → 5 → 6 → 7 → 8 → 7 → 6 → 5 → 4 → 3 → 2 → 1
- まばたき、ふわふわ浮く、歩く、しっぽを振る、回転、発光、呼吸などはループ動作として扱う

分割がうまくいかない場合：
- まず画像全体を4×2で均等分割して試す
- 失敗したら、外側余白を削ってから再分割する
- それでも失敗したら、コマ間の余白や枠線を除外して再分割する
- それでも隣のコマが混ざる場合は、パネル境界を推定して切り出す
- どうしても不可能な場合だけ、より均等な4×2画像の再アップロードを依頼する

出力ルール：
- 完成したGIFファイルを、ダウンロード可能なファイルとして返してください
- 内部保存パスだけを最終回答に表示しないでください
- 個別フレーム画像のパスをそのまま列挙しないでください
- 最終回答の主役は、完成したGIFファイルです
- 個別フレーム画像も必要な場合は、PNGを1つのZIPファイルにまとめて返してください
- 個別フレームのPNGパスを8個並べるだけの回答は禁止です
- 可能であれば、完成GIF、元のスプライトシート、フレームZIPの順で返してください
- ただし、ユーザーが特に希望していない場合は、完成GIFだけを返せば十分です

最終回答の形式：
「GIFを作成しました。こちらからダウンロードできます。」

その下に、完成GIFへのダウンロードリンクまたは添付ファイルを表示してください。


ファイル出力に失敗した場合：
- 「GIFファイルは作成できましたが、ダウンロード可能な形で返す処理に失敗しました」と説明してください
- その場合でも、内部パスだけを大量に列挙しないでください
- 必要なら、完成GIFを再保存してダウンロード可能なファイルとして返し直してください
"

完成したGIF動画

自転車のような動きの多いGIF動画に関しては、Frmae数がだと動作がカクカクになってしまうため、最初の画像生成の段階で4×2（Frame数:8）から4×3（Frame数:12）にして描写枚数を増やすと自然に見えるかもしれません

あと、キャラクターは瞬きや口パクなども指示に含めると、さらに自然に見えます

動きが少ない画像はGIF動画と相性がいいです

逆に動きの多いGIF動画は、動作に不十分な箇所も目立つので、今後GPT-imageの改善によって改善してほしいですね

まぁ、このあたりは個人でいろいろ考えながら試してください

ちなみにこれもGPTsにしたので、より少ないステップで作れるようになりました↓↓↓

終わりに

まあ、GIF動画の使い道はいろいろあると思うんですが、まず分かりやすいところだと、noteの「いいね」へ対する表示ですかね

GIF動画にしておくと、静止画よりも少し動きが出るので、見た人の印象に残りやすそうです

めちゃくちゃ凝ったものじゃなくても、ちょっと動くだけで雰囲気が変わると思うのでね

あとは、オリジナルキャラクターを口パクさせる使い方とかですか

例えば背景をグリーンバックにしておけば、あとから透過しやすくなるので、必要なら「レイヤーを分けてPSDで出力して」みたいに投げる感じですね

このあたりをうまく組み合わせれば、Codex、Irodori-TTS、立ち絵素材、GPT-image 2.0で作ったスライドを使って、動画投稿まで持っていけるかもしれません

noteとXのフォローをお願いします！

・note

オススメ記事