今日の結論：毎回ゼロから作らなくていい仕組みが、できました。
自分でコードを書いたのは、ゼロ行です。
「画像を自動で作る仕組みなんて、自分には無理…」
そう思っていた方、一緒に読んでいただけたら嬉しいです。
今日やること（目的）
ブログに載せるアイキャッチ画像を、Claude Codeと一緒に作ることにしました。
アイキャッチとは、記事の「顔」になるサムネイル画像のことです。
記事一覧やSNSでパッと目に入る、あの画像です。
毎回ゼロからデザインするのは大変です。
だから今日のゴールは「作る」ことではなく、「3行書き換えるだけで使い回せる仕組みを整える」ことでした。
実際にやったこと（記録）
① デザインの方向性を決めた
まず、どんなデザインにするかをClaude Codeと相談しました。
6パターンの案を比較して、最終的に決まったのがこのデザインです。
- 背景：クリーム色（温かみのある色）
- アイコン：メジロのイラスト（丸くトリミング）
- 吹き出し：一言コメントを入れる
- タイトルとカテゴリーバッジ
ここで自分がやったのは「どれがいいか決めること」だけです。
比較案を出すのも、デザインをまとめるのも、Claude Codeが担当しました。
「考える・決める」に集中できる。それがAIと作る良さだと感じた最初の場面でした。
② Claude CodeにHTMLテンプレートを作ってもらった
デザインの方向性が決まったら、Claude Codeに指示を出しました。
「こういうデザインで、1200×630pxのHTMLテンプレートを作ってください」と。
できあがったのがこちらの仕組みです。
// ▼ 毎回ここだけ書き換える ▼
const SPEECH_TEXT = "今日もClaude Codeと格闘してきました！";
const ARTICLE_TITLE = "記事タイトルをここに入れる";
const CATEGORY = "カテゴリー名";HTML（エイチティーエムエル／ウェブページを作るための言語）のファイルですが、難しいことは何もありません。
この3行を書き換えるだけで、毎回使い回せる。
初心者でも、コードがわからなくても、仕組みは作れるんだと気づいた瞬間でした。
③ メジロのアイコンを組み込んだ
アイコン画像はGemini（ジェミニ／Googleが提供するAIツール）で作成しました。
メガネをかけて、電球マークを持ったメジロのイラストです。
このイラストをClaude Codeに指示して組み込んでもらいました。
「画像ファイルに差し替えて、丸くトリミングしてください」と伝えただけで、完了しました。
④ PuppeteerでPNG画像に書き出した
HTMLファイルのままでは画像として使えません。
そこで登場したのがPuppeteer（パペティア）です。
Puppeteerとは「HTMLをそのまま画像に変換できるツール」のことです。
ブラウザで表示した画面を、そのままスクリーンショットで保存してくれるイメージです。
Claude Codeが必要な設定をすべて行い、コマンドを1つ実行しただけで、1200×630pxのPNG画像が完成しました。
次回からはこのコマンドを1つ打つだけ。仕組みが完成した瞬間でした。
⑤ WordPressにアップロードして完成
できあがった画像を、WordPressの記事編集画面から手動でアップロードしました。
「アイキャッチ画像を設定」のボタンから選ぶだけで、無事に設定できました。
つまずいたポイント（正直な記録）
Puppeteerを実行したとき、最初にエラーが出ました。
エラーとは「うまくいきませんでした」というパソコンからのメッセージです。
「どうしよう…」と思った瞬間、Claude Codeが自動でエラーの原因を読んで、対処してくれました。
原因はブラウザ（表示ソフト）が未インストールだったこと。
Claude Codeが自分でダウンロードして、そのまま続きを進めてくれたんです。
解決した方法
正直に言うと、自分では何もしていません。
Claude Codeがエラーを読んで、次の手順を判断して、実行してくれました。
「エラーが出たらどうしよう」という不安は、AIを使うと意外と小さくなります。
わからないことはそのまま任せる。それが一番の近道でした。
今日のまとめ・次回予告
今日できあがったのは「アイキャッチ画像」だけではありません。
毎回ゼロから作らなくていい仕組みが完成しました。
次回からの手順はたったこれだけです。
- 3行書き換える
- コマンドを1つ実行する
- 画像が完成する
コードを書いたのはClaude Code。エラーを解決したのもClaude Code。
自分がやったのは「方向性を決めること」と「指示すること」だけでした。
それでもちゃんと仕組みが作れる。
「初心者でも、仕組みは作れる」
そのことを実感できた一日でした。同じように感じてくれた方がいたら、嬉しいです。
次回は、仕組みを作ったつもりが全然動いていなかった話をします。「作る」と「動く」は別のことでした。どうぞお楽しみに！
コメント