ブログを書くときに毎回地味に悩むのが、アイキャッチ画像の用意です。
タイトルや内容に合った雰囲気の画像を探したり、自分でデザインしたりするのは意外と時間がかかる上に、投稿数が増えるほどその負担は大きくなります。
そこで今回、OpenAIのGPT-4oとDALL·E 3を活用して、記事タイトルから自動でアイキャッチ画像を生成する仕組みをWordPressに導入してみました。
なぜアイキャッチ画像の自動化をしようと思ったのか？
ブログを1本書くだけであれば、画像を手作業で用意してもそこまで苦ではありません。
ただ、今後Tech Blogを継続的に投稿していくことを考えたとき、毎回同じような作業を繰り返すのは効率が悪いと感じるようになりました。
特に、デザインの専門知識がないエンジニアが、業務時間を使って毎回アイキャッチを作るのは、本人にとっても、会社にとっても生産的とは言えません。 そこで、画像生成AIを使用して自動化することになりました。
目指した構成と使用した技術
最終的な流れは以下の3つに：
- 投稿タイトルから、視認性の高い形に自動で改行されたテキストを取得
- タイトルの雰囲気に合う、抽象的でシンプルな背景画像を生成
- それらを合成し、WordPressのアイキャッチとして設定
実装したUIとワークフロー
WordPressの投稿編集画面のサイドバーに、「🧠 AI画像を生成」ボタンを追加しました。 
このボタンを押すと、以下の処理が裏側で自動的に実行されます：
- GPT-4oにタイトルを渡し、改行位置を考慮した3行以内の整形済みテキストを生成
- タイトルをプロンプトに含めて、DALL·E 3でパステル調の抽象的背景画像を生成
- PHPでタイトルを画像に重ね、中央揃えで読みやすいように配置
- 最後に合成画像をWordPressのアイキャッチとして登録
実際に生成された画像
実際に以下の記事を使用して、どのようなアイキャッチが作成されるかテストしてみました。
作成された画像はこちらです 
実際に使用しているプロンプト
画像の中のテキストは、行数や文字数に応じて自動的にフォントサイズが調整され、長いタイトルでも綺麗に収まるようにしています。 これを実現するために以下のプロンプトを投げました。
以下のブログタイトルに、人間が読みやすいようにアイキャッチ用の改行（\n）を入れてください。改行はタイトル全体が1〜3行に収まるように調整してください。説明や挨拶などは不要で、改行済みのテキストだけを出力してください。 タイトル： (ここにタイトルを入れる)
DALL·E 3には、以下のような指示を送っています：
Extremely minimal blog thumbnail using only 1 or 2 soft pastel colors. Flat, clean background with no details or clutter. The image should abstractly express: "<タイトル>" using only simple geometric shapes or a single icon. Avoid scenes, patterns, text, or multiple icons. No black or dark colors. No gradients. Keep it simple, calm, and symbolic.
簡単にいうと、ブログのタイトルとタグの情報の他に、パステルカラーを使用して。文字列は入れないで。タイトルが見辛くなるから黒い色は入れないで。などの条件を試行錯誤しながら少しずつ追加していきました。
余談：GPT-4o image generation（申請中）
本当は、OpenAIが2024年に発表したGPT-4o Image Generationも使いたかったのですが、現在は申請中です。
Introducing 4o Image Generation
試しに、本文の冒頭300文字を投げて生成してみた結果がこちら：
このクオリティがワンショットで出てくるのは本当に驚異的です。
まとめ
今回は、GPT-4oとDALL·E 3を組み合わせて、ブログ投稿時に自動でアイキャッチ画像を作成するWordPressプラグインを構築しました。
タイトルの改行から背景生成、画像の合成、アイキャッチ設定までがワンストップで完了するようになり、投稿の効率が大幅に向上しました。
ブログ投稿のハードルを下げつつ、ビジュアルの統一感も確保できるので、今後の継続的な発信に役立ちそうです。
