「AIで作ったアイキャッチを入れたら、上のほうが切れて文字が読めない」 「推奨サイズで作ったはずなのに、スマホで見ると顔や見出しが欠ける」 「毎回トリミングし直すのが面倒で、そのうち画像を入れなくなった」
WordPressのアイキャッチが見切れるのは、サイズ設定のせいではありません。「AIが返してくる画像の形」と「ブログが表示する枠の形」が最初から違うからです。
先に結論を書きます。AI画像生成は、頼んでも16:9で返ってきません。筆者が毎晩使っている生成ツールは、横長を指定しても3:2に近い形(1536×1024)で返してきます。これをそのまま入れると、上下が切り落とされてタイトル文字の頭が消えます。直し方は2つだけで、「生成する時に上端を空けておく」ことと、「載せる前に決まった比率へ切る」ことです。
筆者は北海道で建設業をやっている40代の現場マン(非エンジニア)です。プログラムは書けませんが、ブログのアイキャッチ1枚と記事内の図解3枚を、ほぼ毎晩AIで作って公開しています。この記事では、実際に見切れた原因と、いま使っている手順をそのまま書きます。専門用語は出るたびに噛み砕きます。
※ 本記事は Claude Code(筆者が使用中のAIアシスタント)が筆者の実体験を元に執筆しています。
この記事はこんな方向け
- AIで作った画像をブログのアイキャッチに使いたい人
- 「推奨サイズ1200×630」で作ったのになぜか見切れる人
- トリミングのやり直しが面倒で、画像作りが続かなくなった人
- プログラミングは分からないけれど、毎回同じ形で量産したい人
🎬 この記事に登場するキャラ
- 社長 — 筆者本人(北海道・建設業41歳・副業で複数の事業を運営)
- 策 — Claude Code(参謀AI・冷静な軍師)
- 凛 — Claude.ai(秘書AI・ちょいドS姉御)
- Claude — 純AIキャラ(実測値・仕様を淡々と提示するロボット)
社長:「AIにアイキャッチ作らせたのよ。かっこよくできたのに、ブログに入れたらタイトルの上半分が消えててさ。」
凛:「そりゃそうでしょ。あんたが作った画像と、ブログが表示する枠の形が違うんだから。」
社長:「え、サイズはちゃんと横長で指定したよ。」
策:「横長にはなっています。ただし16:9ではありません。多くの画像生成は、横長を頼むと3:2に近い形で返します。16:9の枠に入れると、上下がその分だけ切り落とされます。」
凛:「画像が悪いんじゃなくて、渡す前の一手間を飛ばしてるの。そこ直しなさい。」
📌 目次(クリックでジャンプ)
1. 【問題提起】アイキャッチが見切れる本当の理由
1-1. 「推奨サイズ」を調べても直らない
「WordPress アイキャッチ サイズ」で調べると、だいたい1200×630pxが出てきます。これ自体は正しい情報です。SNSでシェアされた時の表示に合わせた比率で、多くのテーマ(ブログの見た目を決める着せ替え部品のこと)がこの前提で作られています。
でも、この数字を知っても見切れは直りませんでした。理由は単純で、問題はサイズではなく比率だからです。
- 1200×630 → 比率はおよそ 1.9:1
- AI画像生成が返してくる横長 → 1536×1024 = 1.5:1
同じ「横長」でも、縦の余り方がまったく違います。1.5:1の画像を1.9:1の枠に流し込めば、上下の合計で2割前後が視界から消えます。筆者が最初に踏んだのはこれでした。
1-2. 消えるのは、いちばん見せたい場所
厄介なのは、切れるのが上下だという点です。
AIにアイキャッチを頼むと、たいてい上のほうにタイトル文字を置いてきます。デザインとしては自然です。ところが表示される枠は上下が狭いので、その一番大事な行から順に消えていきます。
「画像がなんとなく寂しい」ではなく「タイトルの頭が欠けている」状態で公開されます。しかも管理画面のプレビューでは全体が見えていることが多いので、自分では気づけません。
管理画面で正しく見えているのに、公開ページでは違って見える——という食い違いは画像に限りません。同じ種類の見落としはRank Mathでタイトルが反映されない原因にも書きました。
1-3. 「黒帯を入れて」も安定しない
対策としてよく紹介されるのが、生成する時に「上下に黒帯を入れて」と頼む方法です。筆者も試しました。
うまくいく時はいきます。ただ毎回は効きません。左右に黒帯が入って左右が余ることもあれば、指示を無視して普通の横長で返ってくることもあります。4枚に1枚くらいは作り直しになりました。
毎晩4枚作る立場からすると、「運がよければ通る方法」は方法として使えません。そこで筆者は、生成側と加工側の2段構えに切り替えました。
2. 【AI導入で変わった】生成の指示に「安全地帯」を書くようになった
2-1. 切られる前提でレイアウトを指示する
いちばん効いたのがこれです。比率をAIに守らせるのは諦めて、切られても困らない置き方を最初から指示するようにしました。

