AIにブログ画像を任せたら似た絵ばかりになった｜記事ごとに作り直した実例

この記事で分かること

ブログの画像づくりをAIに任せたい人に向けた記事です。

結論から書くと、AIに任せても「記事ごとに見分けがつくか」は人が見て確かめる必要がありました。この記事では、似すぎた画像を作り直した流れと、本文に絵を足したときの分担をまとめます。

このブログでは、画像とデザインを Codex、記事の作成と組み込みを Claude Code が担当しています。分担のしかた自体はこちらの記事で書いたので、今回は「分担した後に何を直したか」の話です。

最初の画像は、統一しすぎていた

記事が5本そろったところで、トップページの一覧を見て気になりました。そのとき Codex に伝えたのが、次の言葉です。

各ブログのヘッダー画像が同じ様なイメージでどの記事も内容が変化ない様に感じてしまうので各記事の内容に合わせてもっと変化をつけて欲しいです。

どの記事のヘッダーも「机とノートパソコン」が中心の絵で、色づかいも似ていました。ブログとしての統一感はありましたが、一覧で並べると、どれがどの記事か分かりにくくなっていました。

色ではなく「絵の主役」から作り直した

Codex は、机とパソコンに寄りすぎていたことを認めたうえで、配色や質感のつながりは残しつつ、絵の主役・構図・場面を記事ごとに変える方針に切り替えました（以下は Codex の作業記録の要約です）。

• ブログ開設：Webページを家に見立てた建設風景
• CLIで記事投稿：原稿が処理のゲートを通って公開ページになる流れ
• AIの安全機能：一時停止の印と、確認のゲート・盾
• 2つのAIの分担：デザインの道具と原稿を共有フォルダーで結ぶ、上から見た構図
• VS Code の導入：導入に必要な部品を収めた道具箱

作り直した画像は Claude Code が5記事に差し替えました。タイトルや本文、公開状態はそのままで、古い画像も削除せずに残しています。

単に色を変えるのではなく、「その記事の中身を一言で表すと何か」から考え直したのがポイントでした。

ヘッダーだけでは、まだ読みにくかった

ヘッダーが変わって一覧は見分けやすくなりましたが、記事を開くと、今度は文字ばかりなのが気になりました。Claude Code に伝えたのは次の言葉です。

各記事ですがヘッダーにだけ画像があり、文章だけでとても読みにくいので合間にもイラスト画像があると良いのですが。。。

文字のある図はコードで、文字のない絵はAI画像で

本文に入れる絵は、2種類に分けて作りました。

• 説明図（Claude Code）：手順や仕組みを、文字入りの図にまとめたもの。各記事1枚、計9枚。HTMLで作って画像にしているので、図の中の文字が正確です
• イラスト（Codex）：場面を表す、文字のない絵。各記事1枚、計9枚

分けた理由は、画像を生成するAIに文字を描かせると、読めない文字や間違った文字が入りやすいからです。手順の説明のように文字が正確でないと困るものはコードで描き、雰囲気を伝える絵はAI画像に任せる、という分け方にしました。

イラストは、たとえば次のような場面です（Codex の納品書より要約）。

• FX自動売買の全体：夜、時計と点検灯が機構の動きを確かめている
• バックテスト：たくさんの候補をふるいにかける
• ニュース収集：世界中の見出しが一つの資料トレーに集まる
• 安全機能：書類を持つ手が、小さな門の手前で人の確認を待つ

あわせて、新しく公開した4記事（FX自動化の3本と、使っている道具の記事）のヘッダーも作ってもらい、追加の納品は合計13枚になりました。

受け渡しと、組み込みで起きたこと

Codex からの納品には、画像だけでなく次のものが付いていました。

• 画像ごとの代替テキスト（alt）の案
• どの見出しの近くに入れるかの候補
• 「説明図とイラストが続けて並ばないように」という注意

Claude Code は、これを読んで13枚を登録し、記事に組み込みました。その途中で、小さなつまずきもありました。

• 1記事だけ、変更が下書きのまま止まっていた：公開ページを確認して気づき、公開し直した
• トップページの大きな画像が、最初だけ表示されなかった：サイトが画像を縮小する処理の待ちで、しばらくすると表示された
• スマホ幅での確認は一部だけ：Codex が導入記事をスマホ幅で確認したが、全記事を実機で確かめたわけではない

公開して終わりではなく、公開ページで実際に見て確かめる手順が必要だと改めて感じました。

使ってみて分かったこと

• 統一感と見分けやすさは、両方いる：同じ色・同じ質感でそろえつつ、絵の主役は記事ごとに変える
• 「見分けがつくか」は人が見る：AIは指示どおりに作ってくれますが、一覧で並べたときの印象は、並べてみないと分かりませんでした
• 文字が大事な図はAI画像にしない：説明図はコードで作ると、文字の間違いを心配せずに済みます
• 納品書に「どこに入れるか」まで書いてもらう：受け取る側が迷わず、組み込みが早くなりました

まとめ

AIに画像を任せると、短い時間でたくさんの絵ができます。一方で、そろえすぎると記事の違いが伝わらなくなります。

「記事の中身を一言で表すと何か」を絵の主役にすることと、文字のある図とない絵を作り分けること。この2つで、ブログの見た目はかなり読みやすくなりました。

次に読む：画像の次は、ブログの宣伝と検索対策もAIと見直しました → AIとブログの宣伝・検索対策を見直した記録