サムネに1時間、本文より長い

（先に一言で：Mac用の道具です。JSONというテキストを1枚書くと、Brainサイズのサムネ画像が約1秒で出ます。Canvaも画像生成AIも使いません）

Brainに記事を出すとき、サムネのところで手が止まっていませんか。

Canvaを開いて、テンプレを探して、文字を入れて、「なんか違う」でやり直す。気づけば1時間近く（自分の体感で、計ってはいません）
ChatGPTやGeminiで画像ごと作ると、日本語の文字が化ける
記事ごとに見た目がバラバラで、一覧に並んだとき自分の記事だと分からない
「前と同じ雰囲気で」が再現できない。同じプロンプトなのに違う絵が出る
結局「まあいいか」で出して、あとで直したくなる

上の5つは、全部過去の自分です。

いまは、サムネを「描く」のをやめて「書く」

そろばん教室を運営しながら、AIで仕組みづくりをしている @hitsuji__works と申します。

Brainには2026年6月から記事を出していて、2026年10月15日時点で公開中が15本です。

最初に出した記事が「ChatGPTでBrainのサムネ画像を5分で作るプロンプト集」（100円）でした。いまも公開していて、15本の中で一番売れている2本のうちの1本です（3件）。

ただ、あのやり方は自分ではもう使っていません。画像生成AIは毎回違う絵が出るし、文字は結局Canvaで乗せるので、Canvaを開く工程が消えなかったんです。

なのでやり方を変えて、サムネを絵として描くのはやめて、Webページとして書くことにしました。

タイトル・一言・工程図をHTMLに並べて、Chromeにスクリーンショットを撮らせています。

文字はブラウザが描くので崩れないし、テンプレが同じなので何本出しても揃います。

実測：JSONを保存してからPNGが出るまで 1.1秒（2026年10月15日・自宅のiMacで time コマンドで計測）
費用：0円（Macの python3 と、無料のGoogle Chromeだけ。有料のサービスやAPIは使いません。python3 はmacOSに入っていますが、初めて打つときに「コマンドラインツール」の導入を求められることがあります）
JSONを書いて目視するまで含めると、自分の場合は1枚5分ほどです（体感・計ってはいません）
2026年9月22日から10月15日までに公開した7本のサムネは、全部この仕組みで作っています。10月に売れた4本のサムネも全部これです（自分の記事一覧で数えました）

正直に内訳を書いておくと、7本のうち3本はこのキットに入っているテンプレ（brain・neon）で、残り4本（10月に売れた4本のうち2本もこちら）は、自分用に試作している「左に絵・右に文字」の型です。試作のほうは人気記事の見た目をなぞって作ったものなので売り物にはせず、このキットには入れていません。動かしている render.py（生成スクリプト）は同じものです。

今回追加した pop で作ったのが、この記事のサムネです。買う前に見た目を確かめられるよう、無料部分に貼っておきます。

こちらは brain テンプレ（同梱）の例です。文字はすべてHTMLで描いているので、どちらも崩れていません。

前の版は0件でした。人気記事と並べて分かった4つのこと

このキットは9月22日に一度出していて、23日間で売れたのは0件でした。

そのときのサムネは、黒い背景にネオンの文字を光らせた、テック系の広告でよく見る見た目でした。

10月6日に、Brainの人気記事7本のサムネを自分の3本と並べて見比べました（新着8本も参考に見ています）。

売れているサムネに共通していて、自分のには無かったものが4つありました。

1. 背景が明るい。 人気7本と反例1本の計8本のうち、暗い背景は0本でした。Brainの一覧は白いので、暗いサムネは沈みます

2. 1秒で「何が手に入るか」が分かる。 主役に置いてあるのは結果か手間の少なさで、スキル名やファイル名ではない

3. 下の段は手順を矢印でつないだ図。 「貼る→診断→直す」のように動詞を並べていて、機能名や内輪の言葉が無い

4. 価格と著者名は画像に入れていない。 それはBrainのカードが出してくれるので、画像で繰り返さない

ひとつ補足しておくと、人気7本のうち5本は累計1,000件以上売っている方の記事でした。なのでサムネだけで売れるわけではないかなと思っています。

ただ、一覧で目に入るかどうかは、サムネの影響が大きいかなと思っています（ここは自分の推測です）。

この4つを満たす形で pop テンプレを作り、今回のキットに足しました（これで8種になります）。

だから、やることは3つだけにしました

1. examples/sample.json をコピーして、タイトルと一言を書き換える

2. python3 render.py 自分の.json と打つ

3. out/ に 1280×670px のPNGができる