実際にプロンプト(AIへの指示文)に毎回入れている文言が、これです。
【レイアウト(セーフエリア厳守)】
- 上端〜15%:完全な空白(何も置かない) # ここを書き換える
- 上から15〜30%:サブタイトル(小さめの文字)
- 上から30〜65%:メインタイトル(特大2行)
- 上から75〜90%:ブログ名と一言説明
画面全体を使い、左右に黒帯を作らないこと。
上端の15%を最初から捨て地にしておく。こうすると、上下が切り落とされても消えるのは空白だけで、文字は生き残ります。「16:9で作って」とお願いするより、こちらのほうがはるかに安定しました。
2-2. 文字はAIに焼き込ませる
もうひとつ変えたのが、タイトル文字を画像の中に描かせてしまうことです。あとから別ソフトで文字を乗せる方法もありますが、工程が増えるほど続かなくなります。
ただし日本語の文字は、そこそこの確率で崩れます。筆者は生成のたびに画像を開いて、文字が正しく読めるかを必ず自分の目で確認しています。崩れていたらタイトルを短くして1回だけ作り直す、というルールにしています。2回以上粘っても、たいてい良くなりません。
2-3. 変わったのは「作り直しの回数」
| 工程 | 以前 | セーフエリア指示を入れた後 |
|---|---|---|
| 比率の扱い | 「16:9で」と頼むだけ | 上端15%を空けさせる |
| 見切れ | 4枚に1枚は作り直し | ほぼ発生しない |
| 文字崩れ | 気づかず公開したことあり | 生成のたびに目視 |
作業時間はほとんど変わっていません。変わったのは、作り直しに費やす時間が消えたことです。
社長:「上を15%空けとくだけ?そんな単純な話なの。」
Claude:「はい。切り取られる場所が決まっているなら、そこに何も置かないのが最短です。比率を毎回制御しようとするより成功率が上がります。」
策:「発想の順番が逆なんです。画像に合わせて枠を直すのではなく、枠に合わせた画像を最初から作らせる。」
凛:「毎回トリミングでチマチマ直してた誰かさん、聞いてる?」
社長:「…はい。俺です。」
3. 【具体例】実際に見切れた3つのパターン
ここからは、筆者が実際にやらかした3つを書きます。全部、画像そのものは綺麗に出来ていたものです。

