ブログのアイキャッチ画像の作り方｜AIで作る5ステップと、サイズ・文字入れのコツ

アイキャッチに時間をかけるな。AIに作らせて、中身を確かめろ。

アイキャッチを作るたびに、時間かお金のどちらかが消えていませんか？

ブログを始めたころ、私はアイキャッチの画像をAdobe Stockで買っていました。1枚ずつお金がかかるので、記事が増えるたびにため息。Canvaで自作したこともありますが、文字の配置で迷っているうちにどんどん時間がたち、できあがりはなんだか素人っぽい。

いまはAIに記事の要点を渡すだけで、数分でできます。自分でやるのは、渡す言葉を決めることと、誤字がないかを確かめることだけ。この記事では、アイキャッチの役割からAIで作る手順、サイズや文字の決め方、よくある失敗まで、指示文とチェックリストつきで紹介します。

アイキャッチは、記事一覧で選ばれるための「看板」

アイキャッチは、記事の一番上や記事一覧に出てくる、その記事の顔になる画像です。WordPressでは「アイキャッチ画像」という欄に設定すると、ブログのトップページ、カテゴリーの一覧、関連記事、XやFacebookでシェアされたときのカードに表示されます。

YouTubeのサムネイルを思い浮かべてください。おすすめに動画がずらっと並んでいるとき、タイトルを1本ずつ読んでから選ぶ人はほとんどいません。サムネイルの大きな文字と絵をパッと見て、気になったものを押しますよね。ブログの記事一覧でも、読者は同じ選び方をしています。

つまり、アイキャッチの役目はきれいに見せることではなく、「この記事には自分の知りたいことが書いてある」と一瞬で伝えることです。この役目さえ押さえておけば、デザインが得意でなくても、選ばれるアイキャッチは作れます。

作る前に決めておく3つのこと

アイキャッチは、作るたびにサイズや雰囲気を変えると、記事一覧がちぐはぐになります。最初に次の3つを決めて、すべての記事で同じ形にそろえてください。

サイズは横長の16:9、1200×675px

いまのWordPressのテーマは、記事一覧のアイキャッチを16:9（横16、縦9）の横長で表示するものが多いです。このブログで使っているSWELLも16:9です。YouTubeのサムネイルと同じ比率なので、1200×675pxで作っておけば、ほとんどのテーマできれいに表示されます。

よく推奨される1200×630で作っても、端が切れることがあります。これは、テーマやSNSによって表示する比率が少しずつちがうからです。XやFacebookでシェアされたときは1.91:1で表示されるので、16:9の画像だと上下が少しだけ切れます。大事な文字やイラストは画像のふちに置かず、少し内側に寄せておけば、どこで表示されても欠けません。

文字は大きく、少なく

記事一覧のアイキャッチは、スマホでは親指くらいの大きさまで縮んで表示されます。入れる文字は、メインの言葉と短いひと言の2つまでにしてください。記事タイトルを全部入れようとすると、小さくてつぶれた文字の画像になります。

ブログ全体で「型」をそろえる

背景の色、文字の位置、イラストの位置を決めて、毎回同じ型で作ります。このブログの「ブログの書き方」シリーズなら、黒い背景に白い大きな文字、強調はオレンジ、右側にイラスト、左上に「ブログの書き方 #13」のような番号、という型です。型がそろっていると、記事一覧に並んだときに同じシリーズだとひと目でわかり、ブログ全体がきちんとして見えます。

AIでアイキャッチを作る5ステップ

ここからは、実際にAIでアイキャッチを作る手順です。私はCanvaのAI（デザインを自動で作る機能）を使っていますが、ChatGPTなどの画像を作れるAIでも流れは同じです。

STEP1：記事の要点を3行で書き出す

AIに渡す材料を用意します。書き出すのは、「メインの言葉」「強調したいひと言」「記事の中身」の3つです。メインの言葉は、記事タイトルの中で一番大事な言葉にします。強調したいひと言は、導入文の1行目を短くしたものが使いやすいです。

STEP2：指示文をAIに渡す

書き出した要点を、次の指示文にあてはめてAIに渡します。【 】の中を、自分の記事に合わせて書きかえてください。

デザインの欄を毎回同じにしておくと、どの記事のアイキャッチも同じ型で仕上がります。

STEP3：誤字と、記事とちがう言葉がないか確かめる

ここが一番大事な作業です。AIが作った画像は、パッと見はきれいでも、小さい文字がまちがっていることがよくあります。たとえば「ブログ」が「プログ」に、「ペルソナ」が「ベルソナ」になる、といったまちがいです。画像を拡大して、1文字ずつ確かめてください。記事の中身と関係ないイラストが入っていないかも見ておきます。

