個人開発の紹介動画をAIで作るときに気をつけたいこと — C Dance AIでの3つの使い分け

※筆者は C Dance AI の運営に関わっています。本記事では製品の宣伝よりも、個人開発のデモ動画を作るときに再利用しやすい手順と、失敗しやすいポイントを中心にまとめます。

個人開発のサービスを公開するとき、文章とスクリーンショットだけでは動きが伝わりにくいことがあります。

とはいえ、数秒の紹介映像を作るために撮影環境を用意し、After Effects や Premiere Pro を開くのは少し重い。そこで最近は、AI動画生成を「完成動画を丸ごと作る道具」ではなく、紹介動画に使う短い素材を作る道具として使っています。

この記事では、C Dance AI 上で使える Seedance 2.0 などのモデルを例に、個人開発で扱いやすい3つの作り方を整理します。後半では、生成した動画をLPへ組み込む際の実装例も紹介します。

先に結論

実用上は、次のように使い分けると迷いにくくなります。

作りたいもの	入力	向いている方法
LPの背景や短い雰囲気映像	テキスト	Text to Video
キービジュアルに少しだけ動きを付ける	画像	Image to Video
既存素材の雰囲気を変える	動画	Video to Video

大事なのは、AIにUIそのものを正確に描かせようとしないことです。文字やボタンは崩れやすいため、AIで作るのは背景やカット素材までにして、実際の画面収録やテロップは後から重ねる方が安定します。

1. Text to Video：LPの背景素材を作る

まずは、テキストだけで短い背景映像を作る方法です。

たとえばAIサービスのLPに置く、暗めの抽象的な映像を想定します。

A minimal cinematic workspace at night,
soft blue light moving across a clean desk,
subtle reflections, slow camera push-in,
no people, no text, no logos,
calm motion, dark background, 16:9

ここで意識しているのは、次の3点です。

• no text, no logos を入れて、読めない文字が勝手に出るのを避ける
• slow camera push-in のように、カメラの動きを1つに絞る
• 背景として使うので、主張の強い人物や物体を置かない

プロンプトに形容詞を詰め込みすぎるより、「何があるか」「どう動くか」「何を出さないか」を短く書いた方が調整しやすくなります。

生成した動画は、そのままヒーロー動画にするのではなく、暗いオーバーレイを重ね、その上にHTMLの見出しやCTAを置く使い方が安全です。テキストを動画に焼き込まないので、レスポンシブ対応や文言修正も楽になります。

C Dance AI 日本語版の入力画面。Seedance、Veo、Kling、Wan などを用途に応じて選べます。

2. Image to Video：静止画の構図を保ったまま動かす

製品のキービジュアルやOGP画像がすでにある場合は、画像から動画を作る方が狙った構図を保ちやすくなります。

たとえば、プロダクトの世界観を表す1枚絵に、光とカメラの動きだけを追加します。

Keep the original composition.
Add only subtle ambient light movement and a very slow camera push-in.
Do not add new objects.
Do not change the layout or any visible text.

ポイントは、動かしたい内容より先に「変えてほしくない内容」を明示することです。

ただし、スクリーンショット内の細かい文字まで完全に保たれるとは限りません。UIを見せる必要がある場合は、次の構成に分けています。

1. 実際のブラウザ画面を画面収録する
2. AIで作った短い映像を導入や場面転換に使う
3. 最後にロゴ、URL、CTAを編集ソフト側で重ねる

この分け方なら、AI特有の文字崩れを避けつつ、動画全体が静かすぎる問題も解消できます。

公開されているユースケースを眺めると、被写体や画風ごとの違いを掴みやすくなります。

3. Video to Video：既存のデモ素材に別の表情を付ける

すでに動画素材があるなら、ゼロから生成するより、既存動画を元にスタイルを調整する方が効率的な場合があります。

たとえば、同じ動きの素材からイベント告知用の別バージョンを作るケースです。

Preserve the timing and camera movement of the source video.
Change the visual style to a clean futuristic product film.
Use restrained blue and violet lighting.
Keep the scene readable and avoid excessive effects.

ここでも、preserve と avoid が重要です。単に「cinematic」「futuristic」と書くだけだと、動きや構図まで大きく変わることがあります。

なお、入力動画が長いほど一度に確認する要素が増えます。最初は4〜8秒程度の短いカットで方向性を決め、良かった設定を別カットへ広げる方が、やり直しを抑えやすいです。

生成した動画をLPへ載せるときの実装

動画が完成しても、そのまま大きなMP4をLPに置くと、最初の表示が重くなります。また、自動再生を前提にすると、ブラウザのポリシーやユーザーのアクセシビリティ設定も考える必要があります。

ヒーロー背景として使うなら、次のような構成から始めると扱いやすいです。

<div class="hero-media">
  <img
    class="hero-poster"
    src="/demo/poster.webp"
    width="1280"
    height="720"
    alt="プロダクトの紹介画面"
  />

  <video
    id="hero-video"
    muted
    loop
    playsinline
    preload="metadata"
    poster="/demo/poster.webp"
    aria-hidden="true"
  >
    <source src="/demo/hero.webm" type="video/webm" />
    <source src="/demo/hero.mp4" type="video/mp4" />
  </video>
