ブログのアイキャッチを全記事統一した話【実践編・AIとのやりとり全公開】

ブログ記事が50本を超えたあたりで、ふと気になりました。「アイキャッチ、バラバラじゃない？」

タイトルが入っているものと入っていないもの、帯が白いもの、スタイルが違うもの。Claude Code（クロコ）に相談したら、全記事を確認して作り直してくれました。今回はそのやりとりを全部公開します。

きっかけは「帯がタイトルと被っている」という気づき

記事一覧を見ていたとき、カテゴリーバッジ（「ブログ運営」などのラベル）がアイキャッチの帯バナーと重なっていることに気づきました。

なべちゃんアイキャッチの左上の『AI活用』の文字がタイトルと被ってるんだけど、これはいいの？

クロコカテゴリーバッジが上部帯バナーと重なっていますね。CSSでバッジを下部に移動させます。

Code Snippetsプラグインに1行CSSを追加するだけで、バッジが左下に移動しました。

次に、全50本以上の記事のアイキャッチをクロコに確認してもらいました。

なべちゃん他に修正した方がいいアイキャッチがあるか確認して。

クロコがWordPress APIで全記事のアイキャッチ画像URLを取得し、1枚ずつ確認してくれました。見つかった問題点は主に3つです。

問題のある記事には、クロコが記事ごとにGeminiプロンプトを作ってくれました。

なべちゃん問題がある記事のプロンプトを教えて。

クロコ記事ごとのシーンに合わせたプロンプトを作りました。先頭に「添付した画像のロボットキャラクターを必ず使用してください。デザインを変えないこと。」を必ず入れてください。

Geminiで生成 → 保存 → 「保存したよ」と伝える → クロコが自動でWordPressに差し替え、という流れを繰り返しました。

修正後に確認すると、帯の白がページの白背景と溶け込んで見えにくいことに気づきました。

なべちゃん帯の背景が白だと見にくい感じがするんだけど、これでいい？

クロコCSSでアイキャッチ画像に影（box-shadow）を追加すれば、全記事一括で解決できます。

Code Snippetsに影のCSSを1行追加するだけで、すべてのアイキャッチに薄い影がつき、境界がはっきりしました。さらに、白帯が残っている記事はプロンプトを修正して帯の色を指定し直しました。

今回の作業でやったことをまとめると、こうなります。

1人でやったら途方に暮れる作業でも、AIと一緒なら「確認して」「差し替えて」の繰り返しで終わりました。

今回気づいたのは、AIは新しいものを作るだけでなく、既存のものを整える作業も得意だということです。

「なんか統一感ないな」と感じたら、まずAIに全部確認してもらうのがおすすめです。問題点の洗い出しから修正まで、一気にやってくれます。

アイキャッチの作り方・プロンプトの詳細は入門編で解説しています。

統一するとブログ全体に「ブランド感」が出て、読者が一目でわかるデザインになります。記事が増えてから統一作業をしてもAIに手伝ってもらえば効率よくできました。

横1200px×縦630px（16:9）が推奨サイズです。このサイズにしておくとSNSでシェアされたときにも綺麗に表示されます。

GeminiやChatGPTの画像生成機能を使うと、プロンプトを入力するだけでオリジナルの画像が作れます。私はGeminiで4色ロボットのキャラクターデザインに統一しています。