WordPressのアイキャッチ画像で迷う人へ。記事に合う画像の決め方

WordPress記事に合うアイキャッチ画像を複数候補から選んでいるイメージ AI活用×WordPress

WordPressで記事を投稿するとき、本文を書き終わったあとに意外と手が止まる場所があります。

アイキャッチ画像です。

「この画像でいいのかな」
「なんか前の記事と似てるな」
「文字は入れた方がいい?」
「おしゃれだけど、記事の内容は伝わる?」
「もう疲れたし、これでいいか……」

正直、ありますよね。

記事本文を書くだけでもそこそこ力を使います。
タイトルも決めて、スラッグも入れて、カテゴリも選んで、メタディスクリプションも書く。

そのあとに画像まで考える。

地味に重いです。

でも、アイキャッチ画像は記事の印象をかなり左右します。

記事一覧で見たときに、読者が最初に目にするのはタイトルと画像です。

そこで「この記事、自分に関係ありそう」と思ってもらえるかどうか。

ここにアイキャッチ画像が関わってきます。

この記事では、WordPressのアイキャッチ画像で迷う人向けに、記事に合う画像の決め方を整理します。

前回の記事では、WordPressのカテゴリ設定について整理しました。
WordPressのカテゴリ設定で迷う人へ。記事を整理しやすくする考え方

また、WordPress投稿全体の公開前チェックはこちらでまとめています。
WordPress投稿が不安な人へ。公開前に確認したいチェックリスト


アイキャッチ画像は、思ったより記事の印象を左右する

アイキャッチ画像は、ただの飾りではありません。

記事の入口です。

もちろん、本文が大事です。
そこは間違いありません。

でも、読者は本文を読む前に、まずタイトルと画像を見ます。

そこでなんとなく、

「読みやすそう」
「自分に関係ありそう」
「今の悩みに近そう」
「ちょっと見てみようかな」

と判断します。

だから、アイキャッチ画像は思ったより大事です。

なんとなく選ぶと記事一覧が同じに見える

アイキャッチ画像でよくあるのが、気づくと全部同じに見える問題です。

淡い背景。
白いカード。
チェックマーク。
ノートPC。
付箋。
書類。
青系のアイコン。

ひとつひとつは悪くありません。

でも、記事一覧に並ぶと、

「あれ、全部同じに見える……」

となることがあります。

これ、かなり起きます。

特にAIで画像を作る場合、指示が似ていると出てくる画像も似てきます。

「清潔感」「実務感」「淡いブルー」「カードUI」

このあたりを毎回入れると、きれいにはなります。
でも、並べると似ます。

ShiftBase Labでも、ここはかなり気をつけたいところです。

ブランド感はそろえたい。
でも、全部同じに見えるのは避けたい。

このバランスが大事です。

きれいな画像より「記事の中身が伝わる画像」が大事

アイキャッチ画像は、きれいであることも大事です。

でも、それ以上に大事なのは、記事の中身が伝わることです。

たとえば、スラッグの記事なら、URLや住所札のようなイメージ。
カテゴリの記事なら、記事カードを箱に分けるイメージ。
公開前チェックの記事なら、公開ボタンやチェック項目のイメージ。

こういうふうに、記事のテーマと画像の主役が合っていると分かりやすくなります。

逆に、おしゃれだけど何の記事か分からない画像は、少しもったいないです。

読者は忙しいです。

パッと見て、

「あ、これは自分が知りたい話かも」

と思える画像が強いです。


アイキャッチ画像でよくある悩み

アイキャッチ画像で迷う理由はいくつかあります。

特に多いのは、次の3つです。

  • どんな画像を選べばいいか分からない
  • 過去記事と似た画像ばかりになる
  • 文字入りにするか迷う

どれも、記事を増やしていくほど出てきます。

どんな画像を選べばいいか分からない

まず、どんな画像を選べばいいか分からない問題です。

記事テーマは決まっている。
本文も書いた。
でも画像になると急に迷う。

これ、あります。

たとえば「WordPressのカテゴリ設定」の記事なら、

カテゴリってどう画像にすればいいの?

となります。

設定画面?
フォルダ?
棚?
分類カード?
記事一覧?

いろいろ考えられます。

