--- title: "Codexと生成AIで縦型ショート動画を作る | grasys blog" url: "https://blog.grasys.io/post/yusukeh/codex-cinematic-short/" description: "Codexを使って、公開コンテンツから技術・サービス・採用向けの縦型ショート動画を作るワークフローを紹介します。Runwayでの映像生成、Epidemic Soundでの音源選び、Remotionでの合成と品質確認までをまとめます。" --- # Codexと生成AIで縦型ショート動画を作る - ![](/_astro/noicon.CTHOhNiB_1HMs6A.webp)[yusukeh](/authors/yusukeh/) - 公開日：2026年9月15日 - カテゴリー：[Tech](/categories/tech/) - タグ：[#AIエージェント](/tags/aiエージェント/)[#生成AI](/tags/生成ai/)[#Codex](/tags/codex/)[#Remotion](/tags/remotion/)[#Runway](/tags/runway/)[#Epidemic Sound](/tags/epidemic-sound/)[#動画制作](/tags/動画制作/) ![Codexと生成AIで縦型ショート動画を作る](/_astro/hero.BpVSRpO3_Z23DbTk.webp) こんにちは長谷川です。 WordPressで構成されていたgrasysのCorporate/Blogそれぞれにイラッとして、急にAstro化を決行しました🤣 その過程で、遊び心としてSNS連携（[buffer](https://buffer.com/)を使っています。多分別の記事で西野くんが書くと思います。）や動画生成をやってみようという話になり、Codexを使った動画制作の仕組みを作りました。 今回は、そのCodexに動画の制作ディレクターを担当してもらう仕組みを紹介します。 題材は、grasysのBlog、サービス紹介、採用ページなどの公開コンテンツです。これらを根拠に、映画的な9:16の縦型ショート動画を企画・制作するためのSkillを、別のRepositoryで定義しています。 Codexが担当するのは、内容の分析、構成、音楽、映像生成、合成、品質確認まで。 なかなか担当範囲が広いです🤣 そこそこ試行錯誤しました・・・😅 そのため、何を伝えるか、どこまで演出してよいか、何を確認して完成とするかも、制作の手順と一緒に定義しています。 ## 実際に作った動画 先に、元の記事と完成した動画を。DagsterをCloud Runで構築する記事から作ったショート動画です。 - 元の記事： [DagsterをCloud Runで構築してみる](https://blog.grasys.io/post/uema/dagster_cloudrun_build/) - 完成動画： [【Cloud Run】1つのDagster、実行基盤はなぜ3つ？（YouTube Shorts）](https://www.youtube.com/shorts/nwqA7SR6OLQ) 元の記事と見比べると、どんな内容を映像にしているかがわかりやすいと思います。 ## 作る動画に合わせてSkillを分ける ここでいうSkillは、Codexに渡す動画制作の手順や判断基準をまとめたものです。何を読んで、どんな構成を考えて、完成前に何を確認するかまで書いています。 技術記事とサービス紹介、採用動画では、見せたいものが違います。なのでSkillも3つに分けています。 - 技術記事向け：課題や発見、どう解決したかを伝える - サービス紹介向け：どんな課題を相談できるのかを伝える - 採用向け：人や仕事、働く環境に興味を持ってもらう 技術記事なら、「どうやって解決したんだろう」と元の記事を読みたくなる動画にしたい。そのために、記事の中から課題や発見を拾って構成を考えます。 サービス紹介は20〜30秒を標準にして、1本で伝える課題を絞ります。サービスページに書いてあることを全部詰め込んでも、短い動画では追いきれません。どんな支援ができるかを伝えて、詳細ページや相談につなげます。 採用向けでは、人や職場の雰囲気に加えて、どんな技術を使ってどういう仕事をするのかも扱います。使っている技術の名前だけ並べるより、仕事の様子が伝わるようにしたいところです。 動画だけで記事の内容を全部説明するのは難しいので、気になるところを見せて、詳しい話は元のページで読んでもらいます。サービスや採用も、それぞれのページにつながる入口を作るイメージです。 同じ縦型動画でも、この辺の違いまで含めてCodexに構成を考えさせています。 ### Codexへの頼み方 このSkillを用意した制作環境で、使いたいSkillと元の記事をCodexに指定します。技術記事向けなら、例えばこんな依頼です。 Plain textcontent\_copy ``` grasys-tech-cinematic-short を使って、次の記事を紹介するYouTube Shortsを作ってください。 https://blog.grasys.io/post/uema/dagster_cloudrun_build.md 元の記事を読みたくなる動画にしたいです。 まずは構成、使う素材、費用の見込みを提示してください。 ``` grasys blogはMarkdown表示も機能として持たせているので、CodexにはそのMarkdown版のURLを渡します。 HTML記事のURLをそのまま渡すよりかは良いと考えています。 記事の「For AI」リンクから開けるMarkdown版のURLです。Codexがまとめた計画を人が確認してから、素材の生成や動画制作へ進みます。 ## 使っているツール 全体の進行はCodexに任せていますが、映像、画像、音楽、合成にはそれぞれ担当があります。 ### Runwayで映像を作る [Runway](https://runway.com/) は、AIで動画や画像を生成・編集するためのプラットフォームです。 今回はRunway上のSeedance系モデルを使って、9:16の縦型映像を作っています。空間の雰囲気や光、カメラの動きなど、映画っぽく見せたい部分を担当してもらいます。 ここで作るのは、伝えたい内容に合わせた映像素材です。元の記事に書いてある技術説明や数値は、後から合成します。 ### 画像もCodexで作る 採用向けのキー画像は、Codexの画像生成機能で作成します。 キー画像というのは、映像化する前に構図や人物の配置、全体の雰囲気を決めるための静止画です。先にどんな画面にしたいかを画像で決めてから、映像へつなげます。 Codexには構成を考えてもらうだけでなく、画像も作ってもらっています。制作ディレクター兼、画像生成担当ですね🤣 ただし、生成した人物や職場はイメージです。実在する社員や実際のオフィスを撮影したものと誤解されないように扱います。 ### Epidemic Soundで音楽と効果音を選ぶ [Epidemic Sound](https://www.epidemicsound.com/) は、動画などに使う楽曲や効果音を提供するサービスです。 ここからBGMや効果音を選びます。落ち着いた雰囲気にしたいのか、途中で盛り上げたいのかなど、動画の流れと曲の展開を合わせて考えます。 音楽も構成の一部なので、映像を作る段階から一緒に扱っています。効果音は、場面の切り替えなどのタイミングに使います。 ### Remotionで1本の動画にする [Remotion](https://www.remotion.dev/) は、Reactを使って動画やモーショングラフィックスをコードで作れるフレームワークです。 生成した映像や画像、音楽を組み合わせて、文字や図、数値、ロゴなどを載せます。どのタイミングで表示して、いつ切り替えるかもコードで扱います。 動画の最後に出す「記事を読む」「サービスを見る」といった案内も、ここで入れます。 **映像の雰囲気は生成AIで作り、説明に必要な文字や図は元の情報を基に合成する。** この分担にしています。 ## 記事を読ませて、構成を考える まずは元の記事やページを、制作時点の内容で保存します。制作途中でページが更新されても、どの内容を基に作ったかがわかるようにするためです。 本文や画像に加えて、取得元も一緒に残します。映像の表現と、説明の根拠を後から照らし合わせられるようにしておきます。 その内容をCodexに読ませて、誰に何を伝える動画なのかを整理します。技術記事なら、何に困って、どう考えて、どう解決したのか。この辺を拾ってもらいます。 次に考えるのが、動画の冒頭です。 最初に何を見せるかで印象が変わるので、いくつか案を出して比較します。技術的な発見や、予想と実際の動きの違いなど、元の記事のどこを入口にすると面白いかを考えます。 見た目の派手さだけで決めず、短い時間で伝わるか、その映像で記事の内容を説明できるかも見ています。 ただ、気になる問いだけ出して終わっても困ります。 冒頭で出した問いは、その後の流れで回収します。元の記事にない成果や数値を足して、話を大きくすることもしません。 話の流れが決まったら、それをどんなカットで見せるかを考えます。例えば、課題を説明する部分を複数のカットで見せることもあります。話の区切りと、画面を切り替えるタイミングは別々に考えています。 ここに音楽も合わせます。曲が盛り上がるところで映像を切り替える、少し落ち着いたところで説明を読ませる、といった組み合わせです。 でも、音楽に合わせて文字を出しても、読む時間がなかったら困ります😅 文字の量と表示時間も見ながら、構成を決めていきます。映像だけでなく、音と文字も一緒に考えさせているところです。 ## 作る前と、できた後に確認する 構成ができたら、使う素材や生成する内容、費用を先に確認します。どんな動画を作るかを人が確認してから、素材の生成や取得に進みます。 Codexがまとめた計画を見ると、どんな順番で話を進めるか、どこに生成素材を使うかがわかります。この段階で方向を揃えておきます。 素材が揃ったら、 [Remotion](https://www.remotion.dev/) で合成して動画を書き出します。 できた動画は、実際に映像と音を確認します。冒頭で何の話かわかるか、場面の切り替えが不自然ではないか、文字が読めるか。最後に出す記事やサービスへの案内も確認します。 元の記事と説明が合っているか、ブランドの表現や素材・音楽のライセンスに問題がないかも確認するところです。 ファイルとして正常に書き出せたことと、人が見て完成と言えることは別なので、最後は人が確認します。 YouTube向けなら、動画に合わせたShorts用のサムネイルも用意します。動画だけで終わらず、投稿に必要なものまで揃える流れです。 ## 構成や素材も残しておく 制作中に考えた構成、使った素材、確認した内容は、JSONやMarkdownで残しています。 素材を選んだ理由や、冒頭の案をどう選んだかも残すので、修正する時に判断をたどれます。 動画を作っているのに、JSONもけっこう出てきます🤣 この記録をCodexに読ませれば、構成や素材を確認しながら作業を続けられます。人がチェックする時にも、元の情報をたどれます。 完成した動画や投稿文、リンクなどは、 [Buffer](https://buffer.com/) 連携に渡すための情報としてまとめます。この3つのSkillで扱うのは、動画と投稿用データの準備まで。SNSへのアップロードや予約、実際の投稿は別の処理です。 何を伝えるか、どう作るか、どこを確認するか。この辺もSkillにまとめて、Codexから使えるようにしています。 * * * # やってみた感想 - Seedanceすごい - Runwayすごい - お金がけっこうかかる💴 - Epidemic SoundのVoiceover機能は使ってないけど面白そう - 動画を作るという事自体の難しさを知った - Astroはmarkdownやmdxでデータを構成するので、Codexのようなツールととても相性が良い - CodexでSkill化したので、他の人に動画制作を委任することがとても簡単にできる - 動画の生成には20~50分くらいかかるため、skillを作ること自体よりそれを練磨するために何度も動画生成・確認・skill修正を繰り返すことがとても大変だった・・・😅 まだこれからも更新の余地があると考えています。 随時修正を加えて行きます🫡 ## この記事を書いた人 [![](/_astro/yusukeh.BvUd2yKE_1mQ6Fp.webp)](/authors/yusukeh/) ### [yusukeh](/authors/yusukeh/) Fly high. Think deep. Move fast. Go far.🦅 - [Medium](https://medium.com/@yusukeh "Medium") [プロフィールと記事一覧](/authors/yusukeh/)