「記事は書けるようになったけど、アイキャッチ画像を作るのが毎回おっくう……」「デザインの知識がないから、どう作ればいいか分からない」
文章はClaude Codeに手伝ってもらえても、画像づくりで手が止まってしまう方は多いですよね。
結論から言うと、アイキャッチ画像はCanvaで「ブログ共通の型」を1つ作り、記事ごとに文字だけ差し替えるのがいちばんラクです。できた画像をWordPressにアップロードしてアイキャッチに設定する作業は、Claude Codeに任せられます。この記事では、アイキャッチ画像の作り方と、SWELLでのサイズの考え方、WordPressへの設定方法、著作権の注意点までを解説します。
- アイキャッチ画像の役割と、SWELLでのサイズの考え方が分かる
- Canvaで、使い回せるアイキャッチ画像の型を作れる
- WordPressへの設定を、Claude Codeに任せる方法が分かる
画像もClaude Codeに全部作ってもらえたら楽なのに……。
そう思いますよね。ただ、Claude Codeが本領を発揮するのは文章なんです。私もアイキャッチ画像はCanvaで作っていて、画像は自分、文章や設定の作業はClaude Code、と役割を分けていますよ。
- 国立大学卒のサラリーマン
- 新卒でJTCに入社するも、新入社員研修中にFIREを決意。副業ブログを始めるが、収益が伸びず挫折。いつしかブログは放置。
- Claude codeと出会い、放置していたブログを久々に動かしてみると、できることの多さに驚く。収益も面白いほど増加。
- Claude codeで副業ブログを動かすノウハウを発信することで、さらに良い使い方が見えてくるのではないかと思い、本ブログを開始。
アイキャッチ画像とは・必要な理由
アイキャッチ画像とは、記事の「顔」として表示される画像のことです。主に次のような場所で使われます。
- トップページやカテゴリページなどの、記事一覧のサムネイル
- 記事の中の、関連記事のカード（ブログカード）
- XなどのSNSで記事がシェアされたときの画像（使っているテーマやプラグインの設定によります）
記事一覧に画像が並んでいると、どんな記事なのかがひと目で伝わり、クリックしてもらいやすくなります。ブログ全体で色や文字の配置をそろえておけば、サイトの統一感も出ます。
最初は画像なしで公開してもいい
とはいえ、アイキャッチ画像がないと記事を公開できない、というわけではありません。画像づくりで手が止まって記事が増えないくらいなら、まずは文章だけで公開し、検索から読まれ始めた記事から順に画像を追加していくというやり方もあります。
「アイキャッチ画像がまだ設定されていない記事を一覧にして」とClaude Codeに頼めば、画像を作る必要がある記事をすぐに洗い出してくれます。
アイキャッチ画像のサイズ（SWELLの場合）
SWELLでは、「外観」→「カスタマイズ」の「記事一覧リスト」で、記事一覧に表示するサムネイル画像の比率を選べます。アイキャッチ画像は、ここで選んでいる比率に合わせて作るのが基本です。
たとえば横長のワイド（16:9）を選んでいるなら、1280×720ピクセルのような16:9の大きさで作ると、一覧でも切れずにきれいに表示されます。
ただし、SNSでシェアされたときや、表示する場所によっては、画像の端が少し切り取られることがあります。タイトルなどの大事な文字は、画像の中央に寄せて、上下左右に余白を残しておくと安心です。
また、ファイルが大きすぎる画像は、ページの読み込みを遅くする原因になります。Googleも、画像によってページ全体のサイズが大きくなり、読み込みが遅くなる点に注意するよう案内しています。必要以上に大きな画像は使わないようにしましょう。
アイキャッチ画像の準備方法（Canvaでの作り方）
Canvaは、ブラウザやアプリで使えるデザインツールです。テンプレートが豊富で、無料プランでもアイキャッチ画像を十分に作れます。
1枚目で「型」を作る手順
- サイズを指定してデザインを作る：「デザインを作成」から「カスタムサイズ」を選び、SWELLの設定に合わせた大きさ（例：1280×720ピクセル）を入力する
- テンプレートや背景を選ぶ：ブログの雰囲気に合うテンプレートや、背景の色を決める
- 文字を大きく入れる：記事タイトルを短くした言葉を、中央に大きく配置する
- ブログ共通の要素を決める：ブログ名の位置、使う色、フォントを決めて、これを「型」にする
- ダウンロードする：「共有」から「ダウンロード」を選び、JPGかPNGで保存する
2枚目からは、1枚目のデザインをコピーして、文字だけを差し替えれば完成です。毎回デザインを考えなくていいので、1枚あたりの手間がぐっと減ります。Canvaの画面の表示は変わることがあるので、細かい操作は公式のヘルプもあわせて確認してください。
見やすいアイキャッチ画像にするコツ
- 文字は少なく、大きく：記事一覧のサムネイルは、スマホだと小さく表示される。タイトルをそのまま全部入れず、10文字前後の短い言葉にする
- 背景と文字の色をはっきり分ける：小さく表示されても読めるように、コントラストを強くする
- カテゴリごとに色を変える：同じ型のまま背景の色だけ変えると、一覧でもカテゴリの違いが伝わる
Claude Codeに手伝ってもらえること
画像そのものは自分で作るとしても、その前後の作業はClaude Codeに頼めます。
| 作業 | 頼み方の例 |
|---|---|
| 画像に入れる言葉を考える | 「この記事のアイキャッチに入れる、10文字前後の短い言葉を3案出して」 |
| 作る必要がある記事を洗い出す | 「アイキャッチ画像が未設定の記事を、公開日の新しい順に一覧にして」 |
| ファイル名を決める | 「アイキャッチ画像のファイル名を、各記事のスラッグと同じ英数字にした一覧を作って」 |
| WordPressに設定する | 「作業フォルダの画像を、ファイル名と同じスラッグの記事のアイキャッチに設定して」 |
CanvaとClaude Codeを直接つなぐ方法もある
Canvaは、AIとCanvaをつなぐ公式の仕組み「AI Connector」を提供しています。Canvaの公式ヘルプによると、Claude Codeにも設定でき、テンプレートへの文字の自動入力や、デザインの作成、画像としての書き出しなどをAIから行えるようになります。
ただし、AI Connectorは無料プランでは使えず、Canva Proなどの有料プランが必要です。まずは手作業で型を作ってアイキャッチ画像づくりに慣れ、記事数が増えて手間が気になってきたら検討する、という順番で十分ですよ。
アイキャッチ画像のWordPressへの設定手順
自分で設定する場合
- WordPressで記事の編集画面を開く
- 画面右側の設定パネルで「投稿」のタブを開き、「アイキャッチ画像を設定」をクリックする
- 画像をアップロードするか、メディアライブラリから選んで「アイキャッチ画像を設定」をクリックする
- 記事を保存する
Claude Codeに設定してもらう場合
アイキャッチ画像が何枚もたまってきたら、Claude Codeにまとめて設定してもらうと便利です。
- 画像を作業フォルダに入れる：たとえば「images/eyecatch」のようなフォルダを作り、ファイル名を記事のスラッグと同じ英数字にして保存する
- 設定を頼む：「images/eyecatchフォルダの画像をWordPressのメディアにアップロードして、ファイル名と同じスラッグの記事のアイキャッチに設定して。画像の内容が分かる代替テキストも入れて」と頼む
- 結果を確認する：WordPressの記事一覧や、プレビューで画像が正しく表示されているかを確認する
Claude Code用に作った「編集者」権限のユーザーでも、画像のアップロードとアイキャッチの設定はできます（接続の方法はWordPressとClaude Codeの連携の記事を参照）。
なお、すでに公開している記事のアイキャッチを変える場合は、読者に見えている部分が変わります。「どの記事に、どの画像を設定するか」の一覧を先に見せてもらい、確認してから反映してもらいましょう。
アイキャッチ画像の著作権・フリー素材の注意点
アイキャッチ画像は、アフィリエイトブログのような収益目的のサイトで使うことになります。素材の使い方には気をつけましょう。
| 素材 | 気をつけること |
|---|---|
| Canvaの素材・テンプレート | Canvaで作ったデザインはブログで使えるが、素材をそのまま再配布・販売するような使い方は認められていない。素材によっては利用条件が付いているものもあるので、Canvaの利用規約・ライセンスを確認する |
| フリー素材サイトの画像 | 「無料」でも、商用利用の可否やクレジット表記の要否はサイトごとに違う。使う前に各サイトの規約を確認する |
| 他の人が撮った写真・作った画像 | 許可なく使わない。ネットで見つけた画像を、そのままアイキャッチにしない |
| 企業やサービスのロゴ | ロゴは商標として保護されていることが多い。使う場合は、その企業が公開しているロゴの利用ルールを確認する |
AIで生成した画像を使う場合も注意が必要です。文化庁の考え方では、AIで作った画像であっても、既存の作品と似ていて、それをもとにしていると認められる場合は、著作権の侵害になり得るとされています。また、このサイトでは、AIっぽさが読者に伝わりやすいことから、記事の中では図解やイラストを使わず、比較などは表で整理する方針にしています。
アイキャッチ画像に関するよくある疑問
Q. アイキャッチ画像を設定しないと、どう表示されますか？
A. 記事一覧などで、アイキャッチ画像の代わりの画像が表示されます。SWELLでは、アイキャッチ画像が未設定のときに表示する「NO IMAGE画像」を、カスタマイザーの「サイト全体設定」から設定できるので、ブログのロゴ入りの画像などを用意しておくと、画像のない記事があっても一覧の見た目が整います。
Q. 記事ごとにデザインを変えたほうがいいですか？
A. 型は統一して、文字や色だけを変えるのがおすすめです。記事ごとにデザインがバラバラだと、一覧ページがまとまりのない印象になりますし、作る手間も増えてしまいます。
Q. Canvaは無料プランで十分ですか？
A. アイキャッチ画像を作るだけなら、無料プランで始められます。Claude Codeと直接つなぐAI Connectorを使いたい場合や、有料プラン限定の素材や機能を使いたくなった場合に、有料プランを検討しましょう。
アイキャッチ画像、まとめ
この記事では、Canvaでのアイキャッチ画像の作り方と、WordPressへの設定をClaude Codeに任せる方法を解説しました。ポイントを振り返っておきます。
- アイキャッチ画像は、SWELLのサムネイルの比率に合わせて作り、大事な文字は中央に寄せる
- Canvaで型を1つ作り、2枚目からは文字だけ差し替える
- アップロードとアイキャッチの設定は、Claude Codeにまとめて任せられる
- 素材の利用規約を確認し、他の人の画像やロゴを勝手に使わない
アイキャッチ画像の次は、記事の本文に画像を入れる方法です。スクリーンショットの撮り方や、画像のサイズの注意点を見ていきましょう。
このカテゴリ（ロードマップ・応用編）の記事一覧は、応用編のまとめ記事で紹介しています。
