大阪探検隊

Ctrl + マウスのホイールで、画面表示と文字を拡大できます 挿入画像はクリックすると拡大表示できます

📖 開発秘話マンガ ・ 第7巻

台本を貼れば、
テロップは湧いてくる

〜 動画テロップ一括生成ツール「テロップ工房」開発記 〜

動画編集で、いちばん夜が溶ける工程——それがテロップ打ち。 台本にはもう全部書いてあるのに、同じ文字をもう一度、1行ずつ手で打ち直す。 「台本を貼ったら、テロップが全部できあがってほしい」——そのぼやきを、相棒のAIが道具に変えた。全4話、どうぞ。

⌨ 手打ちで1本1時間 📜 台本を貼るだけ 🖼 透過PNGで一括量産 🎬 置くだけでピタッと載る
ぼくテロップ打ちで夜が溶ける人間
クロード相棒のAI(Claude Code)
テロップ工房できあがった量産工場

💡 下線付きの用語(末尾に ⓘ)はクリック/タップで意味の解説がポップアップで開きます。専門用語は、その場で確かめながら読めます。

EP.01

⌨ 事件発生 — 台本に書いてある文字を、もう一度打っている

動画は撮り終えた。台本もある。なのに、編集がいつまでも終わらない。

1

YouTube動画の仕上げ、テロップ入れ。編集ソフトでテキストを挿入して → 台本を見ながら打ち直して → フォントを選んで → 色と縁取りを整えて → 位置を合わせる。これを1行ぶんずつ、台本の行の数だけ繰り返す。20行なら20回。長い動画なら、それだけで夜がひとつ消える。

2

しかも打ち直すのは、台本にもう書いてある文字だ。コピペしても、フォント・色・縁取り・位置の設定は毎回やり直し。3本目の動画あたりで気づいてしまった——「ぼくは同じ作業を、人生で何百回やるつもりなんだろう」。

ぼく台本を書いた時点で、テロップの文字は全部確定してるんだよ。なのに編集ソフトの中でもう一回、手で打ってる。この二度手間、何とかならない?

クロードなるなら、とっくの昔に。……いや、待って。「編集ソフトの中で作る」のをやめればいいんだ。テロップを“画像”として先に工場で量産して、編集ソフトには載せるだけにする。台本が設計図で、工房が工場。作ろう、テロップ工房。

EP.02

📜 調査 — 「画面と同じ大きさの、ほぼ透明な紙」という発想

テロップを画像で作るとして、大きさはどうする? 位置合わせは? ——答えは意外なところにあった。

3

テロップを文字の大きさぴったりの小さい画像にすると、編集ソフトに載せたあと毎回「位置合わせ」が必要になる。それじゃ手打ちと変わらない。そこで発想を逆にした——画像を画面と同じ 1920×1080 で作って、文字以外を全部にする。いわば「画面と同じ大きさの、ほぼ透明な紙」。これならタイムラインに置くだけで、狙った位置に文字が出る

🏭 台本 → 工房 → 置くだけ 📜 台本(1行=1枚) こんにちは! 今日は大阪城へ|天守閣も # 第1章 出発 // メモ(画像にしない) 素の行=帯テロップ 「|」=2段 /「#」=章の扉 🏭 テロップ工房 こんにちは! 1920×1080の「ほぼ透明な紙」に 文字だけ描いて量産 + 字幕SRTも同時に生成 🎬 編集ソフト 映像トラック PNGを並べるだけ 位置合わせ 0回 画面サイズと同じだから 置けばピタッと合う
🏭 工房の全体図。台本の行を「素の行=帯」「|=2段」「#=章の扉」と読み分けて、画面と同じ大きさの透過PNGを量産。編集ソフトでは並べるだけで、位置合わせが要らない。

ぼくでも台本って、ぜんぶ同じ「1行」じゃないよ。普通のセリフもあれば、補足を小さく添えたい行も、章の切り替えでドーンと出したい行もある。

クロードだから台本にちいさな“文法”を足そう。素の行はそのまま帯テロップ。「メインの文|補足の文」と縦棒で区切れば2段。行の頭に「#」を付ければタイトルカード(章の扉)。「//」で始まる行はただのメモとして無視。——書き慣れた台本が、そのまま設計図になる。

ぼくたった3つの記号で、いつもの台本が「機械が読める図面」になるのか。

EP.03

📦 山場 — 外部ライブラリ0個。ならばZIPも、手で書く

20枚のPNGを1個ずつダウンロードさせる訳にはいかない。だが「まとめる」の裏には、意外な深淵があった。

4

