AIがサムネイルを自動生成する裏側｜Pythonへの「指示」はコードそのものだった

「サムネって誰が作ってるんですか？」

WordPressに記事を投稿するたびに自動でアイキャッチ画像が設定される。これを見た人からそう聞かれた。答えは「Pythonが作って、スクリプトがアップロードしている」だ。

今日はその裏側を深掘りする。

サムネイルはどこで作られているのか

サムネイルの生成はすべてMac上のローカル処理だ。

クラウドのAIサービスは使っていない。つまりトークン消費ゼロ、API料金ゼロ。PythonのPillowというライブラリが画像を生成している。

処理の流れはこうだ。

記事ファイルを13_投稿する記事フォルダに保存
        ↓
ウォッチャー（watchdog）が検知
        ↓
generate_thumbnail(title) でサムネを生成
        ↓
upload_featured_image() でWordPress APIにアップロード
        ↓
記事作成時にサムネIDを紐付けて投稿完了

人間が何も操作しなくても、ファイルを保存した瞬間からこの一連の処理が自動で走る。

Claude CodeはPythonに何をしているのか

ここが面白いポイントだ。

PythonのPillowは「自然言語」を理解しない。

「いい感じのサムネを作って」とは伝えられない。指示の形式はコードだけだ。

# 「座標(820,-180)から(1480,480)の楕円を
#  RGB(77,140,136)・透明度35で描け」という指示
draw.ellipse([820, -180, 1480, 480], fill=(77, 140, 136, 35))

これがClaude CodeからPillowへの「指示」の実体だ。

つまりClaude Codeが人間の言葉をコードに翻訳して、Pythonに渡しているという構造になっている。

毎回コードを書いているのか

答えは「最初だけ書いて、あとは仕組みが動く」だ。

今日のサムネ改修を例にすると：

1. 「ベタっとしてる、改善して」という依頼を受けた
2. Claude Codeがgenerate_thumbnail()関数のコードを書き直した
3. 以降は新しいデザインで自動生成される

コードを書くのは「設計変更のとき」だけ。日々の運用ではコードは書かない。

サムネのデザインはどう決まるのか

現在のサムネはこういう要素で構成されている。

┌─────────────────────────────────────────┐
│ [カテゴリバッジ]          ・ ・ ・ ・ ・ │
│                        ・ ・ ・ ・ ・ ・ │
│ タイトルテキスト         （大きな円）    │
│ タイトル続き             ・ ・ ・ ・ ・ │
│                                         │
│ casio-pgs.com                        ▪ │
└─────────────────────────────────────────┘

• グラデーション背景（上下で色が変わる）
• 右側の半透明サークル（奥行き感）
• ドットグリッド（テクスチャ・密度感）
• 左の縦ライン（視線誘導）
• 上部カテゴリバッジ（角丸の緑バッジ）
• テキストシャドウ（読みやすさ向上）
• 右下の三角形（アクセント）

これらはすべてPillowのdraw.rectangle()・draw.ellipse()・draw.text()などの関数で描かれている。デザインツールは一切使っていない。

そのデザイン的な思考はどこから来るのか

「サムネを改善して」と伝えたとき、Claude Codeは半透明の円を背景に置き、タイトルを前面に際立たせるデザインを選んだ。

なぜそれができるのか。

答えは「膨大なデザインの文脈を学習しているから」だ。

Claude Codeは訓練の段階で、デザイン書・UI/UX記事・CSSチュートリアル・サムネイル制作の解説・グラフィックデザインの原則など、無数のテキストと画像の説明文を学んでいる。

人間のデザイナーが「良いデザインとは何か」を本や経験から学ぶのと同じように、Claude Codeはその膨大なデータから「どういう構造が視覚的に機能するか」のパターンを習得している。

具体的に何が働いているのか

今回の「半透明の円 → タイトルが際立つ」という判断の背景にあるのは、視覚的階層（Visual Hierarchy）というデザイン原則だ。

人の目は「手前にあるもの」「コントラストが高いもの」に先に引きつけられる。

半透明の円を背景レイヤーに置くことで：

1. 右側に視覚的な奥行きと動きが生まれる
2. テキストが「前面」に浮き上がって見える
3. 結果としてタイトルへの視線誘導が強くなる

これは意識的に「円を置こう」と考えたのではなく、「タイトルを際立たせるには？」という問いに対して、学習データの中から最も有効なアプローチを引き出した結果だ。

重要なのは「創造」ではなく「翻訳」

ここで誤解しやすいのが、「AIが創造している」という捉え方だ。

実際は違う。

Claude Codeがやっているのは「人類が蓄積したデザインの知識を、その場のコードに翻訳すること」だ。

Canvaのデザイナーが「こういう要素を入れると効果的」と知っているように、Claude Codeも同じ知識を持っている。ただしその知識の出力形式が「デザインツールの操作」ではなく「Pythonのコード」というだけだ。

だから「センスがいい」ではなく「原則に忠実」という表現の方が正確だ。

ということは指示次第でもっと変わる

「ベタっとしてる、改善して」という抽象的な指示でも動いたが、より具体的に伝えれば、より意図に近いデザインになる。

• 「高級感を出して」→ 金・黒系・細いフォント・余白多め
• 「若い人向けに明るくして」→ 鮮やかな色・大きなフォント・アイコン追加
• 「シンプルに文字だけにして」→ 余計な装飾を全部削除

デザインの方向性を言葉で伝えれば、それに対応したコードが生成される。

なぜこれが重要なのか

「AIがコードを書く」というと難しく聞こえるが、本質はシンプルだ。

人間がやりたいことを伝える → Claude Codeがコードに翻訳する → Pythonが実行する

この流れが一度完成すれば、あとは自動で動き続ける。

サムネイル生成はその典型例だ。「毎回Canvaを開いてデザインする」という作業が完全に消えた。記事を書いてフォルダに入れるだけで、サムネ付きの記事がWordPressに公開される。

まとめ

• サムネはMacローカルのPythonで生成 → トークン・API料金ゼロ
• PillowはAIではなく描画ライブラリ → 指示はコードそのもの
• Claude Codeの役割は「人間の言葉をコードに翻訳すること」
• 仕組みが完成すれば、あとは自動で動き続ける

「コードが書けなくても自動化できる」のがClaude Codeの本質だ。やりたいことを言葉で伝えれば、コードへの翻訳はClaude Codeがやる。

関連記事

• ClaudeCodeメモリの仕組み — Claude Codeがファイルを読み書きする仕組み
• ObsidianからWordPressに自動投稿する仕組みとフロー — ウォッチャーを使った自動投稿の全体像
• Claude活用ログ — 今日やったこと全体のまとめ
• Claude Code APIとPythonでWordPressとGoogleサービスを自動操作する仕組み — API連携の全体像