大阪探検隊

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

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

1案で悩むな、
3案で比べろ

〜 YouTubeサムネ3案同時生成ツール「サムネ工房」開発記 〜

動画は10分で撮り終えたのに、サムネイルが決まらずに1時間——。 フォントを変え、色を変え、「なんか違う」を繰り返す迷宮。 「並べて比べれば、一瞬で選べるのでは?」——その思いつきを、相棒のAIが道具に変えた。全4話、どうぞ。

😵 サムネ1枚に1時間 🎨 A/B/C 3案を同時生成 📐 文字は自動でピタッ ⚖ 並べて、比べて、選ぶだけ
ぼくサムネの迷宮で1時間迷う人間
クロード相棒のAI(Claude Code)
サムネ工房できあがった3案比較スタジオ

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

EP.01

😵 事件発生 — 動画より、サムネのほうが時間がかかる

編集は終わった。あとは投稿ボタンを押すだけ。……のはずが、そこからが長い。

1

サムネイルは動画の「顔」。視聴者はこの1枚を見て、観るか観ないかを一瞬で決める。だから手を抜けない——のは分かっている。分かっているから、画像編集ソフトを開いて、文字を置いて、色を変えて、フォントを変えて……気づけば1時間、まだ1案目をこねくり回している

2

たちが悪いのは、どれだけ直しても「なんか違う」しか出てこないこと。何がどう違うのか、自分でも言えない。正解を知らないまま、1枚の絵を延々と磨き続ける——出口の見えない迷宮だった。

ぼくおかしいんだよ。動画の編集は「完成」が分かるのに、サムネだけはいつまでたっても「これでいい」と思えない。ぼくのセンスの問題……?

クロードセンスの問題じゃないよ。比較対象が無いのが問題なんだ。1案だけを見つめて「これは良いか?」に答えられる人は、プロでも少ない。でも2案並べて「どっちが良い?」なら、誰でも即答できる。——作ろう、最初から3案出てくる工房を。

EP.02

🎨 調査 — 世のサムネは、だいたい「3つの型」でできている

3案を同時に出すと決めた。では、その3案はどう作る? ——伸びている動画のサムネを、片っ端から観察した。

3

数百枚を見て分かったのは、強いサムネには繰り返し現れる「型」があること。①画面いっぱいのデカ文字で押し切る型。②上下に帯を敷いてニュース番組のように整える型。③映画ポスターのように写真を主役にして文字を添える型。——奇抜な1枚を発明するより、実績のある3つの型に、自分の素材を流し込むほうが速くて強い。

🖼 素材は1組 → デザインは3案 → 選ぶだけ 🧺 素材(1組だけ) ✍ タイトル文言 🖼 背景の写真 🎨 強調色ひとつ 入れるのはこれだけ。 デザインは考えなくていい デカ文字 A案「デカ文字」 3層の縁取りで押し切る 上下帯 B案「上下帯」 報道番組風の整った顔 シネマ C案「シネマ」 写真が主役、文字は左下に ⚖ 見比べて 選ぶだけ 迷ったら色を変えて もう1周(数秒)
🖼 工房の全体図。入れるのはタイトル・背景・強調色の1組だけ。実績のある3つの型に自動で流し込まれ、並べて比較してから選べる。

ぼく型に流し込むって、ちょっと手抜きっぽくない? オリジナリティは……。

クロード逆だよ。型が土台をやってくれるから、人間は「どの写真を使うか」「何て言葉で釣るか」という中身の勝負に集中できる。プロの現場ほどテンプレートを持ってる。型は創造性の敵じゃなくて、創造性の置き場所なんだ。

EP.03

📐 山場 — 「どんな長さの文字も、必ず枠に収める」

型はできた。だが最初の試作は、長いタイトルを入れると文字が画面からはみ出した。

4

サムネの文字は大きいほど強い。でも大きすぎれば、はみ出して読めない。つまり欲しいのは「枠に収まる範囲で、いちばん大きい文字」。人間がやると、フォントサイズを変えては確認……の繰り返し。これこそ機械の仕事だ。心臓部 fitLinesFontSize() は、左右に余白を残した“安全領域”に収まる最大サイズを、2px刻みで自動で探し当てる

