CodexとHyperFramesで商品紹介動画を作ってみた。思ったより全然難しくなかった話

記事
IT・テクノロジー
最近、OpenAIのCodexを使う機会が増えてきました。

Codexは、ChatGPTと同じOpenAIが提供しているサービスで、一言でいうとAIのコーディングエージェントです。

「コードを書くためのAI」と聞くと、エンジニア専用の難しいツールに聞こえるかもしれません。

でも実際に触ってみると、コードが書けない人にも十分使えるツールだと感じました。

できることは思っていたより幅広くて、

・Webページを作る

・コードのエラーを修正する

・デザインを調整する

・アプリのようなものを作る

・既存のファイルを読み込んで修正する

そして今回のように、動画制作の土台を作ることもできます。

ChatGPTが「一緒に考えてくれる相手」だとしたら、Codexは「実際にファイルを触りながら作業を進めてくれる相手」に近い感覚です。

今回やったこと


今回試したのは、CodexとHyperFramesを組み合わせて、HTMLベースの商品紹介動画を作るという方法です。

AI動画というと、RunwayやKling、Soraのように、プロンプトを入れて映像そのものを生成するものをイメージする人が多いと思います。

でも今回やったのは、少し違います。

HTMLやCSSで画面を作り、それを動画として書き出す。

つまり、Webページを作るような感覚で、縦型ショート動画や商品紹介動画を作る方法です。

最初は正直、難しそうだなと思っていました。

Codex、HyperFrames、HTMLベースの動画。

この言葉だけ見ると、コードがわからないと無理そうに感じます。

でも実際にやってみると、思っていたよりずっと簡単でした。

今回作った動画


今回作ったのは、自分が展開しているミドル世代向けスキンケアブランド「肌とと」の縦型商品紹介動画です。

構成はこんな感じです。

冒頭で「肌とと」のロゴを表示

洗顔シーン、洗顔石鹸、パーフェクトジェル、スクワランオイルを順番に紹介

最後に「洗う。うるおす。守る。」というブランドメッセージで締める

音楽や効果音は、あとから編集ソフトで追加しています。

CodexとHyperFramesで作ったのは、あくまで動画の土台になる部分です。

具体的には、

・構成と流れ

・テキストの配置

・画像の見せ方

・背景のデザイン

・動きのタイミング

このあたりをCodexに手伝ってもらいました。

実際の動画はこちら↓

きっかけはYouTubeの解説動画


今回試してみようと思ったのは、YouTubeでCodexとHyperFramesの使い方を紹介している動画を見たことがきっかけです。

その動画を見たとき、

「これ、商品紹介動画に使えるんじゃないか?」

とすぐに思いました。

AI動画というと、どうしても派手な映像生成に目が行きがちです。

でも実際に仕事や発信で使いやすいのは、意外とこういう動画です。

・商品紹介動画

・サービス紹介動画

・セミナー告知動画

・SNS用のショート動画

・スライド風の解説動画

毎回ゼロから動画編集するのではなく、まずテンプレートを作って、あとは中身を差し替えていく。

この流れができると、発信のスピードがかなり変わります。

実際の手順

今回の流れをざっくり説明すると、こんな感じです。

① Codexを使える状態にする

② HyperFramesで動画を作れる環境を用意する

③ Codexに作りたい動画の内容を伝える

今回はこんな感じで伝えました。

「肌ととの商品紹介動画を作りたい」
「縦型9:16で作りたい」
「ミドル世代の男性向けの落ち着いた雰囲気にしたい」
「洗顔石鹸、ジェル、オイルを順番に紹介したい」
「最後にブランドメッセージを入れたい」

そして、公式サイトのリンクを貼り付けました。
これだけでCodexがHTMLとCSSを組み立ててくれます。

もちろん、最初から完璧ではありません。

文字が少し小さかったり、画像の位置が気になったり、背景の雰囲気を変えたくなったりします。

でも、その修正も思ったより簡単でした。

「タイトルをもう少し大きくして」
「商品画像を中央に大きく見せて」
「背景をもう少し明るくして」
「最後のメッセージをもっと印象的にして」

こう伝えるだけで、Codexがコードを修正してくれます。

自分でコードを書き換えるというより、気になるところを言葉で伝えて直していく感覚。

これがかなり大きいポイントです。

やってみて感じたこと

一番の感想は、やっぱりこれです。

思っていたより、ずっと簡単だった。

もちろん、まったく何もわからずに一発で完成するわけではありません。

環境の準備で少し戸惑う部分もあります。書き出しの流れを理解する必要もあります。デザインの調整も必要です。

でも、動画編集ソフトを開いて、画像を並べて、文字を置いて、アニメーションをつけて、細かく調整していく作業と比べると、体感でかなり楽でした。

特によかったのは、修正のしやすさです。

普通の動画編集だと、文字のサイズを変えたり、背景を変えたりするだけでも地味に手間がかかります。

