ブログ一覧

AI活用

AIでブログのアイキャッチ画像を作る際に意識すべき基準と注意点

イーゼルに林檎1個の大きな絵が立ち、その手前で手が同じ絵の小さな版を持っている。左側には「縮めても分かる絵にする」と書かれている。

この記事を3行で解説

  • アイキャッチ画像は雰囲気よりも、縮小された一覧画面で何の記事か判別できることを基準にする。
  • 画像内に入れる文字は全角14文字以内とし、表現の検査を通した文をそのまま一字ずつ写すよう指示する。
  • 画像の端から8%以上離して主役と文字を配置し、16:9の枠から左右が削られた際の表示切れを防ぐ。

アイキャッチ画像は雰囲気よりも判別しやすさを優先する

ブログのアイキャッチ画像をAIで生成する際、サイト全体のデザインや雰囲気に合わせることを重視しがちです。しかし、それでは自己満足に過ぎず、読者が一目で何の記事であるかを理解できなければ、アイキャッチ画像としての役割を果たしにくくなります。Miravitaのジャーナル記事における画像生成の運用では、この判別しやすさを妥協のない基準としています。

以前の運用では、明朝体のフォント、生成り色の背景、そして細い線を用いた、サイトの雰囲気に調和する抽象的な画像をアイキャッチとして採用していました。しかし、この方法では、読者が画像を見たときに何の記事について書かれているのかが分からないという課題が生じました。そのため、2026年8月22日に、サイトの雰囲気に合わせた抽象的な画像にするという方針をやめる決定をしました。

方針を変更した現在は、具体的な情景、または具体的な物を1つだけ主役として設定し、画面の中に配置する要素は2〜3までに絞り込むルールを厳格に適用しています。要素を2〜3までに絞る理由は、記事一覧画面における表示サイズにあります。本番サイトの記事一覧において、サムネイル画像は幅470px前後という縮小されたサイズで表示されます。この幅470px前後に画像を縮めた状態であっても、何の話をしている画像なのかが明確に伝わるかどうかを、作成時の重要な確認基準としています。このように、縮小時の視認性を担保することが、読者の離脱を防ぎ、記事へのアクセスを促すことにつながります。具体的な運用の流れや、私たちの支援における業務の進め方については、こちらのページで詳しく紹介しています。

画像に入れる文字と表現の厳格なルール

アイキャッチ画像の中に日本語の短い一言を入れることは、記事の内容を短時間で伝えるために有効だと考えています。ただし、画像内の文字は、サイト運営者が公式に発信した言葉として扱われるため、その作成と管理には厳格なルールを設ける必要があります。

画像に入れる日本語の一言には、明確な決まりを設けています。具体的には、文字数は全角14文字以内とし、末尾に句点や感嘆符を付けないこと、そして画数の多い漢字の使用を避けることです。これにより、幅470px前後に縮小されたサムネイル画像の中でも、文字が潰れることなく、読者が瞬時に判読できるようになります。

さらに、指示文を作成する際は、画像に入れる一言の文字を「一字ずつそのまま写す」ようにAIへ指示しています。単に伝えたい意味だけを指示文に書いてAIに画像生成を任せてしまうと、AIによって言葉が言い換えられてしまうためです。言い換えが発生すると、公開前に社内で表現の検査を通した文章とは異なる、意図しない別の文章が画像内に描かれてしまうリスクが生じます。サイトの信頼性を守るためにも、検査済みの表現をそのまま一字ずつ写させるようにしています。

また、画像の中に数字やグラフは入れないというルールも設けています。アイキャッチ画像は、SNSなどで画像単体として転載されることがあります。画像内に数字やグラフが描かれていると、元の記事に書かれていた調査名や測定条件といった重要な文脈から切り離され、数字だけが独り歩きして誤解を招く恐れがあるためです。画像単体で流通しても問題が生じないよう、数値情報は画像に入れないようにしています。

表示崩れを防ぐレイアウトと指示文の工夫

AIで生成した画像をサイトに配置する際、表示される枠の比率と、画像内の要素の配置位置に注意を払わなければ、意図しない表示崩れが発生します。