このときは、記事の中で読者が一番困っていることを画像にします。

カテゴリ記事なら、

「記事をどの箱に入れればいいか分からない」

という悩みです。

だから、散らかった記事カードがカテゴリ別の箱に入っていく画像が合います。

画像は、記事テーマそのものよりも、読者の悩みを見える形にすると決めやすいです。

過去記事と似た画像ばかりになる

次に、過去記事と似た画像ばかりになる問題です。

これは本当に注意したいです。

特にブログを量産していると、画像の指示も効率化したくなります。

すると、つい同じような表現を使ってしまいます。

  • 清潔感
  • 実務感
  • 白に近い背景
  • 淡いブルー
  • カードUI
  • チェックマーク
  • アイコン

もちろん、サイト全体の統一感は大事です。

でも、統一感と同じ見た目は違います。

記事一覧で見たときに、読者が見分けられないと少し弱いです。

だから、画像のテイストや主役は意識して変えます。

写真風。
アニメ風。
管理画面風。
ロードマップ風。
雑誌風。
文字入りサムネイル風。
ファイルボックス風。
URLバー風。

こういうふうに、見た目の型を変えていくと、記事一覧で違いが出ます。

文字入りにするか迷う

アイキャッチ画像に文字を入れるかどうかも迷います。

文字入りは目立ちます。

たとえば、

「公開前チェック」
「スラッグって何?」
「どのカテゴリ?」

のように短い言葉を入れると、記事内容が一瞬で伝わります。

ただし、文字を入れすぎるとごちゃつきます。

スマホで読めない小さい文字も避けたいです。

文字入りにするなら、短く、大きく、分かりやすく。

記事タイトルを全部入れる必要はありません。

読者の心の声に近い短い言葉が向いています。

「これで大丈夫?」
「またゼロから?」
「どのカテゴリ?」
「まず何から?」

このくらいの方が、パッと伝わります。


記事に合うアイキャッチ画像を決める基本

アイキャッチ画像を決めるときは、次の3つを考えると整理しやすいです。

  • 記事の悩みを1つに絞る
  • 画像の主役を決める
  • 構図やテイストを変える

記事の悩みを1つに絞る

まずは、記事の悩みを1つに絞ります。

アイキャッチ画像で全部を伝えようとすると、かなりごちゃつきます。

たとえば、この記事なら、

  • アイキャッチ画像の決め方
  • 過去記事と似ない工夫
  • 画像ファイル名
  • 代替テキスト
  • ChatGPTで画像案を作る方法

いろいろ扱っています。

でも、画像で全部表現する必要はありません。

一番大きな悩みは、

「記事に合う画像ってどう決めるの?」

です。

だから、アイキャッチ画像では、画像選びに迷っている感じや、複数の画像候補から選ぶ感じを出せば十分です。

記事のすべてではなく、入口になる悩みを表現する。

これが大事です。

画像の主役を決める

次に、画像の主役を決めます。

主役が曖昧だと、何を見ればいい画像なのか分かりにくくなります。

たとえば、

  • 公開前チェックの記事なら、公開ボタン
  • スラッグの記事なら、URLバー
  • カテゴリの記事なら、分類ボックス
  • アイキャッチ画像の記事なら、画像候補やサムネイル一覧

このように、1つ主役を決めます。

主役が決まると、構図も決めやすくなります。

この記事なら、主役は「複数のアイキャッチ候補を選んでいる画面」です。

いくつかの画像候補が並んでいて、

「どれがこの記事に合う?」

と迷っている感じ。

これなら、記事テーマと合います。

構図やテイストを変える

最後に、構図やテイストを変えます。

前回と同じような構図にしない。

これが大事です。

たとえば、前回がファイルボックス風なら、今回は画像ギャラリー風にする。
前回がURLバー風なら、今回はサムネイル選択画面風にする。
前回が管理画面風なら、今回は雑誌の編集会議風にする。

見た目の型を変えるだけで、記事一覧での印象が変わります。

色だけ変えても、構図が同じだと似て見えます。

だから、背景色だけでなく、

  • 主役
  • 視点
  • 距離感
  • テイスト
  • 文字の入れ方
  • 情報量

まで変えると差別化しやすくなります。


