ウェブエンジニアがショート動画制作、ボイスチェンジャーとRemotion

目次

ボイスチェンジャー

そもそも音声をどのように用意するかという知識がなく、調べてみると以下の方法

  • 方法1)AIが文章を読み上げる音声合成(TTS)
  • 方法2)ボイスチェンジャー

今回は説明する練習をしたかったので、ボイスチェンジャーを試してみます

自分の話すスピードや間の取り方、抑揚を活かしながら、地声とは異なる声で動画を公開できます。

AI音声合成とAIボイスチェンジャーの違い

比較項目AI音声合成(TTS)AIボイスチェンジャー
入力テキスト自分の音声
話す速度・間ソフト側で調整自分の話し方を反映
抑揚AIが生成元の音声を一定程度反映

備忘

インストール

公式サイト https://www.voicemod.net/ から「DOWNLOAD FOR FREE」でダウンロードする(非公式の配布サイトはマルウェアの危険があるので使わない)

他のアプリで使う

アプリのマイク(入力デバイス)を「Voicemod」と名前の付いた仮想マイクに切り替える。

  • Discord — ユーザー設定 → 音声・ビデオ → 入力デバイス
  • Zoom — 設定 → オーディオ → マイク
  • OBS — 音声入力キャプチャのデバイス

変換した声を録音する(QuickTime Player)

  1. Voicemodを起動したまま、使うボイスを選んでおく
  2. QuickTime Playerで「ファイル」→「新規オーディオ収録」を選ぶ
  3. 録音ボタン横の「⌄」から、マイクを「Voicemod」に切り替える(内蔵マイクのままだと地声で録音される)
  4. 録音して停止し、「ファイル」→「保存」で保存する(.m4a)

参考youtube

Remotionまでの制作フロー

Remotionの始め方(Remotion公式)
https://www.remotion.dev/docs

Remotion環境構築

  • 約1分の縦型動画(1080×1920、30fps)を作る
  • ナレーションはQuickTimeで録音し、Voicemodで声を変換した .m4a を使う
  • 字幕はWhisper.cppで自動生成し、台本と照らし合わせて誤字だけ直す方針
  • MacBook Air(M4)
  • Node.js v24.13.1(node -v で確認。v20以上なら問題なし)
  • 個人や3人以下のチームなら無料
npx create-video@latest
  • Ok to proceed? → y(作成ツールを一時的にダウンロードする確認)
  • テンプレート → TikTok
    • 縦型で、単語ごとの字幕アニメーションとWhisper.cppによる書き起こしが入っている
    • 名前はTikTokだが、YouTubeショートやリールにもそのまま使える
  • ディレクトリ名 → デフォルトの my-video を採用(~/dev/personal/my-video)
    • 1つのプロジェクトに複数の動画を入れられるので、汎用的な名前で作り、今後の動画もここに追加していく
    • remotion ちょうどの名前は、Remotion本体のパッケージ名と衝突する恐れがあるので避ける
    • フォルダ名は後からリネームできる
  • Add agent skills → Install all skills
    • AIコーディングツール向けのRemotionガイドが .agents/skills/ に入る。動画そのものには影響しない
  • Open in Cursor? → 好みで選ぶ

この方法では、動画のレイアウトやアニメーションをReact・TypeScriptで実装しながら、技術をわかりやすく説明する練習もできます。

一度動画のテンプレートを作成すれば、次回以降は台本・音声・表示テキストを変更するだけで、同じデザインの動画を制作しやすくなります。

npm run dev でサーバー起動してブラウザで以下の画面が表示

my-video Compositions CaptionedVideo 動画の一覧 (コンポジション) プレビュー (縦 1080×1920) サンプル動画 No caption file found in the public folder. Run node sub.mjs 字幕ファイルが まだ無いという メッセージ Inspector Dimensions 1080 × 1920 Frame rate 30fps Duration 00:11.28 Default Props src: sample-video.mp4 選択中の動画の設定 Render 0s 5s 10s sample-video.mp4 タイムライン(再生位置と素材)

目次