本記事にはプロモーション（広告）が含まれます。

このブログの記事についているアイキャッチ画像は、デザインツールで1枚ずつ作っていません。Claude Codeに「型」を作ってもらい、記事のタイトルを流し込んで一括で出しています。

最初はCanvaで作っていました。それ自体は良い方法で、今も新しく始める方にはそちらをすすめます。ただ、記事が増えてくると、1枚ずつ作る手間と、だんだんデザインがばらばらになっていく問題が出てきました。

この記事では、非エンジニアの私がどう頼んで、どう運用しているかを書きます。コードは私が書いていません。 日本語で注文しただけです。

1枚ずつ作ると起きる2つの問題

Canvaでアイキャッチを作る方法は、ブログのアイキャッチ画像の作り方【Canva無料版】に書いています。始めたばかりの方は、まずそちらで十分です。

ただ、記事が増えてくると、私は2つのことで困りました。

• 手間——テンプレートを使っても、文字の位置や折り返しを毎回調整する必要がある
• ばらつき——作った時期によって色や文字の大きさが少しずつ違い、一覧で並ぶとそろっていない

とくに2つめが気になりました。トップページや一覧で並んだとき、アイキャッチがそろっていないだけで、ブログ全体が雑に見えます。 デザインの上手い下手より、そろっているかどうかのほうが印象を決めると感じています。

画像を「文字の設計図」で作るという考え方

Claude Codeに相談したら、「SVGという形式で作りましょう」と提案されました。

SVGは、図形や文字の配置を文字データで書く画像形式です。「背景はこの色、左上にこの文字、中央にこの絵文字、下にタイトル」という設計図を、テキストで書けます。テキストなので、AIが書けます。

非エンジニアの私にとって大事なのは、次の点でした。

• 設計図が1つあれば、タイトルだけ差し替えて何枚でも出せる
• 直したいところは「文字をもう少し大きく」と日本語で言えば直る
• 全部が同じ設計図から出るので、ばらつきが出ない

SVGのままではWordPressに入れにくいので、最後にPNGなどの一般的な画像形式に変換する処理も、まとめて頼んでいます。

まず1枚、見本の型を対話で作る

いきなり一括で頼まず、まず1枚だけ、見本を作ります。 最初に伝えたのは、これくらいです。

出てきた1枚を見て、気になるところを日本語で伝えます。「タイトルが端に寄りすぎ」「絵文字が小さい」「ラベルの色を黄色に」。この行き来を数回やると、自分のブログに合った型になります。

ここで時間をかけるのは、この1枚だけです。あとは全部この型から出るので、見本の段階で納得しておくのが大事です。

タイトル一覧を渡して一括生成する

見本ができたら、記事のタイトル一覧を渡します。私は、次の3つを1行ずつ並べた表を作りました。

そして、こう頼みます。

「勝手に省略しないで」を入れているのは、長いタイトルを黙って切られると、意味が変わるからです。収まらないものは、自分でタイトルを短くするか、型のほうを調整します。

新しい記事を書いたら、一覧に1行足して同じ手順を回すだけです。記事ごとにデザインを考える必要がなくなりました。

色とラベルのルールを型に組み込む

デザインをそろえるために、カテゴリごとの色を型に組み込みました。 Claude Code関連は青系、副業・ブログ運営は黄色系、家事・子育ては緑系、という具合です。

こうしておくと、一覧で並んだときに「どの系統の記事か」が色で分かります。 何より、記事ごとに色を迷わなくなります。迷わないことが、続ける上でいちばん効きました。

ルールは、型を作った会話の中で伝えるだけです。

• カテゴリと色の対応表を渡し、「一覧のカテゴリ列を見て自動で色を選んで」と頼む
• ラベルの文字はカテゴリ名をそのまま英字で入れる
• 絵文字は一覧で指定したものを使い、指定がなければ「記事の内容に合わせず、空欄のままにして」と伝える

最後の点は、AIに絵文字を選ばせると内容と合わないものが混ざることがあるためです。選ぶのは自分にしています。

ブログ全体の見た目をそろえる考え方は、ブログのデザインをプロっぽくする方法【センス不要の7原則】にも書いています。

出てきた画像を自分で確認すること

一括で出せるからこそ、アップロード前に自分の目で確認します。 見ているのは次の点です。

• 文字が枠からはみ出していないか——長いタイトルで起きます
• 文字化けしていないか——日本語のフォントが入っていない環境だと、四角い記号になります
• 絵文字が正しく表示されているか——変換の環境によって表示されないことがあります
• スマホで見たときに文字が読めるか——一覧ではかなり小さく表示されます
• ファイル名と記事が対応しているか——ずれると別の記事の画像が付きます

枚数が多いと、確認を飛ばしたくなります。でも一括で間違えると、一括で間違った画像が公開されます。 生成は速くても、確認は1枚ずつです。

私がやったのは、生成された画像をフォルダで一覧表示にして、ざっと眺める方法です。並べると、1枚だけ違うものがすぐ目に入ります。

AIに渡さない情報と、素材の注意

アイキャッチ作りに、個人情報はほとんど要りません。それでも気をつけていることがあります。

• WordPressのログイン情報——画像のアップロードまで自動化したくなりますが、パスワードは渡しません。アップロードは自分の手でやります
• 家族の写真——写真入りのアイキャッチは作りません。型は図形と文字だけです
• 他人の画像やロゴ——「このサイトの画像を参考に」と渡すのは避けます。デザインの盗用になります
• フォントの利用条件——使うフォントが商用サイトで使えるものか、自分で確認します。AIは条件を確認してくれません
• 絵文字の見え方——絵文字はOSによって絵柄が違います。自分の環境で変換した画像を使うので問題は少ないですが、意図と違う絵柄になっていないか見ます

Claude Codeで他にどんなことをしているかは、Claude Codeで何ができる?非エンジニアの使い道12選にまとめています。アイキャッチは、その中でも「型を作って回す」の分かりやすい例だと思います。

よくある質問

Q. Canvaで作った既存の画像は、作り直しましたか？

作り直しました。一覧に全記事のタイトルを入れて回しただけなので、作り直し自体の手間は少なかったです。ただ、差し替えのアップロードは1記事ずつ手でやりました。ここは自動化していません。

Q. プログラムが分からなくても運用できますか？

私は分かりません。「一覧に1行足して、前と同じ手順で生成して」と頼んでいるだけです。エラーが出たら、その文をそのまま貼って「直して」と伝えています。

Q. 写真を使ったアイキャッチのほうが目を引くのでは？

そうかもしれません。ただ、写真は素材選びに時間がかかり、そろえるのも難しいです。私は「そろっていること」を優先して、図形と文字だけの型にしています。

Q. デザインを変えたくなったら？

型の1か所を直して、全記事分をもう一度回せば、全部が新しいデザインになります。1枚ずつ作っていたころには、できなかったことです。

Q. Claude Codeの費用はどれくらいですか？

料金の考え方はClaude Codeの料金はいくら?実際の月額費用を公開に書いています。アイキャッチのためだけに契約するものではなく、他の用途と合わせて考えるのがよいと思います。

「デザインができないからアイキャッチは後回し」と思っていた私が続けられているのは、1枚ずつ作るのをやめて、型を作ったからです。コードを書くのはAI、注文と確認は自分。この分担で回しています。