字幕/キャプション実務
字幕はアクセシビリティの基盤であり、同時に“検索可能なテキスト資産”です。音声の情報密度を損なわず、固有名詞や専門用語を誤解なく伝えるには、生成AI/ASRだけに頼らない堅牢なオペレーションが必要です。本稿は WebVTT を軸に、作成→整形→レビュー→翻訳→配信→計測→更新までを一気通貫で設計します。
kind="subtitles"
と srclang
を明示し、label
で言語名をユーザーにわかる形で表示。動画アクセシビリティの要件(フォーカス/操作/コントラスト)に沿って <track>
を提供。自動生成は“初稿”に限定し、人手レビュー+二重チェックで品質を固定化。要点(TL;DR)
- VTT一択で統一 — Web再生と相性が良く、位置/スタイル/ルビ等に拡張しやすい。
SRT混在は整形/位置指定が崩れやすく、レビューの手戻りが増える。 - ASR→整形→人手レビュー — 初稿は機械で高速化、品質は人間で保証。
固有名詞/技術語/話者/句読点/効果音は機械の弱点。辞書で前提を揃える。 - 翻訳は優先言語から段階導入 — 2〜3言語でROIを計測し拡張。
全言語同時リリースは停滞の元。完走率/利用率で投資判断。 - defaultは主要言語のみ — 無自覚切替を避け、選択UIは簡潔に。
自動再生/自動字幕オンは誤動作と離脱の原因。 - “見えないSEO”を仕込む — 抜粋/アンカーで検索性を高め、OGP/ポスターとメッセージ統一。
関連: ポスター戦略 / OGP安全域。
背景:字幕はアクセシビリティと集客の両輪
聴覚支援の観点では、効果音/話者/環境音の明示がユーザビリティを大きく左右します。法令/ガイドライン(WCAG 2.x、各プラットフォームの要件)も字幕の提供を強く推奨しています。
集客面では、字幕は検索クローラが解釈可能なテキストとして機能します。引用抜粋・タイムスタンプ付きリンク・章アンカーの整備により、動画単体よりも深い流入を作れます。
運用面では、イベント/プロダクト動画の再編集よりも字幕の差し替えの方が速く安価です。VTTを“差し替え可能な最後のレイヤー”として持っておくと、ローカライズや法務文言の更新に強くなります。
設計:ASR→整形→レビュー→翻訳→配信→計測
- ASR初稿 — モデルに固有名詞辞書を渡し、音質の悪い区間を先に洗い出す。
- 整形 — WebVTTに統一。行長は35〜42文字相当を目安、1〜2行。改行は句読点/意味単位で。
- レビュー — 話者/効果音/専門用語/句読点/誤変換を修正。1st/2nd の二重チェック。
- 翻訳 — 用語集とスタイルガイドに沿い、英語→他言語のピボットは極力避ける。
- 配信 —
<track>
で言語別に提供。default
は主要言語のみ。 - 計測 — 字幕利用率/切替回数/完走率/離脱率を 動画メトリクス に追加。
実装:HTMLのtrackとWebVTTの作法
ブラウザ標準の <track>
を使えば、プレーヤー依存を避けつつ高い互換を得られます。VTTはUTF-8、BOMなし、LF改行で保存します。
<!-- HTML -->
<video controls poster="/poster.jpg">
<source src="/video/intro.m3u8" type="application/x-mpegURL" />
<track kind="subtitles" src="/subs/ja.vtt" srclang="ja" label="日本語" default>
<track kind="subtitles" src="/subs/en.vtt" srclang="en" label="English">
<track kind="captions" src="/subs/ja_cc.vtt" srclang="ja" label="日本語(聴覚支援)">
</video>
WEBVTT
00:00:00.000 --> 00:00:02.500
こんにちは、Gazou Compressor へようこそ。
00:00:02.500 --> 00:00:05.000
本日は <v speaker>A</v> がお届けします。
00:00:05.000 --> 00:00:08.000 position:50%,line:85% align:center
[効果音] ドアの開く音
- kind — 翻訳中心は
subtitles
、聴覚支援情報を含むものはcaptions
。 - srclang/label — 言語コードと表示名を必ずセットで指定。
- 位置/行 —
position/line/align
で視覚要素と衝突しない場所へ。 - 話者 —
<v speaker>
で最低限の識別。
多言語:優先順位とUIの原則
同時多言語は管理コストが跳ね上がります。視聴ボリュームと市場性から主要2〜3言語を選び、需要を確認しながら段階的に拡張します。UIは“選択が一目でわかる”ことを最優先に。
- defaultは1つ — 誤切替を防ぐ。ユーザーの最終選択を次回に保持。
- 言語名はネイティブ表記 — English / 日本語 / Español のように。
- 字幕とキャプションの区別 — ラベルで明示し、ニーズの違いを尊重。
配信とSEO:“見えないテキスト”を活かす
<track>
でVTTを提供し、default
は日本語/主要言語に限定。タイトル/説明/要点は ポスター戦略 と合わせ、OGP安全域上で文字が欠けないように。
ハイライト抜粋の可視化、章ごとのアンカーリンク、字幕の要点を本文にも短く転記することで、クローラと読者の双方に価値を届けます。
品質管理:レビュー/差分/バージョニング
- 二重チェック — 1st(内容) → 2nd(表記)。責務を分けて効率化。
- 差分レビュー — タイムコード単位のdiffで変更点を可視化。
- バージョニング — ファイル名やヘッダに semver/日付を付与。
- 署名URL+キャッシュ — 署名URL とCDNで安全にロールアウト。
互換性とフォールバック
- 主要ブラウザ(Chromium/Firefox/Safari)で
subtitles
/captions
はサポート。 - 旧端末向けはプレーヤー側の字幕レンダラを併用するか、静的トランスクリプトを別ページに用意。
- DRM/低遅延配信環境でも
<track>
は併用可能(ライセンス保護とは独立)。
NG/落とし穴
- 行長が長すぎる — 一読で追えず離脱。35〜42文字/行に収める。
- タイミングが前後に滲む — 音とズレて違和感。0.5〜1.0秒粒度で。
- 話者不明瞭 — 会話が混線。
<v>
または接頭辞で識別。 - 言語ラベル省略 — ユーザーが選べない。
srclang
/label
を必ず指定。
公開前チェックリスト
- 行長/改行 — 35〜42文字/行、意味単位で改行。
長すぎると読み切れず、短すぎると目移りが増える。 - タイムコード — 0.5〜1.0秒粒度、重なり/空白なし。
被りはレンダラの不具合やチラつきに直結。 - 話者/効果音 — 最低限の識別/表記統一。
翻訳時の抜け/誤訳を防止。 - 言語とUI —
srclang/label/default
の整合。
誤デフォルトで離脱増。 - SEO連携 — 抜粋/アンカー/本文要約の整備。
“見えないテキスト”を露出。
まとめ
字幕は“見えないSEO”であり、UXの安全装置です。VTTで多言語・検索性・アクセシビリティを同時に満たし、再生メトリクスで完走率と切替行動を継続的に観測しましょう。投資は主要言語から小さく始め、成果に応じて拡張するのが失敗しないやり方です。
FAQ(よくある質問)
1タイムコードの粒度と整形
0.5〜1.0秒間隔が目安。重なりや過大な空白を避け、行長と改行位置を最適化します。可読性とリズムを優先。
2話者表記・専門用語の統一
用語集/スタイルガイドを作成し、翻訳時にも共有。ラベルを省略せず最小限のメタ情報を付与します。
4VTTとSRTはどちらを使う?
WebはVTT推奨。位置/スタイル/ルビ等の拡張に対応し、<track>
と親和性が高いです。放送/編集系との連携が必要な場合のみSRTを併用。
5自動翻訳の注意点
文脈で揺れる技術語/固有名詞は誤りが残りやすいので、用語集を元にポストエディット。英語→他言語のピボット翻訳は誤差が累積しやすい点にも注意。