字幕 | imakat.com https://imakat.com 工夫と改善で人生をちょっと豊かに Sat, 09 May 2026 21:33:07 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://i0.wp.com/imakat.com/wp-content/uploads/2023/07/cropped-80d64ecd340db4e2ca3224859b04caed.png?fit=32%2C32&ssl=1 字幕 | imakat.com https://imakat.com 32 32 160909258 【Mac】Gemで無料でVTT字幕を生成する https://imakat.com/2026/03/26/28762/ Thu, 26 Mar 2026 11:59:19 +0000 https://imakat.com/?p=28762 動画の字幕作成については、これまで何度も試行錯誤を繰り返してきましたが、「これだ！」と思えるおすすめの方法を見つけました 。

今回は、Googleの生成AI（Gemini）の「Gem共有（カスタムAIエージェント）」を活用して、高精度なVTT字幕を生成するプログラムを作成しましたので紹介します 。

最大の特徴は、サブスクリプション不要（無料）で実践できるという点です 。（※Googleアカウントは必要です 。）

Geminiの文字起こしはマルチモーダル処理のため、精度は非常に高く、後から手直しする手間が劇的に減ります 。無料枠の制限を賢く回避しつつ、面倒な作業は、Macクイックアクションで自動化する、実践的なワークフローを公開します。

解説動画をご覧ください。

👉低画質・枠外字幕はこちら

字幕一覧(クリック)