3-1. ケース1:3:2のまま入れて、タイトルの頭が消えた
いちばん最初の事故です。生成された1536×1024の画像を、何もせずそのままアイキャッチに設定しました。
一覧ページのサムネイルは正方形に近い形で切られ、記事上部では横長に切られます。同じ画像なのに、場所ごとに違う切られ方をします。結果、一覧では文字が読めるのに記事を開くと消えている、という状態になりました。
教訓:載せる前に、決まった比率へ自分で切ってから渡す。枠側に切らせると、切り方をこちらで決められません。
3-2. ケース2:横に細長い画像で、左右に黒帯が出た
「16:9にして」と強く頼んだ結果、AIが上下に黒い帯を足して帳尻を合わせてきたことがあります。比率は合っています。ただし中身は小さく縮んで、上下に黒い余白が入った状態です。
これを16:9の枠に入れると、今度は黒帯ごと表示されるので、記事の頭に黒い線が2本入ったような見た目になります。比率が合っていても、見た目としては失敗でした。
教訓:黒帯で比率を合わせるのは、直したことにならない。中身が枠いっぱいに広がっていて初めて成功です。
3-3. ケース3:文字が崩れたまま公開してしまった
3つ目は比率ではなく、文字の崩れです。
日本語をAIに描かせると、画数の多い漢字が潰れたり、1文字だけ別の字に化けたりします。少し離れて見ると「それらしく」見えてしまうので、確認したつもりで通過します。
いまは生成のたびに拡大して読むようにしています。画像の中の文字は、記事タイトルと同じ扱いです。誤字のまま何ヶ月も残ります。
AIで作った画像をブログ全体に入れ替えた時の全記録はブログのアイキャッチ・画像をAIで作る方法にまとめてあります。
社長:「黒帯が出た時は、俺『比率合ってるじゃん』って喜んだんだけどな。」
凛:「数字だけ見て満足するクセ、やめなさい。読者は数字じゃなくて絵を見てるの。」
策:「はい。比率は目的ではなく手段です。目的は、伝えたい文字が欠けずに読めること。」
Claude:「補足します。同じ画像でも、一覧・記事上部・SNS共有の3か所で切られ方が変わります。中央寄せで作ると、どの切られ方でも生き残りやすくなります。」
PR / アフィリエイトリンク
4. 【じゃあどうやる?】見切れないアイキャッチを毎回そろえる5ステップ
ここからが実務です。筆者がいま毎晩やっている手順を、そのまま書きます。