まちがいがあれば、Canvaなら文字の部分をクリックして打ち直せます。雰囲気がイメージとちがうときは、指示文を少し変えて作り直します。

STEP4：PNGで書き出して、軽くする

できあがったら、PNG形式で書き出します。そのままだとサイズが大きく、表示が遅くなる原因になるので、横幅1200pxにして、1枚600KB以下を目安に軽くしてからWordPressに入れます。圧縮には、画像をドラッグするだけで軽くしてくれるTinyPNGなどの無料サービスが便利です。

STEP5：WordPressのアイキャッチ画像に設定する

投稿の編集画面の右側にある「アイキャッチ画像」の欄から画像を選びます。代替テキスト（画像の内容を文字で書いておく欄）には、「アイキャッチ画像の作り方 AIに作らせて、中身を確かめろ（アイキャッチ）」のように、タイトルとひと言を入れておきます。最後にプレビューで、スマホの記事一覧での見え方を確かめたら完成です。

ビフォー・アフター：素材写真を貼っただけのアイキャッチを直す

アイキャッチの作り方で一番ありがちなのが、記事の雰囲気に合いそうなフリー素材の写真を1枚貼って終わり、というパターンです。私もAdobe Stockの写真を買っていたころは、このやり方でした。

直す前	直した後
ノートパソコンの写真だけ	黒い背景に「アイキャッチ画像の作り方」の大きな文字
何の記事か、タイトルを読まないとわからない	メインの言葉で、何の記事かが一瞬でわかる
ほかの記事と見分けがつかない	シリーズ名と番号で、どの記事かがわかる
写真を買うたびにお金がかかる	AIで、要点を渡すだけで作れる

直す前の写真もきれいではあります。でも、記事一覧に同じようなパソコンの写真が10枚並んだら、読者はどれを開けばいいのかわかりません。言葉が入っているだけで、読者は「これだ」と選べるようになります。

アイキャッチでよくある4つの失敗と直し方

端の文字が切れる

テーマやSNSが、画像を自分の比率に合わせて切り取るのが原因です。大事な文字やイラストは、画像の上下左右のふちから少し内側に入れてください。とくにXでシェアされたときは上下が切れるので、上下ぎりぎりに文字を置かないようにします。

WordPressに入れるとぼやける

表示される大きさより小さい画像を入れると、引きのばされてぼやけます。たとえば400×400pxで作った画像は、引きのばされてピンボケします。横幅は1200px以上で作れば、ぼやけることはほとんどありません。

スマホの一覧で文字が読めない

文字が多すぎるか、細い文字を使っているのが原因です。文字はメインの言葉とひと言の2つまでにして、太い文字を使います。作り終えたら、自分のスマホで記事一覧を開いて確かめてください。

使ってはいけない画像を使ってしまう

Googleの画像検索で見つけた画像や、ほかの人のブログの画像を、そのままアイキャッチにするのはやめましょう。著作権の問題になることがあります。AIで作るときも、有名なキャラクターや企業のロゴに似せた指示は出さないでください。素材の利用規約については、図解・画像の入れ方の記事でくわしく紹介しています。

そのまま使えるアイキャッチのチェックリスト

アイキャッチを設定したら、公開する前に次の8つを確かめてください。

• サイズは1200×675px（16:9）になっているか
• 大事な文字やイラストが、ふちから内側に入っているか
• 文字はメインの言葉とひと言の2つまでか
• スマホの記事一覧で、文字が読めるか
• 誤字や、記事とちがう言葉がないか
• ほかの記事と同じ型（色・文字の位置）になっているか
• 画像は600KB以下に軽くしたか
• 代替テキストを入れたか

まとめ：AIにまかせて、確かめる時間を残す

今日から使えるのは、この3つです。

• アイキャッチは、記事一覧で選ばれるための看板として作る
• サイズは16:9、文字は2つまで、型はブログ全体でそろえる
• AIには要点を渡して作らせ、自分は誤字と中身を確かめる

アイキャッチに時間をかけていたころの私に教えたいのは、デザインのセンスより、何を伝えるかを決めるほうが大事だということです。まずは、いちばん読んでほしい記事を1本選んで、この記事の指示文でアイキャッチを作り直してみてください。

次の記事では、書き終えた記事を公開する前に、誤字や読みにくいところをつぶすための推敲チェックリストを紹介します。【推敲チェックリストの記事へのリンク】