AIで動画コンテンツを制作!Codexでビジュアライザーを作ってみた
Meg
Meg
2026-05-25
単なるプログラミング支援ツールと思われがちなAI「Codex」ですが、本記事では、BGMとイラストから「ビジュアライザー動画」を制作する過程をレポート。完成形に至るまで、「こういう雰囲気にしてほしい」「ここを消して」といった自然な指示(プロンプト)を重ねることで、クリエイター向けの強力な共同制作パートナーとなり得ることを実証します。専門知識がなくても、コンテンツ制作の「意図」を伝えるだけで高品質なアウトプットが可能です。

Codexというと、プログラミングやコード修正に使うイメージが強いかもしれません。

でも今回やってみたのは、コードを書くこと自体が目的ではありません。

あらかじめSuno AIで制作しておいたボサノバBGMと、ChatGPTの画像生成で作った「猫が眠る海辺のイラスト」を使って、音楽に合わせて動くビジュアライザーを作る、というコンテンツ制作でした。

Codexに曲やイラストを作ってもらったわけではありません。すでに用意していた音源と画像を渡して、それらを活かす映像表現を一緒に作っていった形です。

↓作ったものをYoutubeにアップしました

https://youtu.be/8SBX6dqO5rw

最初に出した指示はシンプルでした。

ボサノバBGMです。曲と画像に合ったビジュアライザーを作って

見ながら指示して、少しずつ整える

最初から完成形が一発で出たわけではありません。

たとえば、最初の案にはコーヒーの湯気のような演出が入っていました。でも実際に見てみると、少し「謎のヒモ」のように見えてしまいました。

そこでこう指示しました。

謎のヒモみたいな湯気は削除して

次に、画像中央付近に出ていた波形も少し目立ちすぎていました。海辺の景色を楽しみたいのに、中央に動く線があると視線を持っていかれてしまいます。

そこで、

画像中央付近の波形も削除

と伝えました。

このように、出てきたものを見ながら「これは残す」「これは消す」と調整していきました。

参考画像を使って、見た目を近づける

レコード付近には、最初は円形の波紋のような演出がありました。

ただ、レコード自体が丸いので、円形のエフェクトが重なると少し分かりにくくなります。

そこで、横にドットが並んで中央だけふくらむような波形の参考画像を添えて、

レコード付近にある波形を円形ではなく、添付画像のような見た目で画像にあったものに変更

と指示しました。

その結果、レコードプレーヤー付近に、淡い水色の横型オーディオ波形が入りました。強いネオンではなく、イラストに馴染む控えめな見た目です。

録画しやすいようにUIも削除

途中では、再生ボタン、再生バー、時間表示、MP4ボタンなどの操作UIもありました。

操作するには便利ですが、画面録画をするとそのUIまで映り込んでしまいます。

そこで、

画面録画で対応するので添付画像のところは削除。なくても再生できるようにしたい

と伝えました。

最終的には、画面上の操作パネルをなくし、画面をクリックするだけで再生・一時停止できるようになりました。

これで、録画しても余計なUIが映らない状態になりました。

MP4として見られる形にもした

その後、ブラウザ上で見るだけでなく、MP4として閲覧・保存できる形にもしました。

mp4でダウンロードして閲覧できるようにしたい

と指示し、最終的にはMP4ファイルとして書き出せるようになりました。

書き出したあとも、映像の中に少し気になる部分がありました。

  • 月のように見える光
  • 海の上に出ていた白い線
  • 両脇の薄いグレーのような部分

そこで、

謎の月?と白い線と両脇の薄い灰色になっている部分は消して

と伝え、不要な演出を削除しました。

最終的には、猫が眠る静かな海辺の雰囲気を残しながら、音楽に合わせてレコード付近の波形と花びらがそっと動くビジュアライザーになりました。

Codexは「コードを書く道具」だけではない

今回やってみて感じたのは、Codexはプログラミングだけの道具ではないということです。

もちろん裏側では、Webページや動画書き出しのためのコードが動いています。でも、使う側が考えていたのはコードではありません。

考えていたのは、

  • この曲に合う雰囲気にしたい
  • この演出は少し違和感がある
  • ここはもっと参考画像に近づけたい
  • 録画しやすい見た目にしたい
  • MP4として見られるようにしたい

といった、コンテンツ制作上の判断でした。

つまり、Codexに対して「このコードを書いて」と頼むだけでなく、「こういうものを作りたい」「ここを直したい」「もっとこう見せたい」と伝えることで、制作を一緒に進められます。

今回の指示の流れ

今回の制作は、だいたいこんな流れでした。

曲と画像に合ったビジュアライザーを作って
↓
謎のヒモみたいな湯気は削除して
↓
画像中央付近の波形も削除
↓
レコード付近の波形を参考画像のような見た目に変更
↓
画面録画しやすいように操作UIを削除
↓
MP4で閲覧・ダウンロードできるようにしたい
↓
MP4内の不要な光・白い線・灰色の部分を削除

最初から完璧な完成イメージを言語化できていたわけではありません。

出てきたものを見て、気になるところを伝えて、少しずつ完成形に近づけていきました。

まとめ

Codexは、プログラミングや開発作業に使うイメージが強いツールです。

でも今回のように、音楽、画像、動画、ブログ記事といったコンテンツ制作にも使えます。

大事なのは、専門的なコードの指示を出すことではなく、作りたいものの雰囲気や、見て感じた違和感をそのまま伝えることでした。

「ここは消して」 「この参考画像みたいにして」 「録画しやすくして」 「MP4で見られるようにして」

そんな自然な指示を重ねることで、1枚の画像と1曲のBGMから、発信用のビジュアライザー動画まで作ることができました。

Codexは、開発者だけでなく、クリエイターや発信者にとっても使える制作パートナーだと感じました。