un tronc
生成AI

AIでブログのサムネイル画像を作る|アントロンで使っているプロンプトを紹介

こんにちは!アントロンのNaokoです。

ブログのサムネイル画像を作るたびに、色や配置を一から考えていませんか?

アントロンBLOGでは、画像生成AIに毎回同じプロンプトを渡し、「記事タイトル」と「記事の概要」だけを差し替えてサムネイルを作っています。この記事では、そのプロンプトをそのまま載せます。

※2026年8月23日時点の内容です。画像生成AIの仕様や生成結果は、使うサービスによって異なります。

プロンプトで指定している6つの項目

「ブログのサムネイルを作って」とだけ頼むと、色や構図、文字の位置が毎回変わります。そこで、次の6つを毎回同じ内容で指定しています。

  • 画像サイズ(1280×720px)
  • サイトの色と雰囲気
  • タイトルと端末の配置
  • 端末の画面に映すもの
  • 文字の色と改行
  • 入れない要素(人物、意味のない英字など)

色は、このサイトに合わせて白を基調にし、メインカラーを #ce8991、補助色をくすみグリーンと淡いグレーにしました。

アントロンで使っているプロンプト

以下をコピーし、「記事タイトル」と「記事の概要」を差し替えて使えます。

以下の記事のサムネイル画像を作成してください。

【記事タイトル】
「【ここに記事タイトル】」

【記事の概要】
「【記事の要点を1〜2文で入力】」

【画像サイズ】
1280×720px

【サイトのトンマナ】
・アントロンのサイトデザインとトンマナに合わせる
  https://untronc.jp/
・全体は白を基調にする
・メインカラーは #ce8991
・くすみグリーン、淡いグレーを補助色として使用する
・清潔感、女性らしさ、信頼感を持たせる
・親しみやすいITスクールのような雰囲気にする
・人物は入れない

【構図】
・左側に記事タイトルを配置する
・右側にノートPCまたはタブレットを配置する
・記事タイトルを画像内で最も目立つ要素にする
・端末の画面には、記事内容を連想できるWebサイトや管理画面を表示する
・半透明のWebページやUIパネルを控えめに浮かべる
・余白を広く取り、白い空間を十分に残す
・文字と端末を重ねない
・全体をすっきりと整理し、装飾を増やしすぎない

【文字】
・記事タイトルを一字一句正確に入れる
・読みやすい位置で3〜4行に分けてよい
・重要な単語だけ #ce8991 で強調する
・その他の文字は濃いグレーにする
・意味のない英字や不要な文章は追加しない

「記事の概要」を1〜2文添えると、端末の画面に映るものが記事の内容に合いやすくなります。掲載先で推奨サイズが違うときは、「画像サイズ」の数字を変えてください。

生成したあとに確かめること

画像生成AIは、指示しても日本語を誤記したり、指定と違うサイズで出したりすることがあります。公開の前に、次の点を確かめてください。

  • 画像が指定したサイズになっているか
  • タイトルが一字一句合っているか。欠けや重複がないか
  • 文字が端末と重なっていないか
  • 横幅320px程度に縮めても、タイトルが読めるか

最後の1つは、記事一覧に小さく並んだときの見え方を確かめるためです。

その後、スキルにしました

記事を書くたびにこのプロンプトを使っていたので、2026年8月にスキルにしました。色や構図を固定し、タイトルとサイズの確認を生成のあとに自動で行うようにしています。

スキルを使ってサムネイルを作ったときのCodexの画面

2026年8月25日に、スキルを使って「長い画像生成プロンプトを、BLOG専用スキルにしてみた」のサムネイルを作ったときの画面です。サイズは1280×720pxで出ています。

スキルにした経緯と作った画像は、サムネイル作りをスキルにした記事に書いています。

まず色を書き出してみてください

このプロンプトを自分のサイトで使うなら、最初にサイトで使っている色を2〜3色、カラーコードで書き出してみてください。【サイトのトンマナ】の欄をその色に替えるだけで、サムネイルの色がそろいます。

ホームページの運用や生成AIの使い方について相談したい方は、お問い合わせフォームからどうぞ。

最後まで読んでくださりありがとうございました!

コメント