📐 文字を必ず枠に収める心臓部app.js・fitLinesFontSize()
// ざっくり日本語にした擬似コード
const 安全領域 = 画面の幅 - 左右の余白(64px × 2);
let サイズ = 上限の大きさ;                 // まずは欲張った大きさから
while (サイズ >= 下限の大きさ) {
  const 幅 = いちばん長い行を測る(サイズ);  // canvasで実測する
  if (幅 <= 安全領域) return サイズ;       // 収まった!これが最大
  サイズ -= 2;                             // 2pxだけ譲って、もう一度
}
// 3行あれば、行ごとにこの計算をやり直す。
// どんな長さのタイトルでも「収まる中で最大」が自動で決まる

ぼく「収まる範囲で最大」を毎回自動で……。でもデカ文字案、白い文字が白い背景に載ったら消えない?

クロードそこは3層の縁取りで守る。白い本体の文字の外側に黒の輪郭、さらにその外側に強調色の太い輪郭を重ね着させれば、どんな写真の上でも絶対に沈まない。空でも、雪でも、夜景でも。

🖱 もうひとつのこだわり:背景は「ドラッグ&ドロップで即差し替え」

背景の写真は、ファイル選択でもドラッグ&ドロップでも放り込める。差し替えると3案がその場で全部作り直されるから、「この写真とあの写真、どっちが良いか」も写真ごと比較できる。強調色も6色のスウォッチをポチポチ切り替えるだけ。迷いを全部「比較」に変換するのが、この工房の設計思想だ。

EP.04

🎉 完成 — 入れて、見比べて、選ぶだけ

1時間の迷宮が、3枚並んだ瞬間に終わった。

5

タイトルを打って、写真を放り込んで、強調色を選ぶ。それだけでA/B/Cの3案が横に並ぶ。見比べれば、「Bの整い方が今回の内容に合う」と一瞬で言える。あの1時間はなんだったのか。気に入った1枚はPNGで保存、迷うなら3案まとめてZIPで持ち帰って、あとでじっくり選んでもいい。

1
サイズはYouTube推奨の1280×720

書き出しはYouTube推奨サイズ固定。アップロードではじかれたり、端が切れたりする心配ごとを最初から消してある。

2
タイトルは3行まで、自動で最適サイズ

改行で最大3行。行ごとに「収まる最大」を計算するので、短い行は大きく、長い行は読める大きさに、自動でメリハリが付く。

3
強調色6色+自由色、文字色は白/黒

チャンネルのテーマカラーに合わせてワンタップ。色を変えるたび3案が即座に描き直されるから、色選びも「比較」でできる。

4
サブテキストで“もうひと押し”

「〜してみた」「第3話」のような添え文字も入れられる。デカ文字の隣に小さく置かれ、情報の階層が自然にできる。

ぼくサムネ作りが「デザイン作業」じゃなくて「選ぶ作業」になった。1時間が、3分になった……。

クロードそしてこのサイトで公開したから、同じ迷宮にいる動画制作者さんは誰でも使える。テロップ工房(第7巻)とセットで、動画の仕上げ工程がまるごと軽くなるよ。

「なんか違う」と1時間悩むより、
3枚並べて「これ」と3秒で指させ。

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

サムネ工房を開く(無料・登録不要)

ブラウザだけで動作。背景に使った画像は外部に送信されません。

USAGE

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

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

1

タイトルとサブを入れる

上の欄にメインタイトル(改行で最大3行)を打ちます。「第3話」「〜してみた」のようなサブテキストは任意。打った瞬間から、下の3案に即座に反映されます。

サムネ工房の入力画面。メインタイトルとサブテキストの入力欄、背景画像のドロップゾーン、強調色のスウォッチ、文字色の切り替えが並ぶ
入れるのは「言葉・写真・色」の3つだけ。デザインは考えなくていい。
2

背景と強調色を決める

