開発ブログ

撮影スタッフなしで2週間に動画21本?:ゲームをウェブで作ったおかげです

· windy85

ゲームが完成しても、1人で開発していると、もうひとつ大きな山が残っています。マーケティング動画です。

「ゲームはできた。でも、広告動画は誰が作るの?🙏」

しかも1本では終わりません。ストアに載せるメイン動画、広告用の縦型と横型、さらに言語ごとに別々。必要な本数はあっという間に増えていきます。

にゃんこパイロットも、同じ悩みからのスタートでした。撮影監督も、編集者もいませんでした。

それでも10月8日からの2週間で、マーケティング動画21本と広告画像15枚を作りました。

  • メインの30秒動画を3言語で(4K)
  • 縦型広告5本と、その横型版5本
  • 英語広告8本

今とほぼ同じ形の下書きは、1日で仕上がりました。

秘密はひとつだけです。にゃんこパイロットは、Chromeの中で動くウェブゲームです。だからChromeがそのまま撮影スタジオになりました。

画面録画でも、AIが作った動画でもありません。本物のゲームに台本どおり「演技」させて撮りました。

今回は、ウェブゲームだからできた撮り方と、思ったより手間がかかったところまで、正直にまとめてみます。

1. 私は言葉で注文し、AIがゲームに演技させました

動画づくりは、ほとんどAI(Claude)との会話で進めました。私がしたのは、ほしい場面を伝えて、結果を見て直してもらうことだけです。

流れはこうです。

  1. 場面を言葉で注文します。 「48匹の編隊が飛び立って、モチのとどめでボスが倒れる瞬間を音楽のビートに合わせて」のように。
  2. AIが台本を書いて、ゲームに演技させます。 誰が出るか、いつ必殺技を使うか、ボスがいつ倒れるか、カメラをどこに置くかを台本(コード)に書けば、ゲームがそのとおりに演技します。人はプレイしません。
  3. AIが撮影と編集までします。 字幕・ロゴ・数字をゲームのフォントで重ね、音楽と合わせて動画ファイルにしてくれます。
  4. 私は見て、直してもらいます。 「ボスが少し遅れて倒れる」「字幕をもっと大きく」のように伝えれば、もう一度プレイしなくても、台本を直して撮り直してくれます。

広告に出てくる人(ねこ耳帽子の大学生)は別のAIのHiggsfieldで作りましたが、これもClaudeが担当しました。必要な場面をグリーンバック(クロマキー)でHiggsfieldに頼んで動画を作り、ゲーム画面と同じように1フレームずつに分けてから、ゲームの映像にフレーム単位でぴったり合成しました。最後に声もフレーム単位で入れて、音と映像がずれないようにしました。

ゲーム画面は、すべて本物のゲームが描いたそのままです。

AIが動画を描いたのではなく、AIと書いた台本どおりに、本物のゲームが演技したのです。

2. ウェブゲームだからよかったこと

インパクトをフレーム単位で合わせられます

録画した中からいい場面を探すのではありません。ほしい場面を、ほしいタイミングで起こすのです。

48匹のねこの編隊を空に飛ばし、モチがとどめの一撃を放つ瞬間にボスが倒れるようにして、必殺技がさく裂する瞬間を音楽のビート(172bpm)に合わせました。1枚ずつ撮っているので、このタイミングをフレーム単位でぴったり合わせられます。

プレイしながらこのタイミングを合わせようとしたら、何度もやり直すことになったはずです。台本に書いておけば、ゲームがそのとおりに動いてくれます。

本物の戦闘を台本どおりに動かしているので、描き足したニセの場面はひとつもありません。アプリも同じウェブのコードを包んだものなので、動画の中の画面が、そのままスマホで見る画面です。

カクつきが動画に残りません

撮影は1秒に5枚ほどと、ゆっくり進みます。それでも完成した動画には、1秒60枚が1枚も欠けずに入ります。1枚ずつ撮っているからです。

ドット絵は2倍、3倍のようにぴったりの倍率で拡大して、4K(3840×2160)にしました。もしスマホの画面を録画していたら、スマホが熱くなってカクつく様子まで一緒に撮れていたはずです。

言語はURLの1行で変わります

同じ台本を、URLの最後に ?lang=en や ?lang=ja をつけてもう一度回します。すると字幕だけでなく、ゲームの中の文字までその国の言葉になります。連続回数、必殺技の名前、ボスのセリフまで。

Chromeを3つ立ち上げて3言語を一度に撮り、1回の撮影は35分ほどでした。

