自動で作ったアイキャッチ、一覧で見たら文字が切れていた

このブログでは10月から、毎朝の記事の下書きづくりをAI（Claude Code）に手伝ってもらっています。その流れのひとつに、アイキャッチ画像の自動作成 があります。

曜日ごとに用意したベース画像の上に、記事のタイトルを文字で載せる。それをPythonのスクリプトで作り、WordPressの下書きにアイキャッチとして設定する、という仕組みです。

最初の1週間ほどは、記事ページで見ると問題なく見えていました。横長の画像に、タイトルが左寄せで大きく、くっきりと入っています。

ところが、ブログの 記事一覧 の画面で見てみると、様子が違いました。サムネイルは小さな正方形で表示されていて、横長の画像の 真ん中だけ が切り取られていたのです。左寄せで入れたタイトルは、行の頭が欠けたり、文字が小さすぎて読めなかったりしていました。【要確認：一覧で気づいたきっかけ・どう見えていたか】

Web制作を長くやっていると、「画像は使われる場所によって切り取られ方が変わる」ということは、知識としては分かっています。それでも、自分のブログで、しかもAIに任せた部分でうっかりしていた。今日はその反省と、作り直して分かったことを書いておきます。

そもそもアイキャッチ画像とは？（初心者向けにひとこと）

アイキャッチ画像は、記事の「顔」になる画像です。WordPressでは「アイキャッチ画像」として記事ごとに1枚設定でき、次のような場所で使われます。

• 記事ページの上部
• ブログの記事一覧のサムネイル
• X（旧Twitter）やFacebookでシェアされたときの画像（OGP）

ポイントは、同じ1枚の画像が、場所によって違う形に切り取られて表示される ことです。SNSでは横長のまま、テーマによっては一覧で正方形に、スマホでは小さく……と、見え方がばらばらになります。

アイキャッチの表示やサイズについては、2015年に「【WordPress】アイキャッチ画像の表示とサイズ指定について」という記事を書いていました。11年経って、今度は「作る側」で同じ問題にぶつかったわけです。【要確認：11年前の記事との関係の感じ方】

何が起きていたのか：横長の画像が正方形に切られる

作っていた画像のサイズは 1200×630ピクセル。SNSでシェアされたときにきれいに表示される、横長の定番サイズです。

一方、このブログの一覧のサムネイルは、画像の 中央を正方形に切り抜いて、270×270ピクセルに縮小 して表示されます。

数字で考えると分かりやすいです。

• 元の画像の横幅：1200ピクセル
• サムネイルに残る範囲：中央の 630×630 ピクセルだけ
• 左右それぞれ 約285ピクセルずつ は、一覧では見えない

左寄せで文字を入れていたので、行の頭がちょうどこの「見えない部分」にかかっていました。さらに、630ピクセル四方を270ピクセルに縮めるので、文字は半分以下の大きさになります。横幅いっぱいの長い行は、縮小されると読めないほど小さくなっていました。

AIにどう伝えて直したか

直すときにAIに伝えたのは、だいたい次のような内容です。【要確認：実際の指示の言い回し】

• ブログ一覧では、画像の中央が正方形（270×270）に切り抜かれる
• 文字はすべて、中央の正方形の内側に収める
• 文字は中央揃えにする
• サムネイルでどう見えるかを確認できる画像も作る

以前の記事でも書きましたが、AIには 「数字で条件を伝える」 と、期待どおりのものが返ってきやすくなります。「サムネイルで読めるようにして」だけでは、AIも何を基準に直せばいいか分かりません。「中央の630×630の内側に」「270×270に縮小されても読める大きさで」と伝えると、スクリプトの中にその数字がそのまま入りました。

作り直して分かった、サムネイルで読める文字の条件

ここからは、作り直したスクリプトに入っている工夫を、AIを使わない人でも参考になる形でまとめます。Canvaなどで手作りする場合も、考え方は同じです。

① 文字は「一番小さく切られる範囲」に収める

いちばん大事なのはこれです。アイキャッチがどこでどう切られるかを調べて、一番狭い範囲 に文字を収めます。このブログなら、横長画像の中央の正方形です。

左右の余った部分には、背景の写真やイラストだけが見えていれば十分です。

② 1行は9文字前後まで、4〜5行に分ける