アイキャッチ画像のレパートリー例

アイキャッチ画像は、毎回同じ型にしなくて大丈夫です。

むしろ、記事が増えていくサイトではレパートリーがあった方が見やすくなります。

写真風・人物入り

人の悩みや感情を出したい記事には、写真風や人物入りが向いています。

たとえば、

  • 仕事の手順が人に伝わらない
  • メール返信が終わらない
  • メモがあとで使えない
  • 公開ボタンを押す前に不安になる

こういう記事は、人の表情があると伝わりやすいです。

困っている顔。
少し考えている姿。
画面の前で迷っている感じ。

人間味が出ます。

ただし、人物を毎回使うとそれも似てくるので、使いどころを選びます。

図解・管理画面風

手順や設定を説明する記事には、図解や管理画面風が向いています。

たとえば、

  • WordPress投稿前チェック
  • スラッグ設定
  • カテゴリ設定
  • メタディスクリプション
  • 代替テキスト
  • 内部リンク

こういう記事は、画面や設定項目のイメージがあると分かりやすいです。

ただし、管理画面風ばかりになると似ます。

だから、

  • 投稿画面風
  • URLバー風
  • ファイルボックス風
  • 画像ギャラリー風
  • 設定パネル風

のように、同じWordPress系でも主役を変えます。

サムネイル風・文字入り

読者の心の声を強く出したい記事には、文字入りサムネイルも向いています。

たとえば、

  • まず何から?
  • またゼロから?
  • どのカテゴリ?
  • スラッグって何?
  • 公開前チェック

このような短い文字です。

文字入りにすると、記事一覧で目に入りやすくなります。

特に、初心者向けの記事では有効です。

ただし、文字を入れすぎると読みにくくなります。

短く、太く、大きく。

これを意識します。


ChatGPTでアイキャッチ画像案を作る方法

アイキャッチ画像で迷うときは、ChatGPTに画像案を出してもらうのも便利です。

ただし、ただ「アイキャッチ画像を考えて」と頼むだけだと、似たような画像になりがちです。

少し条件を入れるのがコツです。

記事テーマを渡して画像方向を出してもらう

まずは、記事テーマを渡します。

たとえば、

WordPressのアイキャッチ画像で迷う人向けの記事です。
記事内容に合うアイキャッチ画像の方向性を3案出してください。

このように頼みます。

すると、

  • 画像候補を選んでいる画面
  • サムネイル一覧から1枚を選ぶ構図
  • 記事内容に合わせて画像が変わる図解

のような方向性が出せます。

最初から1案に決めず、複数案を出してもらうと選びやすいです。

過去記事と似ないように条件を入れる

大事なのは、過去記事と似ないようにすることです。

たとえば、

前回はファイルボックス・分類棚風だったので、今回はそれと違う見た目にしてください。

と伝えます。

また、

淡いカードUI、チェックリスト、棚、URLバー、管理画面風は避けてください。

のように、避けたい構図も入れます。

AI画像は、指示が似ると仕上がりも似ます。

だから、毎回「今回やらないこと」を入れるのがかなり大事です。

画像ファイル名と代替テキストも一緒に作る

WordPress投稿では、画像そのものだけでなく、画像ファイル名や代替テキストも必要です。

毎回あとから考えると、地味に面倒です。

だから、画像生成指示と一緒に出しておくと楽です。

たとえば、

  • 画像ファイル名
  • 画像タイトル
  • 代替テキスト
  • キャプション
  • 説明

このあたりです。

このプロジェクトでは、画像ファイル名は基本的に、

記事スラッグ-eyecatch.png

の形にしています。

管理しやすいので、このルールは続けるとよいです。


アイキャッチ画像まわりで確認したいこと

WordPressにアイキャッチ画像を設定するときは、画像そのもの以外にも確認したい項目があります。

画像サイズ

まずは画像サイズです。

ShiftBase Labでは、基本的に

1200 × 675 px

で作っています。

横長で、記事一覧やSNSでも使いやすい比率です。

画像サイズがバラバラだと、一覧で見たときに統一感が崩れることがあります。

見た目のテイストは変えても、サイズはそろえる。

これが扱いやすいです。

画像ファイル名