(00:00:00) 〜無料でGem共有でvtt字幕生成〜
(00:00:14) 今回は、えーGem。Gemというのは、GoogleのAIエージェントですけれども、
(00:00:24) それを使って、VTT字幕の生成を行うプログラムを作成したので紹介します。
(00:00:36) 動画の字幕作成については、これまで何度も取り上げてきました。
(00:00:43) でもまあ、なかなかここで満足ということにはなりませんが、
(00:00:48) 最近これが結構おすすめという方法を見つけましたので紹介します。
(00:00:56) 生成AIを使う方法です。
(00:01:00) サブスクなしで、お金を使わないでできる方法ですのでご心配なく。
(00:01:11) ただし、Googleアカウントは必要になります。
(00:01:16) まず、字幕を作りたい動画を用意します。
(00:01:21) 今回ですね、一つ10分弱の動画をですね用意しました。
(00:01:29) VTT作成用にこの動画を分割します。
(00:01:34) その理由はGeminiのGemを使うとき、特に無料アカウントで使うときは、
(00:01:42) 動画は5分以内という制限があるからです。
(00:01:49) この動画をですね、右クリックします。
(00:01:52) クイックアクション、このクイックアクションの中から、
(00:01:59) あらかじめ自作した「字幕用に動画を分割する」これを選びます。
(00:02:20) すると、分割する基本秒数を入れてください、と出てきます。
(00:02:28) デフォルトは270秒になっています。つまり4分30秒になっています。
(00:02:36) でもこれは4分30秒のところでバサッと分割するのではありません。
(00:02:44) 4分30秒付近で1秒間の無音になる部分を探して、
(00:02:51) その無音が開始する場所で分割するようになっています。
(00:02:58) 分割ファイルはsplit_01_02...と、いうように分割されていきます。
(00:03:31) えー、split_01、02、03と3つのファイルに分割されました。
(00:03:39) で、あと一つ、offsets.txtというファイルも出来上がってます。
(00:03:46) それではこのoffsets.txtというファイルを開いてみます。
(00:03:52) すると、ここにですね、分割したファイルの開始時刻が入っています。
(00:04:02) 01、02、03、ここにズレ0秒、ズレ245.130秒
(00:04:09) ズレ443.475秒となっています。
(00:04:19) これは後で使うことになります。まあ、あることだけを覚えておいてください。
(00:04:25) 一応これを見て、確かにそのそれぞれが5分以内で分割されていることは確認できます。
(00:04:35) 一つ目が245秒、二つ目が、まあ200秒ぐらい、三つ目はですね、
(00:04:44) 全体で9分41秒、つまり9分41秒、443秒だから、えー、
(00:04:53) 7分、7x6=42、7分ちょっとのところで終わりますので、
(00:05:04) あと残りが2分ちょっとですかね。その部分が03になるはずです。
(00:05:13) 確かに3つのファイルがですね、5分以内で分割されています。
(00:05:24) えっと、次にですね、Gemで作ったこのVTT形式のコードを作成するプログラムですね、
(00:05:37) これを開きます。これがそれです。
(00:05:45) えー、このGemはですね、公開してますので、ブログにつけます。
(00:05:53) モードはですね、あの、Proモードを選択してください。
(00:06:01) で、下のボックス、ここにですね、今作った分割された動画をドロップします。
(00:06:11) コピーアンドペーストします。まず一つ目コピー、
(00:06:18) ここにペーストします。で、ここに入れるのはただこれだけです。
(00:06:30) で、これでこの「Go」、送信の矢印を押してください。
(00:06:40) そうすると作業が開始します。しばらく待ちます。
(00:07:33) しばらく待ちますと、このようにVTTコードが出力されます。
(00:07:41) これをコピーして、拡張子がVTTのファイルにペーストします。
(00:07:54) えーと、これをコピーして、拡張子がVTTのファイルにペーストします。
(00:08:10) あの、このVTTファイルは、あらかじめ用意しておいてください。
(00:08:17) 私はあの以前に作ったVTTファイルをですね、コピペして名前を変えて、
(00:08:28) 中身を削除して作っておきました。この３つですね。
(00:08:33) それではこの01にですね、ペーストします。ここのコードをコピー。
(00:08:43) えー、そして、ファイルにペースト。という形ですね。
(00:08:58) 保存。ということで、01番ができました。
(00:09:14) 同じようにしてですね、02以降も作るんですけども、
(00:09:21) この同じセッションの中にですね、複数の動画があると、なかなかうまく受け付けてくれないので、
(00:09:30) 新しいセッションで同じことを繰り返すようにしてください。
(00:09:42) こういう形で新しいセッションを開きます。そしてこの02ですね。これをコピーして、
(00:09:57) 貼り付けます。Proモードにして、
(00:10:12) Proモードにして、送信します。
(00:10:38) はい、コードができました。そしたらこれをコピーして、
(00:10:47) 02番のVTTファイルにペーストします。
(00:11:12) 同じように03番も作ります。
(00:11:39) 送信。
(00:11:58) えーと、できましたのでコードをコピーして、
(00:12:06) 03VTTに貼り付けます。
(00:12:23) こうして作るとお気づきのように、02以降のですね、動画の時刻は0秒からの開始になってしまっています。
(00:12:39) 秒ずらしの作業を行います。
(00:12:45) この時に先ほど見たoffsets.txtの中の秒がずらし秒になってきます。
(00:12:58) vttファイルの上で右クリックしてクイックアクションから「字幕時刻の秒ずらしを行う」を選びます。
(00:13:22) ここでさっきの秒数を入れます。245.130秒。これ入れましてOKを押します。
(00:13:48) timeshifted.vttができて245.130秒、つまり4分何秒かを加算したファイルができあがってます。
(00:14:13) 同じように03も秒ずらしを行います。今度は443.475。同じようにファイルができてます。
(00:14:51) 7分24秒ぐらいのところからのスタートに置き換わっています。
(00:15:04) 秒ずらしが済んだら結合したvttファイルを作ります。あらかじめbinded.vtt(conbined.vtt)を用意します。
(00:15:17) この中に3つのvttファイルをコピペします。まず01は時刻ずれなしでそのままペーストします。
(00:15:45) 次に02_timeshifted.vttです。この連番以降のところをコピーして貼り付けます。
(00:16:18) 次に03_timeshifted.vtt、これも番号以降のところをコピーして貼り付けます。以上ですね。
(00:16:45) 全部1つのファイルにバインドされました。保存します。
(00:16:54) ところがこれはすでにお気づきのように1からスタートした箇所が3箇所あるわけですね。
(00:17:08) ここにもありますし、それから、
(00:17:15) あ、ここにもあると。3箇所あります。
(00:17:18) これを連番が全部通しで1番から開始するように、番号の振り直しをします。
(00:17:37) このbinded.vtt(conbined.vtt)の上で右クリックして、
(00:17:41) クイックアクションの中から、
(00:17:47) この「字幕VTTの連番を付け直す」、これを選びます。
(00:17:58) すると、renumbered.vttが出来上がります。
(00:18:07) これは1番からですね。ずっと連番で、
(00:18:18) 67番までですか。ここまで繋がってます。
(00:18:26) それで言葉遣いの修正とかテキストの修正は、ここまで形が整った後で行うのがいいと思います。
(00:18:38) 地味にコツコツとやる方法ではありますが、仕組みとして分かりやすいので作業のストレスは感じません。
(00:18:51) この方法が優れているのは、GeminiのGem、これの文字起こしの精度が非常に高いということです。
(00:19:03) 手直しするところはとても少ないです。満足できると思います。
(00:19:10) 以上、Gemを使ったVTTコード作成の紹介でした。
(00:19:17) コード類はブログ記事に掲載しますのでご利用ください。

