ブログのアイキャッチとカテゴリバナーをChatGPTで作ってみた｜仕様を決めて画像をそろえる方法

ブログの記事を作るとき、本文だけではなくアイキャッチ画像も必要になります。

記事数が増えてくると、毎回画像を用意するのもそれなりに手間がかかります。

そこで最近のりらぶろでは、記事のアイキャッチ画像やカテゴリごとの共通画像を、ChatGPTに作ってもらうことがあります。

ちなみにアイキャッチは、この記事のタイトル下、つまり↑このあたりに貼られている画像のことです。りらぶろでは、記事タイトルやカテゴリ名を文字で書くようにしています。カテゴリバナーは、↓のもくじの上あたりにある「実践記録」と書かれた図です。記事に設定されたカテゴリを表現しています。

 

そして、実際にやってみて感じたのは、

「AIに画像を作ってもらう」といっても、全部お任せにすればよいわけではない

ということでした。

 

どこで使う画像なのか、どのくらい目立たせたいのか、どんな雰囲気にしたいのか。

先にこちらで仕様を決めて、それをAIに伝えたほうが、ブログで使いやすい画像になりやすいです。AIも、なにを作ればよいのかはっきりしていたほうが作業がしやすいということですね。

今回は、りらぶろのアイキャッチ画像とカテゴリバナーを作ったときの流れをまとめてみます。

最初に「どこで使う画像なのか」を決める

画像を作る前に、まず決めたのはその画像の用途です。

同じブログの画像でも、アイキャッチ画像とカテゴリバナーとでは役割が違います。

 

アイキャッチ画像は、その記事の内容を表すための画像です。

一方、カテゴリバナーは、「この記事はどのカテゴリに属しているのか」を視覚的に分かりやすくするための共通画像として使っています。

この2つを同じ考え方で作ってしまうと、記事の中で大きな画像が何枚も続いてしまいます。

そこで、まずはそれぞれの役割を分けて考えることにしました。

アイキャッチ画像は記事ごとの内容が分かるようにする

アイキャッチ画像については、記事の内容がひと目で分かることを優先しました。

たとえば、ワントップを購入した記事では、

「ワントップを購入しました」

という文字を入れ、記事の内容と画像がすぐに結びつくようにしています。

 

そのうえで、りらぶろ全体の雰囲気から大きく外れないように、

• 明るい机まわり
• ノートやペン
• パソコン
• 植物
• オレンジやベージュ系のやわらかい色

といった要素を使うようにしています。

記事ごとに完全に同じデザインにはしませんが、並べたときに別のサイトの画像に見えない程度には、雰囲気をそろえるようにしました。

カテゴリバナーは最初、大きく作りすぎた

カテゴリごとの共通画像も、最初はアイキャッチ画像に近い大きさで作っていました。

当初は、すべての記事に表示するつもりではなかったためです。

 

ところが、実際の記事に入れてみると、少し問題が出てきました。

アイキャッチ画像のすぐあとに、似た雰囲気の大きなカテゴリ画像が表示されるため、

「同じような画像が続いている」

ように見えてしまったのです。

 

画像そのものは気に入っていても、実際に記事へ配置してみると、また印象が変わります。

ここは、作って終わりではなく、実際のページに入れて確認する必要があると感じました。

全記事で使うなら、カテゴリバナーは細長いほうがよかった

その後、カテゴリバナーを記事ごとに自動表示することにしました。

全記事で使うのであれば、アイキャッチ画像ほど目立つ必要はありません。

そこで、カテゴリバナーは横長のデザインへ変更しました。

現在は、横1200px×縦300pxを基本にしています。

 

このサイズなら、PCやタブレットで表示しても十分な解像度を確保しながら、記事の中では細長い帯として見せることができます。

デザインについても、写真のような大きな背景画像ではなく、

• カテゴリ名
• 短い説明
• カテゴリを表すアイコン
• カテゴリごとの色

を中心にしました。

これによって、

アイキャッチ画像は記事固有の画像、カテゴリバナーは共通の案内表示

という役割の違いが分かりやすくなりました。

ChatGPTには「仕様」を伝えて作ってもらった

今回の画像は、ChatGPTに画像を作ってもらいました。

ただし、「ブログ用の画像を作って」とだけ伝えたわけではありません。

先にこちらで条件を決めて、それをまとめて伝えています。

たとえばカテゴリバナーなら、次のような条件です。