背景の写真をドラッグ&ドロップで放り込み、強調色スウォッチ(6色+カスタム)をタップ。切り替えるたびに3案がその場で描き直されるので、色選びも写真選びも「比較」で決められます

背景画像を設定し、強調色のスウォッチを切り替えている画面。3案のプレビューが選んだ色で即座に描き直されている
色をタップするたび、3案がまとめて衣替え。チャンネルカラーに合わせるのも一瞬。
3

3案を見比べて保存する

下にA「デカ文字」・B「上下帯」・C「シネマ」が並びます。気に入った案はその場でPNG保存、迷ったら「3案まとめてZIP」で全部持ち帰り。あとはYouTubeにアップロードするだけです。

A案デカ文字・B案上下帯・C案シネマの3つのサムネイルが並んで表示された比較画面。各案の下に保存ボタン、下部に3案まとめてZIPのボタンがある
3案が並んだ瞬間、「どれが良いか」は自分で分かる。迷いは比較で消える。
EXTRA

🔬 おまけ — 顔写真も素材も「外に出さない」

サムネの背景は、公開前の動画の素材や、自分の顔写真になりがち。だから設計の芯にした。

1
合成はブラウザの中だけで処理

3案の描画も保存も、すべてあなたのブラウザ内()で完結。サーバーには一切アップロードしない

2
外部への通信路を塞ぐ

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

3
読み込んだ写真はその場かぎり

背景に使った写真は描画のためにその場で読むだけで、どこにも保存しない。ページを閉じれば消える。便利さのために安全を売らない。

🧠 「外に出さない」シリーズ、3代目

スクショを扱う第6巻 ClipShot、台本を扱う第7巻 テロップ工房、そして素材写真を扱う今回。扱うものは毎回違うけれど、「見られたくない可能性のあるものは、そもそも外に送らない構造にする」という芯は全部同じです。信頼は、お願いではなく設計で担保する。

FAQ

❓ よくある質問

Q1. サムネ工房は何ができる? お金はかかる?

タイトル・背景画像・強調色を入れると、YouTube推奨サイズ(1280×720)のサムネを「デカ文字」「上下帯」「シネマ」の3案で同時生成し、並べて比較しながら選べる無料のブラウザツールです。登録不要。このサイトの中(/thumbnail-koubou/)から今すぐ使えます。

Q2. 文字が長くてもはみ出さない?

はみ出しません。左右に余白を取った安全領域に収まる最大の文字サイズを自動で探して割り当てます。タイトルは改行で最大3行まで、行ごとに最適サイズが決まるので、長いタイトルでも読めるサムネになります。

Q3. 背景に使った画像は外部に送られない?

送られません。合成も保存もブラウザの中だけで完結し、サーバーには一切上げません。公開前の動画素材や顔写真も、外に出ることなく安心して使えます。

END

🌙 教訓 — 選ぶ力は、並べる力

大きな発明はしていない。「1案を磨く」を「3案を比べる」に変えただけ。

📌 この一件で学んだこと

  • 迷いの正体は「比較対象の不在」。「これは良いか?」には答えられなくても、「どっちが良いか?」には誰でも答えられる。
  • 型は創造性の敵ではなく、置き場所。実績のある型に任せた分だけ、言葉と写真という中身の勝負に集中できる。
  • 自動化するのは妥協ではなく理想。「収まる中で最大の文字」を、機械は毎回サボらず攻めてくれる。
  • 作る道具と評価する仕組みは分ける。工房は「手」に徹して、良し悪しの判定は別の相棒に任せる。

これで、動画づくりの道具箱に「声(ナレメーカー・第3巻)」「文字(テロップ工房・第7巻)」「顔(サムネ工房・第8巻)」の三点セットが揃いました。 この「AI探検隊」は、AIで「Webサイト・音楽・画像」を実際につくって見せる場所です。 あなたの「なんか違う」も、並べた瞬間に「これだ」に変わるかもしれません。

サムネの「なんか違う」は、
並べた瞬間に終わる。

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

🖼 サムネ工房を使う(無料)↗ 🏭 テロップ工房(第7巻) 🎨 AIギャラリー 💻 Claude Codeのすすめ 🏠 トップページ