要約：
「VTT作成用に動画を分割する」ワークフローは、ユーザーが指定した基本秒数を基に、動画を無音区間で自動分割し、VTTの「秒ずらし」に役立つオフセット記録を生成します。ffmpegとPythonスクリプトを連携させ、再エンコードなしで高速分割します。
「字幕時刻の秒ずらしを行う」ワークフローは、選択したVTTファイルの全タイムスタンプを、ユーザーが入力した秒数だけシフト（前後にずらす）させ、新しいVTTファイルを出力します。awkを用いて精密な時間計算を行います。
「VTTの連番を付け直す」ワークフローは、VTTファイル内の古い連番や不要なヘッダを削除し、字幕ブロックに正しい連番を振り直して整理されたVTTファイルを生成します。
これらのワークフローは、それぞれ動画の分割、字幕の時間調整、字幕ファイルの整理という異なる課題に対応し、VTT作成・管理作業を自動化・簡素化することを目的としています。
添付の動画の音声から字幕用のvtt形式のコードを出力します(Gem共有)。
公開スクリプトに関するお問い合わせは以下へ↓

ポイント解説

解決すべき課題：Geminiの「5分の壁」

Geminiに動画を読み込ませて文字起こしをする際、特に無料アカウントでは「動画は5分以内」という制限があります 。 今回紹介するワークフローは、事前の「動画分割」と、事後の「タイムスタンプ調整（秒ずらし）」を組み合わせることで、この壁をストレスなく突破します。
有料会員でも使用制限を超えた時で、急いでいる場合などは、この方式は有用です。

長時間の動画からVTT字幕を生成する6つのステップ

ここでは、例として10分弱の動画に字幕をつける手順を解説します 。

1. 動画の準備

まずは手元に、字幕を作成したい元の動画ファイルを用意します 。

2. 基本秒数の設定と動画の分割（クイックアクション）

動画を5分以内のパーツに分けます 。

  • 用意した動画を右クリックしクイックアクションから自作の「字幕用に動画を分割する」を選択します 。
  • 分割する基本秒数を入力します（デフォルトは270秒＝4分30秒です） 。
  • ポイント: 単純に時間でバサッと切るのではなく、指定時間付近の「1秒間の無音部分」を探し、キリの良いところで自動分割されるように工夫しています 。
  • 実行すると、split_01、02…という分割動画と同時に、offsets.txtというファイルが生成されます 。このテキストには「245.130秒」といった分割時のズレ（累計秒数）が記録されており、後で使います 。

3. Gemini（Gem）によるVTT字幕作成（手動）

いよいよAIに文字起こしを依頼します。公開している専用のGemを使用します（※リンクは「コードと要約」に掲載します） 。

  • Gemを開き、「Proモード」を選択します 。
  • 下部のメッセージボックスに、分割した最初の動画（01）をドロップ（またはコピペ）して送信します 。
  • しばらく待つと、タイムスタンプ付きのVTTコードが出力されます 。
  • 出力されたコードをコピーし、あらかじめ用意しておいた空のVTTファイル（例：01.vtt）にペーストして保存します 。
  • 注意点: 02以降の動画を処理する際は、AIが混乱するのを防ぐため、必ず「新しいセッション（チャット）」を開いてから同じ手順を繰り返してください 。

4. VTTの秒ずらし（クイックアクション）

