「ブログのアイキャッチってどうやって作ればいいんだろう…」
そんな悩みを持つ人も多いんじゃないかな。
アイキャッチはブログの「顔」とも言える大事な画像。でも、：デザインの知識がなくても、Canvaを使えば無料で簡単に作れます。
この記事では、WordPressブログ（Cocoon）に合ったサイズの選び方から、Canvaでの作り方、クオリティを上げるコツまでまるっと解説していきます。
1. まずサイズを確認しよう
アイキャッチを作る前に、まずサイズを確認しておきましょう。
サイズが合っていないと、画像が見切れたり、ぼやけて表示されることがあります。
Cocoonの推奨サイズは「1200×630px」
横長の16:9に近い比率で、SNSでシェアされたときもきれいに表示されるサイズです。
WordPressの設定も確認しよう
Canvaで正しいサイズで作っても、WordPress側の設定が合っていないと見切れることがあるので注意！
まずCocoon設定 → 画像タブ → 全体画像設定 → 「9:16…【推奨】で表示する」にチェックが入っているかどうか確認。
それでも画像が見切れる場合は、設定 → メディアを開いて「サムネイルを実寸方に切り抜く」のチェックを外してみましょう
現状アイキャッチが問題なく表示されているなら、サムネイルのサイズ等の設定はそのままでOKです！
2. Canvaで作る手順
設定が確認できたら、いよいよCanvaでアイキャッチを作っていきます。
Canvaは無料で使えるデザインツールで、テンプレートも豊富だから初心者でも簡単におしゃれな画像がたくさん。（王冠👑マークは有料プランでしか使えないので注意！）
① カスタムサイズで新規作成
Canvaにログインしたら、右上の「デザインを作成」→「カスタムサイズ」をクリック。
幅「1200」高さ「630」単位「px」を入力して「新しいデザインを作成」をクリック。
② ② テンプレートを選ぶ、または自作する
左のメニューから「テンプレート」を開くと、たくさんのデザインが表示されます。
気に入ったものを選んでカスタマイズするのが一番手っ取り早く、おしゃれなアイキャッチになるのでおすすめ！
自分でゼロから作りたい場合は「素材」や「テキスト」を使って自由にデザインしてみましょう。
③ 文字を入れる
タイトルや説明文を入れるときのポイントはひとつ。
文字は少なく、大きく！
スマホで見たときに3秒で読めるかどうかが基準です。目安は10文字以内がベスト。
フォントはブログのイメージに合わせて選ぼう。太字がおすすめ！かわいい系なら丸みのあるフォントが相性がいいです。
④ 画像をダウンロード
デザインが完成したら右上の「共有」→「ダウンロード」→ファイル形式は「PNG」を選んでダウンロードしましょう。
3. クオリティを上げるコツ
基本的な作り方がわかったら、次はちょっとしたコツを意識するだけでグッとクオリティが上がります！
① セーフゾーンを意識しよう
画像の端から50〜100pxは「安全領域」として余白を残すようにします。
表示される場所によって端が少し切れることがあるから、大事なテキストやロゴは端ギリギリに置かないように。
特に右下は要注意。ブログカードなどで文字が被ることが多いから、重要な情報は置かないようにしましょう。
② 視線誘導を意識しよう
人の視線は自然と左上〜中央（F型/Z型）に最初に落ちます。
一番伝えたい情報を左上〜中央に配置すると、読者の目に留まりやすくなるので覚えておきましょう。
③ タイトルの完全コピーを避けて情報量を2倍に
記事タイトルをそのままアイキャッチに入れるのはもったいない。
例えば記事タイトルが「Canvaの使い方」なら、アイキャッチには「初心者でも5分で作れる！」など、タイトルに載っていない情報を加えると読者の興味を引きやすくなります。
④ 統一感のあるデザインにしよう
色・フォント・レイアウトをブログ全体で統一すると、一覧ページで見たときにぐっとプロっぽく見えます。
Canvaの「ブランドキット」機能を使うと、カラーやフォントを登録しておけるから毎回設定する手間が省けて便利！（⚠️ブランドキットは有料プランの機能）
無料プランの場合は、使う色のカラーコードとフォント名をメモしておいて、毎回同じものを選ぶようにしましょう。
4. WordPressにアップする方法
Canvaでダウンロードした画像を、WordPressのアイキャッチに設定してみましょう。
① メディアライブラリにアップロード
WordPress管理画面 → メディア → 新しいメディアファイルを追加 → ダウンロードした画像を選択してアップロード。
② 記事のアイキャッチに設定
記事の編集画面を開いて、右側のメニューから「アイキャッチ画像」→「アイキャッチ画像を設定」をクリック。
さっきアップロードした画像を選んで「アイキャッチ画像を設定」を押す。
まだメディアライブラリにアップロードしていない場合は、「アイキャッチ画像」の枠に直接ドラッグ&ドロップでも反映できます。
③ プレビューで確認しよう
設定できたら必ずプレビューで確認。
スマホ表示でも崩れていないかチェックするのを忘れずに！
5. まだブログを開設していない方へ
アイキャッチの作り方はわかったけど、「そもそもまだブログを始めていない…」という方はこちら！
WordPressブログを始めるならConoHa WINGがおすすめ。
＼ ブログ始めるならここ！ ／
まとめ
この記事では、Canvaを使ったWordPressブログのアイキャッチの作り方を解説しました。
- アイキャッチの推奨サイズは1200×630px
- セーフゾーンを意識して、大事な文字は端に置かない
- 文字は少なく・大きく、10文字以内がベスト
- 色・フォント・レイアウトを統一してプロっぽく仕上げよう
デザインの知識がなくても、Canvaの無料プランで十分おしゃれなアイキャッチが作れます。まずは1枚作って作ってみましょう。
ブログをまだ始めていない方は、ConoHa WINGからスタートするのがおすすめです。
契約からWordPressの初期設定まで、初心者向けにまとめた記事があるのでこちらもチェックしてみてね( ・▽・)⊃
AIでオリジナルキャラ入りアイキャッチを作る方法
Canvaでアイキャッチが作れるようになったら、 さらに一歩進んだ方法も試してみませんか？
無料のキャラクターメーカーとAI画像生成ツールを組み合わせると、オリジ ナルキャラ入りのアイキャッチが作れます。デザインの知識がなくてもOKです。
使うツール
- charat.me（無料）― オリジナルキャラクターを作れるアバターメーカー
- Lovart（無料プランあり・生成枚数に制限あり）― AIに指示してアイキャッチを生成するツール
手順
- charat.me でお好みのキャラクターを作り、画像をダウンロードする
- Canvaで作った既存のアイキャッチ画像を用意する
- Lovart を開き、2枚まとめてアップロードする（キャラ画像・既存アイキャッチ）
- 下のプロンプトをコピペして送信する
コピペ用プロンプト
タイトル部分だけ変えれば、どんな記事のアイキ ャッチにも使える汎用プロンプトです。「Blog title text:」の部分を自分の記事タイトルに書き換えて使ってください。
I have uploaded two images:
1. A cute anime-style character (from charat.me)
2. My existing blog eye-catch image
Please redesign the eye-catch using the character
as the main visual, at 1200×630px.
Blog title text:「ここにブログ記事のタイトルを入れてね」
Background: warm beige (#efe7df)
Font style: rounded, kawaii, Japanese-compatible
Layout: character on the right, text on the left
Mood: cute, clean, kawaii
Please do not redraw or change the character.
Do not place text on top of the character.
Keep the overall layout similar to the uploaded eye-catch.生成には数分かかることがあります。気長に待ってみてください。
うまくいかないときは「キャラの上にテキストを重ねないで」など日本語で追加指示してみると調整しやすいです。
使うツール2
コピペ用プロンプト
ブログ記事の内容を全てコピペして添付します。 色合いやキャラクター、入れたい文字などを書き換えて使ってください。
添付の子のキャラクターを使って、この内容のブログ記事のアイキャッチを作って。
水色メインで、ピンク、茶色ベージュなど淡い色を使って欲しい。
canvaの文字だけ、canvaの紫にして。
「canvaで作るアイキャッチ」の文字を入れて。生成には数分かかることがあります。
イメージと違ったり別の言葉を入れたりしたい時は、追加指示と、変えたくない部分を「⚪︎⚪︎は変えないで」とはっきり伝えるのがコツです。
