AI / Claude Code

Claude Code × HTMLで実現するYouTubeサムネイル自動生成【第1部】

この記事でわかること

  • はじめに：8割AIの仕事フローを実現したい
  • 実験のきっかけ：Figma vs Claude Code
  • 実験1：HTMLでYouTubeサムネイルを作成
  • 指示内容
  • 結果と実際の処理時間
  • 実際の時間比較

はじめに：8割AIの仕事フローを実現したい

仕事でWordPressサイトを新規で作るとき、こんなフロー実現したくありませんか？

  • デザイン → AI
  • コーディング → AI
  • WordPress化 → AI
  • 自分 → 2割の確認と修正のみ

これを実現するために、Claude CodeだけでWebデザインを自動生成できるかを検証しました。

その過程で発見したのが、YouTubeサムネイルのような繰り返し作業は、HTMLとPuppeteerで自動化できるということ。

この記事では、その第一歩となる「サムネイル自動生成システム」の実装方法と、実際にかかった時間・課題をありのままお伝えします。

実験のきっかけ：Figma vs Claude Code

問題設定：

Figmaのプロプランは月3,000円。YouTubeサムネイルのような単純な作業では、代替手段があるのか？

検証内容： Claude CodeのHTMLベースのデザイン生成と、従来のFigmaやCanvaとの比較

実験1：HTMLでYouTubeサムネイルを作成

指示内容

「ChatGPTを使った副業3選」というタイトルで
YouTubeサムネイルを作って。
背景は濃い青、文字は白と黄色、
インパクトのあるデザインで

結果と実際の処理時間

HTMLと設定ファイルから、高品質なサムネイルを自動生成できました。

ただし、実際にかかった時間：
– プロンプト入力：約1分
– Claude Codeでのコード生成：約1～2分
– HTMLファイルの保存と修正：約1分
– Puppeteerでの画像生成：5～6分以上
– 合計：8～10分

初回実行時はPuppeteerの初期化処理が非常に時間がかかります。

実際の時間比較

各ツール別の処理時間

項目 Claude Code Canva Figma
1枚のサムネ作成時間 8～10分 5～10分 3～5分
月額コスト ¥0（プラン込み） ¥1,500 ¥3,000
学習コスト 低い 低い 中程度

正直な評価：
初回はFigmaやCanvaと大差ない、あるいはやや遅い傾向です。

ただし、テンプレート化で状況が変わる

1回のプロンプトで終わらず、継続的に量産できる仕組みを作りました。

自動化の仕組み

① HTMLテンプレート作成（パラメータ化）
   ↓
② 自動生成スクリプト（generate_thumbnail.js）
   ↓
③ 設定ファイル（config.json）で内容を管理
   ↓
④ node generate_thumbnail.js config.json で実行
   ↓
⑤ PNG画像が自動生成

2回目以降の実行時間

項目 時間
JSONファイルの編集 30秒～1分
スクリプト実行 5～6分（Puppeteer起動）
合計 5分30秒～7分

※ 毎回Puppeteerの初期化が発生するため、現時点ではこの時間短縮は難しい状況です。

テンプレート化されたファイル構成

ファイル一覧

/Users/casio/thumbnail/
├── template.html              ← HTMLテンプレート
├── generate_thumbnail.js      ← 自動生成スクリプト
├── config-example.json        ← 設定ファイルのテンプレート
├── linux-config.json          ← Linux例の設定
├── thumbnail.png              ← 生成されたサムネ
├── linux-thumbnail.png        ← Linux版サムネ
├── README.md                  ← 使い方ガイド
└── node_modules/              ← Node.js依存関係

パラメータ化：JSONで全てコントロール

HTMLの色・テキスト・装飾が全てプレースホルダー化されており、JSONファイルで簡単に変更可能：

{
  "BADGE_ICON": "AI",
  "BADGE_TEXT": "ChatGPT",
  "MAIN_TITLE": "を使った",
  "SUB_LABEL": "副業",
  "SUB_TEXT": "<span style=\"color:#f7c948; font-size:96px;\">3</span>選",
  "NUM1": "ライティング",
  "NUM2": "デザイン作成",
  "NUM3": "分析",
  "BG_COLOR": "#0a1628",
  "ACCENT_COLOR": "#f7c948"
}

実例：テーマ別サムネイル生成

例1：ChatGPT副業編

node generate_thumbnail.js config.json

→ 1280×720px、高解像度サムネイル完成

例2：Linux学習編

設定ファイルを別にするだけで、全く異なる雰囲気のサムネイルが生成可能。

{
  "BADGE_ICON": "🐧",
  "BADGE_TEXT": "Linux",
  "MAIN_TITLE": "コマンド完全解説",
  "BG_COLOR": "#1a1a2e",
  "ACCENT_COLOR": "#ff6b6b"
}

本当のメリット：工数削減の構図

初回：8～10分（セットアップ含む）

2回目以降：5～7分で完成

では、どこでメリットが出るのか？

YouTubeを定期的に投稿する場合：
– 月4本投稿 = 月20～28分
– 年間 = 4～5.5時間

テンプレート管理により、以下の手間が削減されます：
– デザイン思考の時間（毎回ゼロから作らない）
– 色や配置の試行錯誤（JSONパラメータで一貫性確保）
– 手作業による修正（自動生成で統一性保証）

率直な課題と今後の検証項目

現状の課題

  1. Puppeteerの初期化が遅い
  2. 毎回5～6分かかるのは非効率

  3. キャッシング化やバッチ処理で改善可能か検証予定

  4. Claude Codeのコード生成も時間がかかる

  5. 初回プロンプトから画像出力まで実際には8～10分

  6. 見積もりの甘さを認識

  7. テンプレート以外の複雑なデザインへの対応

  8. 現在のシステムは比較的シンプルなデザイン専用
  9. ランディングページのような複雑なレイアウトには未対応

今後の検証予定

実際にWebデザイン全般（ランディングページ、企業サイト）をClaudeCodeで作成し、WordPress化するフローを試した上で、第2部・第3部を執筆予定です。

この先へ：第2部・第3部の予告

この記事は3部作の第1部です。

【第2部】（実装後に執筆予定）

Webデザイン全般の自動生成
– ランディングページ
– 企業サイトのヘッダー
– ダッシュボードUI
– 実際の処理時間と課題を含む

【第3部】（実装後に執筆予定）

WordPress完全自動化フロー
– デザイン → HTMLコーディング → WordPress化
– すべてAIで完結した場合の実測値と課題

まとめ：正直な評価

Claude Code × HTMLでのサムネイル自動生成は、確かに実装できました。

ただし：

  • 初回は8～10分かかる（決して「2秒」ではない）
  • 2回目以降も5～7分必要（Puppeteer起動時間）
  • テンプレート化すれば、毎回同じ品質で統一できる（これが唯一のメリット）

Figmaと比較すると、単発のデザイン作業ではメリット不明確です。

メリットが出るのは：
– 同じテンプレートで複数のサムネイルを量産する場合
– デザイン統一性が重要な場合
– 自動化による確実性が必要な場合

この検証を通じて気づいたのは、「AI = 自動化」ではなく、「AI + 適切な設計 = 真の自動化」ということです。

保存場所：
/Users/casio/thumbnail/

使用技術：
HTML × CSS × Puppeteer × Node.js × Claude Code

次のステップ：
実際にWebデザイン全般とWordPress化を試してから、第2部を執筆予定です。

関連記事

TAG
ブログ

BLOG

View All
PAGE TOP