出力された02番以降のVTTファイルは、動画の開始時刻が「0秒」にリセットされてしまっています 。これを元の時間軸に戻します。

  • 対象のVTTファイル（02など）を右クリックし、クイックアクションから「字幕時刻の秒ずらしを行う」を選びます 。
  • 手順2で生成されたoffsets.txtに記載されている秒数（例：245.130）を入力し、OKを押します 。
  • 正しい時間にシフトされた _timeshifted.vtt というファイルが新しく作成されます 。

5. VTTファイルの結合（手動）

それぞれの時間軸が整ったら、1つのファイルにまとめます。

  • 結合用の空ファイル（binded.vtt(※1)）を用意します 。
  • 01.vttの中身をそのままペーストします 。
  • 続けて、02_timeshifted.vtt、03_timeshifted.vtt の連番以降のテキスト部分を順番にコピーして下に追加し、保存します 。

※1:あとで気付きました。bindedは間違った英語です。boundあるいはconbinedというのが適切です。

6. 連番の振り直しと整理（クイックアクション）

結合したファイルは、字幕の通し番号（連番）が「1」から始まる箇所が複数混在してしまっています 。これを綺麗に整えます。

  • binded.vtt を右クリックし、クイックアクションから「字幕VTTの連番を付け直す」を選択します 。
  • これにより、最初から最後まで番号が正しく振り直された完成版 renumbered.vtt が出来上がります 。

まとめ

言葉遣いやテキストの微修正は、このように全体の形が綺麗に整った最後に行うのがおすすめです 。

地味にコツコツと進める手作業の部分もありますが、仕組みが非常に分かりやすいため、作業中のストレスはほとんど感じません 。Gem(ChatGPTもそう)の文字起こし精度が抜群に高いのは、単なる音声からの文字起こしだけでなく、動画内の視覚情報（映像）例えば、動画に登場する文字、人物の動きなどを認識するという、マルチモーダル処理を行っているためです。26年3月現在、CapCut、Vrew、Premiere Pro、Davinci Resolve、Filmoraの文字起こしは「映像情報」を加味せず、純粋に「音声データ」のみに依存しています。おかげで、Gemの場合は、手直しが非常に少なくて済むのが最大のメリットです 。

以上

]]> 28762 【WordPress】Apple Windowsの字幕表示の設定について https://imakat.com/2024/10/02/23205/ Tue, 01 Oct 2024 21:44:00 +0000 https://imakat.com/?p=23205

👉低画質・枠外字幕はこちら

字幕一覧(クリック)