• 横1200px×縦300px
• 横長のバナー型
• アイキャッチより目立ちすぎない
• カテゴリごとに色を変える
• カテゴリ名を大きく表示する
• 短い説明文も入れる
• りらぶろ全体のオレンジ系の雰囲気に合わせる
• 全カテゴリでレイアウトをそろえる

さらに、カテゴリごとに、

「基礎知識なら本」

「記事の書き方ならペン」

「実践記録ならチェックリスト」

といったイメージも指定しました。

こうしておくと、カテゴリごとに別々の画像を作っても、サイト全体では統一感を持たせやすくなります。

AIに任せる部分と、自分で決める部分を分ける

AI画像生成を使ってみて感じたのは、

「何を作るか」は自分で決めて、「実際に形にするところ」をAIに手伝ってもらう

くらいが使いやすいということです。

今回も、

• 画像の用途
• サイズ
• 色
• 入れる文字
• 全体の雰囲気
• 他の画像との役割分担

は、こちらで決めました。

その条件をもとに、実際のデザインをChatGPTに作ってもらっています。

 

逆に、用途を決めずに作ってしまうと、画像単体ではきれいでも、実際のブログに入れたときに使いにくいことがあります。

今回のカテゴリバナーも、最初に作ったものは悪い画像ではありませんでした。

ただ、全記事へ表示するという使い方に変わったことで、別のデザインのほうが適していることが分かりました。

実際のページに入れてから調整する

画像を作ったあとは、実際のブログへ入れて確認しています。

ここで見るのは、画像そのものの出来だけではありません。

• 記事タイトルより目立ちすぎていないか
• アイキャッチ画像と似すぎていないか
• PCで大きすぎないか
• スマートフォンでも文字が読めるか
• 他のカテゴリと並べたときに統一感があるか

といったところも確認します。

実際、今回も記事に入れてみて初めて、

「カテゴリバナーはもう少し細長いほうがよい」

と気づきました。

 

AIで作った画像でも、最初の1枚をそのまま完成品にする必要はありません。

実際の用途に合わせて、作り直したり調整したりする前提で使うほうがよいと思います。

カテゴリバナーは自動表示するようにした

今回作ったカテゴリバナーは、現在は記事ごとに手作業で入れているわけではありません。

記事に設定したカテゴリをWordPress側で判定し、そのカテゴリに対応するバナーを自動表示するようにしています。

そのため、記事を書くときはカテゴリを選ぶだけです。

バナー画像を変更した場合も、各記事を開いて差し替える必要はなく、画像の対応を管理しているスニペット側を変更するだけで済みます。

ここでいうスニペットとは、WordPressに機能を追加したり、動きを少し変えたりするために使う、短いプログラムのことです。

今回はそのスニペットを使って、記事のカテゴリを確認し、対応するカテゴリバナーを表示する仕組みを追加しています。

バナー画像の保管場所(URL)もスニペットの中で管理しているため、あとから画像を変更するときは、各記事をひとつずつ直す必要はありません。

スニペット内の画像URLを変更すれば、同じ仕組みを使っている場所へまとめて反映できます。

この自動表示の仕組みについては、別の記事で具体的な手順をまとめています。

AI画像生成は「仕様を考えるところ」から始める

今回、アイキャッチ画像やカテゴリバナーをChatGPTに作ってもらって感じたのは、AIに依頼する前の準備が意外と大事だということでした。

「いい感じの画像を作って」でも画像は作れます。

でも、ブログで継続して使うのであれば、

• 何のための画像なのか
• どこに表示するのか
• どのくらいの大きさにするのか
• ほかの画像とどう使い分けるのか
• サイト全体でどう統一するのか

を先に決めておくほうが、実際に使える画像になりやすいと思います。

AIにすべてを考えてもらうというより、こちらで仕様を考え、その仕様を形にするところを手伝ってもらう。

今のところ、私はそんな使い方がちょうどよいと感じています。

まとめ

りらぶろでは、記事のアイキャッチ画像やカテゴリバナーの作成にChatGPTを使っています。

ただし、画像生成を始める前に、用途やサイズ、色、入れる文字などの条件を決めるようにしています。

特にカテゴリバナーについては、最初は大きな画像を作りましたが、実際の記事へ入れてみるとアイキャッチ画像と似た印象になってしまいました。

そこで、全記事で使うことを前提に、1200×300pxの横長デザインへ変更しました。

実際にページへ入れて確認しながら直していくことで、画像そのものだけでなく、ブログ全体として使いやすい形に近づけることができます。

AIで画像を作るときも、まずは「何を作ってほしいのか」を自分なりに整理してから依頼する。

そのほうが、ブログ運営の中で使いやすい画像を作りやすいと感じています。