メイン動画の同じ場面の韓国語・英語・日本語版
同じ場面を3つの言語で。上は最初の1秒の一斉射撃、下はラストのVIPチケットです。

画面比率はウィンドウのサイズを変えるだけ

画像広告には、1.91:1、1:1、4:5の3つの比率が必要でした。

ふつうは1枚作ってから切り抜いて合わせます。私は比率ごとに戦場の幅を変えて、まるごと別々に撮りました。だから黒い帯も、無理に切った跡もありません。5場面×3比率で、合わせて15枚です。

モチの必殺技の場面を3つの比率で撮った画像広告
モチの必殺技のひと場面を3つの比率で。左から1.91:1・1:1・4:5。

撮った画面はずっと素材になります

同じ撮影分から、縦型(9:16)と横型(16:9)の広告を別々に作れます。これが思った以上に役立ちました。

10月21日、広告初日の結果です。

  • 📈 横型動画1本:92回表示
  • 📉 縦型広告:1本あたり1〜8回表示

横型動画の圧勝でした。そこでその日のうちに横型版を5本作ってアップしました。撮り直しはなし、撮ってあった画面だけでです。

A編の同じ瞬間の縦型版と横型版
A編「負けからの逆転」の同じ瞬間。人はAI、ゲーム画面は実際の撮影分です。

ゲームが変わっても大丈夫です。ボスの絵を描き直したのに、メイン動画には古いボスが残っていました。10月21日に同じ台本で回し直して、新しい絵に入れ替えました。ストアのスクリーンショットも、10月20日に10言語まとめて撮り直しました。

いつも同じセーブデータから始めるので、何回撮っても同じ場面になります。

おまけに、開発にも使っています。ひとつの場面を直す前と直したあとで2回撮って上下に並べれば、性能や絵を変えたときに何が変わったか、ひと目でわかります。

3. もちろん、タダではありませんでした

ここまでだと簡単そうに見えますが、正直なところ、手間がかかった部分もたくさんありました。

  • 最初の4回は捨てました。 攻撃を受けたねこが点滅する処理のせいで47匹がまるごと見えない動画になったり、ボスが台本より先に倒れたりしました。
  • 1回撮るのに30分以上かかります。 そのかわり、人がそばについている必要はありません。
  • 人の顔と声は、ウェブでは作れません。 そのため、AI動画のクレジットを別に使いました。

それでも今は、動画1本を直すのに必要なのは、台本の数行と待ち時間だけです。

1人のチームにとって、これは本当に大きいです。

4. 自分でも試してみたいなら

ウェブで動くゲームで、Claude CodeのようなAIコーディングツールを使っているなら、同じようなことを試せます。

  1. Claude Codeでゲームのプロジェクトを開きます。
  2. この記事を読ませてやり方を理解させ、撮影モードを作ってもらいます。
  3. 撮りたい場面を注文します。
  4. タイミングがずれたら指摘して、撮り直してもらいます。

たとえば、こんなふうに頼めます。

この記事(https://geckogamestudio.com/ja/blog/marketing-videos)を読んで、やり方を理解して。うちのゲームでも同じやり方(録画ではなく、ゲームを1フレームずつ進めながら撮る撮影モード)で動画を撮れるようにして。

うちのゲームでいちばん派手な技で、ピンチを一気にひっくり返す5秒のハイライトを作って。スローモーションやカメラのズーム・揺れなどのカメラワークを総動員して、手応えたっぷりで迫力のある感じに。BGMはうちのゲームの曲を使って、曲の盛り上がりにぴったり合わせてその技がさく裂するように。録画しないで1フレームずつ進めて60fpsで撮って、撮り終わったら動画ファイルと撮り方を報告して。

最初の1〜2回は、タイミングが少しずれるかもしれません。そんなときは「技がビートより0.2秒遅れて出る」「スローモーションをもう少し長く」のように伝えてください。もう一度プレイしなくても、台本を直して撮り直してくれます。

動画まとめ

これからは広告のデータを見ながら、今回見つけたやり方で対応を続けていくつもりです。

下は広告動画のリンクです。(広告は韓国語版です。)

動画長さリンク
メイン動画 韓国語(4K)31秒見る
メイン動画 英語(4K)31秒見る
メイン動画 日本語(4K)31秒見る
A編「負けからの逆転」18秒縦型 · 横型
カップル編「もどかしいから私がやる」25秒縦型 · 横型
F編「Lv.1 → Lv.100」24秒縦型 · 横型
H編「寝る前に1回だけ」20秒縦型 · 横型
G編 レビュー「45秒まとめ」53秒縦型 · 横型

← 記事の一覧