(00:00:00) Apple Windowsの字幕表示の設定について
(00:00:10) (1) Macの字幕設定方法　
(00:00:20) まず最初に、WordPressブログを視聴する方への共通の対策です。
(00:00:26) WordPressのカスタマイズ->追加CSSを開きます。
(00:00:30) ご覧の部分のCSSを追加します。
(00:00:34) このコードはブログへ添付します。字幕の背景を黒にする。字幕の背景の透過を50%にする。字幕の文字色を白にする。文字に少々影を追加する。以上4点です。
(00:00:44) ここから各デバイスへの設定になります。設定は、各デバイスの「アクセシビリティ」へ行います。
(00:00:51) 最初はMacからです。「システム設定」->「アクセシビリティ」->「字幕」
(00:00:58) 先頭にある「透明な背景」を選択すると、上段にイメージが表示されます。これでいいので、このままにします。
(00:01:16) MacでWordPressプレーヤーを再生します。
(00:01:28) 背景黒で透明度50%ですが、これが読みやすく、かつ下地も、まずまず見えます。
(00:01:41) Macは以上です。
(00:01:51) (2)Windowsの字幕設定方法　
(00:02:01) Windowsは、「設定」->「アクセシビリティ」->「字幕」->「字幕のスタイル」と入ります。
(00:02:10) Windowsは、「ビデオの設定を優先」するか否かの選択がありませんが、要するに、ここで指定した項目は上書きされます。
(00:02:17) 「テキスト」は白で不透明度100%、サイズは中、フォントはプロポーショナルゴシック。
(00:02:26) 「背景」は黒で不透明度75%
(00:02:33) 問題は、50%がないのですね。これだと、透けて見えないのではないかと思います。まあ仕方ないです。
(00:02:51) WindowsでWordPressプレーヤーを再生します。
(00:03:05) 色々いじってみましたが、これが一番まともです。
(00:03:20) 以上がWindowsの設定です。
(00:03:31) (3)iPadの字幕設定方法　
(00:03:42) iPadは、「設定」->「アクセシビリティ」　->「標準字幕とバリアフリー字幕」
(00:03:51) iPadは、「スタイル」で、一番上の「透明な背景」を選びます。上のイメージでは文字が小さく感じますが、実際は適当な大きさになっています。
(00:04:09) iPadで、WordPressプレーヤーを再生します。
(00:04:20) Macとほぼ同じ表示レベルです。読みやすく問題ないです。
(00:04:31) iPadの設定は以上です。
(00:04:41) (4) iPhoneの字幕設定方法　
(00:04:50) (4-1) 枠内字幕と枠外字幕の比較
(00:04:58) 左側は、字幕を枠の外に表示して、右側は字幕を枠の中に表示しています。
(00:05:08) 枠外表示は、スマホなどの画面が小さい時、有効だと思います。
(00:05:21) 枠内表示は、文字が邪魔になるので、文字の背景を透過させる設定が求められます。
(00:05:37) (4-2)字幕の背景の透明度を上げる設定
(00:05:46) 「設定」->「アクセシビリティ」　
(00:05:59) 「標準字幕とバリアフリー字幕」
(00:06:07) 「スタイル」->「新規スタイルを作成」を選択すると「スタイル1」ができます。
(00:06:14) 「スタイル1」を選択した状態で、右上の「編集」をクリックします。
(00:06:21) 「フォント」->「システムフォント(モノ)」->「ビデオの設定を優先」をオフ ※オンにすると何故か明朝体になります。
(00:06:36) 「サイズ」->「大」を選択。 スマホは画面が小さいので、読もうと思うなら「大」がベターです。
(00:06:44) 文字の「カラー」->「ホワイト（デフォルト）」を選択。
(00:06:50) 背景の「カラー」->「ブラック（デフォルト）」->「ビデオの設定を優先」をオフ
(00:07:09) 背景の「不透明度」->「50%（デフォルト）」->「ビデオの設定を優先」をオフ
(00:07:21) テキストの「不透明度」->「不透明（デフォルト）」
(00:07:37) 以上で、iPhoneの字幕の設定は終了です。
(00:07:46) (5) VimeoやYouTubeの字幕の設定は、マニュアル操作。
(00:07:55) Vimeoを例に、字幕を表示します。
(00:08:03) デフォルトでは、黒の背景に白の文字で、透過度ゼロです。
(00:08:09) どうすればいいか、ウロウロしています。
(00:08:16) まあ、真っ黒も、悪くはないけど。
(00:08:26) 「CC」のボタンをクリック->「カスタマイズ」->「背景」
(00:08:34) 不透明度50%にします。
(00:08:52) これなら、まあ、見やすいです。
(00:09:06) それで問題は、ここで、このURLを再起動してみます。
(00:09:19) 再起動されました。
(00:09:27) すると、元の、真っ黒に戻ってしまうということです。
(00:09:35) Vimeoの字幕のカスタマイズは、毎回、マニュアル操作です。以上です。
(00:09:42) この動画は以上です。ご視聴ありがとうございました。

字幕の作成に関する問題ですが、それは、規格が統一されていないことに尽きる、と言っていいです。動画を作成する人は、それに振り回されています。

その字幕作成の悩みの一つが、スマホなどの小さな画面を使って、解説の動画を視聴してもらおうとすると、字幕が邪魔になることです。その解決策として、既に、字幕を動画枠の外に表示する方法は紹介してきましたが、この動画では、字幕の背景を透過させる設定方法を紹介しています。

なお、WordPressプレーヤーを使用する場合は、以下の方法で、デフォルトで透過率を設定することができます。

video::cue {
  background-color: rgba(0, 0, 0, 0.5); /* 背景を黒で透過率50% */
  color: white; /* 字幕の文字色を白に設定 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 文字に影を追加 */
}

上のコードを、WordPressのカスタマイズ->追加CSS、へ追記して、公開のボタンを押します。

以上

]]> 23205