ブログって本当にやることが多い。
キーワードリサーチ、競合調査に見出しと本文作成、そして記事TOPにつける絵それが「アイキャッチ」。
ほんで記事書き終えたはいいけど、アイキャッチ画像どうしようって毎回なる。
Canvaを使う人が多いと思うし、僕も去年まで月額1180円のCanva Pro版を契約していた(※2026年5月時点の価格)。
・・・がしかし、今現在僕はCanvaをほとんど使っておらず、このブログに関してはすべてClaudeにイメージなど指示を出して作ってもらっている。
最初はSVGというファイル形式で作っていました。テキストとコードだけで、画像が作れるんです。
デザインツールも素材サイトもいらないし、Canva Proの課金もいらない。
「え、それって具体的にどうやるの？」という人のために、今のやり方と、最初に使っていたSVGの作り方を全部公開します！
AIロボット博士AIロボット博士
この記事、約6分で読めるよ！
ちなみにこの記事、公開までの作業時間は約30分でした。
よしお：「アイキャッチもClaudeに頼めば一発で作ってくれるぞ！」
今のやり方：アイキャッチも記事と一緒にClaudeにお任せ
まずは、今のやり方から。
いまは記事の下書きを作るときに、アイキャッチもまとめてClaudeに作ってもらっています。流れはこんな感じ。
- 記事の下書きをClaudeと一緒に作る
- 記事に合わせて、Claudeがアイキャッチ（1200×630pxのPNGかJPG）を作る
- メタディスクリプションやスラッグと一緒に、WordPressの下書きにそのまま入れてもらう
- 僕は下書きを確認して、気になるところを直してもらう
画像を自分で保存したり、アップロードしたりする手間もありません。
気に入らなければ、何度でも作り直してもらいます。メディアライブラリを見返したら、同じ記事のアイキャッチを3回作り直していたこともありました 笑
ちなみに、最初はSVGで作っていたのが、いつの間にかPNG・JPGに変わっていました。特に理由はなくて、Claudeに任せていたらそうなっていた、というのが正直なところ。
とはいえ、XなどのSNSでシェアされたときのサムネイルには、SVGが使えないことが多いんですよね。ブログのアイキャッチは、PNG・JPGにしておくのが無難です。
記事づくり全体の流れは1記事30分で書けるAI活用ワークフローにまとめています。
ここからは、最初に使っていたSVGでの作り方を紹介します。Claudeのチャットだけで作れるので、手軽に試せますよ。
SVGってなに？
SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略だ。
難しい名前だけど、コードで描く画像のことで、要するに普通の写真や画像（JPG・PNG）と違って、拡大しても画質が落ちない。
そしてテキストエディタで中身を編集できるのが特徴。
ブログのアイキャッチとして使うには十分すぎるクオリティだ。
そして何より、コードで書かれているのでAIに直接作ってもらえるのが最大のポイントです。
なぜCanvaじゃなくてClaudeなのか
理由は3つだ。
- 無料：Canva Proに課金しなくていい
- 統一感が出る：毎回同じデザインルールをClaudeに渡せば自動で、そろう
- 時間がかからない：プロンプトを投げて30秒で完成する
※初回セットアップに時間がかかるので初回だけ30分みといてください。2回目以降に約30秒くらいで完成します。
Canvaは直感的で使いやすいツールだけど、毎回ゼロからデザインするのは地味に時間がかかる。
Claudeに一度デザインルールを覚えさせてしまえば、あとは記事タイトルを変えるだけで同じクオリティのアイキャッチが量産できます。
最初に使っていたSVGのプロンプト
Claudeに渡しているプロンプトはこれです。
以下の仕様でブログ記事のアイキャッチ画像をSVGで作成してください。
サイズ：1200×630px（WordPressのアイキャッチの標準サイズ・黄金比率）
背景：濃いネイビー（#0D1B2A）に白い小さな点（星）
装飾：左上・右上・右下に黄色い星、右下にロボットキャラクター、左下に「AIシゴト手帖ラボ」の文字
カテゴリーバッジ：左上寄りに角丸バッジ（シアン）
NGボックス：✗ NG「〇〇〇〇」
OKボックス：✓ OK「〇〇〇〇」チップス「〇〇／〇〇／〇〇」
タイトル：〇〇〇〇（記事タイトルをそのまま入れる）
キャッチコピー：〇〇〇〇（1〜2行）
「〇〇〇〇」の部分は自分のブログの記事タイトルやキャッチコピーをそのまま当てはめてください。
コピペしてその部分だけ書き換えるだけでOK！
これをClaudeのチャットに貼って、タイトルとキャッチコピーだけ変えれば毎回同じデザインのアイキャッチが完成する。
うまくいかない時もある
めちゃくちゃ便利なんだけど、うまく行かない時も・・・。
実際使うプロンプトが確立されて、かつクオリティの高いものができるまでの時間は正直シンドイ時もあったが、結論としては僕のプロンプトが良くなかっただけだと思う。
Claudeは頑張ってくれてた。
一応どういった失敗があったかを列挙すると、
- やたら絵がぼやける(ブログにそのままアップできるようにjpegやpngにしてくれてた？)
- キャラクターや文字の配置が極端に上とか下とかズレる。何度も「真ん中にして！」って伝えて微調整した。
- 最初に生成されたキャラクターが可愛くなかった。「もっと可愛く」とか「○○のキャラみたいに」って伝えた。
まぁ何度も何度も伝えてキタコレ！ってタイミングでルールを保存したらOK。
大変なのは最初だけなのだ。
SVGで作ったときのWordPressへの入れ方
SVGファイルとして保存する
Claudeが出力したSVGコードをコピーして、テキストエディタ（メモ帳・VSCodeなど）に貼り付けて .svg という拡張子で保存する、もしくは任意の場所にダウンロードしてしまえばOK！
WordPressにアップロードする
WordPressはデフォルトではSVGのアップロードができない。
その場合は「Safe SVG」というプラグインを入れると解決します。インストールして有効化するだけでWordPress上でSVGが使えるようになる。
注意点として、記事を開いたまま記事の編集画面（ブロックエディター）に直接SVGファイルをドロップするとエラーが出る場合があります。
まず最初に自分のブログのWordPressの管理画面に入ったら左側にある「メディア」を選択し、そこにSVGファイル素材をあらかじめ保存(メディアライブラリにアップ)しておけば、後はそのまま記事のアイキャッチに設定すればOKです。
SVGをPNGに変換したい場合
プラグインを入れたくない場合は、SVGファイルをブラウザ（SafariやChrome）で開いてスクリーンショットを撮るのが一番手っ取り早い。ただ画質が悪くなるけど・・・。
代替案として、「SVG to PNG」などで検索すると無料の変換ツールがたくさんあります。
まとめ：アイキャッチはClaudeに任せればいい
- 今は記事の下書きと一緒に、Claudeがアイキャッチ（PNG・JPG）まで作ってWordPressに入れてくれる
- 手軽に試すなら、プロンプトをClaudeに投げてSVGを作る方法もある
- SVGをWordPressに入れるときは、Safe SVGプラグインを使う
Canvaを使わなくても、統一感のあるアイキャッチは作れる。
デザインが苦手でも関係ない。プロンプトさえ用意してしまえば、あとは毎回30秒で終わる。
Claudeでアイキャッチ作成に悩む時間をなくせたら、
その浮いた時間で自分の文章をたくさん書いて、いい記事を量産しましょうね。
僕と一緒に楽しみながら頑張っていきましょう！
プラグインやサービスの仕様・料金は変わることがあります。最新情報は必ず公式サイトでご確認ください。
次はこの記事を読んでみてください！
