アニメ K-04AI制作での運用

字幕ファイル（WebVTT）の作り方

別名: WebVTT、.vtt、字幕トラック

W3C の WebVTT 形式で、字幕の時刻・位置・話者を書いたテキストファイルを作り、Web の動画に重ねて表示する。

どういう技法か

WebVTT は、Web の動画に字幕などを付けるための W3C の形式である。ファイルは UTF-8 のテキストで、先頭に WEBVTT と書き、字幕ごとに「開始時刻 --> 終了時刻」と本文を並べる。時刻の後に line・position・align・size などの設定を書くと表示位置を変えられ、本文に <v 話者名> のタグを付けると話者を示せる。NOTE で始まる行は表示されないコメントになる。HTML の <track kind="subtitles" srclang="ja"> で動画に読み込む。

なぜ効くのか

字幕を映像に焼き込まず別ファイルにすると、閲覧者が表示・非表示を選べ、文字の大きさも端末の設定で変えられるため、アクセシビリティが高まる。文字を後から直すときも映像を作り直す必要がない。話者タグや位置の設定を使うと、誰の台詞かが分かりやすくなり、顔や重要な絵を字幕で隠すことも避けられる。字幕を他の言語に差し替えることも容易になる。

やり方

  1. ファイルを UTF-8 で作り、1行目に WEBVTT と書く
  2. 字幕ごとに空行で区切り、「00:00:01.000 --> 00:00:03.500」の形で時刻を書く
  3. 本文は1行13字前後、2行以内に収めて読みやすくする
  4. 話者は <v 名前> で示し、必要なら CSS の ::cue で色を変える
  5. 顔が下にあるカットでは line の設定で字幕を上に移す
  6. <track> で読み込み、実際のブラウザで表示を確認する

使いどころ

Web で公開する動画すべて。多言語の字幕を用意する場合も、言語ごとにファイルを分けて使える。字幕を映像に焼き込まないことで、後からの誤字修正や表現の見直しにも素早く対応できる。

やりすぎ・失敗

時刻の書式を間違える（ミリ秒の区切りにカンマを使うなど）と表示されない。字幕同士の時刻が重なると、二つ同時に出て読みにくい。空行を二つ続けると区切りが崩れる。UTF-8以外の文字コードで保存すると文字化けする。

AIアニメでの使い方

fantasist.org では、build_motion_comic.py が台本の時刻から WebVTT を書き出す。読み上げ台本（narration.ja.json）と字幕の時刻を同じ元データから作ると、ずれが生じない。語りと台詞は <v 語り> などの話者タグで分け、ページの CSS で語りだけ色や斜体を変える。完成後は、字幕だけを見て物語が分かるかを確認する。

この技法を使ったAIアニメ

出典

#AI制作#字幕#技術

関連する技法