現在、サイトのサムネイルを表示する枠はすべて16:9の比率に統一しています。しかし、過去にトップページだけ16:10の比率の枠で表示されていた時期がありました。この時期、16:9の比率で作成した画像を配置したところ、画像の左右が約9%削られて表示される現象が発生しました。その結果、画像の端付近に配置していた文字や、主役となるオブジェクトが切り取られてしまい、何の記事か分からなくなるトラブルが生じました。この経験から、現在は主役となるオブジェクトと文字について、画像の端から8%以上離した位置に配置するよう、画像生成の指示文に明記しています。

また、指示文における人物の描き方にも工夫を凝らしています。指示文では、人物の顔を描かせることを避け、手や腕だけを描写するように指定しています。AIが生成した人物の顔が画像に含まれていると、その人物が実在する自社の社員や、特定の取引先のように見えてしまう誤解を避けるためです。不要な誤解やトラブルを防ぐためにも、人物を表現する際は手や腕などの部分的な描写に留めています。

代替テキストの設定と画像軽量化の課題

画像をサイトにアップロードした後の設定や、ページの読み込み速度への配慮も、表示速度とアクセシビリティの観点から重要だと考えています。

画像を設定する際、HTMLの代替テキスト(alt属性)には、記事の要約ではなく、実際に絵に写っている具体的なものを記述します。さらに、画像内に入れた日本語の一言も、代替テキストに含めるようにしています。視覚的に文字を読み取ることが難しい読者に対して、代替テキストが設定されていなければ、画像内に配置した一言のメッセージが伝わらなくなってしまうためです。すべての読者に等しく情報を届けるために、代替テキストの記述を省略しないようにしています。

また、ページの表示速度に直結する画像軽量化については、今後の改善課題が残されています。2026年8月末に本番サイトで計測したところ、PNG形式のままアップロードして表示させていた記事7本分の画像が、記事一覧画面において合計約2.9MBの容量に達していることが判明しました。現時点では、より軽量な画像フォーマットであるWebPへの変換処理はまだ行っていないため、今後の表示速度向上のために対応を検討する必要があります。

なお、Miravitaのジャーナル記事におけるアイキャッチ画像の作成体制として、ChatGPTの画像生成機能を使用しています。具体的な指示文はこちらの担当者が用意し、実際の画像の作成およびサイトへの差し替え作業は代表が行うという役割分担で運用しています。ちなみに、2026年8月に確認した時点においては、Gemini APIの画像生成モデルは無料枠で使うことができなかったため、現在のChatGPTを中心とした運用体制を選択しています。AIを活用したコンテンツ制作や、効果的なアイキャッチ画像の運用方法についてお悩みの方は、お気軽に弊社のお問い合わせ窓口までご相談ください。

よくある質問

Q. アイキャッチ画像に数字やグラフを入れないのはなぜですか?

A. アイキャッチ画像は、SNSなどで画像単体として転載される可能性があるためです。画像内に数字やグラフが描かれていると、元の記事に記載されている調査名や測定条件などの文脈から切り離され、数字だけが一人歩きして誤解を招くリスクがあります。そのため、画像内には数値情報を入れないルールとしています。

Q. 画像内の文字をAIに「一字ずつそのまま写す」よう指示するのはなぜですか?

A. 伝えたい意味だけを指示文に書いてAIに画像生成を任せると、言葉が言い換えられてしまうためです。言い換えが発生すると、公開前に表現の検査を通した文章とは異なる、意図しない別の文章が画像内に描かれてしまいます。サイトの信頼性を保つために、検査済みの表現をそのまま一字ずつ写させています。

Q. 人物の顔を描かせず、手や腕だけにするのはなぜですか?

A. AIが生成した人物の顔が画像に含まれていると、その人物が実在する自社の社員や、特定の取引先のように見えてしまう誤解を避けるためです。不要な誤解やトラブルを防ぐために、人物を表現する際は手や腕などの部分的な描写に留める指示を出しています。

WRITER

山下 生真

Miravita代表。日本とフィリピンで制作と事業支援に携わり、経営・ディレクション・デザイン・開発・マーケティングを横断して担当。

PICK UP

あわせてご覧ください

NEW SERVICE 外部販促部 設計から実行、改善までをまとめて引き受けます。

CONTACT

何を相談すればいいか、
まとまっていなくても
大丈夫です。

相談する