長いタイトルをそのまま1〜2行に入れると、文字がどんどん小さくなります。そこで、1行9文字前後 を目安に、4〜5行に分けることにしました。

このとき気をつけているのが、言葉の途中で改行しない ことです。「ホームペー／ジ」のように切れると、一気に読みにくくなります。改行位置は、AIに任せきりにせず、意味のまとまりで切ってもらうようにしています。

③ 長いタイトルは「要点だけ」に縮めていい

記事のタイトルが長い場合は、画像に入れる文字を短くしてもかまいません。たとえば昨日の記事「ネームサーバー変更で何度もつまずいた60代Web屋が説明します」なら、画像では「60代Web屋が説明」くらいに縮めても意味は伝わります。

アイキャッチは「タイトルを全部読ませる場所」ではなく、「何の記事かが一瞬で分かる場所」だと考えるようにしました。

④ 文字の後ろを暗くして、最後の1行だけ色を変える

背景が写真だと、場所によって文字が読みにくくなります。作り直したスクリプトでは、画像全体を少し暗くしたうえで、中央ほど濃く 暗くして、白い文字が浮き上がるようにしています。文字には薄い影も付けています。

さらに、最後の1行だけを 黄色 にしています。小さなサムネイルでも、「ここが言いたいこと」が目に入りやすくなります。

⑤ 「切り抜いた見え方」を必ず目で確認する

いちばん効果があったのは、実はこれかもしれません。スクリプトに、完成した横長画像の隣に、270×270に切り抜いたサムネイルを並べた確認用の画像 を作ってもらうようにしました。

さらに、行が長すぎて自動で折り返したときには「改行位置を見直してください」という警告が出るようにしています。毎朝、その確認画像をAIに目視で見てもらい、文字が切れていたら行を短くして作り直す、という手順です。

作って終わりではなく、使われる場所での見え方を確認する。Web制作では当たり前のことですが、自動化するとつい抜けてしまう部分でした。

画像の「重さ」も、あわせて決めておく

以前の記事では、アイキャッチを「100KB以下のJPG」にしたと書きました。今回の作り直しでは、約150KB以下 を目安にしています。【要確認：100KB→150KBに変えた理由（文字のくっきり感を優先した等）】

スクリプトは、画質を少しずつ下げながら保存し、目安の容量に収まったところで止まる仕組みです。実際の画像は、どれも130〜150KB前後に収まっています。

画像が重いとページの表示が遅くなるので、容量の上限は最初に決めておくと安心です。

60代のWeb制作者として感じたこと

今回のことで改めて思ったのは、AIは「言われたこと」はきちんとやるけれど、「どこで使われるか」までは自分から考えてくれない ということです。

最初に「1200×630で、タイトルを入れて」と頼めば、その通りのきれいな画像ができます。でも、それがブログ一覧で正方形に切られることは、こちらが伝えなければAIには分かりません。

これは、お客様のホームページを作るときにも同じです。「この画像はスマホでどう見えるか」「一覧ではどこが切れるか」を考えるのは、昔も今も、作る人間の仕事だと感じています。【要確認】

一方で、気づいてから直すまでは本当に早くなりました。昔なら、画像編集ソフトで1枚ずつ文字を打ち直していたところです。今は、条件を数字で伝えれば、スクリプトごと作り直してもらえます。気づくのは人間、直すのはAIと一緒に。この分担が、いまのところ一番しっくりきています。

まとめ

AIとPythonで作っていたアイキャッチ画像が、ブログ一覧のサムネイルで切れていた話と、作り直して分かったポイントをまとめました。

• アイキャッチは、使われる場所によって切り取られ方が変わる
• このブログでは、横長（1200×630）の中央が正方形（270×270）で一覧に出る
• 文字は一番狭い範囲（中央の正方形）に、中央揃えで収める
• 1行9文字前後・4〜5行、言葉の途中で改行しない
• 長いタイトルは要点だけに縮めてよい
• 文字の後ろを暗くし、最後の1行だけ色を変えると目に入りやすい
• 「切り抜いた見え方」を確認用の画像で必ずチェックする

ご自分のブログのアイキャッチも、一度「記事一覧」の画面で、スマホとパソコンの両方から見てみてください。思わぬところが切れているかもしれません。

---