Manimを使ってカッコいいOP動画を作ろうとGPTで試行錯誤した話~プロンプトぽちぽち~
こんにちは!KIRIKO.tech(株)代表の佐藤です。
常にAIの情報が更新される目まぐるしい日々にちょっと休みたいところですが、いかんせん面白くてしょがない!そんな気持ちな方々おおいんじゃないでしょうか?
自分は少なくともそうです!!
さて、本日は最近よくXで目にするAIで動画作ってみた~みたいなアレを僕も作ってみたのでその解説動画!
いや、知らんしっていう方も多いと思いますので作ったサンプル動画を貼り付けます!
いやぁ作りたいと思ってたんですけど、みんなどうやって作ってるんだ~~~俺も作りてよ~なんて思ってたので
作り方の詳細はいつもお世話になっているGPT研究所さんの記事を参考にしましたのでそちらをどうぞ!
作り方はこちらを参考していただくとして、この記事ではこの貼り付けた動画を作る上でのどのようなプロンプトを書いていったかの過程をお伝えしたい思います。
Manimって??
いや、思った以上にGPTと会話したというか、まだコツを理解していないというのもあります。
そもそもこの動画を作成するにあたってのManimの理解が足りない。
Manimとは
Manim(Mathematical Animation Engine)は、3Blue1Brown という YouTube チャンネルで有名になった数学ビジュアル化ツールです。
Grant Sanderson が開発したこのオープンソースのPythonライブラリは、主に数学的な概念やプロセスを視覚的に表現するために使われます。
Manimを使用すると、複雑な数学的概念を直感的に理解しやすくする高品質なアニメーションを作成できます。
へぇ、要は数学的な要素をとりいれつつも、それを組み合わせつつアニメーションが作成できるとのこと。
できること
Manimで表現できることには以下のようなものがあります
数式とテキスト: LaTeXを使用して数式を美しく描画し、テキストを組み込むことができます。これにより、複雑な数学的表現をビジュアル化できます。
グラフと関数: 2Dや3Dのグラフを描画し、関数の動的な挙動をアニメーションで表現することが可能です。関数の変化をリアルタイムで視覚化し、数学的な直感を養うのに役立ちます。
幾何学的図形: 点、線、円、多角形などの基本的な幾何学的図形から、より複雑な3Dオブジェクトまで、幅広い図形を描画できます。これらの図形はアニメーションとして動かしたり変形させたりすることができます。
トランスフォーメーション: オブジェクトの移動、拡大・縮小、回転など、様々なトランスフォーメーションをアニメーションとして表現できます。これにより、幾何学的な変換や関数の変化を直感的に示すことができます。
複雑なシーンの構築: 複数のアニメーション要素を組み合わせて、より複雑なシーンやストーリーを作成することが可能です。数学的な概念を物語りの形で表現することで、視聴者に深い理解を促すことができます。
インタラクティブなビジュアライゼーション: 最近のアップデートでは、ウェブ上でインタラクティブなビジュアライゼーションを作成する機能も追加されました。これにより、ユーザーがパラメータを変更することで、数学的な概念がどのように変化するかを直接見ることができます。
Manimは非常に柔軟で強力なツールであり、数学教育、科学的研究、または単に数学的な美を探求するためのビジュアルコンテンツを作成する際に大きな価値を提供します。
学習曲線は少し急ですが、基本を理解すれば、非常に魅力的で理解しやすい数学的ビジュアルを作成することができます。
そう、サラッと書いてますが、ざっくりいうとPythonを基本としたプログラミング言語でありお勉強をがんばらなければならない
が今の自分にはAIがあるから手を出せるようになったってことです!!
ってなわけでやってみたわけです!
これで、YouTubeの動画職人のようなことが出来るぜ!!と
が、意外とその道のりは安易ではなかった。
実際に動画を作ってみよう!!
ってなわけで、動画作っていきます。
GPT研究所さんが作成したManimコード生成のGPTs「Manim Professor」というものがあります。
これを使えば、Pythonのコードを作ってくれるので簡単にアニメーションが作成できます!
ならば、これを使ってノーコードガールズのOPを作ろうと思ったわけです。
ちなみに冒頭の動画のノーコードガールズ、ちょいてつちゃん、バブル姉さん、スタジオちゃん、アダロ氏、フラフロちゃんって何ぞやと思われた方いると思います!
当社のキャラクターたちです応援してください!!
さて、話を戻しましてこのGPTsに指示をだして作ってみました。
色々と指示を出して行きます(一部抜粋)
そして出来上がった動画がこちら。
うぅぅん、悪くはなくけどもっと色々と動かしたい・・・。
訂正の指示を出してコードを打ち直してもらうとすると、今度は違うところば微妙な感じになります。
ここで我思うわけです、これ専用に動画の脚本プロンプト作ってそれをコードに直してもらった方が早いわ・・・
なのでこのコード生成のGPTs「Manim Professor」に指示を打ち込むためのGPTsを作ろうと思ったわけです。
GPTsのためにGPTsをつくる
GPTsを作る理由
最近の自分のGPTの使い方の1つに、GPTsを使うために、GPTsを使うってことをしています。
その理由として挙げられる理由は大きく2つ
・まず会話したくない、めんどくさい
・目的、目標がGPTと会話していく内にブレてしまう
1つ目はドストレートにChat-GPTとの会話がめんどくさいというのがあります←
会話=プロンプトを組み立てて進めていけば、そのうち目標には達することができますが、なんならそれに特化したGPTsを使い余計な会話を省きたい。
2つ目の理由も、1つ目と似た所がありますが、会話の最中にGPTが勝手に解釈して目標といていることからズレてしまうことです。
もちろん、会話して軌道修正は可能ですが、それをするんだったら初めから目的がはっきりとしたGPTsを使うよねってなります。
GPTsももちろん上の2点のような部分もなきにしもあらずですが、ゴールに対して大きくブレることはないのでその辺りが扱いやすい。
ならばとっととプロンプトをつくろう!
が
どんな指示出していいかわからんとなったわけです。
いや、頭では何となく分かっています。
この何となくを解決する手がかりとなるのが目的とゴールを定めるゴールシークプロンプトとなるんです!!
このことについては、わりと真面目に詳しく過去の記事で説明してますのでぜひ!!
このような手法を活用しつつGPTsのためのGPTsを作成し、その上で出来上がったプロンプトがこちら
### ステップ1: イントロダクション
- **変数A (単語)**: オープニングシーンを導くキーワード。例: "無限"
- **アクション1**: 単語Aが暗闇から浮かび上がり、視聴者の注意を引く方法。
- **コンテキスト1**: 単語Aを取り巻くビジュアルや数学的表現。例: 微積分の基本定理
### ステップ2: コンセプトの展開
- **変数B (単語群)**: オープニングシーンに続く重要な数学的概念を示すキーワードのリスト。例: "対称性", "変換"
- **アクション2**: 各単語Bに対して、それを強調するビジュアルエフェクトやアニメーション。
- **コンテキスト2**: 単語Bが表す数学的概念や理論の視覚的表現。例: 幾何学的図形の動き
### ステップ3: 探究と発見
- **変数C (単語)**: 探究や発見のプロセスを強調するキーワード。例: "探究", "発見"
- **アクション3**: 単語Cを中心としたビジュアルシーンの構築。例: 3Dグラフの動的探究
- **コンテキスト3**: 単語Cが関連する数学的プロセスや概念のビジュアル化。
### ステップ4: インタラクション
- **変数D (単語)**: 視聴者参加やインタラクションを示唆するキーワード。例: "インタラクション"
- **アクション4**: 視聴者が参加するインタラクティブな要素の導入。
- **コンテキスト4**: 視聴者のアクションがビジュアルにどのように反映されるか。
### ステップ5: コンクルージョン
- **変数E (単語)**: 動画の締めくくりを象徴するキーワード。例: "理解", "啓蒙"
- **アクション5**: 最終シーンでの単語Eの強調方法。
- **コンテキスト5**: 単語Eを取り巻くビジュアルやメッセージ。
これをGPTsのインストラクションにぶち込んでGPTsを扱うためのGPTsが完成です。
完成したGPTsについて
というドストレートなGPTsができました(仮)
そう、(仮)なのです、その理由を今から書いていきます(今日は長いなぞ~~汗)
プロンプトの作成
それでは作成したGPTsにこのような指示を入れて、アニメーションの脚本を作ってもらいます。
帰ってきたお返事は、こちら
ここでまだまだだな、と感じたのは、序盤から創造という言葉を使い勝手にアレンジ加えてしまっています。
また、"ノーコードガールズ", "ちょいてつちゃん", "バブル姉さん"も変数C: "スタジオちゃん"のようにそれぞれ変数分けしてほしかったのですが、ひとまとめにしてしまっていますね。
この時点で、このGPTsのプロンプトは再度調整がいると感じましたが、めんどくさかったのでこのまま会話して微修正していきます。
お返事
だぁ~~今度は最後をまた「アダロ氏&フラフロちゃん変数E: "アダロ氏&フラフロちゃん"」みたいな感じでひとくくりにしてしまっていますね。
もう、この時点で今のプロンプトでは、理想から離れていることが再度わかります。
とりあえず、会話で修正していきます。
すると、返ってきたお返事はこちら
個人的には途中(ステップ5)からじゃなくてステップ1から全文出力して欲しかった、ステップ1から、初めから出力してくださいっていう指示にすればよかったと思いましたが、コピペするだけなのでここはこれで及第点ということで。
以上のやりとりだけでも、色々と今回のGPTsのプロンプトの修正点が見えてきました。
が、今回の目的は動画を作成することなので、それは置いといて出来上がった動画のプロンプトは以下
### ステップ1: ノーコードガールズ
- **変数A**: "ノーコードガールズ"
- **アクション1**: 「ノーコードガールズ」がデジタル空間内で構築されるプロセスを描きます。画面上には、コーディングなしでアプリケーションが組み立てられていく様子が映し出されます。
- **コンテキスト1**: ビジュアルプログラミングの要素、ドラッグ&ドロップのインターフェース、ブロック式のコーディングが組み合わさって、複雑なプログラムが簡単な操作で作成されていく様子が描かれます。
### ステップ2: ちょいてつちゃん
- **変数B**: "ちょいてつちゃん"
- **アクション2**: 「ちょいてつちゃん」がプログラミングの世界へ初心者を導く様子を表現します。画面は、易しいプログラミングの概念やロジックがゲームのような形で楽しく学べる空間に変わります。
- **コンテキスト2**: プログラミングの基本概念を、親しみやすいキャラクターやアニメーションを用いて教えるシーンが展開されます。例えば、ループや条件分岐を簡単なパズルゲームで示すことで、プログラミングの楽しさと基本を伝えます。
### ステップ3: バブル姉さん
- **変数C**: "バブル姉さん"
- **アクション3**: 「バブル姉さん」がデジタル経済の盛衰を象徴するキャラクターとして登場します。画面上では、経済の波をビジュアル化したアニメーションが展開され、バブルの成長と崩壊が描かれます。
- **コンテキスト3**: バブル姉さんの周りには、カラフルなバブルが浮かんでおり、これらはデジタル経済の成長とバブルを象徴しています。バブルが大きくなりすぎてはじけるシーンを通じて、経済の循環とバブルの危険性について視覚的に表現します。
### ステップ4: スタジオちゃん
- **変数D**: "スタジオちゃん"
- **アクション4**: 「スタジオちゃん」がクリエイティブなプロジェクトを実際に生み出すプロセスを描きます。このステップでは、アイデアから完成品に至るまでのクリエイティブな過程が動的な3Dグラフィックで表現されます。
- **コンテキスト4**: スタジオちゃんが、デザイン、アート、開発の各段階を案内する様子を描きます。様々なアイデアが組み合わされ、次第に具体的なプロダクトやアートワークに形を変えていくプロセスがビジュアル化されます。
各キャラクターに特化したステップをさらに明確に分け、最終ステップでの表現について詳細化してみましょう。
### ステップ5: アダロ氏
- **変数E**: "アダロ氏"
- **アクション5**: 「アダロ氏」が登場し、インタラクティブな要素を紹介します。視聴者が直接参加できるようなクイズや問いかけを通じて、視聴者との対話を促します。
- **コンテキスト5**: アダロ氏が提示する問いかけや挑戦を通じて、視聴者が動画内の内容やテーマに深く思いを巡らせることができるようにします。アダロ氏のシーンでは、テクノロジーやクリエイティブな問題解決に対する洞察が鍵となります。
### ステップ6: フラフロちゃん
- **変数F**: "フラフロちゃん"
- **アクション6**: 「フラフロちゃん」が、プロジェクトや学習過程の完成と理解を象徴するキャラクターとして登場します。フラフロちゃんが花が咲くようなビジュアルエフェクトで画面を彩り、達成感と啓蒙のメッセージを伝えます。
- **コンテキスト6**: フラフロちゃんの周りで開花する花々は、新たな理解やアイデアの芽生えを象徴しており、視聴者に向けてポジティブなメッセージを送ります。
### 最終ステップ: 統合と表現
- **アクション**: すべてのキャラクター、「ノーコードガールズ」、「ちょいてつちゃん」、「バブル姉さん」、「スタジオちゃん」、「アダロ氏」、そして「フラフロちゃん」が、それぞれの特色を活かしながら一堂に会するシーンを作ります。これらのキャラクターが、共同で大きなプロジェクトや作品を完成させる様子が描かれます。
- **コンテキスト**: 各キャラクターの名前が、それぞれが貢献した部分や役割を示すシンボルとともに、壮大なフィナーレシーンの中で浮かび上がります。この瞬間は、テクノロジー、クリエイティビティ、コラボレーションの重要性と力を象徴しており、視聴者にインスピレーションを与える強力なメッセージを送ります。
そして、このプロンプトを先ほどのGPTsに入れ込みコードを作ってもらいます
そうすると・・・
%%capture
from manim import *
class CompleteStory(Scene):
def construct(self):
# ステップ1: ノーコードガールズ
no_code_girls = Text("ノーコードガールズ", font_size=40, color=PURPLE)
blocks = VGroup(*[Rectangle(height=0.5, width=1, fill_opacity=1) for _ in range(4)]).arrange(RIGHT, buff=0.1)
self.play(Write(no_code_girls), run_time=1)
self.play(no_code_girls.animate.shift(UP*3))
self.play(LaggedStart(*[Create(block) for block in blocks], lag_ratio=0.5), run_time=2)
self.wait(1)
# ステップ2: ちょいてつちゃん
choitetsu_chan = Text("ちょいてつちゃん", font_size=40, color=BLUE)
# パズルピースのSVGをシンプルな図形に置き換え
puzzle_pieces = VGroup(*[Square() for _ in range(3)]).arrange_in_grid(1, 3)
self.play(ReplacementTransform(no_code_girls, choitetsu_chan), FadeOut(blocks), run_time=2)
self.play(AnimationGroup(*[FadeIn(piece, scale=0.5) for piece in puzzle_pieces], lag_ratio=0.5), run_time=2)
self.wait(1)
# ステップ3: バブル姉さん
bubble_sister = Text("バブル姉さん", font_size=40, color=TEAL)
bubbles = VGroup(*[Circle(radius=0.5, color=TEAL, fill_opacity=0.5) for _ in range(5)]).arrange_in_grid(1, 5)
self.play(ReplacementTransform(choitetsu_chan, bubble_sister), FadeOut(puzzle_pieces), run_time=2)
self.play(LaggedStart(*[GrowFromCenter(bubble) for bubble in bubbles], lag_ratio=0.5), run_time=2)
self.wait(1)
# ステップ4: スタジオちゃん
studio_chan = Text("スタジオちゃん", font_size=40, color=GREEN)
project = Cube()
self.play(ReplacementTransform(bubble_sister, studio_chan), FadeOut(bubbles), run_time=2)
self.play(GrowFromCenter(project), run_time=2)
self.wait(1)
# ステップ5: アダロ氏
adaro_san = Text("アダロ氏", font_size=40, color=RED)
question_mark = Text("?", font_size=90, color=YELLOW).next_to(adaro_san, RIGHT)
self.play(ReplacementTransform(studio_chan, adaro_san), FadeOut(project), run_time=2)
self.play(Write(question_mark), run_time=1)
self.wait(1)
# ステップ6: フラフロちゃん
flaflo_chan = Text("フラフロちゃん", font_size=40, color=ORANGE)
# 花のSVGをシンプルな図形に置き換え
flowers = VGroup(*[Star() for _ in range(3)]).arrange_in_grid(1, 3)
self.play(ReplacementTransform(adaro_san, flaflo_chan), FadeOut(question_mark), run_time=2)
self.play(LaggedStart(*[GrowFromCenter(flower) for flower in flowers], lag_ratio=0.5), run_time=2)
self.wait(1)
# 最終ステップ: 統合と表現
final_text = Text("共創の力", font_size=60, color=WHITE)
self.play(FadeOut(flaflo_chan), FadeOut(flowers), run_time=1)
self.play(Write(final_text), run_time=2)
self.wait(2)
CompleteStory().render()
こんな感じでコードを作ってくれました
が
最終ステップで“共創の力”とか、なんか余分な文言入れちゃってます。
なんやねんなぁ~ディレクターの無視して勝手にオリジナル加えんなやぁ~
と思う気持ちを抑えここも、冷静に
すると、ようやく
%%capture
from manim import *
class CompleteStory(Scene):
def construct(self):
# ステップ1: ノーコードガールズ
no_code_girls = Text("ノーコードガールズ", font_size=40, color=PURPLE)
blocks = VGroup(*[Rectangle(height=0.5, width=1, fill_opacity=1) for _ in range(4)]).arrange(RIGHT, buff=0.1)
self.play(Write(no_code_girls), run_time=1)
self.play(no_code_girls.animate.shift(UP*3))
self.play(LaggedStart(*[Create(block) for block in blocks], lag_ratio=0.5), run_time=2)
self.wait(1)
# ステップ2: ちょいてつちゃん
choitetsu_chan = Text("ちょいてつちゃん", font_size=40, color=BLUE)
puzzle_pieces = VGroup(*[Square() for _ in range(3)]).arrange_in_grid(1, 3)
self.play(ReplacementTransform(no_code_girls, choitetsu_chan), FadeOut(blocks), run_time=2)
self.play(AnimationGroup(*[FadeIn(piece, scale=0.5) for piece in puzzle_pieces], lag_ratio=0.5), run_time=2)
self.wait(1)
# ステップ3: バブル姉さん
bubble_sister = Text("バブル姉さん", font_size=40, color=TEAL)
bubbles = VGroup(*[Circle(radius=0.5, color=TEAL, fill_opacity=0.5) for _ in range(5)]).arrange_in_grid(1, 5)
self.play(ReplacementTransform(choitetsu_chan, bubble_sister), FadeOut(puzzle_pieces), run_time=2)
self.play(LaggedStart(*[GrowFromCenter(bubble) for bubble in bubbles], lag_ratio=0.5), run_time=2)
self.wait(1)
# ステップ4: スタジオちゃん
studio_chan = Text("スタジオちゃん", font_size=40, color=GREEN)
project = Cube()
self.play(ReplacementTransform(bubble_sister, studio_chan), FadeOut(bubbles), run_time=2)
self.play(GrowFromCenter(project), run_time=2)
self.wait(1)
# ステップ5: アダロ氏
adaro_san = Text("アダロ氏", font_size=40, color=RED)
question_mark = Text("?", font_size=90, color=YELLOW).next_to(adaro_san, RIGHT)
self.play(ReplacementTransform(studio_chan, adaro_san), FadeOut(project), run_time=2)
self.play(Write(question_mark), run_time=1)
self.wait(1)
# ステップ6: フラフロちゃん
flaflo_chan = Text("フラフロちゃん", font_size=40, color=ORANGE)
flowers = VGroup(*[Star() for _ in range(3)]).arrange_in_grid(1, 3)
self.play(ReplacementTransform(adaro_san, flaflo_chan), FadeOut(question_mark), run_time=2)
self.play(LaggedStart(*[GrowFromCenter(flower) for flower in flowers], lag_ratio=0.5), run_time=2)
self.wait(1)
# 最終ステップ: キャラクターの集結
characters = VGroup(no_code_girls, choitetsu_chan, bubble_sister, studio_chan, adaro_san, flaflo_chan).arrange_in_grid(2, 3, buff=0.75)
self.play(FadeOut(flaflo_chan), FadeOut(flowers), FadeIn(characters), run_time=2)
self.wait(2)
CompleteStory().render()
このようなある程度ちゃんとした形で返してくれました。
あとは、このコードを実行→動画をチェック→修正→動画チェックの繰り返しになります。
ちなみに最終ステップのキャラクター集結がなかなか理想の形にまとまらず
等の指示をいくつか出し、修正に、修正を加えた結果一番初めにお見せした動画になったわけです。(僕はもう疲れたよ、パトラッシュ)
動画を作成して思ったこと
コードに変換する時の会話でも動画の調整は可能ですが、あくまで調整と考えて、制作のポイントはコードに変換する前のプロンプトだと感じました。
今回は
作りたい動画の指示
↓
動画の脚本GPTs
↓
動画の脚本プロンプト
↓
動画の脚本をコードGPTs
↓
動画
のロジックで動画を作成したわけですが、一番大切なのは動画の脚本プロンプトになるのかなと
この脚本プロンプトの段階で、自分の理想に近い動画の動きを設計してくれるプロンプトが書けるかどうかが肝になると感じました。
作りたい動画の指示
↓
動画の脚本GPTs
↓
動画の脚本プロンプト
この部分で自分の理想の動きをほぼ完成させた上で、最後のコード作成のステップに行くということです。
前述の通り、コード作成の段階でも調整は可能ですが、手数と運要素が必要になってくるなぁと。
なので肝は
Manimを使ってカッコいいOP風動画を作りたいGPTsになってきます。
今日のやり取りの多さ、手数、理想に近いかどうかを考えるとこのGPTsはまだまだ(仮)です。
今後も色々と調整していこうと思います。
プロンプト、GPTsの意義
今日のこの記事を読んでいて思った方いるかもしれませんが、プロンプト、GPTsなんて作らなくても、正直会話を続けて行けば理想に近いものを作れます。
何故なら、その過程が理想形へのプロンプトとなるからです。
ただ、ただ、めんどくさいですよね!
その手間を省くためのプロンプト作成GPTsだと思ってください。
同時に、いやいや会話してけばいいとかいうけどそれが難しいのよ、って方もいると思います。
実際、呪文と思えるようなところもあるのも事実・・・。
我々KIRIKO.tech(株)は、今回のようなGPTs作成やプロンプト等のコツなども教えていますので興味のある方ぜひ連絡ください。
また、今回の記事にて気になる部分、解説して欲しい部分等あればそれもコメントくださると幸いです!
あっ、もっとこんないいやり方、方法あるよって方もぜひです!!
おまけ(余談)
動画作成の肝になると感じた、Manimを使ってカッコいいOP風動画を作りたいGPTsについて、完成(仮)のプロンプトは本文で公開させていただきましたが、このGPTsを作るにあたって、どのような苦労や過程があったかという部分について、以下有料版として公開しようと思います。
マニアックな内容なので、おまけ程度の記事として興味がある方はぜひ買って読んでいただけると嬉しいです!
ここから先は