Claude Code（AnthropicのAIコーディングツール）を使っている方は、キットをスキル（Claude Codeが呼び出せる手順書）として登録すると「サムネ作って。タイトルは〇〇」と言うだけで、JSONの作成から生成・確認まで終わります。これは任意で、登録しなくてもターミナルから動きます。

この記事もキットも、購入後にClaude CodeやChatGPTに丸ごと読み込ませてもらってOKです。「このキットの使い方を教えて」と聞けば、AIが案内できるように書いています。

使うとどう変わるか

サムネが「1時間近くの作業」から「5分の作業」になる

Canvaを開かなくなって、テンプレを探すことも、「なんか違う」でやり直すこともなくなりました。生成そのものは1.1秒で、残りはJSONに文字を書く時間です。

自分の場合、浮いた時間はそのまま本文に回っています。

日本語の文字が崩れない

HTMLの文字をブラウザが描くので、画像生成AIの「文字化け」が起きません。

長いタイトルも、小さい注釈も、書いたとおりに出ます。

何本出しても揃う。直したいときはHTMLを1行直すだけ

テンプレが同じなので、10本出しても同じ世界観で並びます。

少し直したいときは、生成された out/〜.html を直接編集してもう一度コマンドを打つだけです。Pythonは触りません。

受け取れるもの（同梱物）

① サムネ生成スクリプト render.py

Python標準ライブラリだけで動きます。追加のインストールはいりません。Chromeの場所も自動で探します。

② HTMLテンプレ8種（1280×670px・Brain推奨サイズ）

pop：今回追加。Brainに出すならまずこれ。 明るいクリーム地＋アクセント1色、主役2行、下段に手順の図、右に「中身の画面」。上の4つの条件を満たす形です（この記事のサムネ）
neon：前の版のサムネの型。左にフチを三重にした斜めの文字、右にネオンの流れ図。暗いので、Brainの一覧より note や YouTube 向きかなと思います
dark：黒×琥珀×シアン。AI・ツール・自動化系
warm：生成り×テラコッタ。文章・note・共感系
bold：黄×黒。稼ぐ系・実績数字を推す記事
paper：白紙×ネイビー。手順書・教育・信頼感
split：左に文字・右に大きな数字。「0h」「92%」など実績を1つ見せる記事
brain：上に問いかけ、中央に商品名を大きな文字、下に同梱物カード4枚。9月に自分が使っていた型（上の2枚目の画像）

③ Claude Code用スキル定義 SKILL.md

「サムネ作って」で動く指示書。popの4条件と、テンプレの選び方・改行位置の判断・目視確認まで含めています。

④ 導入README

3分で動くところまでの手順と、よくあるトラブルの直し方。

⑤ 記入例JSON 6本

基本形の sample.json、この記事のサムネ（pop）、前の版のサムネ（neon・brain）、dark用、数字を見せる split の例の6本。書き換えるだけで使えます。

有料エリアには、ZIPのダウンロードリンクに加えて render.py と pop.html の全文も貼っています。

リンクが切れても、コピペで作れるようにしてあります。

向いていない方

Windowsだけを使っている方：Mac前提で作っています。Chromeのパスを指定すれば動くはずですが、自分はWindowsで検証していません
すでにCanvaやFigmaでサムネを量産できている方：それで困っていないなら不要です
写真やイラストを主役にしたサムネが欲しい方：このキットは「文字で見せる」サムネ専用です（背景に画像を1枚敷くことはできます）
コマンドを1行も打ちたくない方：python3 render.py … の1行は必要です（コピペで済みますが）

価格について

980円です。部数の限定も、値上げの予定もありません。

自分はサムネ1枚に1時間近くかけていた（体感）ので、時給1,000円で見ても1枚で1,000円ぶん。1枚目で980円は戻る計算です。

2枚目からは、かかるものがないので。

免責事項

Python・Google Chrome・Claude Code自体の導入方法は解説していません。 各公式の手順に従ってください（ターミナルは Launchpad →「その他」→「ターミナル」で開けます。python3 を初めて打って導入を求められたら、画面の指示どおり入れてください）。キットの動かし方についての質問はX（@hitsuji__works）のDMで受けますが、環境構築のサポートは行いません
macOS Sequoia以降＋Google Chrome最新版で動作確認しています。OSやChromeの仕様変更で動かなくなった場合は、修正版をこの記事に追記します（更新ログを末尾に置きます）
テンプレの改造と、自分のサムネへの利用は自由です。キット自体の再配布・転売はできません
自分の旧記事「ChatGPTでBrainのサムネ画像を5分で作るプロンプト集」（100円）とは別の仕組みです。また、このキットの前の版（9月22日公開・テンプレ7種）はこの記事に置き換えました。「Canvaで十分」と感じている方は買わなくて大丈夫です

▼ ここから有料エリア ▼