</div>

.hero-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0b0d12;
}

.hero-media video,
.hero-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-poster {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video {
    display: none;
  }

  .hero-poster {
    display: block;
  }
}

const video = document.querySelector("#hero-video");
const reduceMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
);

if (!reduceMotion.matches) {
  video?.play().catch(() => {
    // 自動再生できない環境では poster をそのまま表示する
  });
}

muted と playsinline は、音を出さずページ内で再生するための基本設定です。poster を用意しておけば、動画を再生できない場合や読み込み中でも空白になりません。preload="metadata" は先読みを抑えるためのヒントとして使えます。

また、prefers-reduced-motion が有効な環境では、動画を動かさず静止画へ切り替えています。背景動画は内容理解に必須ではない装飾として扱い、見出しやCTAは必ずHTML側に置きます。

配信前に動画を軽くする

書き出した動画は、LPに置く前に音声トラックを外し、Web配信用に圧縮します。FFmpegを使う場合の一例です。

ffmpeg -i input.mp4 \
  -an \
  -c:v libx264 \
  -crf 24 \
  -preset slow \
  -pix_fmt yuv420p \
  -movflags +faststart \
  hero.mp4

-an は不要な音声の削除、-movflags +faststart は再生に必要な情報をファイル先頭側へ移す指定です。画質とファイルサイズは素材によって変わるので、crf は22〜28程度を目安に見比べます。

公開前には、少なくとも次を確認します。

• モバイル回線でも最初の画面が動画待ちにならないか
• poster と動画の最初のフレームが大きくずれていないか
• ループの切れ目で画面が跳ねないか
• 動画が止まっていても、見出しとCTAの意味が通じるか
• prefers-reduced-motion 有効時に静止画へ切り替わるか

複数モデルを使うときの考え方

C Dance AI には Seedance、Veo、Kling、Wan など複数のモデルが用意されています。便利ではありますが、毎回すべてを比較する必要はありません。

私の場合は、まず次の順番で絞ります。

1. テキスト、画像、動画のどれを入力にするか決める
2. 尺、縦横比、音声の要否を決める
3. 対応するモデルを1つ選び、短い設定で試す
4. 結果に明確な不満があるときだけ別モデルと比較する

モデル名から選び始めると、設定画面を往復する時間が増えがちです。先に用途を決めた方が、生成結果も比較しやすくなります。

実際に困りやすいところ

生成には待ち時間がある

動画生成は即時ではありません。混雑状況や選んだモデル、尺、解像度によっては数分待つことがあります。画面収録のようにその場で何度も撮り直す作業とは、時間の使い方が少し違います。

1本の結果を待ちながらプロンプトを何度も変えるより、最初に2〜3案をメモしてから順番に試す方が作業しやすくなります。

クレジット消費は設定で変わる

動画の長さ、解像度、モデル、参照素材などによって必要なクレジットは変わります。最初から高解像度・長尺で試すより、短い動画で方向性を確認してから本番設定に上げる方が無駄が少なくなります。

C Dance AI には月額・年額プランのほか、買い切りクレジットの選択肢もあります。毎月使うとは限らない個人開発では、利用頻度に合わせて選べるのは助かります。なお、価格やクレジットの有効期限は変更される可能性があるため、利用前に料金ページで確認してください。

1回で完成させようとしない

AI動画生成では、プロンプトを長くすれば正確になるとは限りません。

最初は次の4項目だけで十分です。

Subject: 何を映すか
Motion: 被写体やカメラをどう動かすか
Mood: 光、色、雰囲気
Avoid: 出したくないもの

結果を見てから1項目ずつ直すと、どの変更が効いたか分かります。

C Dance AIが向いているケース

特に相性が良いのは、次のような用途です。

• 個人開発サービスのLPに置く短い背景動画
• リリース告知用の縦型SNS素材
• 静止画のキービジュアルに少しだけ動きを付けたいとき
• 複数モデルを個別サービスで契約せず、用途ごとに試したいとき

一方で、UIの文字を1px単位で正確に見せるデモや、長い操作説明は画面収録の方が向いています。AI動画だけですべてを済ませるより、画面収録、AI素材、通常の編集を組み合わせる方が現実的です。

まとめ

個人開発の紹介動画は、必ずしも30秒や1分の完成映像を最初から作る必要はありません。

まずは4〜8秒の短い素材を1本作り、LPの背景、SNS投稿、READMEのGIFなど、使う場所を決めてから広げる方が失敗しにくいと思います。

C Dance AI は、テキスト・画像・動画を入口にして複数の生成モデルを試せるため、このような小さな素材作りには使いやすい構成です。興味があれば、登録時のクレジットで短い基本生成から確認できます。

参考

• C Dance AI 日本語ページ
• C Dance AI 料金ページ
• 【脱サブスク】月額課金なし！最新AI「Veo 3」も使える動画生成ツール「Textideo」が個人開発者の救世主すぎた件
• Qiita コミュニティガイドライン
• MDN: <video> 要素
• MDN: prefers-reduced-motion