テロップが20枚できたら、当然ZIPでまとめて1回で保存したい。普通はZIP用の外部ライブラリを借りてくるところ。でもこの工房は「外部ライブラリ・CDN・Webフォント、ぜんぶ0個」——つまり外に何ひとつ頼らない縛りで作っていた。ならば答えはひとつ。ZIPを自前で書く

📦 ZIPを“素手で”組み立てる心臓部app.js・buildZip()
// ざっくり日本語にした擬似コード
for (const png of テロップ画像たち) {
  書き込む(ローカルファイルヘッダ);   // 「ここから1ファイル」の合図
  書き込む(ファイル名をUTF-8で);      // 日本語名の文字化け防止フラグ付き
  書き込む(CRC32(png));               // 中身が壊れてないかの検算値
  書き込む(png, 無圧縮のまま);        // ← STORED方式。圧縮しない!
}
書き込む(セントラルディレクトリ);     // 最後に「目次」を巻末へ
// PNGはもう圧縮済みの形式。ZIPでもう一度縮めても
// ほぼ小さくならないので、堂々と「無圧縮」を選ぶ

ぼくZIPって「圧縮ファイル」でしょ? なのに圧縮しないの!?

クロードそこが今回いちばん気持ちいい判断。生まれた時からすでに圧縮済みの形式なんだ。それをZIPでもう一度揉んでも、サイズはほぼ変わらず、時間だけ食う。だから「束ねる」仕事だけを丁寧にやって、「縮める」仕事は潔くやらない。ZIPの規格には最初から、そのための「」が用意されてる。

ぼく圧縮ファイルの規格を作った人たちが、「圧縮しない選択肢」もちゃんと残してたのか……。

🖋 もうひとつの山場:文字の「縁取り」

テロップの命はどんな映像の上でも読めること。だから文字は「縁取り→本体」の二度描きにする。太い縁取りを先に描き、その上に本体の色を重ねる——手描きPOPと同じ手順を、がミリ秒でやる。ファイル名も T001_こんにちは.png のように連番+先頭の文字で自動命名。20枚あっても、どれがどの行か迷わない。

EP.04

🎉 完成 — 貼って、選んで、まとめて保存

工場のラインが完成した。あとは、毎日使いたくなる操作感に磨くだけ。

5

台本を貼ると、左に行の解析結果がずらり。行を選べば中央のプレビューに実寸で表示され、右のパネルでデザインを調整。整ったら「全部ZIPで保存」を1回押すだけ。20行の動画なら、20枚のテロップと1本のSRTが、数秒で手に入る。

1
デザインは3プリセット+微調整

シンプル帯・ボックス・グラデ帯の3種類をワンタップで切替。フォント・文字サイズ・色・不透明度・縁取り・位置は、こだわりたい人だけ触ればいい。

2
字幕SRTも同時に出る

1行あたりの表示秒数を決めれば、も一緒に書き出せる。YouTubeの字幕欄にそのまま放り込める。

3
設定は覚えていてくれる

フォントや色の調整はブラウザが記憶。次の動画で開いたとき、前回の“自分の型”から始められる。チャンネルのテロップに統一感が出る。

4
ダーク/ライトは目に合わせて

画面の配色はOSの設定に自動で追従。深夜の編集作業でも眩しくない。

ぼく台本を書き上げた瞬間に、テロップも実質できあがってることになった。1時間の写経が、ワンクリックの収穫に……。

クロード今回もこのサイトで公開したから、同じ悩みの動画制作者さんが誰でも使える。透過PNGはPowerDirectorでも、Premiereでも、CapCutでも——画像が載るソフトなら、どこでも同じにピタッと決まるよ。

「台本を書き終えた」が、
そのまま「テロップも終わった」になる。

🏭 このツールは、このサイトで実際に無料で使えます

テロップ工房を開く(無料・登録不要)

ブラウザだけで動作。貼り付けた台本は外部に送信されません。

USAGE

🖱 実際の画面で、使い方(3ステップ)

できあがった工房を、本物の画面で。「貼る・整える・まとめて保存」の3手を、実際のスクショで追います。

1

台本を貼り付ける

左の欄に台本をそのまま貼るだけ。1行が1枚のテロップになり、下に解析結果が一覧で出ます。「メイン|補足」で2段、行頭「#」でタイトルカード、「//」はメモとして無視——いつもの台本に3つの記号を足すだけです。

テロップ工房の画面。左に台本の貼り付け欄と行ごとの解析結果リスト、中央にテロップのプレビュー、右にデザイン調整パネルが並ぶ3カラム構成
台本を貼った直後の画面。行ごとに「帯/2段/タイトル」を自動で読み分けます。
2

プレビューで整える