画像ファイル名も確認します。

たとえば、この記事なら、

wordpress-eyecatch-image-eyecatch.png

です。

確認したいのは、次の点です。

  • 英数字になっているか
  • 記事スラッグと関連しているか
  • 日本語や余計な記号が入っていないか
  • 管理しやすい名前になっているか

画像が増えてくると、ファイル名のルールがかなり大事になります。

あとから探すときに、適当なファイル名だとしんどいです。

「どれだっけ?」となります。

未来の自分のためにも、ファイル名は整えておきましょう。

代替テキスト

代替テキストも忘れずに入れます。

代替テキストは、画像の内容を説明するテキストです。

たとえば、

WordPress記事に合うアイキャッチ画像を複数候補から選んでいるイメージ

のようにします。

ポイントは、画像の内容が分かることです。

キーワードを詰め込みすぎる必要はありません。

自然に、画像の説明として書きます。


そのまま使えるアイキャッチ画像生成指示プロンプト

ここからは、ChatGPTでアイキャッチ画像案を作るときに使えるプロンプト例を紹介します。

記事に合う画像案を作るプロンプト

プロンプト例:

以下の記事に合うアイキャッチ画像案を作ってください。

記事タイトル:
【ここに記事タイトル】

記事テーマ:
【この記事で扱う内容】

読者の悩み:
【読者が困っていること】

条件:
・記事内容が一目で伝わる
・画像サイズは1200 × 675 px
・派手すぎない
・実務感と清潔感を残す
・細かい文字は入れすぎない

出力形式:
・画像タイプ
・主役
・構図
・画像内テキスト案
・避ける構図
・画像生成指示

このプロンプトでは、まず画像の方向性を作れます。

過去記事と差別化するプロンプト

プロンプト例:

以下の記事のアイキャッチ画像を考えてください。
ただし、過去記事と見た目が似ないようにしてください。

今回の記事テーマ:
【今回の記事テーマ】

過去記事で使った構図:
・管理画面風
・URLバー風
・ファイルボックス風
・ロードマップ風
・メール通知風

条件:
・過去記事と明らかに違う見た目にする
・主役モチーフを変える
・構図タイプを変える
・記事一覧で見分けがつくようにする
・ShiftBase Labらしい落ち着きは残す

出力形式:
・今回おすすめの画像タイプ
・なぜ差別化できるか
・画像生成指示
・避ける構図

これを使うと、同じような画像が続くのを防ぎやすくなります。

WordPress投稿用の画像情報を作るプロンプト

プロンプト例:

以下の記事について、WordPress投稿用の画像情報を作ってください。

記事タイトル:
【記事タイトル】

スラッグ:
【スラッグ】

アイキャッチ画像の内容:
【画像の説明】

出力してほしい項目:
・画像ファイル名
・画像タイトル
・代替テキスト
・キャプション
・説明

条件:
・画像ファイル名は「スラッグ-eyecatch.png」
・代替テキストは自然な説明文
・キャプションは空欄
・説明は空欄

画像生成指示だけでなく、WordPressに入力する情報もセットで作ると投稿が楽になります。


まとめ:アイキャッチ画像は、記事の入口として考える

WordPressのアイキャッチ画像は、ただの飾りではありません。

記事の入口です。

読者が記事一覧で見たときに、

「これは自分に関係ありそう」
「ちょっと読んでみようかな」
「今の悩みに近いかも」

と思えるかどうかに関わります。

アイキャッチ画像を決めるときは、次のポイントを意識すると考えやすくなります。

  • 記事の悩みを1つに絞る
  • 画像の主役を決める
  • 過去記事と構図を変える
  • 文字入りにするなら短く大きくする
  • 画像サイズをそろえる
  • ファイル名を整える
  • 代替テキストを入れる

きれいな画像を作るだけではなく、記事の中身が伝わる画像にする。

ここが大事です。

そして、記事が増えてきたら「似た画像ばかりになっていないか」も見ておきましょう。

正直、ここは油断するとすぐ似ます。

だからこそ、毎回少し立ち止まって、

「この記事なら、何が主役の画像だと伝わるか」

を考える。

アイキャッチ画像は、記事を読んでもらうための最初の小さな入口です。