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