はじめに
個人の動画クリエイターやWeb制作者、教育関係者にとって、字幕は単なるアクセシビリティ対応ではなく、もはや必須機能です。WCAGガイドラインへの準拠、SEO効果の向上、そして無音で視聴するユーザーへの対応など、その理由はさまざま。HTML5動画にタイムコード付きテキストを埋め込むのは今や標準的な実装となっています。そして、その中心にあるのがWebVTT形式（.vttファイル）です。
.vttファイルは、単にテキストファイルの拡張子を変えれば作れるものではありません。HTML5プレイヤーは、必須のWEBVTTヘッダーから、ゼロ埋めされたタイムスタンプ、空行による区切りに至るまで、厳密なフォーマットを要求します。ところが、多くの字幕作成プロセスでは、音声や動画の生データから始まり、その後の整形や変換、そして検証で手間取ってしまいます。そこで本記事では、書き起こしから話者分離、正しいWebVTT形式での書き出しまでを一気通貫で行う流れを紹介し、SkyScribeなどの最新ツールを使えば、どのようにして手作業の煩雑さを取り除けるのかを解説します。
高精度な書き起こしを得るための基礎づくり
書き起こし前の準備が重要な理由
最終的な.vttの品質は、元となる音声や映像の品質に直結します。雑音が多かったり、発話が不明瞭だったりすると、タイムコードがずれたり、キャプションが検証エラーになる原因になります。ノイズ除去、マイク位置の一定化、明瞭な発音といった簡単な事前処理だけで、AIによる書き起こし精度は20〜30％も向上します（Krisp）。
タイムコード付き即時書き起こし
動画をダウンロードして自動生成字幕を手作業で抽出するのではなく、リンクを使った書き起こしから始めるのがおすすめです。YouTubeリンクを貼るか、生音声ファイルを直接アップロードするだけで、即座にタイムコード付き・話者ラベル付きのテキストを出力できるSkyScribeのようなサービスを使えば、字幕抽出や時間情報不足といった作業の停滞を回避できます。WebVTTでは、HH:MM:SS.mmm形式のゼロ埋めタイムコードが必須なので、この精度は非常に重要です。
また、話者分離（ダイアリゼーション）が同時に行えるため、授業動画やインタビューなど、話者の切り替わりが重要なコンテンツでは特に有効です。
VTT用にテキストを整える
ノイズとなるフィラー語の問題
AI書き起こしの生データには、必ずといってよいほど「あー」「えー」「そのー」といったフィラーや、不自然な大文字小文字、句読点の乱れが含まれます。これらを人力で直すと、数分の作業が何時間にも膨れ上がります。視認性の観点でも、余計な言葉は字幕を読みにくくし、理解度を下げる要因になります。
ワンクリックで一括整形
テキストを別のエディタで開いて整形するのではなく、作業フローの中で直接行うのが効率的です。たとえばSkyScribeのエディタでは、自動句読点補正やフィラー削除をワンクリックで適用できるため、即座に読みやすく、cue変換可能な状態になります。WebVTTは、句読点の閉じ忘れや大小文字の不統一といったノイズに非常に厳しく、これらはブラウザ（ChromeやFirefox）の<track>解析エラーの原因になります（PixelFreeStudio）。
WebVTTキューへの再分割
読み物ではなく時間単位のチャンクに
HTML5のキャプションは長文段落では動作せず、時間情報付きのcueを順番に読み込み、空行で区切ります。そこで、整形済みのテキストを、意味を損なわずに字幕サイズで分割し直す必要があります。
長時間の講義や複数人の討論では、手作業でこれを行うのは大変です。バッチ再分割機能（私はSkyScribeの自動再セグメントを利用）を使えば、「1キューあたり2行」や「文単位」などの指定が可能で、全体を数秒で区切り直せます。適切な分割は読みやすさを高め、HTML5再生時の同期精度も担保します。
必須ヘッダーの追加
ファイルの先頭には必ず
```
WEBVTT
```
と記載します。これがないとブラウザはWebVTTとして認識せず、字幕は表示されません。
書き出しとエンコード：ブラウザ互換性を守る
UTF-8（BOMなし）が必須
意外な落とし穴が、BOM付きのUTF-8保存です。2024年以降、ChromeではBOM付き.vttは読み込み拒否されます。テキストエディタや書き出し設定でBOMなしUTF-8を選択しましょう（MDN Accessibility Guide）。
ゼロ埋めされた時間表記
WebVTTのタイムスタンプは固定フォーマットです：
```
00:01:05.000 --> 00:01:10.000
```
以下のような形式はNGです：
```
0:1:5.0 --> 0:1:10.0
```
ゼロ埋めされていないと即座に解析エラーになります。
HTML5動画プレイヤーへの組み込み
正しく検証された.vttであれば、Webページへの埋め込みは簡単です。
```html
<video controls>
<source src="lecture.mp4" type="video/mp4">
<track src="transcript.vtt" kind="subtitles" srclang="en" label="English" default>
</video>
```
注意点：
- サーバーが
Content-Type: text/vttヘッダーを返すこと（Bitmovin） - パスはCDN経由の場合も含めて正しく解決可能なフルパスまたは相対パスにする
- クロスオリジンの字幕は、
<video>タグにcrossorigin="anonymous"を付与する
また、必ず複数ブラウザでテストしてください。Safariではキュー表示に特有の挙動があり、CORS設定がないと字幕が読み込まれないこともあります。
公開前の検証チェックリスト
- ファイル冒頭にWEBVTTヘッダーがある
- タイムスタンプがHH:MM:SS.mmm形式でゼロ埋めされている
- 各cueの間に空行がある
- エンコードはUTF-8（BOMなし）
- サーバーのContent-Typeがtext/vttになっている
- 話者ラベルが発話内容と一致している
- 主要ブラウザで動作確認済み（Chrome、Firefox、Safari）
どれか一つでも欠けると、ブラウザによっては字幕が一部または完全に表示されなくなります。
字幕データを活かしてコンテンツを磨く
字幕は単なる補助機能ではなく、再利用可能なコンテンツ資産です。.vttファイルのデータは、チャプター構成表や検索可能なアーカイブ、ブログ記事の下書きなどへと展開できます。最近では、書き起こしから自動で要約やハイライト動画を作成できるワークフローもあります。また、タイムコードを保ったまま100以上の言語に翻訳することで、新たに.vttを作り直すことなく世界中に発信可能です。私はSkyScribeから書き出したデータをベースに翻訳することで、多言語動画の字幕を統一されたタイミングで提供しています。
まとめ
HTML5向けの.vttファイル作成は、単なる文字起こし作業を超えた、音声品質の確保、正確な話者分離、厳密なフォーマット、そして標準準拠の書き出しが求められるプロセスです。構造化された自動処理やAIによる整形を取り入れることで、SkyScribeのようなツールが、何時間もかかっていた編集作業を数分で完了させ、すべてのcueがブラウザ検証に通る状態を実現します。
正しいWebVTTは単なる技術要件ではなく、アクセシブルで検索可能、そして国際展開にも対応できる動画制作の土台です。独立系クリエイターや教育者にとって、この工程をマスターすることは、コンプライアンス以上に、視聴者の関心と信頼を築く投資なのです。
よくある質問（FAQ）
1. .vttと.srtの違いは？ どちらも字幕形式ですが、WebVTT（.vtt）はHTML5向けでスタイルなどのメタデータも扱えます。SRTは古い形式でシンプルですが、タイムスタンプ仕様がやや異なり、そのままではHTML5対応にならない場合があります。
2. 既存のSRTファイルを.vttに変換できますか？ 可能です。ただし、WEBVTTヘッダー追加、タイムコードのゼロ埋め、ミリ秒のカンマをドットに置換、シーケンス番号の削除といった修正が必要です。
3. Chromeで.vtt字幕が読み込まれない原因は？ よくある原因は、WEBVTTヘッダーの欠落、不正なタイムコード、BOM付きUTF-8、またはサーバーのMIMEタイプがtext/vttでないことです。
4. 話者分離は.vttに必須ですか？ 仕様上は必須ではありませんが、複数人が登場するインタビューや講義では視聴者の理解を助けるため強く推奨されます。
5. UTF-8（BOMなし）保存はどうすればいい？ エディタのエンコード設定でUTF-8を選び、BOMを付けない設定にします。多くの書き出し機能にも「UTF-8（BOMなし）」オプションが用意されています。
