Claude Codeスキルでブログのアイキャッチ画像を自動生成する

ブログのアイキャッチ画像、毎回考えるのが面倒です（というか考えるより作らなといけないのでさらに面倒、どうしてもカテゴリの画像かタイトル文字を画像にするレベル止まり）。フリー素材を探すのも微妙に時間がかかるし、かといって自分で作るのもハードルが高い。Claude Codeのスキル機能を使って、記事のMarkdownを読ませるだけでPixar風クレイジオラマのアイキャッチ画像を自動生成する仕組みを作ってみました。

Claude Codeスキルとは

Claude Codeにはスキルという仕組みがあります。.claude/skills/ 以下にSKILL.mdというMarkdownファイルを置くと、/スキル名 で呼び出せるカスタムコマンドになります。（以前は commandというものがありましたが skillsと統合されているようです）

このブログでは記事作成ワークフロー全体をスキル化しています。

スキル	概要
`/new-post`	タイトル・カテゴリを対話入力し、Page Bundle形式で記事テンプレートを生成
`/review-post`	front matterチェック、カテゴリ/タグ判定、画像EXIF除去を一括実行
`/download-images`	記事内の外部画像URLをローカル保存してMDリンクを書き換え
`/generate-diorama`	記事内容を分析してPixar風クレイジオラマのアイキャッチ画像を生成

スキルの実体はMarkdownで書かれた手順書で、Claude Codeがその通りに動く。コードを書くのではなく、手順を自然言語で記述するだけでワークフローが自動化でき反復して実行できるためBlogなどで利用するには最適です。

SKILL.mdの設計

/generate-diorama のSKILL.mdは7ステップで構成されています。

引数のパース（対象のMarkdownファイルパスを受け取る）
記事の読み込みと分析
画像生成プロンプトの組み立て
Gemini APIで画像を4枚生成
候補画像を表示してユーザーに選択させる
採用画像のリネームとfront matter更新
結果の報告

面白いのはSTEP 2の分析部分。ブログ記事を「左ゾーン」「中央ゾーン」「右ゾーン」の3つに分解します。

ゾーン	役割	例（WordPress移行記事の場合）
左ゾーン	問題・旧状態・出発点	壊れたWordPress、404エラー、PHP Version Conflict
中央ゾーン	変化・プロセス・ツール	MySQL Database、Markdown変換、Claude AI
右ゾーン	解決・新状態・成果	Hugo、Cloudflare Pages、完成したブログ

技術ブログの記事は大体「問題→プロセス→解決」の3幕構成になっています。これをジオラマの空間配置にマッピングすると、どんな技術記事も一枚の絵にできるというわけです。つまらないと思われがちな技術記事にも、実はドラマチックなストーリーがある（のかもしれない😏）

プロンプトテンプレート

生成プロンプトは固定のテンプレートに分析結果を埋め込む形式にしています。

Tiny clay world diorama on an ultra-wide rectangular wooden platform
(very wide horizontal base, 3:1 ratio), depicting {テーマ概要}
with many clay objects packed across the entire width.

Left zone ({左ゾーン名}): {左オブジェクト}, {左フィギュア}.
Center zone ({中央ゾーン名}): a winding railway track going left to right,
  {中央オブジェクト}.
Right zone ({右ゾーン名}): {右オブジェクト},
  small celebration confetti and stars, {右フィギュア}.

The rectangular platform is polished light oak wood with rounded corners,
viewed from a wide 35-degree bird's eye cinematic angle,
Pixar-style clay render, soft warm studio lighting,
neutral off-white background, ultra-wide composition absolutely
filling edge to edge.

木製プラットフォーム、鉄道レール、紙吹雪、Pixar風クレイレンダー。これらの固定要素が統一感のあるビジュアルとなります。記事の内容が変わっても、同じ世界観のジオラマが生成されることで読む人にとってのヒントになるはずです。

gemini-nanobananaバイナリ

画像生成にはGemini APIを使っています。gemini-nanobanana というラッパーバイナリをSKILL.mdから呼び出す構成。このプログラム自身もClaude Codeを利用して作成しています（便利ですね）

GOOGLE_CLOUD_LOCATION=global "$BIN" \
  -p "$PROMPT" \
  -s 1200x514 \
  -q 2K \
  -f jpeg \
  --compression 92 \
  -n 4 \
  -o {出力ディレクトリ}

-n 4 で4枚の候補画像を一括生成します。バイナリはdarwin-arm64、darwin-amd64、linux-amd64、windows-amd64の4プラットフォーム分を用意してあり、SKILL.md内で uname -s と uname -m から自動選択されるので特に気にする必要はありません。

Claude Code自体には画像生成機能がないので、外部バイナリを組み合わせることで機能を拡張していのがポイントです。MCPを利用しても良いのですが手頃なものがないことや内容がブログの記事なので外部にデータを送らずに実施したいのでローカルプログラムとしての実装です。SKILL.mdからBashツールを通じてバイナリを実行できるのがポイント。

実例

WordPress移行記事に対して /generate-diorama を実行した結果がこれ。

WordPress移行記事のジオラマ画像

左ゾーンにはひび割れたWordPressロゴと「502 Bad Gateway」のモニター、絡まったケーブル。中央にはMySQLデータベースの樽からデータが流れ出し、鉄道レールの上を走る。右ゾーンにはHugoのロゴと成功に喜ぶフィギュア。

記事を読んだだけでここまでストーリーを汲み取って画像にしてくれるのはなかなかNano Bananaは面白い（すごい）。

4枚生成して選ぶ設計

AIの画像生成はガチャ的な要素があります。同じプロンプトでも毎回異なる結果になるし、当たり外れも大きので4枚生成して人間が選ぶワークフローにしています。

SKILL.mdのSTEP 5では、4枚の候補画像をすべて表示した上でAskUserQuestionを使ってどれを採用するか聞きいてくれます。選ばれなかった画像は自動で削除され、採用画像はslugに合わせてリネームされ、front matterの image フィールドも更新される仕様になっています。

完全自動にしなかったのは意図的な設計判断でAIワークフローの中に人間の判断ポイントを残しておくと、結果の品質が安定すると思います。

Midjourney体験からの進化

Pixar風クレイジオラマという表現は、このブログでも紹介して2023年にMidjourneyで試した「Isometric 3d diorama of」というキーワードが原点。当時はプロンプトを手で入力して1枚ずつ生成していたのが一気に、しかもブログの内容を読んで書けるようになっているとは進歩に驚きです。

Elf in Cave #2 ( Midjourney )

3年経って、ブログの内容を自動分析→プロンプト自動生成→4枚一括生成→選択→front matter更新まで全自動化され、「AIを使う」から「AIにワークフローを任せる」へのシフト。SKILL.mdという手順書を書くだけでこれが実現できるのは、なかなか楽しいですね。次はブログの記事のカテゴリごとに違うスタイルの画像の生成も試してみたいです。