🚀 新規事業

2026-06-16_サムネ生成ツール_Codex依頼文

最終更新 2026年06月16日 ／ 40_新規事業/TERASU/2026-06-16_サムネ生成ツール_Codex依頼文.md

お役立ち資料サムネイル 自動生成ツール（Codex依頼文）

TERASUお役立ち記事（2026-06-16_お役立ち記事施策_実装依頼）のサムネを量産するツール。参考画像（GLOBIS学び放題系のフラット×ポップ×強調タイポ）のテイストを完全再現し、文字を入れたら同テイストのサムネが出るようにする。

前回 Codex で精度が出なかった原因＝①画像生成でやろうとした(テイストがブレる) ②仕様が曖昧。 対策＝「HTML/CSSテンプレ＋Playwrightスクショ」方式（コード生成＝Codexの得意領域・再現性高）＋ デザイン仕様を数値レベルで固定。

依頼文（そのままCodexへ貼る）

ゴール

参考画像のテイストを「完全再現」したサムネイル生成ツール。タイトル文字＋少パラメータを渡すと同テイストのPNGが出力。量産前提。
★画像生成AIは使わない（ブレる）。HTML/CSSでテンプレを組み Playwright でスクショ→PNG 方式。

デザイン仕様（参考画像の分析）

  • 出力 1200×630px・横長バナー・フラット/ポップ/明るい
  • 構成：鮮やか単色背景 ＋ 極太日本語タイトル(一部キーワード強調) ＋ フラットイラスト ＋ 手書き風添え文字
  • 配色：緑#3DB54A 黄#F5C518 水色#4FB0E5 青#2B5FA8 橙#F0883C 桃#E87FA6 紺#1F3A6E（背景1色ベタ）／強調語 赤#E8412C 青#2B5FA8
  • フォント：タイトル=極太ゴシック必須(Noto Sans JP / M PLUS 1p / Zen Kaku Gothic の Black=900)／添え文字=Yomogi・Klee One・Zen Maru
  • タイトル強調(肝・1つずつ再現)：①キーワード色変え＋拡大 ②角丸囲み枠(白枠/色ベタ白抜き) ③黄マーカー下線 ④白フチ(text-stroke) ⑤斜め手書き添え文字(吹き出し/囲み) ⑥星・矢印・点線
  • レイアウト：タイトル2〜3行・大きく(画面50〜65%)／イラストは反対側or下or背景／余白たっぷり
  • イラスト：フラット(輪郭控えめ・明るいベタ・影最小・記号的人物)。unDraw/Open Peeps/Storyset等のフリー素材。まずプレースホルダ枠でレイアウト完成→後で差し込み

実装構成

template.html / styles.css(配色変数・強調クラス) / generate.js(input.json→Playwright→PNG) / input.json / fonts/ / illustrations/

入力(input.json)

title, highlights[{text,style: box/marker/color/stroke}], sub(添え文字), bgColor, illust　→1つで1枚・配列で一括量産

出力

1200×630 PNG(2倍出力オプション)・ファイル名自動

完全再現の進め方(必ずこの順)

  1. 参考画像を徹底観察→デザイントークン(色コード/フォント/サイズ/余白px/強調の出し方)を仕様書化→合意(いきなり作らない)
  2. template/css を1枚作る
  3. 生成物を参考画像と横並べ→再現度を自己評価→ズレ(太さ・余白・強調・配色)を修正
  4. サンプル3枚生成→確認
  5. OKで一括量産対応

避けること(前回対策)

  • 画像生成AIでやらない／「だいたい」で進めない(色pxは実測)／フォントを細く使わない(Black/900)／強調表現を省略しない(=らしさの正体)

関連

実装結果（2026-06-16 Codex）

項目 内容
実装場所 /Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/terasu-thumbnail-generator/
方式 画像生成AIなし。template.html + styles.css を Playwright でスクショして PNG 出力
フォント Fontsource から Noto Sans JP Black 900 / Yomogi / Zen Maru Gothic Bold を fonts/ に固定コピー
初期テンプレ 参考画像中央の「市場価値を知るべき！」系：teal背景、方眼、白帯タイトル、黄マーカー、斜め添え文字、フラット人物・コイン
量産対応 input.json は単体・配列・{ items: [] } に対応。highlights は box / marker / color / stroke
出力 outputScale: 1 で 1200x630、outputScale: 2 で 2400x1260
確認出力 output/01-市場価値を知るべき.png ほか4サンプル、review-market-compare.png、review-samples-contact.png
検証 npm install / npm run sample / npm run generate 成功。PNG寸法確認済み

使い方

cd /Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/terasu-thumbnail-generator
npm install
npm run sample
node generate.js input.json --out output --scale 2

次の改善候補

  • 実素材差し込み用に illustrations/ へ Storyset / unDraw 系SVGを追加
  • レイアウトを market 以外に portrait / center / product で拡張
  • TERASU記事タイトル一覧をCSV/JSONから一括投入する運用スクリプトを追加