でもCodexなら、

「もう少し高級感を出して」「もっとシンプルにして」「余白を広げて」

こういう感覚的な言葉でも、ある程度形にしてくれます。

大事なのは、コードより「言葉にする力」

今回やってみて強く感じたのは、AI動画制作に必要なのはコードを書く力だけではないということです。

むしろ大事なのは、

誰に見せる動画なのか

何を伝えたいのか

どんな印象を残したいのか

どの商品を、どんな順番で見せるのか

どこを一番目立たせたいのか

これを言葉にする力だと思いました。

今回の「肌とと」の動画であれば、ただ商品を並べるだけでは意味がありません。

ミドル世代の男性に向けたスキンケアブランドであること。乾燥や肌の悩みに寄り添う商品であること。「洗う、うるおす、守る」という流れがあること。

こういう部分をちゃんと整理しておくと、Codexへの指示も出しやすくなります。

逆に、ここが曖昧だと、できあがる動画も曖昧になります。

AIに任せる部分が増えても、最初の設計は人間側にある。

これは、実際にやってみてかなり実感しました。

HyperFramesが向いている動画

HyperFramesは、何でもできる万能ツールというより、向いている動画がはっきりしているツールだと感じました。

特に相性がいいのは、こういう動画です。

向いている動画

・商品紹介
・サービス紹介動画
・セミナー・講座の告知動画
・SNS用ショート動画
・スライド風の解説動画
・キャンペーン告知動画

向いていない動画

・動画人物が自然に動く映像
・映画のようなリアルな映像
・風景や自然の映像
・ドラマ・ストーリー系の映像

人物が自然に歩いたり、映画のような映像を作ったりするなら、RunwayやKlingのような生成AI動画ツールの方が向いています。

HyperFramesは、どちらかというと「デザインされた画面を動画にするツール」というイメージです。

だから、商品紹介やニュース動画との相性がいい。

特に、同じ形式で何本も作る動画には、かなり使いやすいと思いました。

毎日のニュース動画、毎週の商品紹介、SNS用の告知動画。一度テンプレートを作ってしまえば、あとは中身を差し替えていけます。

音はあとから入れた


今回の動画では、音はあとから編集ソフトで追加しました。

ここも大事なポイントだと思います。

CodexとHyperFramesだけで、最初から最後まで全部を完結させようとしなくていい。

まず映像の土台を作る。そのあとでBGMや効果音、ナレーションを編集ソフトで入れる。

この流れの方が、今の段階ではかなり現実的です。

特に商品紹介動画では、音の印象はかなり大きいです。

落ち着いたブランドなら落ち着いたBGM。高級感を出したいなら余白のある音。

映像と音を分けて考えることで、仕上がりの自由度も上がります。

AI動画制作は、もう「一部の人のもの」じゃない

今回やってみて、AI動画制作のハードルはかなり下がっていると感じました。

少し前なら、商品紹介動画を作るには動画編集ソフトの使い方を覚える必要がありました。

画像を並べて、文字を入れて、動きをつけて、タイミングを合わせて、書き出す。

ひとつひとつは小さな作業でも、慣れていない人にはかなり大変です。

でも今は、その最初の土台作りをAIにかなり任せられるようになっています。

これは、個人事業主や小さなブランドにとって、かなり大きい変化だと思います。

新商品を紹介したい。SNSで告知したい。サービス内容を動画にしたい。

こういうとき、毎回外注しなくても、まず自分で形にできる。

もちろん、プロに頼む価値がなくなるわけではありません。

ただ、最初の一歩を自分で作れるようになるだけで、発信のスピードはかなり変わります。

まとめ


CodexとHyperFramesを使ったHTMLベースの動画制作は、思っていたよりずっと簡単でした。

最初は難しそうに見えましたが、実際にやるべきことはシンプルです。

・何を伝えたいのかを決める
・誰に届けたいのかを決める
・どんな雰囲気にしたいのかを伝える
・気になるところを言葉で修正していく

これだけでも、商品紹介動画の土台は十分作れます。

今回の「肌とと」の動画も、最初から完璧を目指したわけではありません。

まず作ってみる。気になるところを直す。音をあとから入れる。使える形に近づける。

この流れで十分でした。

AI動画は、もう一部の詳しい人だけのものではなくなっています。

大事なのは、ツールを完璧に使いこなすことよりも、何を伝えたいのかを自分の言葉で持っていること。

そこさえあれば、動画制作はかなり身近になります。

今回の経験をきっかけに、商品紹介動画だけでなく、ニュース動画、講座の告知動画、SNS用のショート動画にもどんどん活用していきたいと思っています。

AI動画、やっぱり面白いです。
AI動画に興味はあるけど、なにから始めたらいいかわからない方はお気軽にお声がけください。相談だけでも大歓迎です!

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら