こんにちは、株式会社GitSBTの代表をしているOmatsuです。
早速ですが、こちらの動画をご覧ください。
どうですか？我ながらいいプロモーションビデオだと思っています！
これ、ほとんど AIを使ってプロンプトを指示しただけで、動画編集スキルがない私でも3日程度で作れました。 3日といっても1日3~4時間程度で合計10~15時間程度あれば皆さんも作れると思います。
今回は私がこの動画制作で利用したツールやプロンプト例などをご紹介し、個人開発している方やこれからプロダクトを作ろうとしている方がプロダクトのマーケティングやブランディングに役立つ情報が発信できたらと思っております。
それでは本題に入っていきましょう。
1. なぜプロモーションビデオを作ったのか？
私は個人で会社を経営しており、冒頭のプロモーションビデオの中でもご紹介しておりますがWaylumeというプロダクトを販売しております。 WaylumeはPCを日常業務や作業で使う人が感じるPC操作を迷う無駄な時間を、AIがリアルタイムにその操作をナビゲーションすることで削減するサービスです。Chrome拡張機能でほぼ全てのサイトでこの拡張機能が利用可能です。
詳しいことは こちらのQiita記事をご覧ください。
このWaylumeのユーザー数を拡大させるにあたり、プロモーション活動をしていく必要がありました。
これまではXでサービスリリースする際に、サービスの利用イメージを持ってもらうために以下のような操作シーンの動画を載せていました。
しかし、こちらは操作イメージを持ってもらうためだけで、プロモーションビデオとは呼びません。ここ最近ではAIによりプロダクト開発が加速し、Xでも毎日たくさんのリリース情報が流れてきます。
その中でも目に飛び込んでくるのは、 プロモーションビデオが作成されているもの は自然と目を引きますし、 プロダクトがよりカッコよく映る ものです。（もちろんプロダクトが素晴らしいのですが。）
そこで、私もかっこいいプロモーションビデオを公開し、動画として操作イメージを持ってもらいつつWaylumeの認知拡大ができたらと思い作成に至りました。
しかし、私には動画編集スキルは一切ありません。
過去に何度か、Waylumeの開発をしている最中にもプロモーションビデオを作成しようと検討したことはあるのですが、動画編集ソフトを調べるほどに、多少なり動画編集のスキルが必要だと感じ、一人で開発中の私にとってはかなり工数をとってしまうため、プロモーションビデオの作成は後回しにしていました。
そんな中、たまたまXの投稿でAnthoropicのサービスローンチ動画がRemotionというサービスによって作られているという投稿を見つけました。記事の一番下に投稿の元となった紹介動画を参考として載せておきます。
Remotionとはなんぞや
ということで調べてみると、 React（JavaScript/TypeScript）を使って動画をプログラムで作成・生成するオープンソースのフレームワーク のようで、Claude codeやCodexと組み合わせてプロンプトで指示していくことで動画が作成できるとこのことです。
これなら私も動画編集スキルを身につけずともできるかもしれない・・!!
そう思い早速インストールして試した結果、冒頭のビデオが作成できました。
2. 環境&完成までにかかった時間
先に、制作までにかかった時間やしようツールについてまとめておきます。
- 制作にかかった時間の内訳
- 素材作成(1時間)
- プロンプト指示による動画作成（約7~8時間）
- 音楽生成（1時間）
- 音楽とビデオの結合（1時間）
- 使用した主要ツール一覧
- Remotion（無料動画編集ソフト）
- Codex（ChatGPT Plus課金。Claude codeでも可。）
- 音声・BGM（Mureka：$9。Sunoでも可。）
- Canva（動画と音声を結合：無料版）
3. 制作過程
Step0：Remotionのプロジェクト環境を作る
以下のコマンドを配置したいディレクトリ配下で打ち込むとプロジェクトが作成されます。
他詳しい設定は公式ドキュメント（ https://www.remotion.dev/docs/ ）をご参照ください。
npx create-video@latest
npm i
npx remotion skills add
npm run dev
Step1：参考にするプロモーション動画を見つける。
動画編集未経験であれば、どのように動画を構成して作ればいいかわからない方も多いかと思います。私もそうです。
そこであなたが作成したいプロモーションビデオに近いイメージのプロモーションビデオを探してください。
私はXで以前からかっこいいプロモーションビデオだなと思っていたこちらの動画を参考にしました。
Step2：利用する素材を集める
以下最低限素材を集めることをお勧めします。
ロゴ：会社のロゴあるいはサービスロゴ
サービス利用イメージ（1枚~複数枚）：私は利用イメージのシーンを1枚添えて、他のシーンは全て1枚の写真の上にアニメーションで上書きさせました。利用イメージの画像を複数扱う場合はシーンの切り替えの際にプロンプトの工夫が必要になりそうだったため、私は利用イメージ1枚にしました。
Step3：Codexへの動画編集指示（例）
当時のプロンプトそのままではありませんが、以下のようなイメージで指示を出して作成しています。
動画の初めの方でロゴが拡大されて次のシーンへと移り変わる場面の作成過程です。
次のシーンへの切り替えとしてロゴをどんどん拡大させ、次のシーンに切り替えて。
その際、ロゴの拡大スピードは加速度的に速くして。
実際RemotionとCodexを使用していく中で以下の点を意識すると自分のイメージに近いアニメーションが作成できました。
- 必ず参考画像（現状のスクショ or 完成イメージ）を添付する
テキストだけで「もっとかっこよく」と言っても伝わりません。Before/Afterや参考画像があるとAIは理解してくれます。 - 専門用語を使わず、見せたい印象を日常語で伝える
「キーフレーム」みたいな用語は知らなくてOK。「ふわっと出てきて」「シュッと消える」などで十分です。 - 1発で決まらないのが普通。言い換えて何度も指示する
「拡大」が伝わらなければ「フォーカス」、それでもダメなら「カメラがズームインしていくように」と言葉を変えま
す。やってほしくないことを明示するのも効きます。
それから、参考にした動画内で1単語ずつ出現しテンポよく切り替わるシーンがあるのですが、そういった部分も参考にしてプロンプト指示を出してアニメーションを作っていきました。
満足のいくアニメーションができたらRemotionで作成したアニメーションをmp4へと書き出しましょう。以下コマンドでMP4ファイルが書き出せます。
npm run build
npm run render
Step4：動画イメージに合う音楽を作成する
これは何度もプロンプトを調整しながら自分の中でピンとくる音楽が生成されるまで挑戦しました。
最終的にはMurekaで作成したものを採用しておりますが、途中GeminiやChatGPTでも挑戦しておりました。
以下プロンプト例になります。
プロンプトでは自分の作りたい曲のイメージが出力できるように音の高さやテンポを指定しました。また考慮されるのかは分かりませんが、プロモーションビデオを作成するための文脈もプロンプトに入れました。
ITサービスのプロモーションビデオに合う音楽を作成したい。43秒の曲です。勢いのあるテンポで低音を多く使ってほしい。
この時SunoやMurekaでInstrumentalのボタンがあればONにしてください。これは歌詞を入れるか入れないかの設定でONにしていれば歌詞なしの音楽が作成されます。
Step5：Canvaで動画と音楽を結合する
Canvaの動画編集機能を使い、アップロードした動画と音楽を結合させました。 この時にアニメーションの動きと音楽のテンポが一致するとよりプロモーションビデオっぽくなるのですが、私は音楽の速度をここで微調整しました。また、動画内に映る著作物や個人情報などはここで図形を挿入することで隠しました。
そして最後結合したものを確認し、大丈夫そうならmp4ファイルとして書き出します。
以上が作成過程になります。
4.作ってみて分かったこと・効果
今回Remotion+Codexをベースにプロモーションビデオ作りましたが、合計10時間程度あれば動画編集未経験者でもある程度のものが作れる時代になったと感じました。
特に個人開発者は動画制作を外注するにもお金がかかるので、できる限り出費を抑えたいところだと思います。そんな中今回のRemotionやMurekaは個人開発者にとって非常にお勧めしたいツールです。
そして、Remotionでできるアニメーションの幅はまだまだありそうなので、今後もWaylumeのプロモーションとして活用していこうと思います。
皆様もRemotionを使ってみて新しい使い方がわかったらぜひ教えてください。
5. 最後に
今回、動画編集未経験でもプロモーションビデオが作れることを記事にしましたが、今後も個人開発者やスタートアップの起業家に役立つ情報があれば発信していきたいと思います。
個人で会社を経営していると、孤独に感じる場面も多いですが、プロダクトを作っている方・これから挑戦しようとしている方・AIに興味のある方と、少しずつでも世の中に良いものを届けていけたら嬉しいです。一緒に頑張っていきましょう！
もしよければ Waylumeも触ってみていただけると嬉しいです。フィードバック大歓迎です。最新情報はX(@waylumeai) や公式サイト で発信しています。