アイキャッチは、記事一覧や記事の冒頭に表示する案内画像です。今はAIを使って、記事に合うイラストや背景を作れます。AIへの依頼文、生成画像の選び方、文字の仕上げ、WordPressへの掲載まで、実際に作ったAI画像を見ながら進めていきましょう。
最初は「AIで背景、あとから文字」に分けると直しやすい
アイキャッチ依頼文から、掲載確認まで
AIに文字入りの完成画像を頼むこともできます。ただ、背景をAIで作り、見出しをCanvaなどで別に載せておくと、題名を変えたときに文字だけ直せます。画像全体を生成し直す方法と、文字を分ける方法の両方を選べるように、依頼文を用意しました。
この記事ではChatGPTなど、画像生成に対応するAIへ自然な文章で依頼する方法を使います。画像を生成・修正できることはOpenAI公式の画像生成ガイドでも案内されています。利用できる機能や回数はプラン・環境で異なるため、実際の画面の案内を確認してください。
手順1｜画像のサイズと、短い見出しを決める
最初にブログの一覧を開き、画像枠の比率を見ておきます。横長か正方形かは、テーマによって異なります。どいやさんぽで使っていた1200×600は2:1の作業例なので、すべてのテーマに合うサイズというわけではありません。
見出しは記事タイトル全文を入れず、「AIでつくるアイキャッチ」のような短い主題にします。正式な長いタイトルは、WordPressの記事タイトルに入れます。
AIを使ってブログのアイキャッチ画像を生成して文字を入れWordPressに設定する方法
AIでつくるアイキャッチ
小さな一覧では、細かい説明より主題を読み取れることが大切です。画像と正式タイトルで役割を分けます。
手順2｜AIへ「何を・どんな配置で」を伝える
ブログ記事「AIでアイキャッチ画像を作る方法」の背景画像を作ってください。 横長2:1の構図。やさしい手描き風のイラスト。 右側に、ノートパソコンで画像を選ぶ人、イラストカード、小さな植物。 色は生成り、落ち着いた緑、茶色、淡い黄色。 左半分は、後から見出しを載せられるように大きく余白を残す。 文字、ロゴ、透かしは入れない。小さな一覧表示でも主題が分かる、簡潔な構図。
使うAIの入力欄に依頼文を貼り、画像生成を頼みます。モデル名や専門用語を増やすより、記事の用途、主題、雰囲気、配置、入れたくないものを具体的に伝えると、できた画像を選ぶ基準も持ちやすくなります。
| 依頼に入れること | 今回の例 |
|---|---|
| 用途 | ブログのアイキャッチ |
| 主題 | パソコンで画像を作る・選ぶ人 |
| 雰囲気と色 | 手描き風、生成り・緑・茶色 |
| 構図 | イラストは右、文字用の余白は左 |
| 避けるもの | 文字・ロゴ・透かしを入れない |
この作例は、上の依頼文と同じ内容・構図を指定して実際に生成した画像です。ただし、同じ文から毎回同じ絵ができるわけではありません。指定した画像サイズにならない場合は、後から掲載枠に合わせます。
手順3｜気になるところを、一つずつ直す
生成後は、記事の内容に合っているか、後から文字を置けるか、小さくしても主題が伝わるかを見ます。人物の手や道具の形に不自然なところがないか、不要な文字が入っていないかも確かめましょう。
修正するときは、同じチャットで対象画像を指定し、変えたい部分と残したい部分を伝えます。使っているAIが画像を参照できていない場合は、その画像を添付してから頼みましょう。
この画像の左半分を、見出しを載せられるようにもっと空けてください。 人物、机、植物、手描き風の雰囲気、色は残してください。 文字とロゴは追加しないでください。
手順4｜文字を入れ、表示枠に合わせて仕上げる
- Canvaなどで新しいデザインを作る自分のテーマの表示枠に合う幅と高さを指定します。
- 生成画像を配置する保存した画像をアップロードし、文字を置く側に余白が残るよう配置します。
- 短い見出しを入れる日本語が読みやすい書体と大きさで、背景と文字の色をはっきり分けます。
- 端を避けて配置する重要な文字を端へ寄せず、イラストと重ならない位置に置きます。
- 一覧サイズまで縮小して見る読めなければ文字を減らすか配置を変えます。細かい装飾を増やす前に確認します。
アイキャッチ依頼文から、掲載確認まで
上の完成イメージは、左に短い見出し、右にイラストを置いたものです。制作元で背景と文字を分けて残しておくと、タイトルを変えたときも直せます。文字入れまでAIに任せたい場合は、次のように頼めます。
この背景に、見出し「AIでつくるアイキャッチ」を左側へ大きく入れてください。 日本語を正確に、読みやすい濃い緑で。本文のような小さい文字は入れない。 右側の人物と植物は残し、文字とイラストが重ならないようにしてください。
生成された文字は、漢字、送り仮名、改行を一文字ずつ見ておきましょう。修正を重ねても意図に合わなければ、背景だけを使い、文字は別に入力する方法へ切り替えても構いません。
手順5｜書き出してWordPressへ設定する
操作位置をつかむための説明図です。実画面のスクリーンショットではありません。
PNG・JPEG・WebPなど、使っている環境が対応する形式を選びます。文字やイラストがくっきりした画像と写真では、向いている書き出し設定も違います。容量を小さくすることだけを優先せず、必要な大きさと見た目が保たれているかを見ておきましょう。
WordPressのメディアへアップロードし、対象記事のアイキャッチに設定します。必要な画像には内容に合う代替テキストを付けます。文字入りの画像だけで説明せず、本文にも必要な情報を残してください。
最後は、画像ファイルではなく掲載場所を見る
- 記事冒頭で、意図した画像になっている
- トップ一覧とカテゴリー一覧で文字が切れていない
- スマホの小さな表示でも主題を読める
- 正式タイトルと画像の文言が合っている
- 編集元・依頼文・完成画像を保存した
元画像に問題がなくても、一覧の枠と比率が違えば切り抜かれる場合があります。文字が切れたときは、画像の大きさに加えて、表示枠の比率、文字の位置、切り抜き方を分けて見てみます。
画像生成AIを使うときは、自分の制作物や利用できる素材を使い、利用するサービスの条件を確認します。他人の完成画像をそのまま再現する依頼より、自分の記事の主題・色・構図を伝えて作る方法を選びましょう。
コメント