記事サムネイルをPythonで自動生成する方法｜言語別テーマ対応

「Figmaで毎回サムネを作るの面倒だな」そう思って作ったスクリプトが、気づけば9言語対応になっていた話。

きっかけ：FigmaのMCP記事を投稿したあとの会話

Claude Codeと一緒にFigmaのデザインを自動差し替えする記事を書いて、WordPressに投稿した直後のことです。

「この投稿したやつのサムネにFigmaのアイコンを作ってもらえますか？何の記事かわかりやすいと思うので」

そう聞いたら、Claudeがその場でPythonコードを書いて、こんなサムネイルを生成してくれました。

Figmaのブランドカラー（紫・青・緑・赤・オレンジ）を使った5つの円、中央に「F」の文字、左側にタイトルとバッジ——数分で完成しました。

「じゃあ次はRaspberry PiとかWordPressとかHTMLとか、各言語ごとのサムネも作ってほしい」

そう言ったら、全9テーマを一括生成できる再利用可能なスクリプトにまとめてくれました。

何が作れるのか

現在対応しているテーマは9種類です：

各テーマはその言語・ツールの公式ブランドカラーを使っています。

使い方

インストール

pip install Pillow

スクリプトは ~/tools/thumbnail_generator.py に保存されています。

基本的な使い方

# 特定テーマのサムネイルを生成
python3 ~/tools/thumbnail_generator.py --theme html

# タイトルをカスタマイズ
python3 ~/tools/thumbnail_generator.py --theme javascript \
  --title "JSで作る" \
  --title2 "アニメーション" \
  --sub "初心者でもわかるJavaScript実践入門"

# 全テーマを一括生成
python3 ~/tools/thumbnail_generator.py --all

出力先は ~/tools/thumbnails/{テーマ名}_thumbnail.png です。

仕組みの解説

使っているライブラリ

PIL（Pillow）：Pythonの画像処理ライブラリ。画像の生成・編集・保存ができます。

from PIL import Image, ImageDraw, ImageFont

サムネイルの構成要素

┌─────────────────────────────────────────┐
│ [バッジ1] [バッジ2]                      │  ●●
│                                          │ ●F●
│ メインタイトル1行目                      │  ●●
│ メインタイトル2行目                      │
│                                          │
│ サブタイトル                             │
│ ──────────────                           │
│ casio-pgs.com | 樫の森シリーズ           │
└─────────────────────────────────────────┘
████████████████  ← 下部カラーバー

背景グラデーション

for i in range(H):
    ratio = i / H
    r = int(bg_r + (end_r - bg_r) * ratio)
    # ...
    draw.line([(0, i), (W, i)], fill=(r, g, b))

1ピクセルずつ色を変えることで、グラデーション背景を実現しています。

アクセント円の配置

Figmaロゴ風の円は、三角関数で均等配置しています：

for idx, col in enumerate(accent_colors):
    angle = idx * (360 / len(accent_colors))
    rad = math.radians(angle)
    x = cx + int(radius * math.cos(rad))
    y = cy + int(radius * math.sin(rad))
    draw.ellipse([x-55, y-55, x+55, y+55], fill=col)

AIへの指示からスクリプトができるまで

今回の会話の流れをそのまま書くと、こんな感じです：

私：「この投稿した記事のサムネにFigmaのアイコンを作ってもらえますか」

Claude：（Pythonコードを書いて実行。Figmaカラーのサムネイルが完成）

私：「いいですね。次はRaspberry PiとかWordPressとかHTMLとか各言語ごとのも作ってほしい。あとスクリプトとして保存しておいてほしい」

Claude：（9テーマ対応のスクリプトを ~/tools/thumbnail_generator.py に作成。--all フラグで一括生成も実装）

私：「全9枚できました！記事としてお願いします」

Claude：（この記事を書く）

「やってみたいこと」を言葉にするだけで、スクリプトが生まれてドキュメントになる。この体験自体が、AIを使いこなすとはどういうことかを示していると思います。

WordPressへの自動アップロード

生成したサムネイルはWordPressのREST APIで直接アップロードできます：

curl -X POST "https://casio-pgs.com/wp-json/wp/v2/media" \
  -u "ユーザー名:アプリケーションパスワード" \
  -H "Content-Disposition: attachment; filename=thumbnail.png" \
  -H "Content-Type: image/png" \
  --data-binary @~/tools/thumbnails/html_thumbnail.png

返ってきた media_id を使って、記事のアイキャッチに設定：

curl -X POST "https://casio-pgs.com/wp-json/wp/v2/posts/{記事ID}" \
  -u "ユーザー名:アプリケーションパスワード" \
  -H "Content-Type: application/json" \
  -d '{"featured_media": {media_id}}'

まとめ

「毎回Figmaでサムネ作るのが面倒」という気持ちから始まって、気づけば言語別の統一デザインシステムができていました。

こういう「小さな面倒くさい」を解消する道具を、会話しながら一緒に作れるのがClaude Codeの面白さだと思います。

関連記事

• 教材の画像を手動で差し替えていた私が、Claude CodeとFigmaをMCPでつないだら全部自動になった話
• ObsidianをタスクＭ代わりに使う方法｜Claude Codeで一瞬でノートを量産する
• 40代からのAI時代の学び方｜コードを書かずにWebサーバーを作る方法