⌨ 事件発生 — 台本に書いてある文字を、もう一度打っている
動画は撮り終えた。台本もある。なのに、編集がいつまでも終わらない。
YouTube動画の仕上げ、テロップ入れ。編集ソフトでテキストを挿入して → 台本を見ながら打ち直して → フォントを選んで → 色と縁取りを整えて → 位置を合わせる。これを1行ぶんずつ、台本の行の数だけ繰り返す。20行なら20回。長い動画なら、それだけで夜がひとつ消える。
しかも打ち直すのは、台本にもう書いてある文字だ。コピペしても、フォント・色・縁取り・位置の設定は毎回やり直し。3本目の動画あたりで気づいてしまった——「ぼくは同じ作業を、人生で何百回やるつもりなんだろう」。
ぼく台本を書いた時点で、テロップの文字は全部確定してるんだよ。なのに編集ソフトの中でもう一回、手で打ってる。この二度手間、何とかならない?
クロードなるなら、とっくの昔に。……いや、待って。「編集ソフトの中で作る」のをやめればいいんだ。テロップを“画像”として先に工場で量産して、編集ソフトには載せるだけにする。台本が設計図で、工房が工場。作ろう、テロップ工房。
📜 調査 — 「画面と同じ大きさの、ほぼ透明な紙」という発想
テロップを画像で作るとして、大きさはどうする? 位置合わせは? ——答えは意外なところにあった。
テロップを文字の大きさぴったりの小さい画像にすると、編集ソフトに載せたあと毎回「位置合わせ」が必要になる。それじゃ手打ちと変わらない。そこで発想を逆にした——画像を画面と同じ 1920×1080 で作って、文字以外を全部にする。いわば「画面と同じ大きさの、ほぼ透明な紙」。これならタイムラインに置くだけで、狙った位置に文字が出る。
ぼくでも台本って、ぜんぶ同じ「1行」じゃないよ。普通のセリフもあれば、補足を小さく添えたい行も、章の切り替えでドーンと出したい行もある。
クロードだから台本にちいさな“文法”を足そう。素の行はそのまま帯テロップ。「メインの文|補足の文」と縦棒で区切れば2段。行の頭に「#」を付ければタイトルカード(章の扉)。「//」で始まる行はただのメモとして無視。——書き慣れた台本が、そのまま設計図になる。
ぼくたった3つの記号で、いつもの台本が「機械が読める図面」になるのか。
📦 山場 — 外部ライブラリ0個。ならばZIPも、手で書く
20枚のPNGを1個ずつダウンロードさせる訳にはいかない。だが「まとめる」の裏には、意外な深淵があった。
テロップが20枚できたら、当然ZIPでまとめて1回で保存したい。普通はZIP用の外部ライブラリを借りてくるところ。でもこの工房は「外部ライブラリ・CDN・Webフォント、ぜんぶ0個」——つまり外に何ひとつ頼らない縛りで作っていた。ならば答えはひとつ。ZIPを自前で書く。
// ざっくり日本語にした擬似コード
for (const png of テロップ画像たち) {
書き込む(ローカルファイルヘッダ); // 「ここから1ファイル」の合図
書き込む(ファイル名をUTF-8で); // 日本語名の文字化け防止フラグ付き
書き込む(CRC32(png)); // 中身が壊れてないかの検算値
書き込む(png, 無圧縮のまま); // ← STORED方式。圧縮しない!
}
書き込む(セントラルディレクトリ); // 最後に「目次」を巻末へ
// PNGはもう圧縮済みの形式。ZIPでもう一度縮めても
// ほぼ小さくならないので、堂々と「無圧縮」を選ぶ
ぼくZIPって「圧縮ファイル」でしょ? なのに圧縮しないの!?
クロードそこが今回いちばん気持ちいい判断。は生まれた時からすでに圧縮済みの形式なんだ。それをZIPでもう一度揉んでも、サイズはほぼ変わらず、時間だけ食う。だから「束ねる」仕事だけを丁寧にやって、「縮める」仕事は潔くやらない。ZIPの規格には最初から、そのための「」が用意されてる。
ぼく圧縮ファイルの規格を作った人たちが、「圧縮しない選択肢」もちゃんと残してたのか……。
🖋 もうひとつの山場:文字の「縁取り」
テロップの命はどんな映像の上でも読めること。だから文字は「縁取り→本体」の二度描きにする。太い縁取りを先に描き、その上に本体の色を重ねる——手描きPOPと同じ手順を、がミリ秒でやる。ファイル名も T001_こんにちは.png のように連番+先頭の文字で自動命名。20枚あっても、どれがどの行か迷わない。
🎉 完成 — 貼って、選んで、まとめて保存
工場のラインが完成した。あとは、毎日使いたくなる操作感に磨くだけ。
台本を貼ると、左に行の解析結果がずらり。行を選べば中央のプレビューに実寸で表示され、右のパネルでデザインを調整。整ったら「全部ZIPで保存」を1回押すだけ。20行の動画なら、20枚のテロップと1本のSRTが、数秒で手に入る。
シンプル帯・ボックス・グラデ帯の3種類をワンタップで切替。フォント・文字サイズ・色・不透明度・縁取り・位置は、こだわりたい人だけ触ればいい。
1行あたりの表示秒数を決めれば、も一緒に書き出せる。YouTubeの字幕欄にそのまま放り込める。
フォントや色の調整はブラウザが記憶。次の動画で開いたとき、前回の“自分の型”から始められる。チャンネルのテロップに統一感が出る。
画面の配色はOSの設定に自動で追従。深夜の編集作業でも眩しくない。
ぼく台本を書き上げた瞬間に、テロップも実質できあがってることになった。1時間の写経が、ワンクリックの収穫に……。
クロード今回もこのサイトで公開したから、同じ悩みの動画制作者さんが誰でも使える。透過PNGはPowerDirectorでも、Premiereでも、CapCutでも——画像が載るソフトなら、どこでも同じにピタッと決まるよ。
「台本を書き終えた」が、
そのまま「テロップも終わった」になる。
🖱 実際の画面で、使い方(3ステップ)
できあがった工房を、本物の画面で。「貼る・整える・まとめて保存」の3手を、実際のスクショで追います。
台本を貼り付ける
左の欄に台本をそのまま貼るだけ。1行が1枚のテロップになり、下に解析結果が一覧で出ます。「メイン|補足」で2段、行頭「#」でタイトルカード、「//」はメモとして無視——いつもの台本に3つの記号を足すだけです。
プレビューで整える
行を選ぶと中央に実寸プレビュー。右のパネルでプリセット(シンプル帯/ボックス/グラデ帯)を切り替え、フォント・文字サイズ・色・縁取り・位置を微調整します。調整はブラウザが記憶するので、次の動画も同じ“自分の型”で始められます。
まとめて保存する
仕上げは「全部ZIPで保存」ボタン。全行ぶんの透過PNGが T001_〜.png の連番で1つのZIPに束ねられます。「SRTを書き出す」を押せば字幕ファイルも。あとは編集ソフトのタイムラインに並べるだけです。
🔬 おまけ — 公開前の台本だからこそ「外に出さない」
台本は、動画がまだ世に出る前の“ネタ帳”そのもの。だから設計の芯にした。
テロップ画像の生成もZIP作成も、すべてあなたのブラウザ内(canvas)で完結。サーバーには一切アップロードしない。
を厳格にして、自分自身以外への通信・インラインの怪しいコードを禁止。仕組みとして“漏れない”ようにしてある。
外部ライブラリもCDNもWebフォントも使っていないので、読み込みの瞬間から外に出ていく通信が無い。ネットを切っても動くくらい、自己完結している。
🧠 「外に頼らない」は安全設計でもある
第3話の「ZIPも自前で書く」は、実は安全の話と地続きだ。外部の部品を借りるほど、道具は“どこかの誰か”の変更に巻き込まれるし、通信の口も増える。部品0個の道具は、速くて、壊れにくくて、漏れようがない。この考え方は第6巻 ClipShotの「送らない、ではなく送りようがない」とも同じ芯です。
❓ よくある質問
Q1. テロップ工房は何ができる? お金はかかる?
台本を貼ると、1行=1テロップとして1920×1080の全面透過PNGを一括生成し、ZIPでまとめて保存できる無料のブラウザツールです。字幕SRTも同時に書き出せます。登録不要。このサイトの中(/telop-koubou/)から今すぐ使えます。
Q2. PowerDirector以外の編集ソフトでも使える?
使えます。出力は画面と同じ大きさの透過PNGなので、Premiere Pro・DaVinci Resolve・CapCut・AviUtlなど、画像をタイムラインに載せられるソフトならどれでも、置くだけで狙った位置に表示されます。SRTはYouTubeの字幕欄にも直接アップロードできます。
Q3. 貼った台本は外部に送られない?
送られません。生成も保存もブラウザの中だけで完結し、サーバーには一切上げません。外部ライブラリやWebフォントの読み込みも無いので、公開前の動画の台本も安心です。
🌙 教訓 — 繰り返しに“構造”があるなら、道具にできる
大きな発明はしていない。台本という「もう書いてあるもの」を、最後まで働かせただけ。
📌 この一件で学んだこと
- 二度手間の正体は「形式の違い」。文字は台本にもう全部ある。足りなかったのは“編集ソフトが読める形”だけだった。
- ソフトの中で頑張るより、持ち込む形を変える。画面と同じ大きさの透過PNGなら、位置合わせという工程ごと消える。
- 小さな文法は、大きな力。「|」と「#」と「//」——記号3つで、いつもの台本が機械の読める設計図になる。
- 縮めない勇気。圧縮済みのPNGはZIPでも縮めない(STORED)。形式の性格を尊重すると、道具は速くなる。
これで、自家製の道具はまた1つ増えました。この「AI探検隊」は、AIで「Webサイト・音楽・画像」を実際につくって見せる場所です。 動画まわりでは、サムネイルをA/B/C 3案同時に作る『サムネ工房』(第8巻)が続編です。 あなたの“いつもの写経”も、きっと3つの記号で工場に変えられます。