Hermes Agent解説動画を作る—マスク済みデモと字幕
文章だけでは全体像が伝わりにくいため、Hermes Agentのデータフローを説明する短い動画も作りました。ここでも、実データを編集で隠すのではなく、最初からマスク済みデモを使う方針にしました。
工程を分ける
動画制作は次の部品へ分割しました。
1. ストーリーボード：各場面の目的、画面、ナレーション
2. マスク済みデモデータ：架空の取引や通知
3. スライド：SVGとPNG
4. ナレーション音声
5. 字幕：SRT
6. 場面ごとの短い動画
7. 結合したMP4
8. コンタクトシートによる全場面確認
一つの長い動画を直接作るより、場面単位で差し替えられるため、情報更新や誤字修正が簡単です。
実データを撮影しない
freeeやDiscordの実画面を録画してからぼかすと、編集漏れや一瞬の表示が残る可能性があります。デモ用JSONの段階で、会社名、金額、取引先、メール、IDを架空値にしました。
動画の画面外にも注意します。OSの通知、ブックマークバー、ターミナルプロンプト、最近使ったファイル、音声に入る固有名詞も公開情報になります。
字幕を別ファイルで持つ
字幕をSRTとして分離すると、聞き取りにくい環境でも内容を伝えられ、WordPressや動画サービスで差し替えやすくなります。ナレーション原稿と字幕を同じ元データから作り、表示時間と読み上げのずれを確認します。
コンタクトシートで全体を見る
各スライドを小さく並べたコンタクトシートを作ると、色、余白、見出し位置、情報量のばらつきを一度に確認できます。個別画面だけを見ていると気づきにくい、同じ説明の重複や場面順の違和感も見つかります。
公開時の注意
動画は文章より更新しにくいため、画面内へ細かなバージョン番号を埋め込みすぎません。説明欄と記事本文へ「2026年7月20日時点」と一次情報リンクを置きます。UIが変わっても、設計の考え方が残る構成にします。
再現チェック
- [ ] ストーリーボードを先に作った
- [ ] 実データではなく架空データを使った
- [ ] 字幕を別ファイルで持った
- [ ] 画面外の通知や音声も確認した
- [ ] コンタクトシートで全場面を見た
- [ ] 情報確認日と一次情報を添えた
次回は実践連載の最終回として、現在地、動いているもの、止まっているもの、次の課題を整理します。
参考にした一次情報
- [W3C WebVTT](https://www.w3.org/TR/webvtt1/)
- [WordPress Video block](https://wordpress.org/documentation/article/video-block/)