Step 1:仕上がりの比率を1つに決める
まず、自分のブログで使う比率を1つだけ決めます。筆者は16:9(1200×675)に固定しました。
複数の比率を使い分けると、そのたびに切り方を考えることになります。1つに決めてしまえば、以降は何も考えなくて済みます。記事内の図解は3:2(長辺1200px)で統一しています。
Step 2:生成の指示に「上端は空白」と書く
2章で書いた一文を、プロンプトに毎回貼ります。これが実質的な本体です。
書くのは3つだけです。「上端〜15%は完全な空白」「左右に黒帯を作らない」「画面全体を使う」。この3行があるかないかで、使える画像の率がはっきり変わりました。
Step 3:生成した画像を、拡大して読む
出てきたら、必ず開いて文字を読みます。流し見はしません。見るのは「漢字が潰れていないか」「1文字だけ違う字になっていないか」「端の文字が欠けていないか」の3点です。
崩れていたら、タイトルを短くして1回だけ作り直します。それでも崩れるなら、その画像はあきらめます。崩れた文字のまま公開するくらいなら、画像なしのほうがマシという判断です。
Step 4:載せる前に、決めた比率へ切る
ここで初めて加工します。1536×1024を1200×675へ切ります。中央から上寄りを残すように切ると、タイトル文字が中央に来ます。
1枚ずつ手作業でやると続かないので、筆者はAIアシスタントに「このフォルダの画像を、アイキャッチは16:9、記事内の図解は長辺1200pxにそろえて」と頼んで、まとめて処理させています。同じ設定を毎回手で入れ直す作業こそ、任せる価値があります。
一括でリサイズ・圧縮する時の落とし穴はClaude Codeで画像を一括リサイズ・圧縮する方法に書きました。
Step 5:公開ページで、実物を見る
最後は必ず管理画面ではなく公開ページで確認します。しかもスマホの幅で見ます。
読者の大半はスマホです。パソコンの画面で整って見えても、スマホでは切られ方が変わります。ここまで見て、はじめて「見切れていない」と言えます。
画像を毎回この流れで作って記事に差し込むところまでを自動で回す仕組みは、Claude CodeでWordPressに記事を自動投稿する方法にまとめてあります。
PR / アフィリエイトリンク
社長:「Step 4の一括で切るやつ、これ知らずに1枚ずつやってたわ…。」
策:「1枚なら手作業でも成立します。毎日4枚になった瞬間に破綻します。回数が増える作業から先に任せてください。」
凛:「で、Step 5を飛ばすんでしょ。あんた実物見ないで『できた』って言うんだから。」
社長:「…見ます。スマホで見ます。」
Claude:「補足します。Step 2とStep 4はセットです。上端を空けても切らなければ位置はズレますし、切っても上端が埋まっていれば文字が消えます。」
5. よくある質問(FAQ)
Q1. アイキャッチのサイズは結局いくつがいいですか?
1200×675(16:9)で困っていません。1200×630を勧める記事も多く、こちらも間違いではありません。大事なのは数字より「1つに決めて、毎回それに合わせる」ことです。バラバラなのが一番よくありません。
Q2. AIに「16:9で」と頼めば済む話ではないのですか?
通る時と通らない時があります。筆者の体感では、指定だけに頼ると4枚に1枚は作り直しでした。上端を空けさせる指示と、あとから切る工程を足したほうが、結果的に早いです。
Q3. 文字は画像に焼き込むべきですか?別に乗せるべきですか?
焼き込むほうを選びました。工程が1つ減るからです。ただし日本語が崩れるリスクがあるので、毎回目視するのが条件になります。目視が続けられないなら、あとから乗せる方式のほうが安全です。
Q4. 無料の画像生成でも足りますか?
筆者は無料枠だけで運用しています。1日に作れる枚数に上限があるので、1晩に1記事分(アイキャッチ1+図解3)と決めています。上限に当たった日は翌日に回すだけです。無料枠でそろえる具体的な進め方はブログのアイキャッチをAIで作る方法に書きました。
Q5. テーマを変えたら見切れ方も変わりますか?
変わります。テーマごとに一覧や記事上部の枠の形が違うためです。テーマを変えた直後は、過去記事のアイキャッチを何本か開いて確認しておくと安心です。テーマ選びそのものはWordPressテーマ沼に落ちるなにまとめました。
Q6. 過去記事のアイキャッチも全部作り直すべきですか?
必要ありません。筆者は「読者から見て文字が欠けているもの」だけを直しています。全部やろうとすると終わらないので、アクセスの多い記事から数本だけで十分です。
6. まとめ|見切れは「画像の問題」ではなく「渡し方の問題」
長くなったので、要点を3つに絞ります。
- AIは16:9で返してこない。多くの生成は3:2に近い形で返します。1.9:1の枠に入れれば上下が消えるのは当たり前で、画像の出来とは関係ありません。
- 上端15%を空白にしておく。切られる場所が決まっているなら、そこに何も置かない。比率を毎回制御しようとするより確実です。
- 載せる前に切る。公開ページで見る。枠側に切らせると切り方を選べません。最後はスマホ幅の実物で確認してください。
「AIが下手だから見切れる」のではありませんでした。AIの返し方が分かっていれば、置き方でよけられるだけの話です。ここを押さえてから、筆者は画像づくりで手が止まらなくなりました。
次に読むべき記事
- ブログのアイキャッチをAIで作る方法|無料枠だけで4枚そろえる作り方と40代非エンジニアが踏んだ3つの落とし穴
- Claude Codeで画像を一括リサイズ・圧縮する方法|非エンジニアが踏んだ3つの落とし穴
- ブログのアイキャッチ・画像をAIで作る方法|”ブログの顔”を1日で全部作り直した実録
- Claude CodeでWordPressに記事を自動投稿する方法と、1年運用してわかった落とし穴5つ
- 【2026年最新】WordPressテーマ沼に落ちるな|40代副業ブロガーが辿り着いたテーマ選びの正解
- Claude Code副業の始め方|13ヶ月の全記録(ロードマップ付き)
PR / アフィリエイトリンク
※ 本記事は Claude Code(筆者が使用中のAIアシスタント)自身が、筆者の実体験を元に執筆しています。 ※ 本記事にはアフィリエイトリンクが含まれます。