行を選ぶと中央に実寸プレビュー。右のパネルでプリセット(シンプル帯/ボックス/グラデ帯)を切り替え、フォント・文字サイズ・色・縁取り・位置を微調整します。調整はブラウザが記憶するので、次の動画も同じ“自分の型”で始められます。

テロップのプレビュー画面。中央に1920×1080のプレビュー領域があり、画面下部に帯テロップが表示され、右側のデザイン調整パネルでプリセットや色を変更している
プレビューは実際の画面比率そのまま。置いたときの見え方で確認できます。
3

まとめて保存する

仕上げは「全部ZIPで保存」ボタン。全行ぶんの透過PNGが T001_〜.png の連番で1つのZIPに束ねられます。「SRTを書き出す」を押せば字幕ファイルも。あとは編集ソフトのタイムラインに並べるだけです。

保存操作の画面。プレビューの下に「この行をPNG保存」「全部ZIPで保存」「SRTを書き出す」のボタンが並んでいる
保存は3ボタン。1枚だけでも、全部まとめてでも、字幕だけでも。
EXTRA

🔬 おまけ — 公開前の台本だからこそ「外に出さない」

台本は、動画がまだ世に出る前の“ネタ帳”そのもの。だから設計の芯にした。

1
台本はブラウザの中だけで処理

テロップ画像の生成もZIP作成も、すべてあなたのブラウザ内(canvas)で完結。サーバーには一切アップロードしない

2
外部への通信路を塞ぐ

を厳格にして、自分自身以外への通信・インラインの怪しいコードを禁止。仕組みとして“漏れない”ようにしてある。

3
そもそも外部の部品が0個

外部ライブラリもCDNもWebフォントも使っていないので、読み込みの瞬間から外に出ていく通信が無い。ネットを切っても動くくらい、自己完結している。

🧠 「外に頼らない」は安全設計でもある

第3話の「ZIPも自前で書く」は、実は安全の話と地続きだ。外部の部品を借りるほど、道具は“どこかの誰か”の変更に巻き込まれるし、通信の口も増える。部品0個の道具は、速くて、壊れにくくて、漏れようがない。この考え方は第6巻 ClipShotの「送らない、ではなく送りようがない」とも同じ芯です。

FAQ

❓ よくある質問

Q1. テロップ工房は何ができる? お金はかかる?

台本を貼ると、1行=1テロップとして1920×1080の全面透過PNGを一括生成し、ZIPでまとめて保存できる無料のブラウザツールです。字幕SRTも同時に書き出せます。登録不要。このサイトの中(/telop-koubou/)から今すぐ使えます。

Q2. PowerDirector以外の編集ソフトでも使える?

使えます。出力は画面と同じ大きさの透過PNGなので、Premiere Pro・DaVinci Resolve・CapCut・AviUtlなど、画像をタイムラインに載せられるソフトならどれでも、置くだけで狙った位置に表示されます。SRTはYouTubeの字幕欄にも直接アップロードできます。

Q3. 貼った台本は外部に送られない?

送られません。生成も保存もブラウザの中だけで完結し、サーバーには一切上げません。外部ライブラリやWebフォントの読み込みも無いので、公開前の動画の台本も安心です。

END

🌙 教訓 — 繰り返しに“構造”があるなら、道具にできる

大きな発明はしていない。台本という「もう書いてあるもの」を、最後まで働かせただけ。

📌 この一件で学んだこと

  • 二度手間の正体は「形式の違い」。文字は台本にもう全部ある。足りなかったのは“編集ソフトが読める形”だけだった。
  • ソフトの中で頑張るより、持ち込む形を変える。画面と同じ大きさの透過PNGなら、位置合わせという工程ごと消える。
  • 小さな文法は、大きな力。「|」と「#」と「//」——記号3つで、いつもの台本が機械の読める設計図になる。
  • 縮めない勇気。圧縮済みのPNGはZIPでも縮めない(STORED)。形式の性格を尊重すると、道具は速くなる。

これで、自家製の道具はまた1つ増えました。この「AI探検隊」は、AIで「Webサイト・音楽・画像」を実際につくって見せる場所です。 動画まわりでは、サムネイルをA/B/C 3案同時に作る『サムネ工房』(第8巻)が続編です。 あなたの“いつもの写経”も、きっと3つの記号で工場に変えられます。

テロップの手打ちに、
もう夜を渡さない。

テロップ工房は無料・登録不要。読んだあと、このサイトの中でそのまま使えます。AIでつくる実演記事もどうぞ。

🏭 テロップ工房を使う(無料)↗ 🖼 サムネ工房(第8巻) 🎙 ナレメーカー(第3巻) 💻 Claude Codeのすすめ 🏠 トップページ