AIでアイキャッチを作るなら「余白＋後文字」｜実際に作ってわかったクリックされる構図

AIでアイキャッチを作ってみたら、こんなことはありませんでしたか？

「きれいな画像が作れたのに、タイトルを入れたら読みにくくなった。」
「何度作り直しても、なんとなくプロっぽく見えない。」

私もブログを始めた当初、アイキャッチに時間をかけすぎていました。AI画像生成で作って、気に入らなくて作り直して、それでもしっくりこなくて——という繰り返し。

実際に何十枚も作ってみてわかったのは、問題は「きれいさ」ではなく、
「余白があるかどうか」と「文字をどこで入れるか」でした。

この記事では、クリックされやすいアイキャッチの構図と、AI生成画像をブログで使うための実践的な流れを解説します。

AIアイキャッチで失敗しやすいパターン

上の画像は典型的な失敗パターンです。

パッと見はきれいに見えますが、タイトルを入れる場所がない。
背景の模様や色が複雑で、どこに文字を置いても読みにくくなってしまいます。

失敗しやすいのは、主に以下の3パターンです。

パターン①：背景が主張しすぎる

グラデーションが複雑だったり、テクスチャが細かすぎたりすると、文字と背景の境界がなくなります。

パターン②：主役が画面の中央にドーンと来ている

キャラクターや物体が中央を完全に埋めていると、タイトルを入れる余地がなくなります。

パターン③：AI側に文字まで入れてもらおうとしている

前の記事でも触れましたが、AIが生成する日本語文字は崩れやすいです。文字はAIに任せず、後から自分で入れるのが基本です。

「余白あり」と「余白なし」を並べると一目でわかる

<!-- 画像②：余白なし版と余白あり版の比較（同じテーマで作った2枚） -->

左が余白なし、右が余白ありです。

同じテーマで作った画像でも、余白があるだけでタイトルを入れやすくなるのがわかります。余白は「空白の無駄」ではなく、「文字を置くための場所」として最初から設計しておくものです。

プロンプトで余白を作るには、以下のような指示が効きます。

Leave empty space on the left side for text overlay（左に余白）
Lower third is clear for title placement（下部に余白）
Minimalist composition with right side open（右に余白）

クリックされやすい構図3パターン

実際に使ってみて安定しているのは、以下の3つです。

構図①：左側に余白＋右側に主役

左にタイトルを置き、右側にビジュアルを集める構図です。日本語は左から読むので、視線の動きと合っています。ブログ記事のサムネイルとして最も使いやすい構図です。

構図②：中央に主役＋背景をぼかす

主役（キャラクターや物体）を中央に置きつつ、背景をソフトにぼかす構図です。主役の上下に余白が生まれるので、タイトルを上か下に入れやすくなります。

構図③：下部に余白

画像の下1/3を暗めのグラデーションにして、そこにタイトルを入れる構図です。YouTubeのサムネイルでよく見るパターンで、視線が自然に下のテキストに流れます。

文字を後から入れると何が変わるか

<!-- 画像⑥：AI生成の文字入り失敗例 vs Canvaで後入れした成功例（Before/After） -->

左がAIに文字まで生成させた例、右がCanvaで後から文字を入れた例です。

フォント・文字サイズ・色が自分でコントロールできるので、読みやすさが段違いです。

後入れに使うツールはCanvaが最もとっつきやすいです。操作が直感的で、ブログ用の1200×630pxのキャンバスがテンプレートとして最初から用意されています。フォントはNoto Sans JPかBIZ UDゴシックあたりが視認性が高くておすすめです。

実際に使えるプロンプト例

以下は、アイキャッチ背景用に使っているプロンプトです。共通して「No text」を入れ、余白の位置を明示しています。

ビジネス系ブログ向け（左余白）

Professional blog thumbnail background.
Dark navy gradient, clean and minimal.
Main visual element on the right side only.
Left side completely empty for text overlay.
No text, no letters, no numbers.
16:9 ratio.

AI・テック系向け（下部余白）

Tech-themed background for blog post thumbnail.
Dark background with subtle circuit or geometric pattern.
Bottom third is a dark gradient for text placement.
No text included.
16:9 horizontal.

汎用ミニマル（余白多め）

Simple minimalist background.
Single color gradient from dark to slightly lighter.
Lots of empty space, suitable for text overlay.
No text, no UI elements.
Clean and modern.
16:9.

WordPressに使うときの注意点

アイキャッチ画像をWordPressに設定するときに、見落としやすいポイントを4つまとめます。

画像サイズ
推奨は1200×630px。OGP（SNSでシェアされたときのサムネイル）にもこのサイズが使われます。

圧縮
AI生成画像はファイルサイズが大きくなりがちです。TinyPNGやShortPixelを通してから入れると、表示速度への影響を抑えられます。

altテキスト
検索エンジンは画像の内容を読めないので、altテキストで補完します。「ChatGPT画像生成の失敗例と改善例」のように、記事の内容を短く入れるのがベターです。

ファイル名
image001.pngよりもchatgpt-image-japanese-text.pngのように、内容がわかるファイル名にしておくと、画像検索からの流入が見込めます。

よくある質問

Q. AI画像に文字まで入れてもいい？

A. 入れることはできますが、日本語の場合は崩れやすいです。英語のシンプルなキャッチコピー程度であれば安定することもありますが、記事タイトルをそのまま入れようとすると失敗しやすいです。後入れの方が確実で使い回しもしやすいので、基本は後入れがおすすめです。

Q. Canvaで後から文字を入れるのは手間がかかる？

A. 最初の数回は手間に感じますが、テンプレートを一度作ってしまえばかなり楽になります。フォント・色・サイズを固定したテンプレートをCanvaに保存しておいて、背景画像だけ差し替える運用にすると、1枚あたり2〜3分で完成します。

Q. アイキャッチ画像のサイズはどれが正解？

A. ブログ（WordPress）なら1200×630pxがOGP対応で最も汎用的です。Instagramのフィード投稿用なら1080×1080px（正方形）または1080×1350px（縦長）、リール表紙なら1080×1920px（9:16）が標準です。用途によって変わるので、最初に「何に使うか」を決めてからサイズを設定するのがスムーズです。